From cce4d8062f266a19ce6827bfefeb82cb30e3f0e4 Mon Sep 17 00:00:00 2001 From: Basso Date: Fri, 13 Sep 2019 16:36:26 +0200 Subject: [PATCH] test: introduce e2e tests for the demo site (#3362) --- angular.json | 15 ++++++ demo/protractor.conf.js | 51 ++++++++++++++++++ .../src/app/components/components.e2e-spec.ts | 54 +++++++++++++++++++ demo/src/app/tools.po.ts | 21 ++++++++ demo/tsconfig.spec.json | 15 ++++++ package.json | 3 +- 6 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 demo/protractor.conf.js create mode 100644 demo/src/app/components/components.e2e-spec.ts create mode 100644 demo/src/app/tools.po.ts create mode 100644 demo/tsconfig.spec.json diff --git a/angular.json b/angular.json index 9dbbdb5df5..07d5354006 100644 --- a/angular.json +++ b/angular.json @@ -116,6 +116,21 @@ } } }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "demo/protractor.conf.js", + "devServerTarget": "demo:serve" + }, + "configurations": { + "production": { + "devServerTarget": "demo:serve:production" + }, + "noserve": { + "devServerTarget": "" + } + } + }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { diff --git a/demo/protractor.conf.js b/demo/protractor.conf.js new file mode 100644 index 0000000000..2f0c923d96 --- /dev/null +++ b/demo/protractor.conf.js @@ -0,0 +1,51 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter } = require('jasmine-spec-reporter'); + +const chromeArgs = process.env.TRAVIS ? [ + '--headless', + '--no-sandbox', + '--window-size=1280x800' +] : []; + +const jasmineNodeOpts = { + showColors: true, + defaultTimeoutInterval: 30000 +}; + +if (!process.env.TRAVIS) { + jasmineNodeOpts.print = function() {}; +} + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './src/**/*.e2e-spec.ts' + ], + capabilities: { + browserName: 'chrome', + chromeOptions: { + args: chromeArgs + } + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts, + async onPrepare() { + require('ts-node').register({ + project: require('path').join(__dirname, './tsconfig.spec.json') + }); + + if (!process.env.TRAVIS) { + jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); + } + + // Require because some demo pages have pending process and the tests fail with timeout + // For example: autoclose alert in the alert page component + browser.waitForAngularEnabled(false); + + await browser.get(`/`); + } +}; diff --git a/demo/src/app/components/components.e2e-spec.ts b/demo/src/app/components/components.e2e-spec.ts new file mode 100644 index 0000000000..6436ebd738 --- /dev/null +++ b/demo/src/app/components/components.e2e-spec.ts @@ -0,0 +1,54 @@ +import { browser, $ } from 'protractor'; +import { getLinkElement, getComponentTabsLinks, getCodeToggleElement, getCodeElements } from '../tools.po'; + + + +describe(`Components`, () => { + + beforeAll(async() => { + await getLinkElement(`components`).click(); + }); + + const components = [ + 'accordion', 'alert', 'buttons', 'carousel', 'collapse', 'datepicker', 'dropdown', + 'modal', 'pagination', 'popover', 'progressbar', 'rating', 'table', + 'tabset', 'timepicker', 'toast', 'tooltip', 'typeahead' + ]; + components.forEach((component) => { + describe(`${component} page`, () => { + + + beforeAll(async() => { + await getLinkElement(`components/${component}`).click(); + }); + + afterAll(async () => { + const browserLog = await browser.manage().logs().get('browser'); + if (browserLog.length > 0) { + console.error(browserLog); + fail(`Unexpected console messages found`); + } + }); + + it(`should display the tabs`, async () => { + const links = getComponentTabsLinks(component); + const nbTabs = await links.count(); + for (let i = 0; i < nbTabs; i++) { + await links.get(i).click(); + } + }); + + it(`should display code samples`, async () => { + await getLinkElement(`components/${component}/examples`).click(); + + const initialCodeElements = await getCodeElements().count(); + await getCodeToggleElement().click(); + expect(await getCodeElements().count()).toBe(initialCodeElements + 1); + await getCodeToggleElement().click(); + expect(await getCodeElements().count()).toBe(initialCodeElements); + }); + + }); + + }); +}); diff --git a/demo/src/app/tools.po.ts b/demo/src/app/tools.po.ts new file mode 100644 index 0000000000..cfc5e40412 --- /dev/null +++ b/demo/src/app/tools.po.ts @@ -0,0 +1,21 @@ +import { $, $$ } from 'protractor'; + +export const getLinkElement = (link) => { + return $(`a[href="#/${link}"]`); +}; + +export const getComponentTabsLinks = (component) => { + return $('header.title').$$(`a.nav-link[href^="#/components/${component}"]`); +}; + +export const getCodeToggleElement = () => { + return $$(`button.toggle-code`).get(0); +}; + +export const getCodeElements = () => { + return $$(`code.language-html`); +}; + + + + diff --git a/demo/tsconfig.spec.json b/demo/tsconfig.spec.json new file mode 100644 index 0000000000..4a0ecb58cb --- /dev/null +++ b/demo/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "commonjs", + "types": [ + "jasmine", + "jasminewd2", + "node" + ] + }, + "include": [ + "**/*.e2e-spec.ts" + ] +} diff --git a/package.json b/package.json index 0e9c8f9705..049b22ea99 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "build": "yarn ngb:build && yarn demo:build", "test": "yarn check-format && yarn ngb:lint && yarn ngb:test", "tdd": "yarn ngb:tdd", - "e2e": "yarn e2e-app:lint && yarn ngb:e2e", + "e2e": "yarn e2e-app:lint && yarn ngb:e2e && yarn demo:e2e", "demo": "yarn demo:docs && yarn demo:stackblitzes && yarn demo:serve", "ssr": "yarn ssr-app:lint && yarn ssr-app:build && yarn ssr-app:e2e", "changelog": "conventional-changelog --preset angular --infile CHANGELOG.md --same-file --release-count 1", @@ -38,6 +38,7 @@ "demo:build": "yarn demo:lint && yarn demo:docs && yarn demo:stackblitzes && ng build demo --prod", "demo:deploy": "yarn demo:build && yarn demo:push", "demo:publish": "gh-pages --dist demo/dist --branch master --repo https://github.com/ng-bootstrap/ng-bootstrap.github.io.git", + "demo:e2e": "yarn demo:docs && ng e2e demo", "ssr-app:lint": "ng lint ssr-app", "ssr-app:serve": "ng serve ssr-app --host 0.0.0.0", "ssr-app:serve-express": "node ssr-app/dist/server",