Skip to content

Commit 34819c4

Browse files
hugoj-goncalveshugoj-goncalves
authored
Tests: IVY true and false (#282)
* Fix classes without IVY * Fix comma
1 parent 41ea8f2 commit 34819c4

File tree

8 files changed

+52
-29
lines changed

8 files changed

+52
-29
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"build-scss": "scss-bundle",
3434
"extract-scss-variables": "extract-scss-variables ./dist/archwizard.scss ./dist/variables.scss",
3535
"build-css": "node-sass ./dist/archwizard.scss ./dist/archwizard.css",
36-
"test": "ng test",
36+
"test": "ng test && ng test --tsConfig=tsconfig-noIvy.spec.json",
3737
"lint": "ng lint",
3838
"e2e": "ng e2e"
3939
},

‎src/lib/components/wizard-navigation-bar.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ul class="steps-indicator steps-{{numberOfWizardSteps}}">
2-
<li [attr.id]="step.stepId" *ngFor="let step of wizardSteps" [class]="{
2+
<li [attr.id]="step.stepId" *ngFor="let step of wizardSteps" [ngClass]="{
33
'current': isCurrent(step),
44
'editing': isEditing(step),
55
'done': isDone(step),
@@ -14,11 +14,11 @@
1414
<ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
1515
</div>
1616
<div class="step-indicator"
17-
[style]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
17+
[ngStyle]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
1818
<ng-container *ngIf="step.stepSymbolTemplate" [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"
1919
[ngTemplateOutletContext]="{wizardStep: step}"></ng-container>
2020
<ng-container *ngIf="!step.stepSymbolTemplate">{{step.navigationSymbol.symbol}}</ng-container>
2121
</div>
2222
</a>
2323
</li>
24-
</ul>
24+
</ul>

‎src/lib/components/wizard-navigation-bar.component.spec.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
33
import { By } from '@angular/platform-browser';
44
import { ArchwizardModule } from '../archwizard.module';
55
import { WizardComponent } from './wizard.component';
6+
import { checkClasses } from '../util/test-utils';
67

78
@Component({
89
selector: 'aw-test-wizard',
@@ -455,7 +456,7 @@ describe('WizardNavigationBarComponent', () => {
455456
it('should use the \"small\" layout when no navigation bar layout is specified', () => {
456457
const navBarEl = wizardTestFixture.debugElement.query(By.css('aw-wizard-navigation-bar'));
457458

458-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
459+
checkClasses(navBarEl.classes, ['horizontal', 'small']);
459460
});
460461

461462
it('should use the \"small\" layout when it is specified', () => {
@@ -464,7 +465,7 @@ describe('WizardNavigationBarComponent', () => {
464465
wizardTest.wizard.navBarLayout = 'small';
465466
wizardTestFixture.detectChanges();
466467

467-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
468+
checkClasses(navBarEl.classes, ['horizontal', 'small']);
468469
});
469470

470471
it('should use the \"large-filled\" layout when it is specified', () => {
@@ -473,7 +474,7 @@ describe('WizardNavigationBarComponent', () => {
473474
wizardTest.wizard.navBarLayout = 'large-filled';
474475
wizardTestFixture.detectChanges();
475476

476-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-filled': true });
477+
checkClasses(navBarEl.classes, ['horizontal', 'large-filled']);
477478
});
478479

479480
it('should use the \"large-empty\" layout when it is specified', () => {
@@ -482,7 +483,7 @@ describe('WizardNavigationBarComponent', () => {
482483
wizardTest.wizard.navBarLayout = 'large-empty';
483484
wizardTestFixture.detectChanges();
484485

485-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-empty': true });
486+
checkClasses(navBarEl.classes, ['horizontal', 'large-empty']);
486487
});
487488

488489
it('should use the \"large-filled-symbols\" layout when it is specified', () => {
@@ -491,7 +492,7 @@ describe('WizardNavigationBarComponent', () => {
491492
wizardTest.wizard.navBarLayout = 'large-filled-symbols';
492493
wizardTestFixture.detectChanges();
493494

494-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-filled-symbols': true });
495+
checkClasses(navBarEl.classes, ['horizontal', 'large-filled-symbols']);
495496
});
496497

497498
it('should use the \"large-empty-symbols\" layout when it is specified', () => {
@@ -500,7 +501,7 @@ describe('WizardNavigationBarComponent', () => {
500501
wizardTest.wizard.navBarLayout = 'large-empty-symbols';
501502
wizardTestFixture.detectChanges();
502503

503-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-empty-symbols': true });
504+
checkClasses(navBarEl.classes, ['horizontal', 'large-empty-symbols']);
504505
});
505506

506507
it('should show the correct step titles', () => {

‎src/lib/components/wizard.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<aw-wizard-navigation-bar
22
[direction]="navBarDirection"
33
*ngIf="navBarLocation == 'top' || navBarLocation == 'left'"
4-
[class]="{
4+
[ngClass]="{
55
'vertical': navBarLocation == 'left',
66
'horizontal': navBarLocation == 'top',
77
'small': navBarLayout == 'small',
@@ -12,7 +12,7 @@
1212
}">
1313
</aw-wizard-navigation-bar>
1414

15-
<div [class]="{
15+
<div [ngClass]="{
1616
'wizard-steps': true,
1717
'vertical': navBarLocation == 'left' || navBarLocation == 'right',
1818
'horizontal': navBarLocation == 'top' || navBarLocation == 'bottom'
@@ -23,7 +23,7 @@
2323
<aw-wizard-navigation-bar
2424
[direction]="navBarDirection"
2525
*ngIf="navBarLocation == 'bottom' || navBarLocation == 'right'"
26-
[class]="{
26+
[ngClass]="{
2727
'vertical': navBarLocation == 'right',
2828
'horizontal': navBarLocation == 'bottom',
2929
'small': navBarLayout == 'small',

‎src/lib/components/wizard.component.spec.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
44
import { ArchwizardModule } from '../archwizard.module';
55
import { WizardStep } from '../util/wizard-step.interface';
66
import { WizardComponent } from './wizard.component';
7+
import { checkClasses } from '../util/test-utils';
78

89
@Component({
910
selector: 'aw-test-wizard',
@@ -79,9 +80,9 @@ describe('WizardComponent', () => {
7980
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
8081
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
8182

82-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
83-
expect(wizardEl.classes).toEqual({ 'horizontal': true });
84-
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true });
83+
checkClasses(navBarEl.classes, ['horizontal', 'small']);
84+
checkClasses(wizardEl.classes, ['horizontal']);
85+
checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
8586
});
8687

8788
it('should contain navigation bar at the correct position in top navBarLocation mode', () => {
@@ -98,9 +99,9 @@ describe('WizardComponent', () => {
9899
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
99100
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
100101

101-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
102-
expect(wizardEl.classes).toEqual({ 'horizontal': true });
103-
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true });
102+
checkClasses(navBarEl.classes, ['horizontal', 'small']);
103+
checkClasses(wizardEl.classes, ['horizontal']);
104+
checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
104105
});
105106

106107
it('should contain navigation bar at the correct position in left navBarLocation mode', () => {
@@ -117,9 +118,9 @@ describe('WizardComponent', () => {
117118
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
118119
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
119120

120-
expect(navBarEl.classes).toEqual({ 'vertical': true, 'small': true });
121-
expect(wizardEl.classes).toEqual({ 'vertical': true });
122-
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'vertical': true });
121+
checkClasses(navBarEl.classes, ['vertical', 'small']);
122+
checkClasses(wizardEl.classes, ['vertical']);
123+
checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'vertical']);
123124
});
124125

125126
it('should contain navigation bar at the correct position in bottom navBarLocation mode', () => {
@@ -136,9 +137,9 @@ describe('WizardComponent', () => {
136137
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('div');
137138
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('aw-wizard-navigation-bar');
138139

139-
expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true, });
140-
expect(wizardEl.classes).toEqual({ 'horizontal': true });
141-
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, });
140+
checkClasses(navBarEl.classes, ['horizontal', 'small']);
141+
checkClasses(wizardEl.classes, ['horizontal']);
142+
checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
142143
});
143144

144145
it('should contain navigation bar at the correct position in right navBarLocation mode', () => {
@@ -155,9 +156,9 @@ describe('WizardComponent', () => {
155156
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('div');
156157
expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('aw-wizard-navigation-bar');
157158

158-
expect(navBarEl.classes).toEqual({ 'vertical': true, 'small': true, });
159-
expect(wizardEl.classes).toEqual({ 'vertical': true });
160-
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'vertical': true });
159+
checkClasses(navBarEl.classes, ['vertical', 'small']);
160+
checkClasses(wizardEl.classes, ['vertical']);
161+
checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'vertical']);
161162
});
162163

163164
it('should change the navigation mode correctly during runtime', () => {

‎src/lib/util/test-utils.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,15 @@ export function checkWizardNavigableSteps(
6565
`expected step ${index} ${navigableStepIndexes.includes(index) ? 'to be navigable' : 'not to be navigable'}`);
6666
});
6767
}
68+
69+
/**
70+
* Check if the expected classes exists on the element
71+
*
72+
* @param classes Element classes
73+
* @param expectedClasses Expected element classes
74+
*/
75+
export function checkClasses(classes: { [key: string]: boolean }, expectedClasses: string[]) {
76+
expect(
77+
Object.keys(classes).filter(m => classes[m] === true)
78+
).toEqual(expectedClasses);
79+
}

‎tsconfig-noIvy.spec.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "./tsconfig.spec.json",
3+
"angularCompilerOptions": {
4+
"enableIvy": false
5+
}
6+
}

‎tsconfig.spec.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
"include": [
1414
"**/*.spec.ts",
1515
"**/*.d.ts"
16-
]
16+
],
17+
"angularCompilerOptions": {
18+
"enableIvy": true
19+
}
1720
}

0 commit comments

Comments
 (0)