feat(integration-test-runner): Add Cypress

Fix PR comments
- Refactor config to js to be able to read port from aurelia config
- Remove title test due to inconsistency in skeleton
- Add different test setup for navigation feature

Author: michaelw85

lib/commands/new/buildsystems/general/integration-test-runner/cypress.js

@@ -4,44 +4,69 @@ const ProjectItem = require('../../../../../project-item').ProjectItem;
 module.exports = function(project) {
   const cypressResourceFolder = 'test/cypress';
   const isUsingTypescript = project.model.transpiler.id === 'typescript';
+  const isUsingNavigationFeature = !!project.model.features.navigation;
 
   if (isUsingTypescript) {
-    project.addToDevDependencies(
-      '@cypress/webpack-preprocessor'
-    );
+    project.addToDevDependencies('@cypress/webpack-preprocessor');
   }
 
   const testDirResources = [
     ProjectItem.directory('fixtures').add(
-      ProjectItem.resource('example.json', `${cypressResourceFolder}/fixtures/example.json`)
+      ProjectItem.resource(
+        'example.json',
+        `${cypressResourceFolder}/fixtures/example.json`
+      )
     ),
     ProjectItem.directory('integration').add(
-      ProjectItem.resource('app.e2e.ext', `${cypressResourceFolder}/integration/app.e2e.ext`, project.model.transpiler)
+      ProjectItem.resource(
+        'app.e2e.ext',
+        `${cypressResourceFolder}/integration/app${isUsingNavigationFeature ? '-navigation' : ''}.e2e.ext`,
+        project.model.transpiler
+      )
     ),
     ProjectItem.directory('plugins').add(
-      ProjectItem.resource('index.js', `${cypressResourceFolder}/plugins/index.ext`, project.model.transpiler)
+      ProjectItem.resource(
+        'index.js',
+        `${cypressResourceFolder}/plugins/index.ext`,
+        project.model.transpiler
+      )
     ),
     ProjectItem.directory('screenshots'),
     ProjectItem.directory('support').add(
-      ProjectItem.resource('index.js', `${cypressResourceFolder}/support/index.js`),
-      ProjectItem.resource('commands.ext', `${cypressResourceFolder}/support/commands.ext`, project.model.transpiler)
+      ProjectItem.resource(
+        'index.js',
+        `${cypressResourceFolder}/support/index.js`
+      ),
+      ProjectItem.resource(
+        'commands.ext',
+        `${cypressResourceFolder}/support/commands.ext`,
+        project.model.transpiler
+      )
     ),
     ProjectItem.directory('videos')
   ];
 
   if (isUsingTypescript) {
-    testDirResources.push(ProjectItem.resource('tsconfig.json', `${cypressResourceFolder}/tsconfig.json`));
+    testDirResources.push(
+      ProjectItem.resource(
+        'tsconfig.json',
+        `${cypressResourceFolder}/tsconfig.json`
+      )
+    );
   }
 
-  project.addToTasks(
-    ProjectItem.resource('cypress.ext', 'tasks/cypress.ext', project.model.transpiler),
-    ProjectItem.resource('cypress.json', 'tasks/cypress.json')
-  ).addToDevDependencies(
-    'cypress'
-  ).addToContent(
-    ProjectItem.resource('cypress.json', 'content/cypress.json'),
-    project.tests.add(
-      project.e2eTests.add(...testDirResources)
+  project
+    .addToTasks(
+      ProjectItem.resource(
+        'cypress.ext',
+        'tasks/cypress.ext',
+        project.model.transpiler
+      ),
+      ProjectItem.resource('cypress.json', 'tasks/cypress.json')
     )
-  );
+    .addToDevDependencies('cypress')
+    .addToContent(
+      ProjectItem.resource('cypress.config.js', 'content/cypress.config.js'),
+      project.tests.add(project.e2eTests.add(...testDirResources))
+    );
 };

lib/resources/content/cypress.config.js

@@ -0,0 +1,14 @@
+const aureliaConfig = require('./aurelia_project/aurelia.json');
+const port = aureliaConfig.platform.port;
+
+module.exports = {
+  config: {
+    baseUrl: `http://localhost:${port}`,
+    fixturesFolder: 'test/e2e/fixtures',
+    integrationFolder: 'test/e2e/integration',
+    pluginsFile: 'test/e2e/plugins/index.js',
+    screenshotsFolder: 'test/e2e/screenshots',
+    supportFile: 'test/e2e/support/index.js',
+    videosFolder: 'test/e2e/videos'
+  }
+};

lib/resources/content/cypress.json

@@ -1,10 +1,11 @@
 import cypress from 'cypress';
 import { CLIOptions } from 'aurelia-cli';
+import config from '../../cypress.config';
 
 export default () => {
   if (CLIOptions.hasFlag('run')) {
-    cypress.run();
+    cypress.run(config);
   } else {
-    cypress.open();
+    cypress.open(config);
   }
-}
+};

lib/resources/tasks/cypress.js

@@ -1,10 +1,11 @@
 import * as cypress from 'cypress';
 import { CLIOptions } from 'aurelia-cli';
+import * as config from '../../cypress.config';
 
 export default () => {
   if (CLIOptions.hasFlag('run')) {
-    cypress.run();
+    cypress.run(config);
   } else {
-    cypress.open();
+    cypress.open(config);
   }
-}
+};

lib/resources/tasks/cypress.ts

@@ -0,0 +1,13 @@
+describe('Aurelia navigation app', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should load the page and display the initial page title', () => {
+    cy.title().should('equal', 'Welcome | Aurelia');
+  });
+
+  it('should display greeting', () => {
+    cy.get('h2').contains('Welcome to the Aurelia Navigation App!');
+  });
+});

lib/resources/test/cypress/integration/app-navigation.e2e.js

@@ -0,0 +1,13 @@
+describe('Aurelia navigation app', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should load the page and display the initial page title', () => {
+    cy.title().should('equal', 'Welcome | Aurelia');
+  });
+
+  it('should display greeting', () => {
+    cy.get('h2').contains('Welcome to the Aurelia Navigation App!');
+  });
+});

lib/resources/test/cypress/integration/app-navigation.e2e.ts

@@ -3,10 +3,6 @@ describe('Aurelia skeleton app', () => {
     cy.visit('/');
   });
 
-  it('should load the page and display the initial page title', () => {
-    cy.title().should('equal', 'Aurelia Navigation Skeleton');
-  });
-
   it('should display greeting', () => {
     cy.get('h1').contains('Hello World!');
   });

lib/resources/test/cypress/integration/app.e2e.js

@@ -3,10 +3,6 @@ describe('Aurelia skeleton app', () => {
     cy.visit('/');
   });
 
-  it('should load the page and display the initial page title', () => {
-    cy.title().should('equal', 'Aurelia Navigation Skeleton');
-  });
-
   it('should display greeting', () => {
     cy.get('h1').contains('Hello World!');
   });