Test-Driven Development with React

Build and test a navigation bar for a React app using test-driven development, creating header components with a logo, search, and menu, and iterating with tests and bootstrap styling.

Implement filters by duplicating tests and adding a home type filter, then verify tests pass as you extend to additional filters. Refactor templates and button styles for a fluid container.

Add the first test for the homes component in a React test-driven development workflow, render a fake homes array, and verify that at least one home displays using test ids.

Learn to mock homes data by creating a four-property home array (title, image, location, price), map it to render divs with a test id, and diagnose promise timing.

Use useState and useEffect to manage asynchronous data, initialize state as an empty array, fetch homes, and render a keyed list.

Replace the stub with a real api client by creating a services folder and fetching homes from the endpoint, updating tests to return stub data and render them.

Add and test home details by verifying title, image, location, and price render in the template, updating the UI to reflect API data.

Style the homes component with Bootstrap classes, turning each home into a responsive card with image top, card title, and a price per night, updating tests accordingly.

Add a home booking button for each home that opens a date dialog, calculates the total, submits the API call, closes the dialog, and shows a notification.

Practice test-driven development in React by verifying that clicking the button opens the booking dialog and passes the selected home through the booking dialog service.

Install Material UI and implement a dialogue that opens with the open property, controlled by a useState hook and a dialogue service exposing an observable event stream.

Scaffold and test a home booking component in React, rendering a mocked home with title and price, handling check-in and check-out, and showing a toast after booking.

Explore test-driven development in React by adding tests for the home title and price, validate UI updates, and fix a null home bug with a guard.

Showcases test-driven development in React by implementing total price calculation from check-in and check-out dates, simulating input with fire event to render 375 dollars for three nights.

Calculate total booking price in React using useEffect and moment to compute nights between check-in and check-out, apply per-night price, and validate results with tests.

Explore test-driven development with react by spying the api client, entering check-in and check-out dates, clicking book, and asserting the booking call with the selected home.

Wire the book button to the api client, passing the home and booking dates, and use a mocked endpoint to return the home booked message in the console.

Apply test-driven development with React by ensuring the booking flow closes the dialog and posts a notification via a snack bar, using spies on api, dialog, and notification services.

Create a react notification component with a material snackbar, wired to a notification service with useState and useEffect to display the API object's message and auto-hide after three seconds.

Style the dialog by turning the title into an h2 tag, bold price with a per night description and a dollar sign, and align right total price and book button.

Reproduce a booking bug with a failing unit test, then fix the component to show a double dash for invalid dates.