test(routing): fix test

packages/core/package.json

@@ -45,7 +45,6 @@
     "snapshot": "node ./scripts/e2e --snapshot",
     "test": "jest --no-cache",
     "test.watch": "jest --watch --no-cache",
-    "build-test-cmp": "stencil build --dev --config scripts/test-components/stencil.config.js",
     "theme-app-build": "stencil build --dev --config scripts/theme-builder/stencil.config.js",
     "theme-builder": "sd concurrent \"npm run theme-app-build\" \"stencil build --dev --watch\" \"stencil-dev-server\" \"npm run theme-server\" ",
     "theme-builder:dev": "sd concurrent \"npm run theme-app-build -- --watch\" \"stencil build --dev --watch\" \"stencil-dev-server\" \"npm run theme-server\" ",

packages/core/scripts/test-components/src/components.d.ts

@@ -1,166 +0,0 @@
-/**
- * This is an autogenerated file created by the Stencil build process.
- * It contains typing information for all components that exist in this project
- * and imports for stencil collections that might be configured in your stencil.config.js file
- */
-
-
-declare global {
-  interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
-    componentOnReady(done: (ele?: this) => void): void;
-  }
-}
-
-
-
-import {
-  PageOne as PageOne
-} from './components/page-one/page-one';
-
-declare global {
-  interface HTMLPageOneElement extends PageOne, HTMLStencilElement {
-  }
-  var HTMLPageOneElement: {
-    prototype: HTMLPageOneElement;
-    new (): HTMLPageOneElement;
-  };
-  interface HTMLElementTagNameMap {
-    "page-one": HTMLPageOneElement;
-  }
-  interface ElementTagNameMap {
-    "page-one": HTMLPageOneElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "page-one": JSXElements.PageOneAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface PageOneAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-
-import {
-  PageTwo as PageTwo
-} from './components/page-two/page-two';
-
-declare global {
-  interface HTMLPageTwoElement extends PageTwo, HTMLStencilElement {
-  }
-  var HTMLPageTwoElement: {
-    prototype: HTMLPageTwoElement;
-    new (): HTMLPageTwoElement;
-  };
-  interface HTMLElementTagNameMap {
-    "page-two": HTMLPageTwoElement;
-  }
-  interface ElementTagNameMap {
-    "page-two": HTMLPageTwoElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "page-two": JSXElements.PageTwoAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface PageTwoAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-
-import {
-  TabOne as TabOne
-} from './components/tab-one/tab-one';
-
-declare global {
-  interface HTMLTabOneElement extends TabOne, HTMLStencilElement {
-  }
-  var HTMLTabOneElement: {
-    prototype: HTMLTabOneElement;
-    new (): HTMLTabOneElement;
-  };
-  interface HTMLElementTagNameMap {
-    "tab-one": HTMLTabOneElement;
-  }
-  interface ElementTagNameMap {
-    "tab-one": HTMLTabOneElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "tab-one": JSXElements.TabOneAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface TabOneAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-
-import {
-  TabThree as TabThree
-} from './components/tab-three/tab-three';
-
-declare global {
-  interface HTMLTabThreeElement extends TabThree, HTMLStencilElement {
-  }
-  var HTMLTabThreeElement: {
-    prototype: HTMLTabThreeElement;
-    new (): HTMLTabThreeElement;
-  };
-  interface HTMLElementTagNameMap {
-    "tab-three": HTMLTabThreeElement;
-  }
-  interface ElementTagNameMap {
-    "tab-three": HTMLTabThreeElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "tab-three": JSXElements.TabThreeAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface TabThreeAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-
-import {
-  TabTwo as TabTwo
-} from './components/tab-two/tab-two';
-
-declare global {
-  interface HTMLTabTwoElement extends TabTwo, HTMLStencilElement {
-  }
-  var HTMLTabTwoElement: {
-    prototype: HTMLTabTwoElement;
-    new (): HTMLTabTwoElement;
-  };
-  interface HTMLElementTagNameMap {
-    "tab-two": HTMLTabTwoElement;
-  }
-  interface ElementTagNameMap {
-    "tab-two": HTMLTabTwoElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "tab-two": JSXElements.TabTwoAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface TabTwoAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-declare global { namespace JSX { interface StencilJSX {} } }

packages/core/scripts/test-components/src/components/page-one/page-one.tsx

@@ -1,21 +0,0 @@
-import { Component } from '@stencil/core';
-
-@Component({
-  tag: 'page-one',
-})
-export class PageOne {
-
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-      <ion-content>
-        page one
-        <a href='#/two/second-page'>Ir a la page 2</a>
-      </ion-content>
-    ];
-  }
-}

packages/core/scripts/test-components/src/components/page-two/page-two.tsx

@@ -1,20 +0,0 @@
-import { Component } from '@stencil/core';
-
-@Component({
-  tag: 'page-two',
-})
-export class PageTwo {
-
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-      <ion-content>
-        this is page two
-      </ion-content>
-    ];
-  }
-}

packages/core/scripts/test-components/src/components/tab-one/tab-one.tsx

@@ -1,20 +0,0 @@
-import { Component } from '@stencil/core';
-
-@Component({
-  tag: 'tab-one',
-})
-export class TabOne {
-
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-      <ion-content>
-        tab one
-      </ion-content>
-    ];
-  }
-}

packages/core/scripts/test-components/src/components/tab-three/tab-three.tsx

@@ -1,20 +0,0 @@
-import { Component } from '@stencil/core';
-
-@Component({
-  tag: 'tab-three',
-})
-export class TabThree {
-
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Tab 3</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-      <ion-content>
-        tab three
-      </ion-content>
-    ];
-  }
-}

packages/core/scripts/test-components/src/components/tab-two/tab-two.tsx

@@ -1,20 +0,0 @@
-import { Component } from '@stencil/core';
-
-@Component({
-  tag: 'tab-two',
-})
-export class TabTwo {
-
-  render() {
-    return [
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Tab two (2)</ion-title>
-        </ion-toolbar>
-      </ion-header>,
-      <ion-content>
-        <ion-nav></ion-nav>
-      </ion-content>
-    ];
-  }
-}

packages/core/scripts/test-components/stencil.config.js

@@ -1,5 +0,0 @@
-exports.config = {
-  generateWWW: true,
-  wwwDir: '../../test-components',
-  serviceWorker: false
-};

packages/core/scripts/test-components/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "allowUnreachableCode": false,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "moduleResolution": "node",
-    "module": "es2015",
-    "target": "es2015",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "jsx": "react",
-    "jsxFactory": "h"
-  },
-  "include": [
-    "src"
-  ]
-}

