From 34819c4808bfe312630a455d5fe64de654ca55a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Jos=C3=A9=20Gon=C3=A7alves?= <hugo159@gmail.com>
Date: Mon, 6 Apr 2020 17:16:39 -0300
Subject: [PATCH] Tests: IVY true and false (#282)

* Fix classes without IVY
* Fix comma
---
 package.json                                  |  2 +-
 .../wizard-navigation-bar.component.html      |  6 ++--
 .../wizard-navigation-bar.component.spec.ts   | 13 ++++----
 src/lib/components/wizard.component.html      |  6 ++--
 src/lib/components/wizard.component.spec.ts   | 31 ++++++++++---------
 src/lib/util/test-utils.ts                    | 12 +++++++
 tsconfig-noIvy.spec.json                      |  6 ++++
 tsconfig.spec.json                            |  5 ++-
 8 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 tsconfig-noIvy.spec.json

diff --git a/package.json b/package.json
index 55f3de8f..1436739b 100644
--- 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
index beafeeba..c62df6ab 100644
--- 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>
\ No newline at end of file
+</ul>
diff --git a/src/lib/components/wizard-navigation-bar.component.spec.ts b/src/lib/components/wizard-navigation-bar.component.spec.ts
index 49666d0f..87c2516d 100644
--- 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
index 2bab01e1..addc8c34 100644
--- 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
index c4e42927..e1b3dc29 100644
--- 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
index de575827..746b6c67 100644
--- 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
new file mode 100644
index 00000000..a81f83bc
--- /dev/null
+++ 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
index c36cfa9a..01115b2c 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -13,5 +13,8 @@
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "enableIvy": true
+  }
 }