Commits

Art Lowel authored 31d660536f0 
add data attribute to show which theme is being used for a component
No tags
e4f483c308d
gidlmaster

src/app/shared/theme-support/themed.component.spec.ts

Modified
64 64 fixture.whenStable().then(() => {
65 65 expect((component as any).compRef.instance.type).toEqual('themed');
66 66 });
67 67 }));
68 68 ​
69 69 it('should sync up this component\'s input with the themed component', waitForAsync(() => {
70 70 fixture.whenStable().then(() => {
71 71 expect((component as any).compRef.instance.testInput).toEqual('changed');
72 72 });
73 73 }));
74 +​
75 + it(`should set usedTheme to the name of the matched theme`, waitForAsync(() => {
76 + fixture.whenStable().then(() => {
77 + expect(component.usedTheme).toEqual('custom');
78 + });
79 + }));
74 80 });
75 81 ​
76 82 describe('when the current theme doesn\'t match a themed component', () => {
77 83 describe('and it doesn\'t extend another theme', () => {
78 84 beforeEach(waitForAsync(() => {
79 85 setupTestingModuleForTheme('non-existing-theme');
80 86 }));
81 87 ​
82 88 beforeEach(initComponent);
83 89 ​
84 90 it('should set compRef to the default component', waitForAsync(() => {
85 91 fixture.whenStable().then(() => {
86 92 expect((component as any).compRef.instance.type).toEqual('default');
87 93 });
88 94 }));
89 95 ​
90 96 it('should sync up this component\'s input with the default component', waitForAsync(() => {
91 97 fixture.whenStable().then(() => {
92 98 expect((component as any).compRef.instance.testInput).toEqual('changed');
93 99 });
94 100 }));
101 +​
102 + it(`should set usedTheme to the name of the base theme`, waitForAsync(() => {
103 + fixture.whenStable().then(() => {
104 + expect(component.usedTheme).toEqual('base');
105 + });
106 + }));
95 107 });
96 108 ​
97 109 describe('and it extends another theme', () => {
98 110 describe('that doesn\'t match it either', () => {
99 111 beforeEach(waitForAsync(() => {
100 112 setupTestingModuleForTheme('current-theme', [
101 113 { name: 'current-theme', extends: 'non-existing-theme' },
102 114 ]);
103 115 }));
104 116 ​
110 122 expect((component as any).importThemedComponent).toHaveBeenCalledWith('non-existing-theme');
111 123 expect((component as any).compRef.instance.type).toEqual('default');
112 124 });
113 125 }));
114 126 ​
115 127 it('should sync up this component\'s input with the default component', waitForAsync(() => {
116 128 fixture.whenStable().then(() => {
117 129 expect((component as any).compRef.instance.testInput).toEqual('changed');
118 130 });
119 131 }));
132 +​
133 + it(`should set usedTheme to the name of the base theme`, waitForAsync(() => {
134 + fixture.whenStable().then(() => {
135 + expect(component.usedTheme).toEqual('base');
136 + });
137 + }));
120 138 });
121 139 ​
122 140 describe('that does match it', () => {
123 141 beforeEach(waitForAsync(() => {
124 142 setupTestingModuleForTheme('current-theme', [
125 143 { name: 'current-theme', extends: 'custom' },
126 144 ]);
127 145 }));
128 146 ​
129 147 beforeEach(initComponent);
134 152 expect((component as any).importThemedComponent).toHaveBeenCalledWith('custom');
135 153 expect((component as any).compRef.instance.type).toEqual('themed');
136 154 });
137 155 }));
138 156 ​
139 157 it('should sync up this component\'s input with the themed component', waitForAsync(() => {
140 158 fixture.whenStable().then(() => {
141 159 expect((component as any).compRef.instance.testInput).toEqual('changed');
142 160 });
143 161 }));
162 +​
163 + it(`should set usedTheme to the name of the matched theme`, waitForAsync(() => {
164 + fixture.whenStable().then(() => {
165 + expect(component.usedTheme).toEqual('custom');
166 + });
167 + }));
144 168 });
145 169 ​
146 170 describe('that extends another theme that doesn\'t match it either', () => {
147 171 beforeEach(waitForAsync(() => {
148 172 setupTestingModuleForTheme('current-theme', [
149 173 { name: 'current-theme', extends: 'parent-theme' },
150 174 { name: 'parent-theme', extends: 'non-existing-theme' },
151 175 ]);
152 176 }));
153 177 ​
160 184 expect((component as any).importThemedComponent).toHaveBeenCalledWith('non-existing-theme');
161 185 expect((component as any).compRef.instance.type).toEqual('default');
162 186 });
163 187 }));
164 188 ​
165 189 it('should sync up this component\'s input with the default component', waitForAsync(() => {
166 190 fixture.whenStable().then(() => {
167 191 expect((component as any).compRef.instance.testInput).toEqual('changed');
168 192 });
169 193 }));
194 +​
195 + it(`should set usedTheme to the name of the base theme`, waitForAsync(() => {
196 + fixture.whenStable().then(() => {
197 + expect(component.usedTheme).toEqual('base');
198 + });
199 + }));
170 200 });
171 201 ​
172 202 describe('that extends another theme that does match it', () => {
173 203 beforeEach(waitForAsync(() => {
174 204 setupTestingModuleForTheme('current-theme', [
175 205 { name: 'current-theme', extends: 'parent-theme' },
176 206 { name: 'parent-theme', extends: 'custom' },
177 207 ]);
178 208 }));
179 209 ​
186 216 expect((component as any).importThemedComponent).toHaveBeenCalledWith('custom');
187 217 expect((component as any).compRef.instance.type).toEqual('themed');
188 218 });
189 219 }));
190 220 ​
191 221 it('should sync up this component\'s input with the themed component', waitForAsync(() => {
192 222 fixture.whenStable().then(() => {
193 223 expect((component as any).compRef.instance.testInput).toEqual('changed');
194 224 });
195 225 }));
226 +​
227 + it(`should set usedTheme to the name of the matched theme`, waitForAsync(() => {
228 + fixture.whenStable().then(() => {
229 + expect(component.usedTheme).toEqual('custom');
230 + });
231 + }));
196 232 });
197 233 });
198 234 });
199 235 });
200 236 /* tslint:enable:max-classes-per-file */

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut