1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | import * as fs from 'fs';
|
25 | import * as path from 'path';
|
26 |
|
27 | describe('theme.test.scss', () => {
|
28 | it('should transform theme keys to custom property for theme.property()',
|
29 | () => {
|
30 | const filePath = path.join(__dirname, 'theme.test.css');
|
31 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
32 | expect(css).toEqual(`.test {
|
33 | color: #6200ee;
|
34 | /* @alternate */
|
35 | color: var(--mdc-theme-primary, #6200ee);
|
36 | }`);
|
37 | });
|
38 |
|
39 | it('host-aware test produces expected output',
|
40 | () => {
|
41 | const filePath = path.join(__dirname, 'shadow-dom.test.css');
|
42 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
43 | expect(css).toEqual(
|
44 | `:host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {
|
45 | color: blue;
|
46 | }
|
47 | :host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {
|
48 | background-color: red;
|
49 | }
|
50 |
|
51 | :host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host, :host(:not(.hidden)[outlined]), :host .my-class, gm-fab {
|
52 | border-color: green;
|
53 | }
|
54 |
|
55 | /* Test replacement for deprecated shadow-dom.host-aware() */
|
56 | :host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {
|
57 | color: blue;
|
58 | }
|
59 | :host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {
|
60 | background-color: red;
|
61 | }
|
62 |
|
63 | :host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host,
|
64 | :host(:not(.hidden)[outlined]),
|
65 | :host .my-class,
|
66 | gm-fab {
|
67 | border-color: green;
|
68 | }`);
|
69 |
|
70 |
|
71 |
|
72 | });
|
73 |
|
74 | it('should replace values provided to $replace for theme.property()', () => {
|
75 | const filePath = path.join(__dirname, 'replace.test.css');
|
76 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
77 | expect(css).toEqual(`.simple {
|
78 | width: calc(100% - 20px);
|
79 | }
|
80 |
|
81 | .var {
|
82 | width: calc(16px + 8px);
|
83 | /* @alternate */
|
84 | width: calc(var(--m-foo, 16px) + var(--m-bar, 8px));
|
85 | height: calc(16px + 8px + 16px + 8px);
|
86 | /* @alternate */
|
87 | height: calc(var(--m-foo, 16px) + var(--m-bar, 8px) + var(--m-foo, 16px) + var(--m-bar, 8px));
|
88 | }
|
89 |
|
90 | .multiple {
|
91 | width: calc(8px + 8px + 8px);
|
92 | }
|
93 |
|
94 | .list {
|
95 | padding: 0 16px;
|
96 | }`);
|
97 | });
|
98 |
|
99 | it('should allow overriding theme color values using @use/with', () => {
|
100 | const filePath = path.join(__dirname, 'override.test.css');
|
101 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
102 | expect(css).toContain('--mdc-theme-primary: teal');
|
103 | expect(css).toContain('--mdc-theme-secondary: crimson');
|
104 | });
|
105 |
|
106 | it('validate-keys Should throw error when unsupported key is provided',
|
107 | () => {
|
108 | const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
|
109 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
110 | expect(css).toContain('Unsupported keys found: foobar.');
|
111 | });
|
112 |
|
113 | it('validate-keys Should throw error when custom properties are provided', () => {
|
114 | const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
|
115 | const css = fs.readFileSync(filePath, 'utf8').trim();
|
116 | expect(css).toContain(
|
117 | 'Custom properties are not supported for theme map keys: three');
|
118 | });
|
119 | });
|