test(tabs): fix tabs tests (#16146)

core/src/components/item/test/inputs/e2e.ts

@@ -11,12 +11,16 @@ test('item: inputs', async () => {
 
   // Disable everything
   await page.click('#btnDisabled');
+  await page.waitFor(250);
+
   compare = await page.compareScreenshot('should disable all');
   expect(compare).toMatchScreenshot();
 
   // Reenable and set some value
   await page.click('#btnDisabled');
   await page.click('#btnSomeValue');
+  await page.waitFor(250);
+
   compare = await page.compareScreenshot('should reenable and set value');
   expect(compare).toMatchScreenshot();
 

core/src/components/loading/test/basic/e2e.ts

@@ -7,8 +7,7 @@ test('loading: basic', async () => {
 
   await page.click('#basic');
   const loading = await page.find('ion-loading');
-  expect(loading).not.toBeNull();
+  await page.waitFor(250);
-
   await loading.waitForVisible();
 
   const compare = await page.compareScreenshot();

core/src/components/tabs/test/basic/e2e.ts

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('tab-group: basic', async () => {
+test('tabs: basic', async () => {
   const page = await newE2EPage({
-    url: '/src/components/tab-group/test/basic?ionic:_testing=true'
+    url: '/src/components/tabs/test/basic?ionic:_testing=true'
   });
 
   let compare = await page.compareScreenshot();
@@ -10,16 +10,16 @@ test('tab-group: basic', async () => {
 
   const button2 = await page.find('.e2eTabTwoButton');
   await button2.click();
-  compare = await page.compareScreenshot();
+  compare = await page.compareScreenshot(`tab two`);
   expect(compare).toMatchScreenshot();
 
   const button3 = await page.find('.e2eTabThreeButton');
   await button3.click();
-  compare = await page.compareScreenshot();
+  compare = await page.compareScreenshot(`tab three, disabled`);
   expect(compare).toMatchScreenshot();
 
   const button4 = await page.find('.e2eTabFourButton');
   await button4.click();
-  compare = await page.compareScreenshot();
+  compare = await page.compareScreenshot(`tab four`);
   expect(compare).toMatchScreenshot();
 });

core/src/components/tabs/test/basic/index.html

@@ -65,18 +65,18 @@
 
       <ion-tab-bar>
         <ion-tab-button href="" tab="tab-one" class="e2eTabOneButton">
-          <ion-label>Plain List</ion-label>
+          <ion-label>Tab One</ion-label>
           <ion-icon name="star"></ion-icon>
         </ion-tab-button>
 
         <ion-tab-button tab="schedule" class="e2eTabTwoButton">
-          <ion-label>Schedule</ion-label>
+          <ion-label>Tab Two</ion-label>
           <ion-icon name="globe"></ion-icon>
           <ion-badge color="danger">6</ion-badge>
         </ion-tab-button>
 
         <ion-tab-button tab="tab-three" class="e2eTabThreeButton" disabled>
-          <ion-label>Stopwatch</ion-label>
+          <ion-label>Tab Three</ion-label>
           <ion-icon name="logo-facebook"></ion-icon>
           <ion-badge color="primary">6</ion-badge>
         </ion-tab-button>
@@ -87,7 +87,7 @@
         </ion-tab-button>
 
         <ion-tab-button tab="tab-four" class="e2eTabFourButton">
-          <ion-label>Messages</ion-label>
+          <ion-label>Tab Four</ion-label>
           <ion-icon name="chatboxes"></ion-icon>
         </ion-tab-button>
 

core/src/components/tabs/test/basic/readme.md

@@ -1,11 +0,0 @@
-# page-tab
-
-
-
-<!-- Auto Generated Below -->
-
-
-
-----------------------------------------------
-
-*Built by [StencilJS](https://stenciljs.com/)*

core/src/components/tabs/test/nav/e2e.js

@@ -1,146 +0,0 @@
-// 'use strict';
-
-// const expect = require('chai').expect;
-// const { register, Page, platforms } = require('../../../../../scripts/e2e');
-// const { getElement, waitAndGetElementById, waitForTransition } = require('../../../../../scripts/e2e/utils');
-
-// class E2ETestPage extends Page {
-//   constructor(driver, platform) {
-//     super(driver, `http://localhost:3333/src/components/tabs/test/nav?ionic:mode=${platform}`);
-//   }
-// }
-
-// platforms.forEach(platform => {
-//   describe('tabs/nav', () => {
-//     register('should init', driver => {
-//       const page = new E2ETestPage(driver, platform);
-//       return page.navigate();
-//     });
-
-//     register('should push three pages on each nav stack', async (driver, testContext) => {
-
-//       testContext.timeout(60000);
-//       const page = new E2ETestPage(driver, platform);
-
-//       await waitForTransition(300);
-
-//       console.log('On Tab One Page One');
-//       const tabOnePageOneNextButtonSelector = 'page-one ion-button.next.hydrated';
-//       const tabOnePageOneNextButton = await getElement(driver, tabOnePageOneNextButtonSelector);
-//       tabOnePageOneNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab One Page Two');
-//       const tabOnePageTwoNextButtonSelector = 'page-two ion-button.next.hydrated';
-//       const tabOnePageTwoNextButton = await getElement(driver, tabOnePageTwoNextButtonSelector);
-//       tabOnePageTwoNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab One Page Three');
-
-//       console.log('Switching to Tab Two');
-//       const tabTwoButton = await waitAndGetElementById(driver, 'tab-t-0-1');
-//       tabTwoButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page One');
-//       const tabTwoPageOneNextButtonSelector = 'page-four ion-button.next.hydrated';
-//       const tabTwoPageOneNextButton = await getElement(driver, tabTwoPageOneNextButtonSelector);
-//       tabTwoPageOneNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page Two');
-//       const tabTwoPageTwoNextButtonSelector = 'page-five ion-button.next.hydrated';
-//       const tabTwoPageTwoNextButton = await getElement(driver, tabTwoPageTwoNextButtonSelector);
-//       tabTwoPageTwoNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab two Page Three');
-
-//       console.log('Switching to Tab Three');
-//       const tabThreeButton = await waitAndGetElementById(driver, 'tab-t-0-2');
-//       tabThreeButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page One');
-//       const tabThreePageOneNextButtonSelector = 'page-seven ion-button.next.hydrated';
-//       const tabThreePageOneNextButton = await getElement(driver, tabThreePageOneNextButtonSelector);
-//       tabThreePageOneNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page Two');
-//       const tabThreePageTwoNextButtonSelector = 'page-eight ion-button.next.hydrated';
-//       const tabThreePageTwoNextButton = await getElement(driver, tabThreePageTwoNextButtonSelector);
-//       tabThreePageTwoNextButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page Three');
-
-//       console.log('Switching to Tab One');
-//       const tabOneButton = await waitAndGetElementById(driver, 'tab-t-0-0');
-//       tabOneButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab One Page Three');
-//       const tabOnePageThreeBackButtonSelector = 'page-three ion-button.back.hydrated';
-//       const tabOnePageThreeBackButton = await getElement(driver, tabOnePageThreeBackButtonSelector);
-//       tabOnePageThreeBackButton.click();
-//       await waitForTransition(600);
-
-//       console.log('Switching to Tab Three');
-//       tabThreeButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page Three');
-//       const tabThreePageThreeBackButtonSelector = 'page-nine ion-button.back.hydrated';
-//       const tabThreePageThreeBackButton = await getElement(driver, tabThreePageThreeBackButtonSelector);
-//       tabThreePageThreeBackButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page Two');
-
-//       console.log('Switching to Tab Two');
-//       tabTwoButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page Three');
-//       const tabTwoPageThreeBackButtonSelector = 'page-six ion-button.back.hydrated';
-//       const tabTwoPageThreeBackButton = await getElement(driver, tabTwoPageThreeBackButtonSelector);
-//       tabTwoPageThreeBackButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page Two');
-//       const tabTwoPageTwoBackButtonSelector = 'page-five ion-button.back.hydrated';
-//       const tabTwoPageTwoBackButton = await getElement(driver, tabTwoPageTwoBackButtonSelector);
-//       tabTwoPageTwoBackButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Two Page One');
-
-//       console.log('Switching to Tab One');
-//       tabOneButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab One Page Two');
-//       const tabOnePageTwoBackButtonSelector = 'page-two ion-button.back.hydrated';
-//       const tabOnePageTwoBackButton = await getElement(driver, tabOnePageTwoBackButtonSelector);
-//       tabOnePageTwoBackButton.click();
-
-//       await waitForTransition(600);
-
-//       console.log('On Tab One Page One');
-
-//       console.log('Switching to Tab Three');
-//       tabThreeButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page Two');
-//       const tabThreePageTwoBackButtonSelector = 'page-eight ion-button.back.hydrated';
-//       const tabThreePageTwoBackButton = await getElement(driver, tabThreePageTwoBackButtonSelector);
-//       tabThreePageTwoBackButton.click();
-//       await waitForTransition(600);
-
-//       console.log('On Tab Three Page One');
-//     });
-//   });
-// });

core/src/components/tabs/test/nav/index.html

@@ -1,289 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Tab - Nav</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-  <script type="text/javascript">
-    window.Ionic.config = { useRouter: true };
-  </script>
-  <script>
-
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = this.getHtml();
-
-        const nextButton = this.querySelector('ion-button.next');
-        if (nextButton) {
-          nextButton.addEventListener('click', () => {
-            this.goToNext();
-          });
-        }
-
-        const backButton = this.querySelector('ion-button.back');
-        if (backButton) {
-          backButton.addEventListener('click', () => {
-            this.goBack();
-          });
-        }
-      }
-
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page One</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page One
-            <div>
-              <ion-button class="next">Go to Page Two</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      goToNext() {
-        const nav = this.closest('ion-nav');
-        nav.push(this.getNextPage());
-      }
-
-      getNextPage() {
-        return 'page-two';
-      }
-
-      goBack() {
-        const nav = this.closest('ion-nav');
-        nav.pop();
-      }
-    }
-
-    class PageTwo extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Two</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Two
-            <div>
-              <ion-button class="next">Go to Page Three</ion-button>
-            </div>
-            <div>
-              <ion-button class="back">Go Back</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      getNextPage() {
-        return 'page-three';
-      }
-    }
-
-    class PageThree extends PageOne {
-      getHtml() {
-        return `
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Page Three</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content padding>
-          Page Three
-          <div>
-            <ion-button class="back">Go Back</ion-button>
-          </div>
-        </ion-content>
-        `;
-      }
-    }
-
-    class PageFour extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Four</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Four
-            <div>
-              <ion-button class="next">Go to Page Five</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      getNextPage() {
-        return 'page-five';
-      }
-    }
-
-    class PageFive extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Five</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Five
-            <div>
-              <ion-button class="next">Go to Page Six</ion-button>
-            </div>
-            <div>
-              <ion-button class="back">Go Back</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      getNextPage() {
-        return 'page-six';
-      }
-    }
-
-    class PageSix extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Six</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Six
-            <div>
-              <ion-button class="back">Go Back</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-    }
-
-    class PageSeven extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Seven</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Seven
-            <div>
-              <ion-button class="next">Go to Page Eight</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      getNextPage() {
-        return 'page-eight';
-      }
-    }
-
-    class PageEight extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Eight</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Eight
-            <div>
-              <ion-button class="next">Go to Page Nine</ion-button>
-            </div>
-            <div>
-              <ion-button class="back">Go Back</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-
-      getNextPage() {
-        return 'page-nine';
-      }
-    }
-
-    class PageNine extends PageOne {
-      getHtml() {
-        return `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Page Nine</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content padding>
-            Page Nine
-            <div>
-              <ion-button class="back">Go Back</ion-button>
-            </div>
-          </ion-content>
-        `;
-      }
-    }
-
-
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-    customElements.define('page-three', PageThree);
-    customElements.define('page-four', PageFour);
-    customElements.define('page-five', PageFive);
-    customElements.define('page-six', PageSix);
-    customElements.define('page-seven', PageSeven);
-    customElements.define('page-eight', PageEight);
-    customElements.define('page-nine', PageNine);
-
-  </script>
-</head>
-
-<body>
-
-  <ion-app>
-    <ion-tabs>
-      <ion-tab tab="plain-list">
-        <ion-nav root="page-one"></ion-nav>
-      </ion-tab>
-
-      <ion-tab tab="schedule">
-        <ion-nav root="page-four"></ion-nav>
-      </ion-tab>
-
-      <ion-tab tab="stopwatch">
-        <ion-nav root="page-seven"></ion-nav>
-      </ion-tab>
-
-      <ion-tab-bar>
-        <ion-tab-button tab="plain-list">
-          <ion-label>Plain List</ion-label>
-          <ion-icon name="star"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="schedule">
-          <ion-label>Schedule</ion-label>
-          <ion-icon name="globe"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="stopwatch">
-          <ion-label>Stopwatch</ion-label>
-          <ion-icon name="logo-facebook"></ion-icon>
-        </ion-tab-button>
-      </ion-tab-bar>
-    </ion-tabs>
-  </ion-app>
-</body>
-
-</html>

core/src/components/tabs/test/placements/e2e.ts

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('tab-group: placements', async () => {
+test('tab: placements', async () => {
   const page = await newE2EPage({
-    url: '/src/components/tab-group/test/placements?ionic:_testing=true'
+    url: '/src/components/tabs/test/placements?ionic:_testing=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/tabs/test/placements/readme.md

@@ -1,11 +0,0 @@
-# page-tab
-
-
-
-<!-- Auto Generated Below -->
-
-
-
-----------------------------------------------
-
-*Built by [StencilJS](https://stenciljs.com/)*