react-stack/packages/ui/src/_document.test.js at fdcca07fd9593f3923c142904ebdffca1d226b8f · aprendendofelipe/react-stack · 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import { render } from '@testing-library/react';
import React from 'react';

import { configureDocument, Document } from './_document.jsx';

describe('ui', () => {
  describe('_document', () => {
    it('renders correctly', () => {
      const { container, getByTestId } = renderOnMockRoot(<Document />);

      const bodyTag = container.querySelector('body');
      expect(bodyTag).toBeDefined();
      expect(bodyTag.innerHTML).toContain('<main');

      expect(getByTestId('Next Html')).toBeDefined();
      expect(getByTestId('Next Head')).toBeDefined();
      expect(getByTestId('Next App Content')).toBeDefined();
      expect(getByTestId('Next Scripts')).toBeDefined();

      expect(hoisted.nextScriptDefault).toHaveBeenCalledOnce();

      const themeScript = container.querySelector('script#theme');
      expect(themeScript).toBeDefined();
      expect(themeScript.innerHTML).toBe(
        `if (['auto','night','dark','day','light'].includes(localStorage.getItem('colorMode')))
document.documentElement.setAttribute('data-no-flash', true)`,
      );

      expect(container).toMatchSnapshot();
    });

    it('should properly include styled-components styles in "initialProps"', async () => {
      const ctx = {
        defaultGetInitialProps: hoisted.getInitialProps,
        renderPage: hoisted.renderPage,
      };

      const initialProps = await Document.getInitialProps(ctx);

      expect(initialProps).toStrictEqual({
        // eslint-disable-next-line react/jsx-key
        styles: [undefined, <style>Styled Components Styles</style>],
      });

      expect(hoisted.ServerStyleSheet).toHaveBeenCalledOnce();
      expect(hoisted.getStyleElement).toHaveBeenCalledOnce();
      expect(hoisted.seal).toHaveBeenCalledOnce();

      expect(hoisted.renderPage).not.toBe(ctx.renderPage);
      expect(hoisted.renderPage).not.toHaveBeenCalledOnce();
      ctx.renderPage();
      expect(hoisted.renderPage).toHaveBeenCalledOnce();

      expect(hoisted.collectStyles).toHaveBeenCalledOnce();
    });

    it('should pass the correct props to the Html component', () => {
      configureDocument({
        htmlProps: {
          lang: 'pt',
          'data-color-mode': 'dark',
        },
      });

      renderOnMockRoot(<Document />);
      const htmlTag = document.documentElement;

      expect(htmlTag).toBeDefined();
      expect(htmlTag.getAttribute('lang')).toBe('pt');
      expect(htmlTag.getAttribute('data-color-mode')).toBe('dark');
    });

    it('should pass the correct props to the Head component', () => {
      configureDocument({
        headChildren: <meta name="description" content="Test" />,
      });

      const { getByTestId } = renderOnMockRoot(<Document />);
      const headTag = getByTestId('Next Head');

      expect(headTag).toBeDefined();
      expect(headTag.innerHTML).toContain('<meta name="description" content="Test">');
    });
  });
});

const hoisted = vi.hoisted(() => {
  const nextScriptDefault = vi.fn((props) => <script {...props} />);

  const collectStyles = vi.fn();
  const getStyleElement = vi.fn(() => <style>Styled Components Styles</style>);
  const seal = vi.fn();
  const ServerStyleSheet = vi.fn(function () {
    this.collectStyles = collectStyles;
    this.getStyleElement = getStyleElement;
    this.seal = seal;
  });

  const renderPage = vi.fn((App) => collectStyles(App));
  const getInitialProps = vi.fn(() => ({}));

  return {
    nextScriptDefault,
    ServerStyleSheet,
    collectStyles,
    getStyleElement,
    seal,
    renderPage,
    getInitialProps,
  };
});

vi.mock('next/document', () => ({
  Html: vi.fn((props) => <html lang="next-i18n" data-testid="Next Html" {...props} />),
  // eslint-disable-next-line @next/next/no-head-element
  Head: vi.fn((props) => <head data-testid="Next Head" {...props} />),
  Main: vi.fn((props) => <main data-testid="Next App Content" {...props} />),
  NextScript: vi.fn((props) => <script data-testid="Next Scripts" {...props} />),
  default: class Document extends React.Component {
    static getInitialProps(ctx) {
      return ctx.defaultGetInitialProps(ctx);
    }
  },
}));

vi.mock('next/script', () => ({ default: hoisted.nextScriptDefault }));
vi.mock('styled-components', () => ({ ServerStyleSheet: hoisted.ServerStyleSheet }));

function renderOnMockRoot(ui, options) {
  const container = document.documentElement;

  return {
    ...render(ui, {
      container,
      ...options,
    }),
    getByTestId: (id) => container.querySelector(`[data-testid="${id}"]`),
  };
}