mirador/__tests__/src/components/WindowViewSettings.test.jsx at 06da4012ae47e59bc7ea4548409e2783cde3e172 · ProjectMirador/mirador · 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
import { render, screen } from '@tests/utils/test-utils';
import userEvent from '@testing-library/user-event';
import { WindowViewSettings } from '../../../src/components/WindowViewSettings';

/** create wrapper */
function createWrapper(props) {
  return render(
    <WindowViewSettings
      classes={{}}
      windowId="xyz"
      setWindowViewType={() => {}}
      viewTypes={['single', 'book', 'scroll', 'gallery']}
      windowViewType="single"
      {...props}
    />,
  );
}

describe('WindowViewSettings', () => {
  it('renders all elements correctly', () => {
    createWrapper();
    expect(screen.getByRole('presentation', { selector: 'li' })).toBeInTheDocument();
    const menuItems = screen.queryAllByRole('menuitemradio');
    expect(menuItems.length).toBe(4);
    expect(menuItems[0]).toHaveTextContent(/Single/i);
    expect(menuItems[1]).toHaveTextContent(/Book/i);
    expect(menuItems[2]).toHaveTextContent(/Scroll/i);
    expect(menuItems[3]).toHaveTextContent(/Gallery/i);
  });
  it('single should set the correct label active (by setting the secondary color)', () => {
    createWrapper({ windowViewType: 'single' });
    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
    expect(screen.getByRole('menuitemradio', { name: /Book/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
  });
  it('book should set the correct label active (by setting the secondary color)', () => {
    createWrapper({ windowViewType: 'book' });
    expect(screen.getByRole('menuitemradio', { name: /Book/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
  });
  it('scroll should set the correct label active (by setting the secondary color)', () => {
    createWrapper({ windowViewType: 'scroll' });
    expect(screen.getByRole('menuitemradio', { name: /Scroll/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
  });
  it('gallery should set the correct label active (by setting the secondary color)', () => {
    createWrapper({ windowViewType: 'gallery' });
    expect(screen.getByRole('menuitemradio', { name: /Gallery/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
  });
  it('updates state when the view config selection changes', async () => {
    const setWindowViewType = vi.fn();
    createWrapper({ setWindowViewType });
    const user = userEvent.setup();
    const menuItems = screen.queryAllByRole('menuitemradio');
    expect(menuItems.length).toBe(4);
    await user.click(menuItems[0]);
    expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'single');
    await user.click(menuItems[1]);
    expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'book');
    await user.click(menuItems[2]);
    expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'scroll');
    await user.click(menuItems[3]);
    expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'gallery');
  });
});