angular-cli/packages/angular/build/src/utils/index-file/inline-fonts_spec.ts at main · angular-robot/angular-cli · 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
/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import { InlineFontsProcessor } from './inline-fonts';

describe('InlineFontsProcessor', () => {
  describe('Google fonts', () => {
    const content = `
  <html>
    <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body></body>
  </html>`;

    it('works with // protocol', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: false,
      });

      const html = await inlineFontsProcessor.process(content.replace('https://', '//'));
      expect(html).toContain(`format('woff2');`);
    });

    it('should inline supported fonts and icons in HTML', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: false,
      });

      const html = await inlineFontsProcessor.process(`
      <html>
      <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="theme.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
      </head>
      <body></body>
    </html>`);

      expect(html).not.toContain(
        'href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"',
      );
      expect(html).not.toContain('href="https://fonts.googleapis.com/icon?family=Material+Icons"');
      expect(html).toContain('href="theme.css"');
      expect(html).toContain(`font-family: 'Roboto'`);
      expect(html).toContain(`font-family: 'Material Icons'`);
    });

    it('should inline multiple fonts from a single request with minification enabled', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: true,
      });

      const html = await inlineFontsProcessor.process(`
      <html>
      <head>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500%7CGoogle+Sans:400,500%7CRoboto+Mono:400,500%7CMaterial+Icons&display=swap" rel="stylesheet">
        <link href="theme.css" rel="stylesheet">
      </head>
      <body></body>
    </html>`);

      expect(html).toContain(`'Google Sans'`);
      expect(html).toContain(`'Roboto'`);
      expect(html).toContain(`'Roboto Mono'`);
      expect(html).toContain(`'Material Icons'`);
    });

    it('works with http protocol', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: false,
      });

      const html = await inlineFontsProcessor.process(content.replace('https://', 'http://'));
      expect(html).toContain(`format('woff2');`);
    });

    it('should remove comments and line breaks when `minifyInlinedCSS` is true', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: true,
      });

      const html = await inlineFontsProcessor.process(content);
      expect(html).not.toContain('/*');
      expect(html).toContain(';font-style:normal;');
    });

    it('should add preconnect hint', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: false,
      });

      const html = await inlineFontsProcessor.process(content);
      expect(html).toContain(
        `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`,
      );
    });
  });

  describe('Adobe Typekit fonts', () => {
    const content = `
  <html>
    <head>
      <link href="https://use.typekit.net/plm1izr.css" rel="stylesheet">
    </head>
    <body></body>
  </html>`;

    it('should add preconnect hint', async () => {
      const inlineFontsProcessor = new InlineFontsProcessor({
        minify: false,
      });

      const html = await inlineFontsProcessor.process(content);
      expect(html).toContain(`<link rel="preconnect" href="https://use.typekit.net" crossorigin>`);
    });
  });
});