Spring Boot & React: Test-Driven Development (TDD)

Initialize the spring boot back end by generating a project on start.spring.io, choosing java with maven, selecting the spring boot version, and filling in the project metadata.

Select and add required dependencies: Spring web startup to enable rest apis, Spring Data JPA with Hibernate for database access, MySQL driver, Spring Security, and Lombok; then generate the project.

Import and set up a Spring Boot project in your IDE by unzipping, inspecting the pom.xml and src/main/java, configuring externalized configurations with application.properties or YAML, and preparing test resources.

Comment out the spring security dependency in the pom file to enable a smooth initial launch, then run the app and see the expected missing data source configuration to be addressed next.

Configure a Spring Boot data source with an in-memory H2 database for development, then learn to add dependencies in the pom file as you plan future upgrades.

Add the H2 database dependency from start.spring.io to your Spring Boot project and copy it into pom.xml for a lightweight in-memory database during development and testing.

Integrate the H2 database into your Spring Boot project by adding the dependency via Maven, reloading, and running the app on localhost:8080 to enable smooth development and testing.

Bridge modern JavaScript with backward-compatible code using Bubble and Webpack, and leverage in-IDE feedback from Is linked with Jets for TDD, while Create React App bootstraps a React project.

Create a react project from the console by navigating to a directory, creating a folder, cd into it, and running the command after confirming node is installed.

Open the project in your IDE, such as WebStorm, and review the public folder's index.html as the React app entry point, with the src folder containing all JavaScript code.

Open your console, navigate to the project folder, and run npm start. If port 3000 is occupied, modify index.html, save, and watch Webpack recompile with browser refresh that shows tests.

Configure frontend tests by leveraging Jest in Create React App for assertions, mocking, and test reporting, and extend with React Testing Library to robustly test components rendering HTML elements.

Learn how the React testing library prioritizes testing user behavior over component internals, and install it with npm install --save-dev @testing-library/react, then wait for completion.

Extend jest with the dom-specific matchers and the jest expect API for better assertions. Install it to complete dependencies and set up your react application for development and testing.

Build a secure user signup flow with a backend endpoint, password hashing, and structured responses, then create a React sign-up form using state, Bootstrap styling, and axios for full-stack integration.

Master HTTP requests in Spring Boot through test-driven development by implementing a user registration feature, with tests defining requirements for the rest controller and user controller.

Create a test class in the src/test/java folder by navigating to the package, right-clicking, selecting new Java class, and naming it UserControllerTest, then press enter.

Configure test runner by syncing maven to activate dependencies, and integrate JUnit into the user controller test to run within the Spring Boot context and validate controller behavior.

Explore unit tests for small isolated code units and integration tests that validate the whole system by simulating a user sign up across controllers, services, and databases.

Annotate integration tests with the Spring Boot test annotation to run a web app in a test environment. Use a random port to avoid conflicts and initialize app for testing.

Configure Spring Boot tests to run with a dedicated test profile using @ActiveProfiles, enabling test-specific configurations and a separate test database while safeguarding production settings.

Write our integration test with JUnit to verify the user controller's behavior under a valid scenario, using Spring Boot test annotations and a custom test profile on a random port.

Annotate each test method with @Test, and use a naming schema that expresses the method or endpoint under test, the condition, and the expected behavior.

Define the test to specify expected behavior by creating a user object. A missing user class triggers a failing test, guiding the next step to build the user model.

Create a user entity by adding a Java class named user in the entities package and update tests to import it, following test-driven development.

Implement a valid input test method by defining user fields such as first name, last name, username, email, and password and posting to the backend with a test rest template.

Send data to back end with spring boot test rest template, post a user to api 1.0 users, and verify http status ok as 404 is expected before endpoint exists.

Create a user controller in the controllers package and annotate it as a rest controller to handle post requests at /api/1.0/users, with a createUser method to pass tests.

Drive test-driven development by adding a new test in UserControllerTest to verify a valid post saves the user to the database.

Extract the creation of a valid user into a helper method named createValidUser to avoid duplication and enable reuse across tests, and move the url to a constant for clarity.

Call createValidUser in the test, then post with the REST template using a URL constant and the user object, verifying the user saves to the database.

Write test logic to verify a user is saved by asserting exactly one user record after a post request, using the user repository interface from Spring Data GPA.

Assert that the post request saves the user by checking the Spring Data GPA user repository for exactly one record after the operation.

Mark the user class as a JPA entity with a long id primary key and identity-generated value, enabling Spring to map the class to a database table and auto-generate IDs.

Create a repository package and define a user-repository interface that extends JPA repository with user as the entity and long as the ID; Spring Boot automatically creates a proxy.

Update the UserControllerTest by injecting the user repository using the iterateOrToWired annotation to access it, fix syntax errors, and diagnose a failing count method.

Fix the user controller by injecting the user repository and saving the user to the database. Track failing tests as the controller still does not save the user.