Clarity-89

// FormPrompt.js
import { useEffect } from "react";

export const FormPrompt = ({ hasUnsavedChanges }) => {
    useEffect(() => {
        const onBeforeUnload = (e) => {
            if (hasUnsavedChanges) {
                e.preventDefault();
                e.returnValue = "";
            }

Clarity-89

//Steps/Contact.js
export const Contact = forwardRef((props, ref) => {
   //.. 
    return (
        <Form onSubmit={handleSubmit(saveData)}>
            //..
            <Button ref={ref}>Next {">"}</Button>
        </Form>
    );
});

Clarity-89

// state.js

import React, { createContext, useContext, useState } from "react";

export const AppStateContext = createContext();

export function AppProvider({ children }) {
  const value = useState({});
  return (
    <AppStateContext.Provider value={value}>

Clarity-89

it("renders without breaking", async () => {
  render(<ListPage />);
  await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
});

Clarity-89

describe("ListPage", () => {
    it("renders without breaking", async () => {
        render(<ListPage />);
        expect(
            await screen.findByRole("heading", { name: "List of items" })
        ).toBeInTheDocument();
    });
});

Clarity-89

import { waitFor } from "@testing-library/react";

//...

describe("ListPage", () => {
  it("renders without breaking", async () => {
    render(<ListPage />);
    await waitFor(() => {
      expect(
        screen.getByRole("heading", { name: "List of items" })

Clarity-89

export const ListPage = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      setTimeout(() => setItems(["Item 1", "Item 2"]), 100);
    };
    loadItems();
  }, []);

Clarity-89

describe("Form", () => {
  it("should save correct data on submit", async () => {
    const mockSave = jest.fn();
    render(<Form saveData={mockSave} />);
    await userEvent.type(screen.getByRole("textbox", { name: "Name" }), "Test");
    await userEvent.click(screen.getByRole("button", { name: "Sign up" }));
    expect(mockSave).toHaveBeenLastCalledWith({ ...defaultData, name: "Test" });
  });
});

Clarity-89

describe("Form", () => {
  it("should save correct data on submit", () => {
    const mockSave = jest.fn();
    render(<Form saveData={mockSave} />);
    fireEvent.change(screen.getByRole("textbox", { name: "Name" }), {
      target: { value: "Test" },
    });
    fireEvent.submit(screen.getByRole("button", { name: "Sign up" }));
    expect(mockSave).toHaveBeenLastCalledWith({ ...defaultData, name: "Test" });
  });

Clarity-89

<label htmlFor="name">Name</label>
<input
  id="name"
  onChange={onFieldChange}
  placeholder="Enter your name"
/>