src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx


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

import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import { type FC, useContext } from 'react';
import { PrismThemeContext, PrismThemeProvider } from './prism-theme-provider';

const bodyPrefix = 'Current Prism theme is:';

const ComponentTest: FC = () => {
  const { theme } = useContext(PrismThemeContext);

  return (
    <div>
      {bodyPrefix} {theme}
    </div>
  );
};

describe('PrismThemeProvider', () => {
  it('uses the default value when the provider is not used', () => {
    const defaultValue = 'system';

    render(<ComponentTest />);

    expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
      `${bodyPrefix} ${defaultValue}`
    );
  });

  it('provides the given value to its children and set a matching attribute', () => {
    const attribute = 'ratione';
    const theme = 'dark';

    const { baseElement } = render(
      <PrismThemeProvider
        attribute={attribute}
        defaultTheme={theme}
        storageKey="qui"
      >
        <ComponentTest />
      </PrismThemeProvider>
    );

    expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
      `${bodyPrefix} ${theme}`
    );
    expect(baseElement.parentElement?.getAttribute(`data-${attribute}`)).toBe(
      theme
    );
  });
});