test: introduce e2e tests for the demo site (ng-bootstrap#3362)

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": {

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(`/`);
+  }
+};

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);
+      });
+
+    });
+
+  });
+});

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`);
+};
+
+
+
+

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"
+  ]
+}

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",