test(e2e): port e2e tests to @ionic/core (#13438)

* feat(e2e-tests) simplify e2e test structure

* test(badge) add basic e2e test

* test(button) update e2e test to new structure

* test(card) add basic e2e test

* test(checkbox) add basic e2e test

* chore(e2e-test) update path to e2e module in run-e2e

* fix(button) update toolbar e2e deps

* fix(e2e-test) update path in snapshot script

* feat(e2e-test) move e2e scripts into scripts/e2e

* test(chip) add basic e2e test

* test(content) add basic e2e test

* test(datetime) add basic e2e test

* style(e2e-test) use consistent title/header in e2e test pages

* test(fab) add basic e2e test

* fix(e2e-test) don't run e2e script when required

* test(grid) add basic e2e test

* test(icon) add basic e2e test

* test(input) add basic e2e test

* style(e2e-test) use consistent e2e test header titles

* test(list) add basic e2e test

* test(menu) add basic e2e test

* test(modal) add basic e2e test

* feat(e2e-test) add navigate export to e2e module

* feat(e2e-test) add present method to Page class

* test(popover) add basic e2e test

* test(menu) add present left menu e2e test

* test(radio) add basic e2e test

* test(range) add  basic e2e test

* test(searchbar) add basic e2e test

* test(segment) add basic e2e test

* test(select) add basic e2e test

* test(modal) add shows modal e2e test

* test(slides) add basic e2e test

* test(spinner) add basic/color e2e tests

* test(tabs) add basic e2e test

* test(toast) add basic e2e test

* test(toggle) add basic e2e test

* test(toolbar) add basic e2e test

* docs(e2e-test) update e2e readme to reflect simplest test

* test(card) update basic e2e test

* chore(e2e-test) remove run-e2e script

* test(components): move remaining component tests to index files

* chore(package): add mocha to devDependencies

* test(infinite-scroll) add basic e2e test

* test(item-sliding) add basic e2e test

* test(item) add basic/buttons e2e tests

* test(nav) add basic e2e test

* test(reorder) add basic e2e test

* test(split-pane) add basic e2e test

* chore() update declarations file

* refactor(toast): reduce border-radius

* chore(components): update components.d.ts

packages/core/scripts/e2e/README.md

@@ -20,13 +20,10 @@ In general, writing an end-to-end tests consists of the following steps:
 The most basic end-to-end test just navigates to the page in order to verify that it draws properly. In this case, it is not necessary to extend the E2ETestPage class. The base class contains a navigate method that goes to the page and waits for it to load. The test just needs to instantiate the page with the proper URL and call the navigate. Such a test looks like this:
 
 ```ts
-const { register, Page } = require('../../../../scripts/e2e');
+const { register, navigate } = require('../../../../scripts/e2e');
 
 describe('button: basic', () => {
-  register('navigates', driver => {
-    const page = new Page(driver, 'http://localhost:3333/src/components/button/test/basic/index.html');
-    return page.navigate();
-  });
+  register('navigates', navigate('http://localhost:3333/src/components/button/test/basic'));
 });
 ```
 
@@ -38,7 +35,7 @@ const { register, Page } = require('../../../../scripts/e2e');;
 
 class ActionSheetE2ETestPage extends Page {
   constructor(driver) {
-    super(driver, 'http://localhost:3333/src/components/action-sheet/test/basic/index.html');
+    super(driver, 'http://localhost:3333/src/components/action-sheet/test/basic');
   }
 
   present(buttonId) {
@@ -84,4 +81,4 @@ To run the tests, just use npm from the `packages/core` directory under the `ion
 1. turn off animations and then adjust the wait time accordingly
 1. adjustments will likely be needed when the Snapshot tool has better reporting, for example the tool will likely have `start` and `finish` methods (or some such thing)
 1. cycle through the various platforms (or at least iOS and Android) like the current `ionic-angular` does (I think that is currently handled via `gulp`, needs to be looked into)
-1. the current Snapshots seem to have some funky boardering issues when uploaded, may need to look into that
+1. the current Snapshots seem to have some funky boardering issues when uploaded, may need to look into that

packages/core/scripts/e2e/e2e-test-page.js

@@ -13,4 +13,11 @@ module.exports = class E2ETestPage {
     this.driver.wait(until.elementLocated(By.css('.hydrated')));
     return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.hydrated'))));
   }
+
+  present(clickTarget, options) {
+    this.navigate();
+    this.driver.findElement(By.css(clickTarget)).click();
+    this.driver.wait(until.elementLocated(By.css(options.waitFor)));
+    return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css(options.waitFor))));
+  }
 }

packages/core/scripts/e2e/index.js

@@ -6,8 +6,8 @@ const Mocha = require('mocha');
 const path = require('path');
 const webdriver = require('selenium-webdriver');
 
-const Page = require('./E2ETestPage');
-const Snapshot = require('./Snapshot');
+const Page = require('./e2e-test-page');
+const Snapshot = require('./snapshot');
 
 let driver;
 let snapshot;
@@ -33,7 +33,7 @@ function generateTestId() {
 
 function getTestFiles() {
   return new Promise((resolve, reject) => {
-    const src = path.join(__dirname, '../src/**/e2e.js');
+    const src = path.join(__dirname, '../../src/**/e2e.js');
     glob(src, (err, files) => {
       if (err) {
         reject(err);
@@ -124,8 +124,16 @@ async function run() {
   });
 }
 
+const navigate = url => driver => new Page(driver, url).navigate();
+
+// Invoke run() only if executed directly i.e. `node ./scripts/e2e`
+if (require.main === module) {
+  run();
+}
+
 module.exports = {
   Page,
+  navigate,
   register: registerE2ETest,
   run: run
 };

packages/core/scripts/run-e2e.js

@@ -1,3 +0,0 @@
-'use strict';
-
-require('./e2e').run();