1import { vol } from 'memfs';
2
3import { createTemplateHtmlFromExpoConfigAsync } from '../webTemplate';
4
5const fsReal = jest.requireActual('fs') as typeof import('fs');
6beforeEach(() => {
7  vol.reset();
8});
9
10jest.mock('../../../customize/templates', () => ({
11  TEMPLATES: [{ id: 'index.html', file: () => '/mock/index.html' }],
12}));
13
14describe(createTemplateHtmlFromExpoConfigAsync, () => {
15  it(`creates using the default template`, async () => {
16    const projectRoot = '/';
17    vol.fromJSON(
18      {
19        'mock/index.html': fsReal.readFileSync(
20          require.resolve('@expo/webpack-config/web-default/index.html'),
21          'utf-8'
22        ),
23      },
24      projectRoot
25    );
26
27    const contents = await createTemplateHtmlFromExpoConfigAsync(projectRoot, {
28      scripts: ['/script.js'],
29      cssLinks: ['/_expo/static/1.css', '/_expo/static/2.css'],
30      exp: {
31        name: 'My App',
32        slug: 'my-app',
33        web: {
34          description: 'my static app',
35          themeColor: '#123456',
36        },
37      },
38    });
39
40    // Standard replacements
41    expect(contents).toMatch(/<html lang="en">/);
42    expect(contents).toMatch(/<title>My App<\/title>/);
43    // Meta
44    expect(contents).toMatch(/<meta name="description" content="my static app">/);
45    expect(contents).toMatch(/<meta name="theme-color" content="#123456">/);
46    // Adds script tag
47    expect(contents).toMatch(/<script src="\/script\.js" defer><\/script>/);
48    // Adds css links
49    expect(contents).toMatch(/<link rel="stylesheet" href="\/_expo\/static\/1\.css">/);
50    expect(contents).toMatch(/<link rel="stylesheet" href="\/_expo\/static\/2\.css">/);
51
52    // Sanity
53    expect(contents).toMatchSnapshot();
54  });
55  it(`creates using an override project file`, async () => {
56    const projectRoot = '/';
57    vol.fromJSON(
58      {
59        // Custom file
60        'public/index.html': `<!DOCTYPE html><html lang="%LANG_ISO_CODE%"><head></head><body><div id="root"></div></body></html>`,
61      },
62      projectRoot
63    );
64
65    const contents = await createTemplateHtmlFromExpoConfigAsync(projectRoot, {
66      scripts: ['/script.js'],
67      exp: {
68        name: 'My App',
69        slug: 'my-app',
70        web: {
71          description: 'my static app',
72          themeColor: '#123456',
73        },
74      },
75    });
76
77    // Title won't be added because the template is missing.
78
79    // Standard replacements
80    expect(contents).toMatch(/<html lang="en">/);
81
82    // Meta
83    expect(contents).toMatch(/<meta name="description" content="my static app">/);
84    expect(contents).toMatch(/<meta name="theme-color" content="#123456">/);
85    // Adds script tag
86    expect(contents).toMatch(/<script src="\/script\.js" defer><\/script>/);
87
88    // Sanity
89    expect(contents).toMatchSnapshot();
90  });
91});
92