test(angular): add CI (#16496)

.circleci/config.yml

@@ -63,6 +63,29 @@ jobs:
           command: npm run build # --max-workers 1 --debug
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core-stencil
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
+  build-angular:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/angular
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/angular
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/angular
       - persist_to_workspace:
           root: /tmp/workspace
           paths:
@@ -131,6 +154,19 @@ jobs:
           command: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --update-screenshot || true
           working_directory: /tmp/workspace/core
 
+  test-angular:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/angular/test/test-app
+      - run:
+          command: npm test
+          working_directory: /tmp/workspace/angular/test/test-app
+
 workflows:
   version: 2
   build:
@@ -138,6 +174,10 @@ workflows:
       - build
       - build-core:
           requires: [build]
+      - build-angular:
+          requires: [build-core]
+      - test-angular:
+          requires: [build-angular]
       - test-core-clean-build:
           requires: [build-core]
       - test-core-lint:

angular/src/directives/navigation/tab-delegate.ts

@@ -31,7 +31,7 @@ export class TabDelegate {
     return this.outlet ? this.outlet.getLastUrl() : undefined;
   }
 
-  @HostListener('ionRouterOutletActivated', ['$event'])
+  @HostListener('ionRouterOutletActivated')
   async onNavChanged() {
     const tab = this.nativeEl;
     await tab.componentOnReady();

angular/test/test-app/e2e/src/inputs.e2e-spec.ts

@@ -7,7 +7,18 @@ describe('inputs', () => {
     await browser.get('/inputs');
   });
 
-  it('should have default values', async () => {
+  it('should have default value', async () => {
+    expect(await getProperty('ion-checkbox', 'checked')).toEqual(true);
+    expect(await getProperty('ion-toggle', 'checked')).toEqual(true);
+    expect(await getProperty('ion-input', 'value')).toEqual('some text');
+    expect(await getProperty('ion-datetime', 'value')).toEqual('1994-03-15');
+    expect(await getProperty('ion-select', 'value')).toEqual('nes');
+    expect(await getProperty('ion-range', 'value')).toEqual(10);
+  });
+
+  it('should have reset value', async () => {
+    await element(by.css('#reset-button')).click();
+
     expect(await getProperty('ion-checkbox', 'checked')).toEqual(false);
     expect(await getProperty('ion-toggle', 'checked')).toEqual(false);
     expect(await getProperty('ion-input', 'value')).toEqual('');
@@ -17,6 +28,7 @@ describe('inputs', () => {
   });
 
   it('should get some value', async () => {
+    await element(by.css('#reset-button')).click();
     await element(by.css('#set-button')).click();
 
     expect(await getProperty('ion-checkbox', 'checked')).toEqual(true);
@@ -28,6 +40,8 @@ describe('inputs', () => {
   });
 
   it('change values should update angular', async () => {
+    await element(by.css('#reset-button')).click();
+
     await setProperty('ion-checkbox', 'checked', true);
     await setProperty('ion-toggle', 'checked', true);
     await setProperty('ion-input', 'value', 'hola');

angular/test/test-app/e2e/tsconfig.e2e.json

@@ -1,4 +1,8 @@
 {
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",

angular/test/test-app/package.json

@@ -6,11 +6,10 @@
     "start": "ng serve",
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
-    "build": "ng build",
+    "build": "ng build --prod",
-    "test": "ng test",
+    "test": "ng e2e --prod",
     "lint": "ng lint",
-    "e2e": "ng e2e",
+    "postinstall": "npm run sync"
-    "postinstall": "npm run sync:build"
   },
   "private": true,
   "dependencies": {

angular/test/test-app/src/app/app-routing.module.ts

@@ -5,13 +5,15 @@ import { ModalComponent } from './modal/modal.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
   { path: 'inputs', component: InputsComponent },
   { path: 'modals', component: ModalComponent },
   { path: 'router-link', component: RouterLinkComponent },
-  { path: 'router-link-page', component: RouterLinkPageComponent }
+  { path: 'router-link-page', component: RouterLinkPageComponent },
+  { path: 'tabs', component: TabsComponent }
 ];
 
 @NgModule({

angular/test/test-app/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { ModalExampleComponent } from './modal-example/modal-example.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { HomePageComponent } from './home-page/home-page.component';
     ModalExampleComponent,
     RouterLinkComponent,
     RouterLinkPageComponent,
-    HomePageComponent
+    HomePageComponent,
+    TabsComponent
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -22,6 +22,10 @@
           Router link test
         </ion-label>
       </ion-item>
+      <ion-item href="/tabs">
+        <ion-label>
+          Tabs test
+        </ion-label>
+      </ion-item>
     </ion-list>
   </ion-content>
-  

angular/test/test-app/src/app/home-page/home-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home-page',

angular/test/test-app/src/app/inputs/inputs.component.ts

@@ -6,12 +6,12 @@ import { Component } from '@angular/core';
 })
 export class InputsComponent {
 
-  datetime: string;
+  datetime = '1994-03-15';
-  input: string;
+  input = 'some text';
-  checkbox = false;
+  checkbox = true;
-  toggle = false;
+  toggle = true;
-  select: string;
+  select = 'nes';
-  range: number;
+  range = 10;
 
   setValues() {
     console.log('set values');

angular/test/test-app/src/app/tabs/tabs.component.html

@@ -0,0 +1,21 @@
+<ion-tabs>
+  <ion-tab tab="tab-one">
+    <ion-router-outlet name="tab-one"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="tab-two">
+    <ion-router-outlet name="tab-one"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="tab-one">
+      <ion-label>Tab One</ion-label>
+      <ion-icon name="add"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-two">
+      <ion-label>Tab Two</ion-label>
+      <ion-icon name="plane"></ion-icon>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>

angular/test/test-app/src/app/tabs/tabs.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: './tabs.component.html',
+})
+export class TabsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/test/test-app/src/tsconfig.app.json

@@ -1,4 +1,8 @@
 {
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",

angular/tsconfig.json

@@ -1,4 +1,8 @@
 {
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit" : true
+  },
   "compilerOptions": {
     "alwaysStrict": true,
     "strict": true,

core/stencil.config.ts

@@ -109,7 +109,6 @@ export const config: Config = {
 
         // auxiliar
         'ion-picker-column',
-        'ion-anchor',
         'ion-virtual-scroll'
       ]
     }