chore(e2e): update e2e scripts

scripts/build/config.js

@@ -26,9 +26,9 @@ module.exports = {
   autoprefixer: {
     browsers: [
       'last 2 versions',
-      'iOS >= 7',
+      'iOS >= 8',
-      'Android >= 4',
+      'Android >= 4.4',
-      'Explorer >= 10',
+      'Explorer >= 11',
       'ExplorerMobile >= 11'
     ],
     cascade: false

scripts/e2e/e2e-publish.js

@@ -4,7 +4,7 @@ module.exports = function(options) {
   var fs = require('fs');
   var path = require('path');
   var request = require('request');
-  var inputDir = path.join(__dirname, '../../dist');
+  var inputDir = path.join(__dirname, '../../dist/e2e/tests');
   var uploadQueue = [];
 
   var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
@@ -13,17 +13,16 @@ module.exports = function(options) {
     fs.readdir(dir, function(err, list) {
 
       list.forEach(function(file) {
-        var url = urlPath + '/' + file
+        var url = urlPath + '/' + file;
 
-        if (ignoreFiles.test(url)) {
-          return;
-        }
 
         fs.stat(dir + '/' + file, function(err, stat) {
           if (stat && stat.isDirectory()) {
             uploadFiles(dir + '/' + file, urlPath + '/' + file);
           } else {
-            uploadFile(url, dir + '/' + file);
+            if ( shouldProcessPath (url) ){
+              uploadFile(url, dir + '/' + file);
+            }
           }
         });
 
@@ -124,6 +123,17 @@ module.exports = function(options) {
     );
   }
 
+  function shouldProcessPath(urlPath) {
+    if ( urlPath && urlPath.length > 0 ) {
+      var cleanedUpString = urlPath.substring(1);
+      var tokens = cleanedUpString.split('/');
+      // {component}/test/{testName}/{file}
+      var extension = path.extname(cleanedUpString);
+      return tokens && tokens.length > 3 && tokens[1] === 'test' && ( extension === '.html' || extension === '.js' );
+    }
+    return false;
+  }
+
   console.log('Uploading e2e tests:', options.testId);
   uploadFiles(inputDir, '');
 };

scripts/e2e/e2e.shared.css

@@ -0,0 +1,266 @@
+.snapshot body {
+  /* crop an exact size */
+  max-height: 700px !important;
+}
+.snapshot .scroll-content {
+  /* disable scrollbars */
+  overflow: hidden !important;
+}
+.snapshot ::-webkit-scrollbar {
+  display: none;
+}
+.snapshot *,
+.snapshot *:before,
+.snapshot *:after {
+  /* do not allow css animations during snapshot */
+  -webkit-transition-duration: 0ms !important;
+  transition-duration: 0ms !important;
+}
+.snapshot .button-effect {
+  display: none !important;
+}
+
+/* hack to create tall scrollable areas for testing using <div f></div> */
+div[f] {
+  display: block;
+  margin: 15px auto;
+  max-width: 150px;
+  height: 150px;
+  background: blue;
+}
+div[f]:last-of-type {
+  background: red;
+}
+ion-tab:nth-of-type(2) div[f],
+.green div[f] {
+  background: green;
+  max-width: 250px;
+  height: 100px;
+}
+ion-tab:nth-of-type(3) div[f],
+.yellow div[f] {
+  background: yellow;
+  width: 100px;
+  height: 50px;
+}
+
+
+/********************
+ e2e-stacked-tabbars
+*********************/
+.e2e-stacked-tabbars ion-tabs {
+  margin-bottom: 20px;
+}
+
+.e2e-stacked-tabbars ion-tabs,
+.e2e-stacked-tabbars ion-tabs .tabbar {
+  position: relative;
+  top: auto;
+  height: auto;
+  visibility: visible;
+  opacity: 1;
+}
+
+
+/********************
+ e2e-loading
+*********************/
+.e2e-loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.e2e-loading .fixed-spinner svg {
+  animation: none;
+}
+
+.e2e-loading .custom-spinner-container {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.e2e-loading .custom-spinner-box {
+  position: relative;
+  box-sizing: border-box;
+  border: 4px solid #000;
+  width: 60px;
+  height: 60px;
+  animation: spin 3s infinite linear;
+}
+
+.e2e-loading .custom-spinner-box:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  border: 4px solid #000;
+  width: 40px;
+  height: 40px;
+  animation: pulse 1.5s infinite ease;
+}
+
+.e2e-loading .wp .custom-spinner-box,
+.e2e-loading .wp .custom-spinner-box:before {
+  border-color: #fff;
+}
+
+@-webkit-keyframes pulse {
+  50% {
+    border-width: 20px;
+  }
+}
+@keyframes pulse {
+  50% {
+    border-width: 20px;
+  }
+}
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+
+/********************
+ e2e-loading
+*********************/
+.e2e-popover-basic {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.e2e-popover-basic .text-to-change div {
+  margin: 10px auto;
+}
+
+.e2e-popover-basic ion-row,
+.e2e-popover-basic ion-col {
+  padding: 0;
+}
+
+.e2e-popover-basic .text-button {
+  padding-left: 0;
+  text-align: center;
+  min-height: 20px;
+  line-height: 18px;
+}
+
+.e2e-popover-basic .text-button .item-inner {
+  padding-right: 0;
+}
+
+.e2e-popover-basic .text-smaller {
+  font-size: 12px;
+}
+
+.e2e-popover-basic .ios .text-smaller {
+  border-right: 1px solid #c8c7cc;
+}
+
+.md.e2e-popover-basic  .text-smaller {
+  border-right: 1px solid #dedede;
+}
+
+.e2e-popover-basic .text-larger {
+  font-size: 16px;
+}
+
+.e2e-popover-basic .row-dots {
+  text-align: center;
+}
+
+.ios .e2e-popover-basic .row-dots {
+  border-bottom: 1px solid #c8c7cc;
+}
+
+.md .e2e-popover-basic .row-dots {
+  border-bottom: 1px solid #dedede;
+}
+
+.ios .e2e-popover-basic .dot {
+  border: 1px solid #c8c7cc;
+}
+
+.md .e2e-popover-basic .dot {
+  border: 1px solid #dedede;
+}
+
+.wp .e2e-popover-basic .dot {
+  border: 2px solid #ccc;
+}
+
+.hairlines .e2e-popover-basic .text-smaller,
+.hairlines .e2e-popover-basic .row-dots,
+.hairlines .e2e-popover-basic .dot {
+  border-width: 0.55px;
+}
+
+.e2e-popover-basic .row-dots .dot {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  margin: 10px auto;
+  position: relative;
+}
+
+.e2e-popover-basic .dot-white {
+  background-color: rgb(255,255,255);
+}
+
+.e2e-popover-basic .dot-tan {
+  background-color: rgb(249,241,228);
+}
+
+.e2e-popover-basic .dot-grey {
+  background-color: rgb(76,75,80);
+}
+
+.e2e-popover-basic .dot-black {
+  background-color: rgb(0,0,0);
+}
+
+.e2e-popover-basic .dot.selected {
+  border-width: 2px;
+  border-color: #327eff;
+}
+
+.e2e-popover-basic .text-athelas {
+  font-family: "Athelas";
+}
+
+.e2e-popover-basic .text-charter {
+  font-family: "Charter";
+}
+
+.e2e-popover-basic .text-iowan {
+  font-family: "Iowan";
+}
+
+.e2e-popover-basic .text-palatino {
+  font-family: "Palatino";
+}
+
+.e2e-popover-basic .text-san-francisco {
+  font-family: "San Francisco";
+}
+
+.e2e-popover-basic .text-seravek {
+  font-family: "Seravek";
+}
+
+.e2e-popover-basic .text-times-new-roman {
+  font-family: "Times New Roman";
+}

scripts/e2e/e2e.template.html

@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-<head>
-  <title>Ionic E2E</title>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
-  <!-- using relative paths in order for snapshot e2e tests to also work -->
-  <link id="iosLink" ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
-  <link id="mdLink" md-href="../../../bundles/ionic.md.css" rel="stylesheet">
-  <link id="wpLink" wp-href="../../../bundles/ionic.wp.css" rel="stylesheet">
-
-  <script>
-    if (location.href.indexOf('snapshot=true') > -1) {
-      document.documentElement.classList.add('snapshot');
-    } else {
-      document.documentElement.classList.remove('snapshot');
-    }
-    if (location.href.indexOf('cordova=true') > -1) {
-      window.cordova = {};
-    }
-    if (location.href.indexOf('rtl=true') > -1) {
-      document.dir = 'rtl';
-    } else {
-      document.dir = 'ltr';
-    }
-
-    // dynamically change the <link>s href so the e2e tests can use dark themes via querystring
-    if (location.href.indexOf('theme=dark') > -1) {
-      var link = document.getElementById('iosLink');
-      link.setAttribute('ios-href', link.getAttribute('ios-href').replace('.css', '.dark.css'));
-      link = document.getElementById('mdLink');
-      link.setAttribute('md-href', link.getAttribute('md-href').replace('.css', '.dark.css'));
-      link = document.getElementById('wpLink');
-      link.setAttribute('wp-href', link.getAttribute('wp-href').replace('.css', '.dark.css'));
-    }
-  </script>
-
-  <script src="../../../js/es6-shim.min.js"></script>
-  <script src="../../../js/es6-module-loader.src.js"></script>
-  <script src="../../../js/Reflect.js"></script>
-  <script src="../../../js/zone.js"></script>
-  <script src="../../../js/system.src.js"></script>
-  <script>
-    System.config({
-      map: {
-        '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
-        '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
-        '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
-        '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
-        '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
-        '@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
-        '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-        'ionic-angular': '/src'
-      },
-      packages: {
-        'ionic-angular': {
-          main: 'index'
-        },
-        'rxjs': {
-          defaultExtension: 'js'
-        }
-      }
-    });
-  </script>
-  <script src="../../../bundles/ionic.system.js"></script>
-  <script src="../../../js/Rx.js"></script>
-
-  <style>
-    .snapshot body {
-      /* crop an exact size */
-      max-height: 700px !important;
-    }
-    .snapshot scroll-content {
-      /* disable scrollbars */
-      overflow: hidden !important;
-    }
-    .snapshot ::-webkit-scrollbar {
-      display: none;
-    }
-    .snapshot *,
-    .snapshot *:before,
-    .snapshot *:after {
-      /* do not allow css animations during snapshot */
-      -webkit-transition-duration: 0ms !important;
-      transition-duration: 0ms !important;
-    }
-    .snapshot ion-button-effect {
-      display: none !important;
-    }
-
-    /* hack to create tall scrollable areas for testing using <f></f> */
-    f {
-      display: block;
-      margin: 15px auto;
-      max-width: 150px;
-      height: 150px;
-      background: blue;
-    }
-    f:last-of-type {
-      background: red;
-    }
-    ion-tab:nth-of-type(2) f,
-    .green f {
-      background: green;
-      max-width: 250px;
-      height: 100px;
-    }
-    ion-tab:nth-of-type(3) f,
-    .yellow f {
-      background: yellow;
-      width: 100px;
-      height: 50px;
-    }
-  </style>
-</head>
-<body>
-
-  <ion-app>
-  </ion-app>
-
-  <script>
-    if (document.dir === 'rtl') {
-      document.body.classList.add('rtl');
-    } else {
-      document.body.classList.remove('rtl');
-    }
-    System.import('index.js').then(function(m) {}, console.error.bind(console));
-  </script>
-
-</body>
-</html>

scripts/e2e/e2e.template.js

@@ -1,7 +1,7 @@
 describe('<%= relativePath %>: <%= platform %>', function() {
 
 it('should init', function() {
-  browser.get('http://localhost:<%= buildConfig.protractorPort %>/dist/e2e/<%= relativePath %>/index.html?ionicplatform=<%= platform %>&ionicOverlayCreatedDiff=0&ionicanimate=false&snapshot=true');
+  browser.get('http://localhost:<%= buildConfig.protractorPort %>/dist/e2e/components/<%= relativePath %>/index.html?ionicplatform=<%= platform %>&ionicOverlayCreatedDiff=0&ionicanimate=false&snapshot=true');
 });
 
 <%= contents %>

scripts/e2e/entry.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app-module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

scripts/e2e/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Ionic E2E</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link id="ionicLink" href="../../../../css/ionic.css" rel="stylesheet">
+  <link href="../../../../css/e2e.shared.css" rel="stylesheet">
+
+  <script>
+    if (location.href.indexOf('snapshot=true') > -1) {
+      document.documentElement.classList.add('snapshot');
+    } else {
+      document.documentElement.classList.remove('snapshot');
+    }
+
+    if (location.href.indexOf('cordova=true') > -1) {
+      window.cordova = {};
+    }
+
+    if (location.href.indexOf('rtl=true') > -1) {
+      document.dir = 'rtl';
+    } else {
+      document.dir = 'ltr';
+    }
+
+    if (location.href.indexOf('theme=dark') > -1) {
+      var link = document.getElementById('ionicLink');
+      link.setAttribute('href', link.getAttribute('href').replace('.css', '.dark.css'));
+    }
+  </script>
+</head>
+<body>
+
+  <ion-app></ion-app>
+
+  <script>
+    if (document.dir === 'rtl') {
+      document.body.classList.add('rtl');
+    } else {
+      document.body.classList.remove('rtl');
+    }
+  </script>
+  <script src="/webpack-dev-server.js"></script>
+  <script src="../../../../polyfills.js"></script>
+  <script src="../../../../vendor.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>

scripts/e2e/ionic.ios.dark.scss

@@ -1,6 +0,0 @@
-
-// For E2E dark theme tests
-
-@import "../../src/themes/dark.ios.scss";
-
-@import "../../src/ionic.ios.scss";

scripts/e2e/ionic.md.dark.scss

@@ -1,6 +0,0 @@
-
-// For E2E dark theme tests
-
-@import "../../src/themes/dark.md.scss";
-
-@import "../../src/ionic.md.scss";

scripts/e2e/ionic.wp.dark.scss

@@ -1,6 +0,0 @@
-
-// For E2E dark theme tests
-
-@import "../../src/themes/dark.wp.scss";
-
-@import "../../src/ionic.wp.scss";

scripts/e2e/ngcConfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "moduleResolution": "node",
+    "declaration": true,
+    "noImplicitAny": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true
+  },
+  "angularCompilerOptions": {
+    "skipMetadataEmit": true
+  }
+}

scripts/e2e/polyfills.js

@@ -0,0 +1,5 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/proxy';
+import 'zone.js/dist/long-stack-trace-zone';

scripts/e2e/vendor.js

@@ -0,0 +1,10 @@
+// Angular 2
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/common';
+import '@angular/core';
+import '@angular/http';
+
+// RxJS
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/mergeMap';

scripts/e2e/webpack.config.js

@@ -1,30 +1,34 @@
+var entryData = require('./webpackEntryPoints.json');
+var path = require('path')
+
+entryData["dist/e2e/vendor"] = "./scripts/e2e/vendor";
+entryData["dist/e2e/polyfills"] = "./scripts/e2e/polyfills";
+
 module.exports = {
-  externals: [
+  devtool: "source-map",
-    {
+
-      'src/ionic': {
+  entry: entryData,
-        commonjs2: 'src/ionic'
+
-      },
+  output: {
-      '@angular/core': {
+    "path": path.join(__dirname, '../../'),
-        commonjs2: ['angular2', 'core']
+    "filename": "[name].js"
-      },
-      '@angular/common': {
-        commonjs2: ['angular2', 'common']
-      },
-      '@angular/forms' : {
-        commonjs2: ['angular2', 'forms']
-      },
-      '@angular/http': {
-        commonjs2: ['angular2', 'http']
-      },
-      '@angular/platform-browser-dynamic': {
-        commonjs2: ['angular2', 'platform', 'browser']
-      },
-    }
-  ],
-  module: {
-    loaders: [{ test: /\.ts$/, loader: "awesome-typescript-loader" }]
   },
+
   resolve: {
-    extensions: ["", ".js", ".ts"]
+    extensions: ["", ".js", ".json"],
-  }
+    mainFields: ["module", "browser"]
+  },
+
+  module: {
+    loaders: [
+      {
+        test   : /\.css$/,
+        loader : 'file-loader?config=cssLoader'
+      }
+    ]
+  },
+
+  cssLoader: {
+    name: 'test/css/[name]-[hash].[ext]'
+  },
 };