add cypress e2e support for vue

.circleci/config.yml

@@ -3,9 +3,8 @@ orbs:
   node: circleci/node@2.1.0
 jobs:
   all:
-    executor:
-      name: node/default
-      tag: 'lts'
+    docker:
+      - image: cypress/base:12
     steps:
       - checkout
       - node/install-packages

apps/vue-plugin-e2e/tests/vue-plugin.test.ts

@@ -6,7 +6,7 @@ import {
   uniq
 } from '@nrwl/nx-plugin/testing';
 describe('vue-plugin e2e', () => {
-  it('should create, lint, test, and build app', async done => {
+  it('should create, lint, test, e2e and build app', async done => {
     const appName = uniq('app');
     ensureNxProject('@nx-plus/vue-plugin', 'dist/libs/vue-plugin');
     await runNxCommandAsync(`generate @nx-plus/vue-plugin:app ${appName}`);
@@ -21,6 +21,9 @@ describe('vue-plugin e2e', () => {
       Snapshots:   0 total
     `);
 
+    const e2eResult = await runNxCommandAsync(`e2e ${appName}-e2e --headless`);
+    expect(e2eResult.stdout).toContain('All specs passed!');
+
     const buildResult = await runNxCommandAsync(`build ${appName}`);
     expect(buildResult.stdout).toContain('Build complete.');
     expect(() =>
@@ -34,7 +37,7 @@ describe('vue-plugin e2e', () => {
     ).not.toThrow();
 
     done();
-  }, 100000);
+  }, 200000);
 
   describe('--directory subdir', () => {
     it('should create and build app', async done => {
@@ -57,6 +60,6 @@ describe('vue-plugin e2e', () => {
       ).not.toThrow();
 
       done();
-    }, 100000);
+    }, 200000);
   });
 });

libs/vue-plugin/src/builders/dev-server/builder.ts

@@ -94,7 +94,7 @@ export function runBuilder(
           .catch(err => obs.error(err));
       });
     }),
-    map(() => ({ success: true }))
+    map(({ url }) => ({ success: true, baseUrl: url }))
   );
 }
 

libs/vue-plugin/src/schematics/application/schema.d.ts

@@ -3,5 +3,6 @@ export interface ApplicationSchematicSchema {
   tags?: string;
   directory?: string;
   unitTestRunner: 'jest' | 'none';
+  e2eTestRunner: 'cypress' | 'none';
   skipFormat: boolean;
 }

libs/vue-plugin/src/schematics/application/schema.json

@@ -29,6 +29,12 @@
       "description": "Test runner to use for unit tests",
       "default": "jest"
     },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "none"],
+      "description": "Test runner to use for end to end (e2e) tests",
+      "default": "cypress"
+    },
     "skipFormat": {
       "type": "boolean",
       "description": "Skip formatting files",

libs/vue-plugin/src/schematics/application/schematic.spec.ts

@@ -10,6 +10,7 @@ describe('application schematic', () => {
   const options: ApplicationSchematicSchema = {
     name: 'my-app',
     unitTestRunner: 'jest',
+    e2eTestRunner: 'cypress',
     skipFormat: false
   };
 
@@ -53,6 +54,8 @@ describe('application schematic', () => {
     });
     expect(lint.builder).toBe('@nrwl/linter:lint');
     expect(test.builder).toBe('@nrwl/jest:jest');
+
+    expect(workspaceJson.projects['my-app-e2e']).toBeDefined();
   });
 
   it('should generate files', async () => {
@@ -91,6 +94,10 @@ describe('application schematic', () => {
         }
       }
     ]);
+
+    expect(
+      tree.readContent('apps/my-app-e2e/src/integration/app.spec.ts')
+    ).toContain("'Welcome to Your Vue.js + TypeScript App'");
   });
 
   describe('--unitTestRunner none', () => {
@@ -123,6 +130,25 @@ describe('application schematic', () => {
     });
   });
 
+  describe('--e2eTestRunner none', () => {
+    it('should not generate e2e configuration', async () => {
+      const tree = await testRunner
+        .runSchematicAsync(
+          'app',
+          { ...options, e2eTestRunner: 'none' },
+          appTree
+        )
+        .toPromise();
+      const workspaceJson = readJsonInTree(tree, 'workspace.json');
+
+      expect(workspaceJson.projects['my-app-e2e']).toBeUndefined();
+
+      const e2eDir = tree.getDir('apps/my-app-e2e');
+      expect(e2eDir.subfiles.length).toBe(0);
+      expect(e2eDir.subdirs.length).toBe(0);
+    });
+  });
+
   describe('--directory subdir', () => {
     it('should update workspace.json', async () => {
       const tree = await testRunner
@@ -196,6 +222,10 @@ describe('application schematic', () => {
           }
         }
       ]);
+
+      expect(
+        tree.readContent('apps/subdir/my-app-e2e/src/integration/app.spec.ts')
+      ).toContain("'Welcome to Your Vue.js + TypeScript App'");
     });
   });
 });

libs/vue-plugin/src/schematics/application/schematic.ts

@@ -151,6 +151,33 @@ function addJest(options: NormalizedSchema): Rule {
   ]);
 }
 
+function addCypress(options: NormalizedSchema): Rule {
+  return chain([
+    addPackageWithInit('@nrwl/cypress'),
+    externalSchematic('@nrwl/cypress', 'cypress-project', {
+      project: options.projectName,
+      name: options.name + '-e2e',
+      directory: options.directory,
+      linter: Linter.EsLint,
+      js: false
+    }),
+    tree => {
+      const appSpecPath =
+        options.projectRoot + '-e2e/src/integration/app.spec.ts';
+      tree.overwrite(
+        appSpecPath,
+        tree
+          .read(appSpecPath)
+          .toString('utf-8')
+          .replace(
+            `Welcome to ${options.projectName}!`,
+            'Welcome to Your Vue.js + TypeScript App'
+          )
+      );
+    }
+  ]);
+}
+
 export default function(options: ApplicationSchematicSchema): Rule {
   const normalizedOptions = normalizeOptions(options);
   return chain([
@@ -215,6 +242,9 @@ export default function(options: ApplicationSchematicSchema): Rule {
       return json;
     }),
     options.unitTestRunner === 'jest' ? addJest(normalizedOptions) : noop(),
+    options.e2eTestRunner === 'cypress'
+      ? addCypress(normalizedOptions)
+      : noop(),
     addDepsToPackageJson(
       {
         vue: '^2.6.11'