Tests: IVY true and false (#282)

* Fix classes without IVY * Fix comma
madoar · Apr 6, 2020 · 34819c4 · 34819c4
1 parent 41ea8f2
commit 34819c4
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "build-scss": "scss-bundle",
     "extract-scss-variables": "extract-scss-variables ./dist/archwizard.scss ./dist/variables.scss",
     "build-css": "node-sass ./dist/archwizard.scss ./dist/archwizard.css",
-    "test": "ng test",
+    "test": "ng test && ng test --tsConfig=tsconfig-noIvy.spec.json",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },

diff --git a/src/lib/components/wizard-navigation-bar.component.html b/src/lib/components/wizard-navigation-bar.component.html
@@ -1,5 +1,5 @@
 <ul class="steps-indicator steps-{{numberOfWizardSteps}}">
-  <li [attr.id]="step.stepId" *ngFor="let step of wizardSteps" [class]="{
+  <li [attr.id]="step.stepId" *ngFor="let step of wizardSteps" [ngClass]="{
         'current': isCurrent(step),
         'editing': isEditing(step),
         'done': isDone(step),
@@ -14,11 +14,11 @@
         <ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
       </div>
       <div class="step-indicator"
-        [style]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
+        [ngStyle]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
         <ng-container *ngIf="step.stepSymbolTemplate" [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"
           [ngTemplateOutletContext]="{wizardStep: step}"></ng-container>
         <ng-container *ngIf="!step.stepSymbolTemplate">{{step.navigationSymbol.symbol}}</ng-container>
       </div>
     </a>
   </li>
-</ul>
+</ul>
diff --git a/src/lib/components/wizard-navigation-bar.component.spec.ts b/src/lib/components/wizard-navigation-bar.component.spec.ts
@@ -3,6 +3,7 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 import { By } from '@angular/platform-browser';
 import { ArchwizardModule } from '../archwizard.module';
 import { WizardComponent } from './wizard.component';
+import { checkClasses } from '../util/test-utils';
 
 @Component({
   selector: 'aw-test-wizard',
@@ -455,7 +456,7 @@ describe('WizardNavigationBarComponent', () => {
   it('should use the \"small\" layout when no navigation bar layout is specified', () => {
     const navBarEl = wizardTestFixture.debugElement.query(By.css('aw-wizard-navigation-bar'));
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'small']);
   });
 
   it('should use the \"small\" layout when it is specified', () => {
@@ -464,7 +465,7 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'small';
     wizardTestFixture.detectChanges();
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'small']);
   });
 
   it('should use the \"large-filled\" layout when it is specified', () => {
@@ -473,7 +474,7 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-filled';
     wizardTestFixture.detectChanges();
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-filled': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'large-filled']);
   });
 
   it('should use the \"large-empty\" layout when it is specified', () => {
@@ -482,7 +483,7 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-empty';
     wizardTestFixture.detectChanges();
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-empty': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'large-empty']);
   });
 
   it('should use the \"large-filled-symbols\" layout when it is specified', () => {
@@ -491,7 +492,7 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-filled-symbols';
     wizardTestFixture.detectChanges();
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-filled-symbols': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'large-filled-symbols']);
   });
 
   it('should use the \"large-empty-symbols\" layout when it is specified', () => {
@@ -500,7 +501,7 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-empty-symbols';
     wizardTestFixture.detectChanges();
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'large-empty-symbols': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'large-empty-symbols']);
   });
 
   it('should show the correct step titles', () => {

diff --git a/src/lib/components/wizard.component.html b/src/lib/components/wizard.component.html
@@ -1,7 +1,7 @@
 <aw-wizard-navigation-bar
   [direction]="navBarDirection"
   *ngIf="navBarLocation == 'top' || navBarLocation == 'left'"
-  [class]="{
+  [ngClass]="{
     'vertical': navBarLocation == 'left',
     'horizontal': navBarLocation == 'top',
     'small': navBarLayout == 'small',
@@ -12,7 +12,7 @@
   }">
 </aw-wizard-navigation-bar>
 
-<div [class]="{
+<div [ngClass]="{
   'wizard-steps': true,
   'vertical': navBarLocation == 'left' || navBarLocation == 'right',
   'horizontal': navBarLocation == 'top' || navBarLocation == 'bottom'
@@ -23,7 +23,7 @@
 <aw-wizard-navigation-bar
   [direction]="navBarDirection"
   *ngIf="navBarLocation == 'bottom' || navBarLocation == 'right'"
-  [class]="{
+  [ngClass]="{
     'vertical': navBarLocation == 'right',
     'horizontal': navBarLocation == 'bottom',
     'small': navBarLayout == 'small',

diff --git a/src/lib/components/wizard.component.spec.ts b/src/lib/components/wizard.component.spec.ts
@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 import { ArchwizardModule } from '../archwizard.module';
 import { WizardStep } from '../util/wizard-step.interface';
 import { WizardComponent } from './wizard.component';
+import { checkClasses } from '../util/test-utils';
 
 @Component({
   selector: 'aw-test-wizard',
@@ -79,9 +80,9 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
-    expect(wizardEl.classes).toEqual({ 'horizontal': true });
-    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'small']);
+    checkClasses(wizardEl.classes, ['horizontal']);
+    checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
   });
 
   it('should contain navigation bar at the correct position in top navBarLocation mode', () => {
@@ -98,9 +99,9 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true });
-    expect(wizardEl.classes).toEqual({ 'horizontal': true });
-    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true });
+    checkClasses(navBarEl.classes, ['horizontal', 'small']);
+    checkClasses(wizardEl.classes, ['horizontal']);
+    checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
   });
 
   it('should contain navigation bar at the correct position in left navBarLocation mode', () => {
@@ -117,9 +118,9 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('aw-wizard-navigation-bar');
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('div');
 
-    expect(navBarEl.classes).toEqual({ 'vertical': true, 'small': true });
-    expect(wizardEl.classes).toEqual({ 'vertical': true });
-    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'vertical': true });
+    checkClasses(navBarEl.classes, ['vertical', 'small']);
+    checkClasses(wizardEl.classes, ['vertical']);
+    checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'vertical']);
   });
 
   it('should contain navigation bar at the correct position in bottom navBarLocation mode', () => {
@@ -136,9 +137,9 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('div');
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('aw-wizard-navigation-bar');
 
-    expect(navBarEl.classes).toEqual({ 'horizontal': true, 'small': true, });
-    expect(wizardEl.classes).toEqual({ 'horizontal': true });
-    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, });
+    checkClasses(navBarEl.classes, ['horizontal', 'small']);
+    checkClasses(wizardEl.classes, ['horizontal']);
+    checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'horizontal']);
   });
 
   it('should contain navigation bar at the correct position in right navBarLocation mode', () => {
@@ -155,9 +156,9 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :first-child')).name).toBe('div');
     expect(wizardTestFixture.debugElement.query(By.css('aw-wizard > :last-child')).name).toBe('aw-wizard-navigation-bar');
 
-    expect(navBarEl.classes).toEqual({ 'vertical': true, 'small': true, });
-    expect(wizardEl.classes).toEqual({ 'vertical': true });
-    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'vertical': true });
+    checkClasses(navBarEl.classes, ['vertical', 'small']);
+    checkClasses(wizardEl.classes, ['vertical']);
+    checkClasses(wizardStepsDiv.classes, ['wizard-steps', 'vertical']);
   });
 
   it('should change the navigation mode correctly during runtime', () => {

diff --git a/src/lib/util/test-utils.ts b/src/lib/util/test-utils.ts
@@ -65,3 +65,15 @@ export function checkWizardNavigableSteps(
       `expected step ${index} ${navigableStepIndexes.includes(index) ? 'to be navigable' : 'not to be navigable'}`);
   });
 }
+
+/**
+ * Check if the expected classes exists on the element
+ *
+ * @param classes Element classes
+ * @param expectedClasses Expected element classes
+ */
+export function checkClasses(classes: { [key: string]: boolean }, expectedClasses: string[]) {
+    expect(
+      Object.keys(classes).filter(m => classes[m] === true)
+    ).toEqual(expectedClasses);
+}
diff --git a/tsconfig-noIvy.spec.json b/tsconfig-noIvy.spec.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.spec.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
@@ -13,5 +13,8 @@
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "enableIvy": true
+  }
 }