Quality all 2 written

assertion.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import assert from 'node:assert/strict';
import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'on' : 'off'}</button>;
}

const root = createRoot(stage);
await act(async () => root.render(<Toggle />));
const button = stage.querySelector('button');
const seen = [button.textContent];
await act(async () => button.click());
seen.push(button.textContent);
console.log(seen);

let failure = null;
try {
  assert.equal(button.textContent, 'off');
} catch (error) {
  failure = error;
}
assert.throws(() => assert.equal(button.textContent, 'off'), { code: 'ERR_ASSERTION' });
console.log(failure.name, failure.code);

check('the click was already applied when act returned', seen, ['off', 'on']);
check('a failed assertion is an AssertionError', failure.name, 'AssertionError');
check('with a code a runner can read', failure.code, 'ERR_ASSERTION');
await act(async () => root.unmount());

elements.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function Both() {
  const [log, setLog] = useState([]);
  return (
    <div>
      <button onClick={() => setLog([...log, 'button'])}>save</button>
      <div onClick={() => setLog([...log, 'div'])}>save</div>
      <p>{log.join(',')}</p>
    </div>
  );
}

const root = createRoot(stage);
await act(async () => root.render(<Both />));
const button = stage.querySelector('button');
const fake = stage.querySelectorAll('div')[1];
const press = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
await act(async () => {
  fake.dispatchEvent(press);
});
console.log(button.tagName, button.tabIndex, fake.tagName, fake.tabIndex, fake.getAttribute('role'));
console.log('after Enter on the div:', JSON.stringify(stage.querySelector('p').textContent));

check('the real button is a button', button.tagName, 'BUTTON');
check('and Tab can reach it', button.tabIndex, 0);
check('the div is not a button', fake.getAttribute('role'), null);
check('and Tab skips it', fake.tabIndex, -1);
check('Enter on the div did nothing', stage.querySelector('p').textContent, '');
await act(async () => root.unmount());

rebuilt.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function Rebuilt() {
  const [count, setCount] = useState(0);
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={() => setCount(count + 1)}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') setCount(count + 1);
      }}
    >
      {'pressed ' + count}
    </div>
  );
}

const root = createRoot(stage);
await act(async () => root.render(<Rebuilt />));
const control = stage.firstChild;
await act(async () => {
  control.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
});
console.log(control.getAttribute('role'), control.tabIndex, control.textContent);

check('it announces itself as a button', control.getAttribute('role'), 'button');
check('Tab can reach it', control.tabIndex, 0);
check('and Enter works', control.textContent, 'pressed 1');
await act(async () => root.unmount());

labels.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33import { useId, act } from 'react';
import { createRoot } from 'react-dom/client';

function Field({ name }) {
  const id = useId();
  return (
    <p>
      <label htmlFor={id}>{name}</label>
      <input id={id} />
    </p>
  );
}

const root = createRoot(stage);
await act(async () =>
  root.render(
    <div>
      <Field name="Title" />
      <Field name="Author" />
      <button aria-label="Close">x</button>
    </div>,
  ),
);
const labels = Array.from(stage.querySelectorAll('label'));
const inputs = Array.from(stage.querySelectorAll('input'));
console.log(labels.map((l) => l.textContent + ' for ' + l.htmlFor));
console.log(stage.querySelector('button').getAttribute('aria-label'));

check('each label points at its own input', labels.every((l, i) => l.htmlFor === inputs[i].id), true);
check('the ids are not empty', inputs.every((input) => input.id.length > 0), true);
check('and they differ', inputs[0].id !== inputs[1].id, true);
check('the symbol button has a name', stage.querySelector('button').getAttribute('aria-label'), 'Close');
await act(async () => root.unmount());

live.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35import { useRef, useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function Saver() {
  const [message, setMessage] = useState('');
  const heading = useRef(null);
  return (
    <div>
      <h1 tabIndex={-1} ref={heading}>Settings</h1>
      <button
        onClick={() => {
          setMessage('Saved');
          heading.current.focus();
        }}
      >
        save
      </button>
      <p role="status" aria-live="polite">{message}</p>
    </div>
  );
}

const root = createRoot(stage);
await act(async () => root.render(<Saver />));
const region = stage.querySelector('p');
const before = region.textContent;
await act(async () => stage.querySelector('button').click());
console.log(JSON.stringify(before), JSON.stringify(region.textContent), region.getAttribute('aria-live'));
console.log(document.activeElement.tagName);

check('the region was there, and empty', before, '');
check('its text changed in place', region.textContent, 'Saved');
check('it is still a polite live region', region.getAttribute('aria-live'), 'polite');
check('the focus moved to the heading', document.activeElement === stage.querySelector('h1'), true);
await act(async () => root.unmount());