packages/core/src/components/router/test/basic/index.html

@@ -5,8 +5,101 @@
   <title>Nav</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
-  <script src="/test-components/build/app.js"></script>
+  <script>
 
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page one
+          <a href='#/two/second-page'>Ir a la page 2</a>
+        </ion-content>`;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page two
+        </ion-content>`;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page 3</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page tres
+        </ion-content>`;
+      }
+    }
+
+    class TabOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab one</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          this is the first pahe
+        </ion-content>`;
+      }
+    }
+
+    class TabTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>`;
+      }
+    }
+
+    class TabThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          hey! this is the 3 tab
+        </ion-content>`;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+    customElements.define('tab-one', TabOne);
+    customElements.define('tab-two', TabTwo);
+    customElements.define('tab-three', TabThree);
+  </script>
 </head>
 <body>
 
@@ -48,7 +141,7 @@
         title="Messages"
         icon="chatboxes"
         name="tab-four">
-          <ion-nav></ion-nav>
+        inline tab 4
       </ion-tab>
     </ion-tabs>
 

packages/core/src/components/tab/tab.tsx

@@ -153,6 +153,7 @@ export class Tab {
 
 function attachViewToDom(container: HTMLElement, cmp: string): Promise<any> {
   const el = document.createElement(cmp) as HTMLStencilElement;
+  el.classList.add('ion-page');
   container.appendChild(el);
   if (el.componentOnReady) {
     return el.componentOnReady();