mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
test(cypress): migrate Angular tests to Cypress (#23083)
This commit is contained in:
Brandy Carney
@ -458,7 +458,7 @@ jobs:
|
||||
command: npm install --legacy-peer-deps
|
||||
working_directory: /tmp/workspace/angular/test/test-app
|
||||
- run:
|
||||
command: npm run test -- --protractor-config=e2e/protractor-ci.conf.js
|
||||
command: npm run test
|
||||
working_directory: /tmp/workspace/angular/test/test-app
|
||||
|
||||
install-vue-test-app:
|
||||
|
||||
@ -85,33 +85,6 @@
|
||||
"browserTarget": "test-app:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"styles": ["src/styles.css"],
|
||||
"scripts": [],
|
||||
"assets": ["src/favicon.ico", "src/assets"]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "test-app:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "test-app:serve:production"
|
||||
},
|
||||
"ci": {
|
||||
"devServerTarget": "test-app:serve:ci"
|
||||
}
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
|
||||
8
angular/test/test-app/cypress.json
Normal file
8
angular/test/test-app/cypress.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"integrationFolder": "./e2e",
|
||||
"testFiles": "**/*.spec.ts",
|
||||
"baseUrl": "http://localhost:4200/",
|
||||
"ignoreTestFiles": "**/examples/*",
|
||||
"video": false,
|
||||
"screenshotOnRunFailure": false
|
||||
}
|
||||
22
angular/test/test-app/cypress/plugins/index.js
vendored
Normal file
22
angular/test/test-app/cypress/plugins/index.js
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
}
|
||||
79
angular/test/test-app/cypress/support/commands.js
vendored
Normal file
79
angular/test/test-app/cypress/support/commands.js
vendored
Normal file
@ -0,0 +1,79 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
|
||||
Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
|
||||
const increment = (complete) ? 60 : 25;
|
||||
cy.get(selector)
|
||||
.first()
|
||||
.trigger('mousedown', 0, 275, { which: 1, force: true })
|
||||
.trigger('mousemove', increment * 1, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 2, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 3, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 4, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mouseup', increment * 4, 275, { which: 1, force: true })
|
||||
cy.wait(150);
|
||||
})
|
||||
|
||||
Cypress.Commands.add('testStack', (selector, expected) => {
|
||||
cy.document().then((doc) => {
|
||||
const children = Array.from(
|
||||
doc.querySelector(selector).children
|
||||
).map(el => el.tagName.toLowerCase());
|
||||
expect(children).to.deep.equal(expected);
|
||||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add('testLifeCycle', (selector, expected) => {
|
||||
cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
|
||||
cy.get(`${selector} #ionViewWillEnter`).invoke('text').should('equal', expected.ionViewWillEnter.toString());
|
||||
cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
|
||||
cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
|
||||
cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
|
||||
})
|
||||
|
||||
Cypress.Commands.add('ionPageVisible', (selector) => {
|
||||
cy.get(selector)
|
||||
.should('have.class', 'ion-page')
|
||||
.should('not.have.class', 'ion-page-hidden')
|
||||
.should('not.have.class', 'ion-page-invisible')
|
||||
.should('have.length', 1)
|
||||
})
|
||||
|
||||
Cypress.Commands.add('ionPageHidden', (selector) => {
|
||||
cy.get(selector)
|
||||
.should('have.class', 'ion-page')
|
||||
.should('have.class', 'ion-page-hidden')
|
||||
.should('have.length', 1)
|
||||
})
|
||||
|
||||
Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
|
||||
cy.get(selector)
|
||||
.should('not.exist')
|
||||
});
|
||||
69
angular/test/test-app/cypress/support/index.d.ts
vendored
Normal file
69
angular/test/test-app/cypress/support/index.d.ts
vendored
Normal file
@ -0,0 +1,69 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
declare namespace Cypress {
|
||||
interface Chainable<Subject> {
|
||||
/**
|
||||
* Swipe to go back on the current selector or router outlet
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionSwipeToGoBack();
|
||||
* cy.ionSwipeToGoBack(true);
|
||||
* ```
|
||||
*/
|
||||
ionSwipeToGoBack(complete: boolean, selector: string): Chainable<any>
|
||||
/**
|
||||
* Test that the proper pages are in the navigation stack
|
||||
* @example
|
||||
* ```
|
||||
* cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
* cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
* ```
|
||||
*/
|
||||
testStack(selector: string, expected: string[]): Chainable<any>
|
||||
/**
|
||||
* Test whether or not the lifecycle events fired
|
||||
* @example
|
||||
* ```
|
||||
* cy.testLifeCycle('app-router-link-page', {
|
||||
* ionViewWillEnter: 1,
|
||||
* ionViewDidEnter: 1,
|
||||
* ionViewWillLeave: 0,
|
||||
* ionViewDidLeave: 0,
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
testLifeCycle(selector: string, expected: any): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element is visible.
|
||||
* Use this to test a page after navigating to it.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageVisible('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageVisible(selector: string): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element is hidden
|
||||
* Use this to test a page after navigating away from it.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageHidden('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageHidden(selector: string): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element exists.
|
||||
* Use this to test a page after popping it off the stack.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageDoesNotExist('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageDoesNotExist(selector: string): Chainable<any>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
20
angular/test/test-app/cypress/support/index.js
vendored
Normal file
20
angular/test/test-app/cypress/support/index.js
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
// Protractor CI configuration file, see link for more information
|
||||
// https://angular.io/guide/testing#configure-cli-for-ci-testing-in-chrome
|
||||
|
||||
const config = require('./protractor.conf').config;
|
||||
|
||||
config.capabilities = {
|
||||
browserName: 'chrome',
|
||||
chromeOptions: {
|
||||
args: ['--headless', '--no-sandbox', '--window-size=1920,1080']
|
||||
}
|
||||
};
|
||||
|
||||
exports.config = config;
|
||||
@ -1,35 +0,0 @@
|
||||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
/**
|
||||
* @type { import("protractor").Config }
|
||||
*/
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
chromeOptions: {
|
||||
args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 100000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
@ -1,133 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { handleErrorMessages, getProperty, setProperty, getText, waitTime } from './utils';
|
||||
|
||||
describe('form', () => {
|
||||
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
describe('status updates', () => {
|
||||
beforeEach(async () => {
|
||||
await browser.get('/form');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should update Ionic form classes when calling form methods programatically', async () => {
|
||||
await element(by.css('form #input-touched')).click();
|
||||
await waitTime(100);
|
||||
const classList = (await getProperty('#touched-input-test', 'classList')) as string[];
|
||||
expect(classList.includes('ion-touched')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('change', () => {
|
||||
beforeEach(async () => {
|
||||
await browser.get('/form');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should have default values', async () => {
|
||||
await testStatus('INVALID');
|
||||
expect(await getText('#submit')).toEqual('false');
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('should become valid', async () => {
|
||||
await setProperty('ion-input.required', 'value', 'Some value');
|
||||
await testStatus('INVALID');
|
||||
await setProperty('ion-select', 'value', 'nes');
|
||||
await testStatus('INVALID');
|
||||
await setProperty('ion-range', 'value', 40);
|
||||
await testStatus('VALID');
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: false,
|
||||
input: 'Some value',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 40
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-toggle should change', async () => {
|
||||
await element(by.css('form ion-toggle')).click();
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-checkbox should change', async () => {
|
||||
await element(by.css('ion-checkbox')).click();
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: true,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('should submit', async () => {
|
||||
await element(by.css('#set-values')).click();
|
||||
await waitTime(100);
|
||||
await element(by.css('#submit-button')).click();
|
||||
expect(await getText('#submit')).toEqual('true');
|
||||
});
|
||||
});
|
||||
|
||||
describe('blur', () => {
|
||||
beforeEach(async () => {
|
||||
await browser.get('/form#blur');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('ion-toggle should change only after blur', async () => {
|
||||
await element(by.css('form ion-toggle')).click();
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
await element(by.css('ion-checkbox')).click();
|
||||
await testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function testStatus(status: string) {
|
||||
expect(await element(by.css('#status')).getText()).toEqual(status);
|
||||
}
|
||||
|
||||
async function testData(data: any) {
|
||||
expect(JSON.parse(await element(by.css('#data')).getText())).toEqual(data);
|
||||
}
|
||||
118
angular/test/test-app/e2e/src/form.spec.ts
Normal file
118
angular/test/test-app/e2e/src/form.spec.ts
Normal file
@ -0,0 +1,118 @@
|
||||
describe('Form', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/form');
|
||||
})
|
||||
|
||||
describe('status updates', () => {
|
||||
it('should update Ionic form classes when calling form methods programmatically', async () => {
|
||||
cy.get('#input-touched').click();
|
||||
cy.get('#touched-input-test').should('have.class', 'ion-touched');
|
||||
});
|
||||
});
|
||||
|
||||
describe('change', () => {
|
||||
it('should have default values', () => {
|
||||
testStatus('INVALID');
|
||||
cy.get('#submit').should('have.text', 'false');
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('should become valid', () => {
|
||||
cy.get('ion-input.required').invoke('prop', 'value', 'Some value');
|
||||
testStatus('INVALID');
|
||||
|
||||
cy.get('ion-select').invoke('prop', 'value', 'nes');
|
||||
testStatus('INVALID');
|
||||
|
||||
cy.get('ion-range').invoke('prop', 'value', 40);
|
||||
testStatus('VALID');
|
||||
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: false,
|
||||
input: 'Some value',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 40
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-toggle should change', () => {
|
||||
cy.get('form ion-toggle').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-checkbox should change', () => {
|
||||
cy.get('ion-checkbox').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: true,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
|
||||
it('should submit', () => {
|
||||
cy.get('#set-values').click();
|
||||
cy.get('#submit-button').click();
|
||||
cy.get('#submit').should('have.text', 'true');
|
||||
});
|
||||
});
|
||||
|
||||
describe('blur', () => {
|
||||
it('ion-toggle should change only after blur', () => {
|
||||
cy.get('form ion-toggle').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false,
|
||||
range: 5
|
||||
});
|
||||
cy.get('ion-checkbox').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: true,
|
||||
range: 5
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function testStatus(status) {
|
||||
cy.get('#status').should('have.text', status);
|
||||
}
|
||||
|
||||
function testData(data) {
|
||||
cy.get('#data').invoke('text').then(text => {
|
||||
const value = JSON.parse(text);
|
||||
console.log(value, data);
|
||||
expect(value).to.deep.equal(data);
|
||||
})
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { getProperty, setProperty, handleErrorMessages, waitTime } from './utils';
|
||||
|
||||
describe('inputs', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get('/inputs');
|
||||
await waitTime(30);
|
||||
});
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should have default value', async () => {
|
||||
expect(await getProperty('ion-checkbox', 'checked')).toEqual(true);
|
||||
expect(await getProperty('ion-toggle', 'checked')).toEqual(true);
|
||||
expect(await getProperty('ion-input', 'value')).toEqual('some text');
|
||||
expect(await getProperty('ion-datetime', 'value')).toEqual('1994-03-15');
|
||||
expect(await getProperty('ion-select', 'value')).toEqual('nes');
|
||||
expect(await getProperty('ion-range', 'value')).toEqual(10);
|
||||
});
|
||||
|
||||
it('should have reset value', async () => {
|
||||
await element(by.css('#reset-button')).click();
|
||||
|
||||
expect(await getProperty('ion-checkbox', 'checked')).toEqual(false);
|
||||
expect(await getProperty('ion-toggle', 'checked')).toEqual(false);
|
||||
expect(await getProperty('ion-input', 'value')).toEqual('');
|
||||
expect(await getProperty('ion-datetime', 'value')).toEqual('');
|
||||
expect(await getProperty('ion-select', 'value')).toEqual('');
|
||||
expect(await getProperty('ion-range', 'value')).toEqual(null);
|
||||
});
|
||||
|
||||
it('should get some value', async () => {
|
||||
await element(by.css('#reset-button')).click();
|
||||
await element(by.css('#set-button')).click();
|
||||
|
||||
expect(await getProperty('ion-checkbox', 'checked')).toEqual(true);
|
||||
expect(await getProperty('ion-toggle', 'checked')).toEqual(true);
|
||||
expect(await getProperty('ion-input', 'value')).toEqual('some text');
|
||||
expect(await getProperty('ion-datetime', 'value')).toEqual('1994-03-15');
|
||||
expect(await getProperty('ion-select', 'value')).toEqual('nes');
|
||||
expect(await getProperty('ion-range', 'value')).toEqual(10);
|
||||
});
|
||||
|
||||
it('change values should update angular', async () => {
|
||||
await element(by.css('#reset-button')).click();
|
||||
|
||||
await setProperty('ion-checkbox', 'checked', true);
|
||||
await setProperty('ion-toggle', 'checked', true);
|
||||
await setProperty('ion-input', 'value', 'hola');
|
||||
await setProperty('ion-datetime', 'value', '1996-03-15');
|
||||
await setProperty('ion-select', 'value', 'playstation');
|
||||
await setProperty('ion-range', 'value', 20);
|
||||
|
||||
expect(await element(by.css('#checkbox-note')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#toggle-note')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#input-note')).getText()).toEqual('hola');
|
||||
expect(await element(by.css('#datetime-note')).getText()).toEqual('1996-03-15');
|
||||
expect(await element(by.css('#select-note')).getText()).toEqual('playstation');
|
||||
expect(await element(by.css('#range-note')).getText()).toEqual('20');
|
||||
});
|
||||
|
||||
it('nested components should not interfere with NgModel', async () => {
|
||||
expect(await element(by.css('#range-note')).getText()).toEqual('10');
|
||||
await element(by.css('#nested-toggle')).click();
|
||||
expect(await element(by.css('#range-note')).getText()).toEqual('10');
|
||||
});
|
||||
});
|
||||
61
angular/test/test-app/e2e/src/inputs.spec.ts
Normal file
61
angular/test/test-app/e2e/src/inputs.spec.ts
Normal file
@ -0,0 +1,61 @@
|
||||
describe('Inputs', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/inputs');
|
||||
})
|
||||
|
||||
it('should have default value', () => {
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
|
||||
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
|
||||
cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
|
||||
cy.get('ion-range').should('have.prop', 'value').and('equal', 10);
|
||||
});
|
||||
|
||||
it('should have reset value', () => {
|
||||
cy.get('#reset-button').click();
|
||||
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', false);
|
||||
cy.get('ion-input').should('have.prop', 'value').and('equal', '');
|
||||
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '');
|
||||
cy.get('ion-select').should('have.prop', 'value').and('equal', '');
|
||||
cy.get('ion-range').should('have.prop', 'value').and('be.NaN');
|
||||
});
|
||||
|
||||
it('should get some value', () => {
|
||||
cy.get('#reset-button').click();
|
||||
cy.get('#set-button').click();
|
||||
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
|
||||
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
|
||||
cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
|
||||
cy.get('ion-range').should('have.prop', 'value').and('equal', 10);
|
||||
});
|
||||
|
||||
it('change values should update angular', () => {
|
||||
cy.get('#reset-button').click();
|
||||
|
||||
cy.get('ion-checkbox').invoke('prop', 'checked', true);
|
||||
cy.get('ion-toggle').invoke('prop', 'checked', true);
|
||||
cy.get('ion-input').invoke('prop', 'value', 'hola');
|
||||
cy.get('ion-datetime').invoke('prop', 'value', '1996-03-15');
|
||||
cy.get('ion-select').invoke('prop', 'value', 'playstation');
|
||||
cy.get('ion-range').invoke('prop', 'value', 20);
|
||||
|
||||
cy.get('#checkbox-note').should('have.text', 'true');
|
||||
cy.get('#toggle-note').should('have.text', 'true');
|
||||
cy.get('#input-note').should('have.text', 'hola');
|
||||
cy.get('#datetime-note').should('have.text', '1996-03-15');
|
||||
cy.get('#select-note').should('have.text', 'playstation');
|
||||
cy.get('#range-note').should('have.text', '20');
|
||||
});
|
||||
|
||||
it('nested components should not interfere with NgModel', () => {
|
||||
cy.get('#range-note').should('have.text', '10');
|
||||
cy.get('#nested-toggle').click();
|
||||
cy.get('#range-note').should('have.text', '10');
|
||||
});
|
||||
})
|
||||
@ -1,55 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { waitTime, getText, handleErrorMessages } from './utils';
|
||||
|
||||
describe('modals', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get('/modals');
|
||||
await waitTime(30);
|
||||
});
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should open standalone modal and close', async () => {
|
||||
await element(by.css('#action-button')).click();
|
||||
|
||||
await waitTime(800);
|
||||
|
||||
const modal = element(by.css('app-modal-example'));
|
||||
expect(await modal.$('h2').getText()).toEqual('123');
|
||||
expect(await modal.$('h3').getText()).toEqual('321');
|
||||
|
||||
expect(await getText('#onWillDismiss')).toEqual('false');
|
||||
expect(await getText('#onDidDismiss')).toEqual('false');
|
||||
|
||||
await modal.$('#close-modal').click();
|
||||
await waitTime(800);
|
||||
|
||||
expect(await getText('#onWillDismiss')).toEqual('true');
|
||||
expect(await getText('#onDidDismiss')).toEqual('true');
|
||||
});
|
||||
|
||||
it('should open nav modal and close', async () => {
|
||||
await element(by.css('#action-button-2')).click();
|
||||
|
||||
await waitTime(800);
|
||||
|
||||
let page = element(by.css('ion-nav > *:last-child'));
|
||||
expect(await page.$('h2').getText()).toEqual('123');
|
||||
expect(await page.$('h3').getText()).toEqual('321');
|
||||
|
||||
await page.$('.push-page').click();
|
||||
await waitTime(800);
|
||||
|
||||
page = element(by.css('ion-nav > *:last-child'));
|
||||
expect(await page.$('h2').getText()).toEqual('pushed!');
|
||||
expect(await page.$('h3').getText()).toEqual('');
|
||||
|
||||
await page.$('.pop-page').click();
|
||||
await waitTime(800);
|
||||
|
||||
page = element(by.css('ion-nav > *:last-child'));
|
||||
expect(await page.$('h2').getText()).toEqual('123');
|
||||
});
|
||||
});
|
||||
43
angular/test/test-app/e2e/src/modal.spec.ts
Normal file
43
angular/test/test-app/e2e/src/modal.spec.ts
Normal file
@ -0,0 +1,43 @@
|
||||
describe('Modals', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/modals');
|
||||
})
|
||||
|
||||
it('should open standalone modal and close', () => {
|
||||
cy.get('#action-button').click();
|
||||
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
|
||||
cy.get('app-modal-example h2').should('have.text', '123');
|
||||
cy.get('app-modal-example h3').should('have.text', '321');
|
||||
|
||||
cy.get('#onWillDismiss').should('have.text', 'false');
|
||||
cy.get('#onDidDismiss').should('have.text', 'false');
|
||||
|
||||
cy.get('#close-modal').click();
|
||||
|
||||
cy.get('ion-modal').should('not.exist');
|
||||
|
||||
cy.get('#onWillDismiss').should('have.text', 'true');
|
||||
cy.get('#onDidDismiss').should('have.text', 'true');
|
||||
});
|
||||
|
||||
it('should open nav modal and close', () => {
|
||||
cy.get('#action-button-2').click();
|
||||
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
||||
cy.get('ion-nav > *:last-child h3').should('have.text', '321');
|
||||
|
||||
cy.get('ion-nav > *:last-child .push-page').click();
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', 'pushed!');
|
||||
cy.get('ion-nav > *:last-child h3').should('have.text', '');
|
||||
|
||||
cy.get('ion-nav > *:last-child .pop-page').click();
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
||||
});
|
||||
|
||||
});
|
||||
@ -1,73 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { handleErrorMessages, waitTime, testStack } from './utils';
|
||||
|
||||
describe('navigation', () => {
|
||||
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
// TODO: Fix flaky tests
|
||||
xit ('should swipe and abort', async () => {
|
||||
await browser.get('/router-link?ionic:mode=ios');
|
||||
await waitTime(500);
|
||||
await element(by.css('#routerLink')).click();
|
||||
await waitTime(500);
|
||||
await swipeLeft(5);
|
||||
await waitTime(500);
|
||||
|
||||
const pageHidden = element(by.css('app-router-link'));
|
||||
expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true');
|
||||
expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden');
|
||||
|
||||
const pageVisible = element(by.css('app-router-link-page'));
|
||||
expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null);
|
||||
expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
|
||||
});
|
||||
|
||||
xit ('should swipe and go back', async () => {
|
||||
await browser.get('/router-link?ionic:mode=ios');
|
||||
await waitTime(500);
|
||||
await element(by.css('#routerLink')).click();
|
||||
await waitTime(500);
|
||||
await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
|
||||
await swipeLeft(300);
|
||||
|
||||
await waitTime(1000);
|
||||
await testStack('ion-router-outlet', ['app-router-link']);
|
||||
|
||||
const page = element(by.css('app-router-link'));
|
||||
expect(await page.getAttribute('aria-hidden')).toEqual(null);
|
||||
expect(await page.getAttribute('class')).toEqual('ion-page');
|
||||
})
|
||||
|
||||
it('should navigate correctly', async () => {
|
||||
await browser.get('/navigation/page1');
|
||||
await waitTime(2000);
|
||||
await testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
|
||||
const pageHidden = element(by.css('app-navigation-page2'));
|
||||
expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true');
|
||||
expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden');
|
||||
|
||||
const pageVisible = element(by.css('app-navigation-page1'));
|
||||
expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null);
|
||||
expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function swipeLeft(end: number) {
|
||||
return browser.driver.touchActions()
|
||||
.tapAndHold({x: 5, y: 1})
|
||||
.move({x: 6, y: 1})
|
||||
.move({x: 7, y: 1})
|
||||
.move({x: 8, y: 1})
|
||||
.move({x: 30, y: 1})
|
||||
.move({x: 300, y: 1})
|
||||
.move({x: end, y: 1})
|
||||
.move({x: end, y: 1})
|
||||
.release({x: end, y: 1})
|
||||
.perform();
|
||||
}
|
||||
18
angular/test/test-app/e2e/src/navigation.spec.ts
Normal file
18
angular/test/test-app/e2e/src/navigation.spec.ts
Normal file
@ -0,0 +1,18 @@
|
||||
describe('Navigation', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/navigation');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
cy.visit('/navigation/page1');
|
||||
cy.wait(2000);
|
||||
cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
|
||||
cy.get('app-navigation-page2').should('have.attr', 'aria-hidden').and('equal', 'true');
|
||||
cy.get('app-navigation-page2').should('have.attr', 'class').and('equal', 'ion-page ion-page-hidden');
|
||||
|
||||
cy.get('app-navigation-page1').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-navigation-page1').should('have.attr', 'class').and('equal', 'ion-page can-go-back');
|
||||
});
|
||||
})
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { waitTime, handleErrorMessages, goBack } from './utils';
|
||||
|
||||
describe('nested-outlet', () => {
|
||||
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should navigate correctly', async () => {
|
||||
await browser.get('/nested-outlet/page');
|
||||
expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page h1')).getText()).toEqual('Nested page 1');
|
||||
|
||||
await element(by.css('#goto-tabs')).click();
|
||||
await waitTime(500);
|
||||
await element(by.css('#goto-nested-page1')).click();
|
||||
await waitTime(500);
|
||||
await element(by.css('#goto-nested-page2')).click();
|
||||
await waitTime(500);
|
||||
expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1')).getText()).toEqual('Nested page 2');
|
||||
});
|
||||
});
|
||||
|
||||
25
angular/test/test-app/e2e/src/nested-outlet.spec.ts
Normal file
25
angular/test/test-app/e2e/src/nested-outlet.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
describe('Nested Outlet', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/nested-outlet/page');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
cy.get('ion-router-outlet ion-router-outlet app-nested-outlet-page h1').should('have.text', 'Nested page 1');
|
||||
|
||||
cy.get('#goto-tabs').click();
|
||||
|
||||
cy.ionPageVisible('app-tabs');
|
||||
cy.ionPageVisible('app-tabs-tab1');
|
||||
|
||||
cy.get('#goto-nested-page1').click();
|
||||
|
||||
cy.ionPageVisible('app-nested-outlet-page');
|
||||
cy.ionPageDoesNotExist('app-tabs');
|
||||
|
||||
cy.get('#goto-nested-page2').click();
|
||||
cy.ionPageVisible('app-nested-outlet-page2');
|
||||
|
||||
cy.get('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1').should('have.text', 'Nested page 2');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { handleErrorMessages, waitTime } from './utils';
|
||||
|
||||
describe('providers', () => {
|
||||
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should load all providers', async () => {
|
||||
await browser.get('/providers');
|
||||
|
||||
expect(await element(by.css('#is-loaded')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-ready')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-paused')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-resumed')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-resized')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-testing')).getText()).toEqual('false');
|
||||
expect(await element(by.css('#is-desktop')).getText()).toEqual('true');
|
||||
expect(await element(by.css('#is-mobile')).getText()).toEqual('false');
|
||||
expect(await element(by.css('#keyboard-height')).getText()).toEqual('12345');
|
||||
});
|
||||
|
||||
it('should detect testing mode', async () => {
|
||||
await browser.get('/providers?ionic:_testing=true');
|
||||
|
||||
expect(await element(by.css('#is-testing')).getText()).toEqual('true');
|
||||
});
|
||||
});
|
||||
24
angular/test/test-app/e2e/src/providers.spec.ts
Normal file
24
angular/test/test-app/e2e/src/providers.spec.ts
Normal file
@ -0,0 +1,24 @@
|
||||
describe('Providers', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/providers');
|
||||
})
|
||||
|
||||
it('should load all providers', () => {
|
||||
cy.get('#is-loaded').should('have.text', 'true');
|
||||
cy.get('#is-ready').should('have.text', 'true');
|
||||
cy.get('#is-paused').should('have.text', 'true');
|
||||
cy.get('#is-resumed').should('have.text', 'true');
|
||||
cy.get('#is-resized').should('have.text', 'true');
|
||||
cy.get('#is-testing').should('have.text', 'false');
|
||||
cy.get('#is-desktop').should('have.text', 'true');
|
||||
cy.get('#is-mobile').should('have.text', 'false');
|
||||
cy.get('#keyboard-height').should('have.text', '12345');
|
||||
});
|
||||
|
||||
it('should detect testing mode', () => {
|
||||
cy.visit('/providers?ionic:_testing=true');
|
||||
|
||||
cy.get('#is-testing').should('have.text', 'true');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,194 +0,0 @@
|
||||
import { browser, element, by, protractor } from 'protractor';
|
||||
import { waitTime, testStack, testLifeCycle, handleErrorMessages, getText } from './utils';
|
||||
|
||||
const EC = protractor.ExpectedConditions;
|
||||
|
||||
describe('router-link params and fragments', () => {
|
||||
const queryParam = 'A&=#Y';
|
||||
const fragment = 'myDiv1';
|
||||
const id = 'MyPageID==';
|
||||
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should go to a page with properly encoded values', async () => {
|
||||
await browser.get('/router-link?ionic:_testing=true');
|
||||
await element(by.css('#queryParamsFragment')).click();
|
||||
|
||||
const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
|
||||
|
||||
browser.wait(EC.urlContains(expectedRoute), 5000);
|
||||
});
|
||||
|
||||
it('should return to a page with preserved query param and fragment', async () => {
|
||||
await browser.get('/router-link?ionic:_testing=true');
|
||||
await waitTime(30);
|
||||
await element(by.css('#queryParamsFragment')).click();
|
||||
await waitTime(400);
|
||||
await element(by.css('#goToPage3')).click();
|
||||
|
||||
browser.wait(EC.urlContains('router-link-page3'), 5000);
|
||||
await waitTime(400);
|
||||
|
||||
await element(by.css('#goBackFromPage3')).click();
|
||||
|
||||
const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
|
||||
browser.wait(EC.urlContains(expectedRoute), 5000);
|
||||
});
|
||||
|
||||
it('should preserve query param and fragment with defaultHref string', async () => {
|
||||
await browser.get('/router-link-page3?ionic:_testing=true');
|
||||
await waitTime(30);
|
||||
|
||||
await element(by.css('#goBackFromPage3')).click();
|
||||
|
||||
const expectedRoute = '?token=ABC#fragment';
|
||||
browser.wait(EC.urlContains(expectedRoute), 5000);
|
||||
});
|
||||
});
|
||||
|
||||
describe('router-link', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get('/router-link');
|
||||
await waitTime(30);
|
||||
});
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
|
||||
it('should have correct lifecycle counts', async () => {
|
||||
await testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
});
|
||||
|
||||
describe('forward', () => {
|
||||
|
||||
it('should go forward with ion-button[routerLink]', async () => {
|
||||
await element(by.css('#routerLink')).click();
|
||||
await testForward();
|
||||
});
|
||||
|
||||
it('should go forward with a[routerLink]', async () => {
|
||||
await element(by.css('#a')).click();
|
||||
await testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateByUrl()', async () => {
|
||||
await element(by.css('#button')).click();
|
||||
await testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateForward()', async () => {
|
||||
await element(by.css('#button-forward')).click();
|
||||
await testForward();
|
||||
});
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
|
||||
it('should go root with ion-button[routerLink][routerDirection=root]', async () => {
|
||||
await element(by.css('#routerLink-root')).click();
|
||||
await testRoot();
|
||||
});
|
||||
|
||||
it('should go root with a[routerLink][routerDirection=root]', async () => {
|
||||
await element(by.css('#a-root')).click();
|
||||
await testRoot();
|
||||
});
|
||||
|
||||
it('should go root with button + navigateRoot', async () => {
|
||||
await element(by.css('#button-root')).click();
|
||||
await testRoot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('back', () => {
|
||||
|
||||
it('should go back with ion-button[routerLink][routerDirection=back]', async () => {
|
||||
await element(by.css('#routerLink-back')).click();
|
||||
});
|
||||
|
||||
it('should go back with a[routerLink][routerDirection=back]', async () => {
|
||||
await element(by.css('#a-back')).click();
|
||||
await testBack();
|
||||
});
|
||||
|
||||
it('should go back with button + navigateBack', async () => {
|
||||
await element(by.css('#button-back')).click();
|
||||
await testBack();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function testForward() {
|
||||
await waitTime(2500);
|
||||
await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
await testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
expect(await getText(`app-router-link-page #canGoBack`)).toEqual('true');
|
||||
|
||||
await browser.navigate().back();
|
||||
await waitTime(100);
|
||||
await testStack('ion-router-outlet', ['app-router-link']);
|
||||
await testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 2,
|
||||
ionViewDidEnter: 2,
|
||||
ionViewWillLeave: 1,
|
||||
ionViewDidLeave: 1,
|
||||
});
|
||||
}
|
||||
|
||||
async function testRoot() {
|
||||
await waitTime(200);
|
||||
await testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
await testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
expect(await getText(`app-router-link-page #canGoBack`)).toEqual('false');
|
||||
|
||||
await browser.navigate().back();
|
||||
await waitTime(100);
|
||||
await testStack('ion-router-outlet', ['app-router-link']);
|
||||
await testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
|
||||
async function testBack() {
|
||||
await waitTime(500);
|
||||
await testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
await testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
expect(await getText(`app-router-link-page #canGoBack`)).toEqual('false');
|
||||
|
||||
await browser.navigate().back();
|
||||
await waitTime(100);
|
||||
await testStack('ion-router-outlet', ['app-router-link']);
|
||||
await testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
192
angular/test/test-app/e2e/src/router-link.spec.ts
Normal file
192
angular/test/test-app/e2e/src/router-link.spec.ts
Normal file
@ -0,0 +1,192 @@
|
||||
describe('Router Link', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/router-link');
|
||||
});
|
||||
|
||||
describe('router-link params and fragments', () => {
|
||||
const queryParam = 'A&=#Y';
|
||||
const fragment = 'myDiv1';
|
||||
const id = 'MyPageID==';
|
||||
|
||||
it('should go to a page with properly encoded values', () => {
|
||||
cy.visit('/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
|
||||
const expectedPath = `${encodeURIComponent(id)}`;
|
||||
const expectedSearch = `?token=${encodeURIComponent(queryParam)}`;
|
||||
const expectedHash = `#${encodeURIComponent(fragment)}`;
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain(expectedPath);
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
|
||||
it('should return to a page with preserved query param and fragment', () => {
|
||||
cy.visit('/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
cy.get('#goToPage3').click();
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain('router-link-page3');
|
||||
});
|
||||
|
||||
cy.get('#goBackFromPage3').click();
|
||||
|
||||
const expectedPath = `${encodeURIComponent(id)}`;
|
||||
const expectedSearch = `?token=${encodeURIComponent(queryParam)}`;
|
||||
const expectedHash = `#${encodeURIComponent(fragment)}`;
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain(expectedPath);
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
|
||||
it('should preserve query param and fragment with defaultHref string', () => {
|
||||
cy.visit('/router-link-page3?ionic:_testing=true');
|
||||
|
||||
cy.get('#goBackFromPage3').click();
|
||||
|
||||
const expectedSearch = '?token=ABC';
|
||||
const expectedHash = '#fragment';
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('router-link', () => {
|
||||
it('should have correct lifecycle counts', () => {
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('forward', () => {
|
||||
it('should go forward with ion-button[routerLink]', () => {
|
||||
cy.get('#routerLink').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with a[routerLink]', () => {
|
||||
cy.get('#a').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateByUrl()', () => {
|
||||
cy.get('#button').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateForward()', () => {
|
||||
cy.get('#button-forward').click();
|
||||
testForward();
|
||||
});
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
it('should go root with ion-button[routerLink][routerDirection=root]', () => {
|
||||
cy.get('#routerLink-root').click();
|
||||
testRoot();
|
||||
});
|
||||
|
||||
it('should go root with a[routerLink][routerDirection=root]', () => {
|
||||
cy.get('#a-root').click();
|
||||
testRoot();
|
||||
});
|
||||
|
||||
it('should go root with button + navigateRoot', () => {
|
||||
cy.get('#button-root').click();
|
||||
testRoot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('back', () => {
|
||||
it('should go back with ion-button[routerLink][routerDirection=back]', () => {
|
||||
cy.get('#routerLink-back').click();
|
||||
});
|
||||
|
||||
it('should go back with a[routerLink][routerDirection=back]', () => {
|
||||
cy.get('#a-back').click();
|
||||
testBack();
|
||||
});
|
||||
|
||||
it('should go back with button + navigateBack', () => {
|
||||
cy.get('#button-back').click();
|
||||
testBack();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function testForward() {
|
||||
cy.testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'true');
|
||||
|
||||
cy.go('back');
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 2,
|
||||
ionViewDidEnter: 2,
|
||||
ionViewWillLeave: 1,
|
||||
ionViewDidLeave: 1,
|
||||
});
|
||||
}
|
||||
|
||||
function testRoot() {
|
||||
cy.wait(200);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function testBack() {
|
||||
cy.wait(500);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
36
angular/test/test-app/e2e/src/routing.spec.ts
Normal file
36
angular/test/test-app/e2e/src/routing.spec.ts
Normal file
@ -0,0 +1,36 @@
|
||||
describe('Routing', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/router-link?ionic:mode=ios');
|
||||
})
|
||||
|
||||
it('should swipe and abort', () => {
|
||||
cy.get('#routerLink').click();
|
||||
|
||||
cy.ionSwipeToGoBack();
|
||||
|
||||
cy.get('app-router-link').should('have.attr', 'aria-hidden').and('equal', 'true');
|
||||
cy.get('app-router-link').should('have.attr', 'class').and('equal', 'ion-page ion-page-hidden');
|
||||
|
||||
cy.get('app-router-link-page').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-router-link-page').should('have.attr', 'class').and('equal', 'ion-page can-go-back');
|
||||
});
|
||||
|
||||
it('should swipe and go back', () => {
|
||||
cy.get('#routerLink').click();
|
||||
|
||||
cy.ionPageHidden('app-router-link');
|
||||
cy.ionPageVisible('app-router-link-page');
|
||||
|
||||
cy.testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
|
||||
cy.ionSwipeToGoBack(true);
|
||||
|
||||
cy.ionPageVisible('app-router-link');
|
||||
cy.ionPageDoesNotExist('app-router-link-page');
|
||||
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
|
||||
cy.get('app-router-link').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-router-link').should('have.attr', 'class').and('equal', 'ion-page');
|
||||
});
|
||||
})
|
||||
@ -1,51 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { handleErrorMessages, waitTime } from './utils';
|
||||
|
||||
describe('slides', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get('/slides');
|
||||
await waitTime(30);
|
||||
});
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should change index on slide change', async () => {
|
||||
expect(await element.all(by.css('ion-slide')).count()).toEqual(0);
|
||||
await addSlides();
|
||||
expect(await element.all(by.css('ion-slide')).count()).toEqual(3);
|
||||
|
||||
await checkIndex('0');
|
||||
|
||||
await nextSlide();
|
||||
await checkIndex('1');
|
||||
|
||||
await nextSlide();
|
||||
await checkIndex('2');
|
||||
|
||||
await prevSlide();
|
||||
await checkIndex('1');
|
||||
});
|
||||
});
|
||||
|
||||
async function checkIndex(index: string) {
|
||||
expect(await element(by.css('#slide-index')).getText()).toEqual(index);
|
||||
expect(await element(by.css('#slide-index-2')).getText()).toEqual(index);
|
||||
}
|
||||
|
||||
async function addSlides() {
|
||||
await element(by.css('#add-slides')).click();
|
||||
await waitTime(800);
|
||||
}
|
||||
|
||||
|
||||
async function nextSlide() {
|
||||
await element(by.css('#btn-next')).click();
|
||||
await waitTime(800);
|
||||
}
|
||||
|
||||
async function prevSlide() {
|
||||
await element(by.css('#btn-prev')).click();
|
||||
await waitTime(800);
|
||||
}
|
||||
44
angular/test/test-app/e2e/src/slides.spec.ts
Normal file
44
angular/test/test-app/e2e/src/slides.spec.ts
Normal file
@ -0,0 +1,44 @@
|
||||
describe('Slides', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/slides');
|
||||
cy.wait(30);
|
||||
})
|
||||
|
||||
it('should change index on slide change', () => {
|
||||
cy.get('ion-slide').should('have.length', 0);
|
||||
|
||||
cy.get('#add-slides').click();
|
||||
|
||||
cy.get('ion-slide').should('have.length', 3);
|
||||
|
||||
// Should be on the first slide
|
||||
checkIndex('0');
|
||||
|
||||
// Swipe to the second slide
|
||||
nextSlide();
|
||||
checkIndex('1');
|
||||
|
||||
// Swipe to the third slide
|
||||
nextSlide();
|
||||
checkIndex('2');
|
||||
|
||||
// Go back to the second slide
|
||||
prevSlide();
|
||||
checkIndex('1');
|
||||
});
|
||||
});
|
||||
|
||||
function checkIndex(index) {
|
||||
cy.get('#slide-index').should('have.text', index);
|
||||
cy.get('#slide-index-2').should('have.text', index);
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
cy.get('#btn-next').click();
|
||||
cy.wait(800);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
cy.get('#btn-prev').click();
|
||||
cy.wait(800);
|
||||
}
|
||||
@ -1,334 +0,0 @@
|
||||
import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor';
|
||||
import { handleErrorMessages, testStack, waitTime } from './utils';
|
||||
|
||||
describe('tabs', () => {
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
describe('entry url - /tabs', () => {
|
||||
beforeEach(async () => {
|
||||
await browser.get('/tabs');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should redirect and load tab-account', async () => {
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1']);
|
||||
await testState(1, 'account');
|
||||
});
|
||||
|
||||
it('should navigate between tabs and ionChange events should be dispatched ', async () => {
|
||||
let tab = await testTabTitle('Tab 1 - Page 1');
|
||||
expect(await tab.$('.segment-changed').getText()).toEqual('false');
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
tab = await testTabTitle('Tab 2 - Page 1');
|
||||
expect(await tab.$('.segment-changed').getText()).toEqual('false');
|
||||
});
|
||||
|
||||
it('should simulate stack + double tab click', async () => {
|
||||
let tab = await getSelectedTab() as ElementFinder;
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
|
||||
await testState(1, 'account');
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
await testTabTitle('Tab 2 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
await testState(2, 'contact');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
await testState(3, 'account');
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
await testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should simulate stack + back button click', async () => {
|
||||
const tab = await getSelectedTab();
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testState(1, 'account');
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
await testTabTitle('Tab 2 - Page 1');
|
||||
await testState(2, 'contact');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testState(3, 'account');
|
||||
|
||||
await element(by.css('ion-back-button')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
await testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should navigate deep then go home', async () => {
|
||||
let tab = await getSelectedTab();
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
await tab.$('#goto-next').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
tab = await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
await testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
});
|
||||
|
||||
it('should switch tabs and go back', async () => {
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
const tab = await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await tab.$('#goto-tab1-page1').click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
});
|
||||
|
||||
it('should switch tabs and go to nested', async () => {
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
const tab = await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
|
||||
});
|
||||
|
||||
it('should load lazy loaded tab', async () => {
|
||||
await element(by.css('#tab-button-lazy')).click();
|
||||
await testTabTitle('Tab 3 - Page 1');
|
||||
});
|
||||
|
||||
it('should use ion-back-button defaultHref', async () => {
|
||||
let tab = await getSelectedTab() as ElementFinder;
|
||||
await tab.$('#goto-tab3-page2').click();
|
||||
tab = await testTabTitle('Tab 3 - Page 2');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3-nested']);
|
||||
|
||||
await tab.$('ion-back-button').click();
|
||||
await testTabTitle('Tab 3 - Page 1');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
|
||||
});
|
||||
|
||||
it('should preserve navigation extras when switching tabs', async () => {
|
||||
const expectUrlToContain = 'search=hello#fragment';
|
||||
let tab = await getSelectedTab() as ElementFinder;
|
||||
await tab.$('#goto-nested-page1-with-query-params').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testUrlContains(expectUrlToContain);
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testUrlContains(expectUrlToContain);
|
||||
});
|
||||
|
||||
it('should set root when clicking on an active tab to navigate to the root', async () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
const tab = await getSelectedTab() as ElementFinder;
|
||||
const initialUrl = await browser.getCurrentUrl();
|
||||
await tab.$('#goto-nested-page1-with-query-params').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
await testUrlEquals(initialUrl);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('entry tab contains navigation extras', () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
const rootUrlParams = 'test=123#rootFragment';
|
||||
const rootUrl = `/tabs/account?${rootUrlParams}`;
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get(rootUrl);
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', async () => {
|
||||
await browser.get(rootUrl);
|
||||
|
||||
const tab = await getSelectedTab() as ElementFinder;
|
||||
await tab.$('#goto-nested-page1-with-query-params').click();
|
||||
await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
await testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should preserve root url navigation extras when changing tabs', async () => {
|
||||
await browser.get(rootUrl);
|
||||
|
||||
let tab = await getSelectedTab() as ElementFinder;
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
tab = await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
await testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should navigate deep then go home and preserve navigation extras', async () => {
|
||||
let tab = await getSelectedTab();
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
await tab.$('#goto-next').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
await element(by.css('#tab-button-contact')).click();
|
||||
tab = await testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
await testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
await testUrlContains(rootUrl);
|
||||
});
|
||||
});
|
||||
|
||||
describe('entry url - /tabs/account/nested/1', () => {
|
||||
beforeEach(async () => {
|
||||
await browser.get('/tabs/account/nested/1');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should only display the back-button when there is a page in the stack', async () => {
|
||||
let tab = await testTabTitle('Tab 1 - Page 2 (1)') as ElementFinder;
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
|
||||
|
||||
await element(by.css('#tab-button-account')).click();
|
||||
tab = await testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
|
||||
});
|
||||
|
||||
it('should not reuse the same page', async () => {
|
||||
let tab = await testTabTitle('Tab 1 - Page 2 (1)') as ElementFinder;
|
||||
await tab.$('#goto-next').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
await tab.$('#goto-next').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (3)');
|
||||
|
||||
await testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested'
|
||||
]);
|
||||
|
||||
await tab.$('ion-back-button').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (2)');
|
||||
await tab.$('ion-back-button').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
|
||||
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
});
|
||||
});
|
||||
|
||||
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 () => {
|
||||
let tab = await testTabTitle('Tab 3 - Page 1') as ElementFinder;
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3']);
|
||||
|
||||
await tab.$('#goto-tab1-page2').click();
|
||||
tab = await testTabTitle('Tab 1 - Page 2 (1)');
|
||||
await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
|
||||
expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
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 () => {
|
||||
const tab = await getSelectedTab();
|
||||
await tab.$('#goto-nested-page1').click();
|
||||
|
||||
await waitTime(600);
|
||||
await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
|
||||
|
||||
const nestedOutlet = await element(by.css('app-nested-outlet'));
|
||||
const backButton = await nestedOutlet.$('ion-back-button');
|
||||
await backButton.click();
|
||||
|
||||
await testTabTitle('Tab 2 - Page 1');
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
async function testState(count: number, tab: string) {
|
||||
expect(await element(by.css('#tabs-state')).getText()).toEqual(`${count}.${tab}`);
|
||||
}
|
||||
|
||||
async function testTabTitle(title: string) {
|
||||
await waitTime(1000);
|
||||
const tab = await getSelectedTab();
|
||||
expect(await tab.$('ion-title').getText()).toEqual(title);
|
||||
return tab;
|
||||
}
|
||||
|
||||
async function testUrlContains(urlFragment: string) {
|
||||
await browser.wait(ExpectedConditions.urlContains(urlFragment),
|
||||
5000,
|
||||
`expected ${browser.getCurrentUrl()} to contain ${urlFragment}`);
|
||||
}
|
||||
|
||||
async function testUrlEquals(url: string) {
|
||||
await browser.wait(ExpectedConditions.urlIs(url),
|
||||
5000,
|
||||
`expected ${browser.getCurrentUrl()} to equal ${url}`);
|
||||
}
|
||||
|
||||
async function getSelectedTab(): Promise<ElementFinder> {
|
||||
const tabs = element.all(by.css('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)'));
|
||||
expect(await tabs.count()).toEqual(1);
|
||||
const tab = tabs.first();
|
||||
return tab;
|
||||
}
|
||||
329
angular/test/test-app/e2e/src/tabs.spec.ts
Normal file
329
angular/test/test-app/e2e/src/tabs.spec.ts
Normal file
@ -0,0 +1,329 @@
|
||||
describe('Tabs', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs');
|
||||
})
|
||||
|
||||
describe('entry url - /tabs', () => {
|
||||
it('should redirect and load tab-account', () => {
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1']);
|
||||
testState(1, 'account');
|
||||
});
|
||||
|
||||
it('should navigate between tabs and ionChange events should be dispatched', () => {
|
||||
let tab = testTabTitle('Tab 1 - Page 1');
|
||||
tab.find('.segment-changed').should('have.text', 'false');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
tab = testTabTitle('Tab 2 - Page 1');
|
||||
tab.find('.segment-changed').should('have.text', 'false');
|
||||
});
|
||||
|
||||
it('should simulate stack + double tab click', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
|
||||
testState(1, 'account');
|
||||
|
||||
// When you call find on tab above it changes the value of tab
|
||||
// so we need to redefine it
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
testState(2, 'contact');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should simulate stack + back button click', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testState(1, 'account');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
testState(2, 'contact');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testState(3, 'account');
|
||||
|
||||
cy.get('ion-back-button').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should navigate deep then go home', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-next').click();
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
});
|
||||
|
||||
it('should switch tabs and go back', () => {
|
||||
cy.get('#tab-button-contact').click();
|
||||
const tab = testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page1').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
});
|
||||
|
||||
it('should switch tabs and go to nested', () => {
|
||||
cy.get('#tab-button-contact').click();
|
||||
const tab = testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
|
||||
});
|
||||
|
||||
it('should load lazy loaded tab', () => {
|
||||
cy.get('#tab-button-lazy').click();
|
||||
cy.ionPageVisible('app-tabs-tab3');
|
||||
testTabTitle('Tab 3 - Page 1');
|
||||
});
|
||||
|
||||
it('should use ion-back-button defaultHref', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab3-page2').click();
|
||||
testTabTitle('Tab 3 - Page 2');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3-nested']);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').click();
|
||||
testTabTitle('Tab 3 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
|
||||
});
|
||||
|
||||
it('should preserve navigation extras when switching tabs', () => {
|
||||
const expectUrlToContain = 'search=hello#fragment';
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectUrlToContain);
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectUrlToContain);
|
||||
});
|
||||
|
||||
it('should set root when clicking on an active tab to navigate to the root', () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
cy.url().then(url => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlEquals(url);
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry tab contains navigation extras', () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
const rootUrlParams = 'test=123#rootFragment';
|
||||
const rootUrl = `/tabs/account?${rootUrlParams}`;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit(rootUrl);
|
||||
})
|
||||
|
||||
it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should preserve root url navigation extras when changing tabs', () => {
|
||||
getSelectedTab();
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should navigate deep then go home and preserve navigation extras', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
tab.find('#goto-next').click();
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry url - /tabs/account/nested/1', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/account/nested/1');
|
||||
})
|
||||
|
||||
it('should only display the back-button when there is a page in the stack', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
tab = testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
});
|
||||
|
||||
it('should not reuse the same page', () => {
|
||||
let tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('#goto-next').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
tab.find('#goto-next').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (3)');
|
||||
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested'
|
||||
]);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (2)');
|
||||
tab.find('ion-back-button').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry url - /tabs/lazy', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/lazy');
|
||||
});
|
||||
|
||||
it('should not display the back-button if coming from a different stack', () => {
|
||||
let tab = testTabTitle('Tab 3 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3']);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
|
||||
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
});
|
||||
})
|
||||
|
||||
describe('enter url - /tabs/contact/one', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/contact/one');
|
||||
});
|
||||
|
||||
it('should return to correct tab after going to page in different outlet', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1').click();
|
||||
cy.testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
|
||||
|
||||
const nestedOutlet = cy.get('app-nested-outlet');
|
||||
nestedOutlet.find('ion-back-button').click();
|
||||
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
function testTabTitle(title) {
|
||||
const tab = getSelectedTab();
|
||||
|
||||
// Find is used to get a direct descendant instead of get
|
||||
tab.find('ion-title').should('have.text', title);
|
||||
return getSelectedTab();
|
||||
}
|
||||
|
||||
function getSelectedTab() {
|
||||
cy.get('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)').should('have.length', 1);
|
||||
return cy.get('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)').first();
|
||||
}
|
||||
|
||||
function testState(count, tab) {
|
||||
cy.get('#tabs-state').should('have.text', `${count}.${tab}`);
|
||||
}
|
||||
|
||||
function testUrlContains(urlFragment) {
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.contain(urlFragment);
|
||||
});
|
||||
}
|
||||
|
||||
function testUrlEquals(url) {
|
||||
cy.url().should('eq', url);
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
import { browser } from 'protractor';
|
||||
|
||||
export function goBack() {
|
||||
return browser.executeScript(`return window.history.back()`);
|
||||
}
|
||||
|
||||
export function getProperty(selector: string, property: string) {
|
||||
return browser.executeScript(`
|
||||
return document.querySelector('${selector}')['${property}'];
|
||||
`);
|
||||
}
|
||||
|
||||
export function getText(selector: string) {
|
||||
return browser.executeScript(`
|
||||
return document.querySelector('${selector}').textContent;
|
||||
`);
|
||||
}
|
||||
|
||||
export function setProperty(selector: string, property: string, value: any) {
|
||||
const text = JSON.stringify(value);
|
||||
return browser.executeScript(`
|
||||
document.querySelector('${selector}')['${property}'] = ${text};
|
||||
`);
|
||||
}
|
||||
|
||||
export function waitTime(time: number) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(resolve, time);
|
||||
});
|
||||
}
|
||||
|
||||
export interface LifeCycleCount {
|
||||
ionViewWillEnter: number;
|
||||
ionViewDidEnter: number;
|
||||
ionViewWillLeave: number;
|
||||
ionViewDidLeave: number;
|
||||
}
|
||||
|
||||
export function handleErrorMessages() {
|
||||
return browser.manage().logs().get('browser').then(browserLog => {
|
||||
for (let i = 0; i <= browserLog.length - 1; i++) {
|
||||
if (browserLog[i].level.name_ === 'SEVERE') {
|
||||
fail(browserLog[i].message);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export async function testLifeCycle(selector: string, expected: LifeCycleCount) {
|
||||
await waitTime(50);
|
||||
const results = await Promise.all([
|
||||
getText(`${selector} #ngOnInit`),
|
||||
getText(`${selector} #ionViewWillEnter`),
|
||||
getText(`${selector} #ionViewDidEnter`),
|
||||
getText(`${selector} #ionViewWillLeave`),
|
||||
getText(`${selector} #ionViewDidLeave`),
|
||||
]);
|
||||
|
||||
expect(results[0]).toEqual('1');
|
||||
expect(results[1]).toEqual(expected.ionViewWillEnter.toString());
|
||||
expect(results[2]).toEqual(expected.ionViewDidEnter.toString());
|
||||
expect(results[3]).toEqual(expected.ionViewWillLeave.toString());
|
||||
expect(results[4]).toEqual(expected.ionViewDidLeave.toString());
|
||||
}
|
||||
|
||||
export async function testStack(selector: string, expected: string[]) {
|
||||
const children = await browser.executeScript(`
|
||||
return Array.from(
|
||||
document.querySelector('${selector}').children
|
||||
).map(el => el.tagName.toLowerCase());
|
||||
`);
|
||||
expect(children).toEqual(expected);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { handleErrorMessages, waitTime } from './utils';
|
||||
|
||||
describe('view-child', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await browser.get('/view-child');
|
||||
await waitTime(30);
|
||||
});
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
|
||||
it('should get a reference to all children', async () => {
|
||||
// button should be red
|
||||
expect(await element(by.css('#color-button.ion-color-danger')).isPresent()).toBeTruthy();
|
||||
|
||||
// tabs should be found
|
||||
expect(await element(by.css('#tabs-result')).getText()).toEqual('all found');
|
||||
});
|
||||
|
||||
});
|
||||
14
angular/test/test-app/e2e/src/view-child.spec.ts
Normal file
14
angular/test/test-app/e2e/src/view-child.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
describe('View Child', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/view-child');
|
||||
})
|
||||
|
||||
it('should get a reference to all children', () => {
|
||||
// button should be red
|
||||
cy.get('#color-button').should('have.class', 'ion-color-danger');
|
||||
|
||||
// tabs should be found
|
||||
cy.get('#tabs-result').should('have.text', 'all found');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
import { waitTime, handleErrorMessages } from './utils';
|
||||
|
||||
describe('virtual-scroll', () => {
|
||||
afterEach(() => {
|
||||
return handleErrorMessages();
|
||||
});
|
||||
beforeEach(async () => {
|
||||
await browser.get('/virtual-scroll');
|
||||
await waitTime(30);
|
||||
});
|
||||
|
||||
it('should open virtual-scroll', () => {
|
||||
const virtualElements = element.all(by.css('ion-virtual-scroll > *'));
|
||||
expect(virtualElements.count()).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
});
|
||||
14
angular/test/test-app/e2e/src/virtual-scroll.spec.ts
Normal file
14
angular/test/test-app/e2e/src/virtual-scroll.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
describe('Virtual Scroll', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/virtual-scroll');
|
||||
cy.wait(30);
|
||||
})
|
||||
|
||||
it('should open virtual-scroll', () => {
|
||||
cy.document().then((doc) => {
|
||||
const virtualElements = doc.querySelectorAll('ion-virtual-scroll > *');
|
||||
expect(virtualElements.length).to.be.greaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,13 +4,16 @@
|
||||
"strictMetadataEmit" : true
|
||||
},
|
||||
"extends": "../tsconfig.json",
|
||||
"include": [
|
||||
"src/**spec.ts",
|
||||
"../cypress/support/index.d.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"cypress",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, '../coverage'),
|
||||
reports: ['html', 'lcovonly', 'text-summary'],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
customLaunchers: {
|
||||
ChromeHeadlessCI: {
|
||||
base: 'ChromeHeadless',
|
||||
flags: ['--no-sandbox']
|
||||
}
|
||||
},
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
20057
angular/test/test-app/package-lock.json
generated
20057
angular/test/test-app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,15 +8,16 @@
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "npm run sync && ng build --prod --no-progress",
|
||||
"pretest": "webdriver-manager update --versions.chrome 89.0.4389.23",
|
||||
"test": "ng e2e --prod --webdriver-update=false",
|
||||
"test.dev": "npm run sync && ng e2e",
|
||||
"lint": "ng lint",
|
||||
"postinstall": "npm run sync && ngcc",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender"
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^9.1.12",
|
||||
@ -34,7 +35,6 @@
|
||||
"angular-in-memory-web-api": "^0.11.0",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"jasmine-marbles": "^0.6.0",
|
||||
"rxjs": "^6.5.5",
|
||||
"tslib": "^1.13.0",
|
||||
"zone.js": "^0.10.3"
|
||||
@ -46,22 +46,15 @@
|
||||
"@angular/language-service": "^9.1.12",
|
||||
"@nguniversal/builders": "9.0.0-next.9",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/jasmine": "^3.5.13",
|
||||
"@types/jasminewd2": "^2.0.8",
|
||||
"@types/node": "^12.12.54",
|
||||
"codelyzer": "^5.2.2",
|
||||
"jasmine-core": "^3.5.0",
|
||||
"jasmine-spec-reporter": "^4.2.1",
|
||||
"karma": "^4.4.1",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||
"karma-jasmine": "^3.0.3",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"protractor": "^5.4.4",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^6.7.1",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"tslint": "^6.1.3",
|
||||
"typescript": "^3.8.3",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack-cli": "^3.3.12"
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@ export class ModalComponent {
|
||||
async open(TheModalComponent: any) {
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: TheModalComponent,
|
||||
animated: false,
|
||||
componentProps: {
|
||||
value: '123',
|
||||
prop: '321'
|
||||
@ -40,7 +41,7 @@ export class ModalComponent {
|
||||
modal.onDidDismiss().then(() => {
|
||||
NgZone.assertInAngularZone();
|
||||
if (!this.onWillDismiss) {
|
||||
throw new Error('onWillDismiss should be emited first');
|
||||
throw new Error('onWillDismiss should be emitted first');
|
||||
}
|
||||
this.onDidDismiss = true;
|
||||
});
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
@ -3,7 +3,6 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
|
||||
@ -47,12 +47,6 @@ Cypress.Commands.add('ionPageVisible', (pageId) => {
|
||||
// cy.get(`div.ion-page[data-pageid=${pageId}]`).should('have.attr', 'style', 'z-index: 101;')
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionPageInvisible', (pageId) => {
|
||||
cy.get(`div.ion-page[data-pageid=${pageId}]`)
|
||||
.should('have.class', 'ion-page-invisible')
|
||||
.should('have.length', 1);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionPageHidden', (pageId) => {
|
||||
cy.get(`div.ion-page[data-pageid=${pageId}]`)
|
||||
.should('have.class', 'ion-page-hidden')
|
||||
|
||||
@ -47,12 +47,6 @@ Cypress.Commands.add('ionPageVisible', (pageId) => {
|
||||
.should('have.length', 1)
|
||||
})
|
||||
|
||||
Cypress.Commands.add('ionPageInvisible', (pageId) => {
|
||||
cy.get(`div.ion-page[data-pageid=${pageId}]`)
|
||||
.should('have.class', 'ion-page-invisible')
|
||||
.should('have.length', 1)
|
||||
})
|
||||
|
||||
Cypress.Commands.add('ionPageHidden', (pageId) => {
|
||||
cy.get(`div.ion-page[data-pageid=${pageId}]`)
|
||||
.should('have.class', 'ion-page-hidden')
|
||||
|
||||
Reference in New Issue
Block a user