diff --git a/.circleci/config.yml b/.circleci/config.yml index bbf20ec182..e06a47bc8f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -181,6 +181,16 @@ jobs: command: npm run lint working_directory: /tmp/workspace/core + test-core-e2e: + <<: *defaults + steps: + - checkout + - attach_workspace: + at: /tmp/workspace + - run: + command: npm run test.e2e --ci + working_directory: /tmp/workspace/core + test-core-spec: <<: *defaults steps: @@ -318,6 +328,8 @@ workflows: requires: [build-core] - test-core-lint: requires: [build-core] + - test-core-e2e: + requires: [build-core] - test-core-spec: requires: [build-core] - test-core-treeshake: diff --git a/angular/test/test-app/e2e/protractor.conf.js b/angular/test/test-app/e2e/protractor.conf.js index d86cb66e4d..a625aa0124 100644 --- a/angular/test/test-app/e2e/protractor.conf.js +++ b/angular/test/test-app/e2e/protractor.conf.js @@ -23,7 +23,7 @@ exports.config = { framework: 'jasmine', jasmineNodeOpts: { showColors: true, - defaultTimeoutInterval: 30000, + defaultTimeoutInterval: 50000, print: function() {} }, onPrepare() { diff --git a/core/src/components/footer/test/translucent/e2e.ts b/core/src/components/footer/test/translucent/e2e.ts index 5ee2922356..c70b74f68c 100644 --- a/core/src/components/footer/test/translucent/e2e.ts +++ b/core/src/components/footer/test/translucent/e2e.ts @@ -7,7 +7,8 @@ test('footer: translucent', async () => { url: '/src/components/footer/test/translucent?ionic:_testing=true' }); - await checkComponentModeClasses(await page.find('ion-footer'), 'footer-translucent'); + const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); + await checkComponentModeClasses(await page.find('ion-footer'), globalMode!, 'footer-translucent'); const compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); diff --git a/core/src/components/header/test/translucent/e2e.ts b/core/src/components/header/test/translucent/e2e.ts index dcc2964855..50bfd89931 100644 --- a/core/src/components/header/test/translucent/e2e.ts +++ b/core/src/components/header/test/translucent/e2e.ts @@ -7,7 +7,8 @@ test('header: translucent', async () => { url: '/src/components/header/test/translucent?ionic:_testing=true' }); - await checkComponentModeClasses(await page.find('ion-header'), 'header-translucent'); + const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); + await checkComponentModeClasses(await page.find('ion-header'), globalMode!, 'header-translucent'); const compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); diff --git a/core/src/components/toast/test/buttons/e2e.ts b/core/src/components/toast/test/buttons/e2e.ts index 0aefddec1b..9e401b49dd 100644 --- a/core/src/components/toast/test/buttons/e2e.ts +++ b/core/src/components/toast/test/buttons/e2e.ts @@ -2,10 +2,6 @@ import { testToast } from '../test.utils'; const DIRECTORY = 'buttons'; -test('toast: buttons, close property', async () => { - await testToast(DIRECTORY, '#closeProp'); -}); - test('toast: buttons, close array', async () => { await testToast(DIRECTORY, '#closeArray'); }); @@ -26,10 +22,6 @@ test('toast: buttons, long button', async () => { * RTL Tests */ -test('toast:rtl: buttons, close property', async () => { - await testToast(DIRECTORY, '#closeProp', true); -}); - test('toast:rtl: buttons, close array', async () => { await testToast(DIRECTORY, '#closeArray', true); }); diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts index 7dde3dc694..e9ac09a979 100644 --- a/core/src/utils/test/modes/e2e.ts +++ b/core/src/utils/test/modes/e2e.ts @@ -40,9 +40,10 @@ test('component: modes', async () => { // e.g. tags = ['ion-card-content', 'ion-footer', 'ion-header', 'ion-infinite-scroll-content', 'ion-item-group', 'ion-item-options', 'ion-list', 'ion-picker', 'ion-refresher', 'ion-slides', 'ion-split-pane']; + const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); for (const tag of tags) { const el = await page.find(tag); - await checkComponentModeClasses(el); + await checkComponentModeClasses(el, globalMode!); } // Fourth test: .{mode} class @@ -52,7 +53,6 @@ test('component: modes', async () => { // e.g. tags = ['ion-action-sheet', 'ion-alert', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-router-link', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar']; - const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); for (const tag of tags) { await page.waitForSelector(tag); const el = await page.find(tag); diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts index 9cba4a1b98..bcd01344f5 100644 --- a/core/src/utils/test/utils.ts +++ b/core/src/utils/test/utils.ts @@ -120,20 +120,21 @@ export const queryDeep = async (page: E2EPage, ...selectors: string[]): Promise< * * @param el: E2EElement - The element to verify classes on * @param selector: string - A selector to use instead of the element tag name + * @param globalMode: string - the global mode as a fallback * * Examples: - * await checkComponentModeClasses(await page.find('ion-card-content')) + * await checkComponentModeClasses(await page.find('ion-card-content'), globalMode) * => expect(el).toHaveClass(`card-content-{mode}`); * - * await checkComponentModeClasses(await page.find('ion-card-content'), 'some-class') + * await checkComponentModeClasses(await page.find('ion-card-content'), globalMode, 'some-class') * => expect(el).toHaveClass(`some-class-{mode}`); */ -export const checkComponentModeClasses = async (el: E2EElement, selector?: string) => { +export const checkComponentModeClasses = async (el: E2EElement, globalMode: string, selector?: string) => { // If passed a selector to use, use that, else grab the nodeName // of the element and remove the ion prefix to get the class selector const component = selector !== undefined ? selector : el.nodeName.toLowerCase().replace('ion-', ''); - const mode = await el.getProperty('mode'); + const mode = (await el.getProperty('mode')) || globalMode; expect(el).toHaveClass(`${component}-${mode}`); }; @@ -142,6 +143,7 @@ export const checkComponentModeClasses = async (el: E2EElement, selector?: strin * Given an element, get the mode and verify it exists as a class * * @param el: E2EElement - the element to verify the mode class on + * @param globalMode: string - the global mode as a fallback */ export const checkModeClasses = async (el: E2EElement, globalMode: string) => { const mode = (await el.getProperty('mode')) || globalMode;