Prove It

A test is a small program that uses your app the way a visitor would, and fails loudly when the app is wrong. The wishlist's tests go through the whole app: the real server, the real storefront, the real cookies. In test-utils.jsx, loginAs logs in with POST /api/login, and renderApp draws the storefront at an address. screen.findByRole waits until the page shows what you ask for.

Here is a test of something else, the cart count of a new customer:

test("a new customer's cart is empty", async () => {
  await loginAs("ben@example.com", "pen-pal-22");
  renderApp("/");
  expect(await screen.findByRole("link", { name: "Cart (0)" })).toBeInTheDocument();
});

A test only counts if it can fail. A test with no expect always passes, and so does one that checks something the bug doesn't touch. So the check runs your tests twice: on the right shop, where all must pass, and on a broken copy whose GET /api/wishlist answers every customer's saved products, where one must fail. Each test starts logged out, with no wishlists and no carts.

The check must print:

> run the tests in client/src/wishlist.test.jsx
  ok: a saved product stays saved after a reload
  ok: a guest sees a link, not the button
  ok: another customer does not see the saved mug
  all 3 passed
> run them on a copy of the server whose GET /api/wishlist answers every customer's saved products
  ok: a saved product stays saved after a reload
  ok: a guest sees a link, not the button
  FAIL: another customer does not see the saved mug
    Unable to find an element with the text: Nothing saved yet
  the tests catch the bug (1 failed)

Your task: in client/src/wishlist.test.jsx, the guest test is given. Fill in the first test: Ana saves the Mug on its page, the page is unmounted and drawn again, and the button is still pressed. Fill in the last test: Ana saves the Mug, Ben logs in, and his wishlist page says Nothing saved yet.

Assignment
Follow the Coding Tutorial to write two tests through the whole app: a save that survives a reload, and a wishlist that stays private.

Hint
Everything on the page arrives after a request, so use await screen.findBy…, which waits, not getBy…. In findByRole, pressed: true matches only a button whose aria-pressed is true.