nodejs.org/packages/ui-components/src/Common/ThemeToggle/__tests__/index.test.jsx at ed1e50e89a7daaf642f084589ed923b4ec4a2214 · araujogui/nodejs.org · GitHub

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { describe, it } from 'node:test';
import assert from 'node:assert/strict';

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import ThemeToggle from '../';

const noop = () => {};

const defaultLabels = { system: 'System', light: 'Light', dark: 'Dark' };

describe('ThemeToggle', () => {
  global.ResizeObserver = class {
    observe = noop;
    unobserve = noop;
    disconnect = noop;
  };

  it('renders the trigger button with the given aria-label', () => {
    render(
      <ThemeToggle
        ariaLabel="Select theme"
        currentTheme="system"
        themeLabels={defaultLabels}
      />
    );

    assert.ok(screen.getByRole('button', { name: 'Select theme' }));
  });

  it('opens the dropdown when the trigger is clicked', async () => {
    render(
      <ThemeToggle
        ariaLabel="Select theme"
        currentTheme="system"
        themeLabels={defaultLabels}
      />
    );

    await userEvent.click(screen.getByRole('button', { name: 'Select theme' }));

    assert.ok(screen.getByText('System'));
    assert.ok(screen.getByText('Light'));
    assert.ok(screen.getByText('Dark'));
  });

  it('calls onChange with "light" when the Light option is clicked', async () => {
    let selected = null;

    render(
      <ThemeToggle
        ariaLabel="Select theme"
        currentTheme="system"
        onChange={theme => {
          selected = theme;
        }}
        themeLabels={defaultLabels}
      />
    );

    await userEvent.click(screen.getByRole('button', { name: 'Select theme' }));
    await userEvent.click(screen.getByText('Light'));

    assert.equal(selected, 'light');
  });

  it('calls onChange with "dark" when the Dark option is clicked', async () => {
    let selected = null;

    render(
      <ThemeToggle
        ariaLabel="Select theme"
        currentTheme="system"
        onChange={theme => {
          selected = theme;
        }}
        themeLabels={defaultLabels}
      />
    );

    await userEvent.click(screen.getByRole('button', { name: 'Select theme' }));
    await userEvent.click(screen.getByText('Dark'));

    assert.equal(selected, 'dark');
  });

  it('calls onChange with "system" when the System option is clicked', async () => {
    let selected = null;

    render(
      <ThemeToggle
        ariaLabel="Select theme"
        currentTheme="light"
        onChange={theme => {
          selected = theme;
        }}
        themeLabels={defaultLabels}
      />
    );

    await userEvent.click(screen.getByRole('button', { name: 'Select theme' }));
    await userEvent.click(screen.getByText('System'));

    assert.equal(selected, 'system');
  });
});