chore(): update to stencil 1.1 (#18609)

.circleci/config.yml

@@ -60,7 +60,7 @@ jobs:
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
-          command: npm run build -- --max-workers 1
+          command: npm run build -- --ci
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core-stencil
       - persist_to_workspace:
@@ -119,7 +119,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.spec
+          command: npm run test.spec --ci
           working_directory: /tmp/workspace/core
 
   test-core-treeshake:
@@ -129,7 +129,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.treeshake
+          command: npm run test.treeshake --ci
           working_directory: /tmp/workspace/core
 
   test-core-screenshot:

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

@@ -10,6 +10,7 @@ describe('form', () => {
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');
+      await waitTime(30);
     });
 
     it('should have default values', async () => {
@@ -81,6 +82,7 @@ describe('form', () => {
   describe('blur', () => {
     beforeEach(async () => {
       await browser.get('/form#blur');
+      await waitTime(30);
     });
 
     it('ion-toggle should change only after blur', async () => {

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

@@ -1,10 +1,11 @@
 import { browser, element, by } from 'protractor';
-import { getProperty, setProperty, handleErrorMessages } from './utils';
+import { getProperty, setProperty, handleErrorMessages, waitTime } from './utils';
 
 describe('inputs', () => {
 
   beforeEach(async () => {
     await browser.get('/inputs');
+    await waitTime(30);
   });
   afterEach(() => {
     handleErrorMessages();

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

@@ -5,6 +5,7 @@ describe('modals', () => {
 
   beforeEach(async () => {
     await browser.get('/modals');
+    await waitTime(30);
   });
   afterEach(() => {
     handleErrorMessages();

angular/test/test-app/e2e/src/router-link.e2e-spec.ts

@@ -50,6 +50,7 @@ describe('router-link', () => {
 
   beforeEach(async () => {
     await browser.get('/router-link');
+    await waitTime(30);
   });
   afterEach(() => {
     handleErrorMessages();

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

@@ -5,6 +5,7 @@ describe('slides', () => {
 
   beforeEach(async () => {
     await browser.get('/slides');
+    await waitTime(30);
   });
   afterEach(() => {
     handleErrorMessages();

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

@@ -8,6 +8,7 @@ describe('tabs', () => {
   describe('entry url - /tabs', () => {
     beforeEach(async () => {
       await browser.get('/tabs');
+      await waitTime(30);
     });
 
     it('should redirect and load tab-account', async () => {
@@ -99,6 +100,7 @@ describe('tabs', () => {
   describe('entry url - /tabs/account/nested/12', () => {
     beforeEach(async () => {
       await browser.get('/tabs/account/nested/12');
+      await waitTime(30);
     });
 
     it('should only display the back-button when there is a page in the stack', async () => {
@@ -118,6 +120,7 @@ describe('tabs', () => {
   describe('entry url - /tabs/lazy', () => {
     beforeEach(async () => {
       await browser.get('/tabs/lazy');
+      await waitTime(30);
     });
 
     it('should not display the back-button if coming from a different stack', async () => {
@@ -134,6 +137,7 @@ describe('tabs', () => {
   describe('enter url - /tabs/contact/one', () => {
     beforeEach(async () => {
       await browser.get('/tabs/contact/one');
+      await waitTime(30);
     });
 
     it('should return to correct tab after going to page in different outlet', async () => {

angular/test/test-app/e2e/src/view-child.e2e-spec.ts

@@ -1,10 +1,11 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages } from './utils';
+import { handleErrorMessages, waitTime } from './utils';
 
 describe('view-child', () => {
 
   beforeEach(async () => {
     await browser.get('/view-child');
+    await waitTime(30);
   });
   afterEach(() => {
     handleErrorMessages();

core/package.json

@@ -30,11 +30,11 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.5.10-1",
+    "ionicons": "4.5.10-2",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.0.7",
+    "@stencil/core": "1.1.2",
     "@stencil/sass": "1.0.0",
     "@types/jest": "24.0.13",
     "@types/node": "10.12.18",
@@ -49,10 +49,10 @@
     "np": "^3.0.4",
     "pixelmatch": "4.0.2",
     "puppeteer": "1.17.0",
-    "rollup": "1.15.2",
-    "rollup-plugin-node-resolve": "5.0.2",
+    "rollup": "1.16.2",
+    "rollup-plugin-node-resolve": "5.1.0",
     "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.21.0",
+    "sass": "^1.22.0",
     "stylelint": "10.1.0",
     "stylelint-order": "3.0.0",
     "swiper": "4.4.6",

core/src/components/datetime/test/datetime.spec.ts

@@ -9,9 +9,9 @@ describe('Datetime', () => {
       const monthvalue = getDateValue({}, 'MM');
       const yearValue = getDateValue({}, 'YYYY');
 
-      expect(dayValue).toEqual(today.getDate());
-      expect(monthvalue).toEqual(today.getMonth() + 1);
-      expect(yearValue).toEqual(today.getFullYear());
+      expect(dayValue).toEqual(today.getUTCDate());
+      expect(monthvalue).toEqual(today.getUTCMonth() + 1);
+      expect(yearValue).toEqual(today.getUTCFullYear());
     });
 
     it('it should return the date value for a given day', () => {
@@ -52,7 +52,7 @@ describe('Datetime', () => {
         expect(convertToLocal.toISOString()).toEqual(expectedDateString);
       });
     });
-    
+
     it('should format a date string and not get affected by the timezone offset', () => {
 
       const dateStringTests = [
@@ -69,14 +69,14 @@ describe('Datetime', () => {
         expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
       });
     });
-    
+
     it('should default to today for null and undefined cases', () => {
       const today = new Date();
       const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )
-      
+
       const convertToLocalUndefined = getLocalDateTime(undefined);
       expect(convertToLocalUndefined.toISOString()).toContain(todayString);
-      
+
       const convertToLocalNull = getLocalDateTime(null);
       expect(convertToLocalNull.toISOString()).toContain(todayString);
     });

core/src/components/reorder-group/test/interactive/e2e.ts

@@ -54,6 +54,7 @@ test('reorder: interactive', async () => {
 async function moveItem(id: string, page: pd.E2EPage, direction: 'up' | 'down' = 'up', numberOfSpaces = 1, ...parentSelectors: string[]) {
   try {
     await moveReorderItem(`#${id}`, page, direction, numberOfSpaces, ...parentSelectors);
+    await page.waitFor(50);
   } catch (err) {
     throw err;
   }

core/src/components/tab-bar/test/basic/e2e.ts

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

core/src/utils/sanitization/test/index.html

@@ -4,11 +4,11 @@
   <meta charset="UTF-8">
   <title>Sanitization</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script></head>
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
   <script type="module">
     import { sanitizeDOMString } from '../../../../dist/collection/utils/sanitization/index.js';
     window.sanitizeDOMString = sanitizeDOMString;

core/stencil.config.ts

@@ -17,7 +17,7 @@ export const config: Config = {
     { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title', 'ion-card-subtitle'] },
     { components: ['ion-checkbox'] },
     { components: ['ion-chip'] },
-    { components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] },
+    { components: ['ion-datetime', 'ion-picker', 'ion-picker-column'] },
     { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
     { components: ['ion-grid', 'ion-row', 'ion-col'] },
     { components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] },
@@ -135,6 +135,7 @@ export const config: Config = {
   testing: {
     allowableMismatchedPixels: 200,
     pixelmatchThreshold: 0.05,
+    waitBeforeScreenshot: 20,
     emulate: [
       {
         userAgent: 'iPhone',

package.json

@@ -19,8 +19,5 @@
     "listr": "^0.14.0",
     "semver": "^5.5.0",
     "turbocolor": "^2.4.1"
-  },
-  "dependencies": {
-    "node-sass": "^4.9.0"
   }
 }