React Developer Tools

import { useState } from 'react';

const products = [
  { id: 'tea', name: 'Tea' },
  { id: 'coffee', name: 'Coffee' }
];

// TODO: write ProductRow({ product, onAdd }) and CartSummary({ count }),
// export them, and render them below instead of the inline markup.

export default function Shop() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Shop</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name}{' '}
            <button onClick={() => setCount(count + 1)}>Add {product.name}</button>
          </li>
        ))}
      </ul>
      <p>Cart: {count} items</p>
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Shop, * as parts from './main.jsx';

test('ProductRow shows its product and passes it to onAdd', async () => {
  const user = userEvent.setup();
  const {ProductRow} = parts;
  assert.equal(typeof ProductRow, 'function', 'main.jsx exports no function ProductRow');
  const added = [];
  render(<ul><ProductRow product={{ id: 'tea', name: 'Tea' }} onAdd={(product) => added.push(product)} /></ul>);
  assert.equal(screen.getByRole('listitem').textContent, 'Tea Add Tea', 'the row reads ' + JSON.stringify(screen.getByRole('listitem').textContent));
  await user.click(screen.getByRole('button', {name: 'Add Tea'}));
  assert.equal(added[0]?.name, 'Tea', 'onAdd received ' + JSON.stringify(added));
});

test('CartSummary shows the count it receives', () => {
  const {CartSummary} = parts;
  assert.equal(typeof CartSummary, 'function', 'main.jsx exports no function CartSummary');
  render(<CartSummary count={2} />);
  assert.equal(document.body.textContent, 'Cart: 2 items', 'CartSummary with count 2 reads ' + JSON.stringify(document.body.textContent));
});

test('The shop counts what you add', async () => {
  const user = userEvent.setup();
  render(<Shop />);
  await user.click(screen.getByRole('button', {name: 'Add Tea'}));
  await user.click(screen.getByRole('button', {name: 'Add Coffee'}));
  assert.equal(screen.queryByText(/^Cart:/)?.textContent, 'Cart: 2 items', 'after two adds the page reads ' + JSON.stringify(document.body.textContent));
});

import { useState } from 'react';

function CartLine({ item }) {
  return <li>{item.name} × {item.quantity}</li>;
}

function CartSummary({ count }) {
  return <p>Cart: {count} items</p>;
}

export default function Cart() {
  const [items, setItems] = useState([
    { id: 'tea', name: 'Tea', quantity: 2 },
    { id: 'coffee', name: 'Coffee', quantity: 1 }
  ]);

  function addTea() {
    setItems(items.map(item =>
      item.id === 'tea' ? { ...item, quantity: item.quantity + 1 } : item
    ));
  }

  return (
    <>
      <ul>
        {items.map(item => <CartLine key={item.id} item={item} />)}
      </ul>
      {/* DevTools shows CartSummary with props count: 2. */}
      <CartSummary count={items.length} />
      <button onClick={addTea}>Add Tea</button>
    </>
  );
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Cart from './main.jsx';

test('The summary counts every item: 2 Tea and 1 Coffee are 3', () => {
  render(<Cart />);
  assert.equal(screen.queryByText(/^Cart:/)?.textContent, 'Cart: 3 items', 'the summary reads ' + JSON.stringify(screen.queryByText(/^Cart:/)?.textContent));
});

test('Add Tea adds one to the line and to the summary', async () => {
  const user = userEvent.setup();
  render(<Cart />);
  await user.click(screen.getByRole('button', {name: 'Add Tea'}));
  assert.equal(screen.queryByText(/^Tea/)?.textContent, 'Tea × 3', 'the Tea line reads ' + JSON.stringify(screen.queryByText(/^Tea/)?.textContent));
  assert.equal(screen.queryByText(/^Cart:/)?.textContent, 'Cart: 4 items', 'the summary reads ' + JSON.stringify(screen.queryByText(/^Cart:/)?.textContent));
});