javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(): Take more screenshots, DRY up code, add more tests (#17534)

Browse Source 
* test(toast): DRY up tests, add expanded tests, add rtl tests

* test(popover): add more screenshots, add rtl tests

* clean up tests a bit more

* test(modal): DRY up tests, add RTL tests

* add missing type to util function

* add utils file, update standlone test

* update standalone tests, add utils file

* test(menu): DRY up tests, add rtl tests

* test(loading): DRY up tests, add rtl tests, add utils file

* lint files

* test(alert): add more screenshots, dry up tests

* fix potential race condition

* remove artificial delay

* lint files

* lint files

* remove artificial delays

* remove artificial delay

* add initial test updates, need to figure out alert from action sheet

* test(): dry up tests some more, add generic utils file

* lint files

* add hook

* fix typescript error
This commit is contained in:
Liam DeBeasi
2019-03-01 10:41:55 -05:00
committed by GitHub
parent d023eb5b71
commit f07ea4f7db
35 changed files with 718 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
core/src/components/loading/test/basic/e2e.ts
View File

@ -1,15 +1,55 @@
import { newE2EPage } from '@stencil/core/testing';
import { testLoading } from '../test.utils';
const DIRECTORY = 'basic';
test('loading: basic', async () => {
const page = await newE2EPage({
url: '/src/components/loading/test/basic?ionic:_testing=true'
});
await testLoading(DIRECTORY, '#basic-loading');
});
test('loading: long content basic', async () => {
await testLoading(DIRECTORY, '#long-content-loading');
});
test('loading: no spinner basic', async () => {
await testLoading(DIRECTORY, '#no-spinner-loading');
});
test('loading: translucent basic', async () => {
await testLoading(DIRECTORY, '#translucent-loading');
});
test('loading: custom class basic', async () => {
await testLoading(DIRECTORY, '#custom-class-loading');
});
test('loading: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading');
});
/**
* RTL Tests
*/
test('loading:rtl: basic basic', async () => {
await testLoading(DIRECTORY, '#basic-loading', true);
});
test('loading:rtl: long content basic', async () => {
await testLoading(DIRECTORY, '#long-content-loading', true);
});
await page.click('#basic');
const loading = await page.find('ion-loading');
await page.waitFor(250);
await loading.waitForVisible();
test('loading:rtl: no spinner basic', async () => {
await testLoading(DIRECTORY, '#no-spinner-loading', true);
});
test('loading:rtl: translucent basic', async () => {
await testLoading(DIRECTORY, '#translucent-loading', true);
});
test('loading:rtl: custom class basic', async () => {
await testLoading(DIRECTORY, '#custom-class-loading', true);
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
test('loading:rtl: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading', true);
});

12
core/src/components/loading/test/basic/index.html
View File

@ -21,13 +21,13 @@
</ion-header>
<ion-content padding>
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
<ion-button id="basic-loading" expand="block" onclick="presentLoading()">Show Loading</ion-button>
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button id="long-content-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
<ion-button id="no-spinner-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
<ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-loading-controller></ion-loading-controller>

30
core/src/components/loading/test/standalone/e2e.ts
View File

@ -1,17 +1,23 @@
import { newE2EPage } from '@stencil/core/testing';
import { testLoading } from '../test.utils';
test('loading: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/loading/test/standalone?ionic:_testing=true'
});
const DIRECTORY = 'standalone';
await page.click('#basic');
const loading = await page.find('ion-loading');
expect(loading).not.toBeNull();
test('loading: basic standalone', async () => {
await testLoading(DIRECTORY, '#basic-loading');
});
test('loading: long content standalone', async () => {
await testLoading(DIRECTORY, '#long-content-loading');
});
await loading.waitForVisible();
await page.waitFor(500);
test('loading: no spinner standalone', async () => {
await testLoading(DIRECTORY, '#no-spinner-loading');
});
test('loading: translucent standalone', async () => {
await testLoading(DIRECTORY, '#translucent-loading');
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
test('loading: custom class standalone', async () => {
await testLoading(DIRECTORY, '#custom-class-loading');
});

10
core/src/components/loading/test/standalone/index.html
View File

@ -12,11 +12,11 @@
</head>
<body>
<button id="basic" onclick="presentLoading()">Show Loading</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
<button id="basic-loading" onclick="presentLoading()">Show Loading</button>
<button id="long-content-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
<button id="no-spinner-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
<button id="translucent-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button id="custom-class-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
<ion-loading-controller></ion-loading-controller>

48
core/src/components/loading/test/test.utils.ts Normal file
View File

@ -0,0 +1,48 @@
import { newE2EPage } from '@stencil/core/testing';
import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
export async function testLoading(
type: string,
selector: string,
rtl = false,
screenshotName: string = cleanScreenshotName(selector)
) {
try {
const pageUrl = generateE2EUrl('loading', type, rtl);
if (rtl) {
screenshotName = `${screenshotName} rtl`;
}
const page = await newE2EPage({
url: pageUrl
});
const screenShotCompares = [];
await page.click(selector);
await page.waitForSelector(selector);
let loading = await page.find('ion-loading');
expect(loading).not.toBeNull();
await loading.waitForVisible();
screenShotCompares.push(await page.compareScreenshot(screenshotName));
await loading.callMethod('dismiss');
await loading.waitForNotVisible();
screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
loading = await page.find('ion-loading');
expect(loading).toBeNull();
for (const screenShotCompare of screenShotCompares) {
expect(screenShotCompare).toMatchScreenshot();
}
} catch (err) {
throw err;
}
}