feat(qwik-nx): extract e2e logic to a separate generator (#50)

Author: dmitry-stepanenko

packages/qwik-nx/generators.json

@@ -44,6 +44,11 @@
       "schema": "./src/generators/setup-tailwind/schema.json",
       "description": "Set up Tailwind configuration for a project.",
       "aliases": ["tailwind", "tw", "t"]
+    },
+    "e2e-project": {
+      "factory": "./src/generators/e2e-project/generator",
+      "schema": "./src/generators/e2e-project/schema.json",
+      "description": "Create an E2E app for a Qwik app"
     }
   }
 }

packages/qwik-nx/src/generators/application/generator.ts

@@ -15,10 +15,10 @@ import { addStyledModuleDependencies } from '../../utils/add-styled-dependencies
 import { configureEslint } from '../../utils/configure-eslint';
 import setupTailwindGenerator from '../setup-tailwind/setup-tailwind';
 import { SetupTailwindOptions } from './../setup-tailwind/schema.d';
-import { addE2eProject } from './lib/add-e2e-project';
 import { NormalizedSchema, QwikAppGeneratorSchema } from './schema';
 import { getQwikApplicationProjectTargets } from './utils/get-qwik-application-project-params';
 import { normalizeOptions } from './utils/normalize-options';
+import { addE2eProject } from '../e2e-project/generator';
 
 function addFiles(tree: Tree, options: NormalizedSchema) {
   const templateOptions = {
@@ -77,8 +77,15 @@ export async function appGenerator(
 
   tasks.push(addCommonQwikDependencies(tree));
 
-  const e2eProjectTask = await addE2eProject(tree, normalizedOptions);
-  tasks.push(e2eProjectTask);
+  if (normalizedOptions.e2eTestRunner !== 'none') {
+    const e2eProjectTask = await addE2eProject(tree, {
+      project: normalizedOptions.projectName,
+      directory: normalizedOptions.directory,
+      e2eTestRunner: normalizedOptions.e2eTestRunner,
+      skipFormat: true,
+    });
+    tasks.push(e2eProjectTask);
+  }
 
   if (!options.skipFormat) {
     await formatFiles(tree);

packages/qwik-nx/src/generators/application/lib/add-e2e-project.ts

@@ -22,5 +22,4 @@ export interface NormalizedSchema extends QwikAppGeneratorSchema {
   setupVitest: boolean;
   parsedTags: string[];
   styleExtension: Exclude<QwikAppGeneratorSchema['style'], 'none'> | null;
-  e2eProjectName: string;
 }

packages/qwik-nx/src/generators/application/schema.d.ts

@@ -37,8 +37,6 @@ export const normalizeOptions = (
 
   const styleExtension = options.style !== 'none' ? options.style : null;
 
-  const e2eProjectName = `${names(options.name).fileName}-e2e`;
-
   return {
     ...options,
     projectName: appProjectName,
@@ -48,6 +46,5 @@ export const normalizeOptions = (
     styleExtension,
     setupVitest: options.unitTestRunner === 'vitest',
     parsedTags,
-    e2eProjectName,
   };
 };

packages/qwik-nx/src/generators/application/utils/normalize-options.ts

@@ -0,0 +1,48 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { Tree, readProjectConfiguration } from '@nrwl/devkit';
+import { appGenerator } from './../application/generator';
+
+import generator from './generator';
+import { E2eProjectGeneratorSchema } from './schema';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const devkit = require('@nrwl/devkit');
+
+describe('e2e project', () => {
+  let appTree: Tree;
+  const defaultOptions: Omit<E2eProjectGeneratorSchema, 'e2eTestRunner'> = {
+    project: 'myapp',
+  };
+
+  jest.spyOn(devkit, 'ensurePackage').mockReturnValue(Promise.resolve());
+
+  beforeEach(() => {
+    appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    appGenerator(appTree, {
+      name: 'myapp',
+      e2eTestRunner: 'none',
+    });
+  });
+
+  it('--e2eTestRunner playwright', async () => {
+    await generator(appTree, {
+      ...defaultOptions,
+      e2eTestRunner: 'playwright',
+    });
+    const config = readProjectConfiguration(appTree, 'myapp-e2e');
+    expect(config).toBeDefined();
+    expect(config.targets.e2e.executor).toEqual('@nxkit/playwright:test');
+    expect(appTree.exists('apps/myapp-e2e/playwright.config.ts')).toBeTruthy();
+  });
+
+  it('--e2eTestRunner cypress', async () => {
+    await generator(appTree, {
+      ...defaultOptions,
+      e2eTestRunner: 'cypress',
+    });
+    const config = readProjectConfiguration(appTree, 'myapp-e2e');
+    expect(config).toBeDefined();
+    expect(config.targets.e2e.executor).toEqual('@nrwl/cypress:cypress');
+    expect(appTree.exists('apps/myapp-e2e/cypress.config.ts')).toBeTruthy();
+  });
+});

packages/qwik-nx/src/generators/e2e-project/generator.spec.ts

@@ -0,0 +1,59 @@
+import {
+  ensurePackage,
+  GeneratorCallback,
+  readProjectConfiguration,
+  Tree,
+} from '@nrwl/devkit';
+import { getInstalledNxVersion } from '../../utils/get-installed-nx-version';
+import { nxKitVersion } from '../../utils/versions';
+import { E2eProjectGeneratorSchema, NormalizedSchema } from './schema';
+import { normalizeOptions } from './utils/normalize-options';
+
+export async function addE2eProject(
+  tree: Tree,
+  options: E2eProjectGeneratorSchema
+): Promise<GeneratorCallback> {
+  const projectConfiguration = readProjectConfiguration(tree, options.project);
+
+  if (projectConfiguration.projectType !== 'application') {
+    throw new Error('Cannot setup e2e project for the given frontend project.');
+  }
+
+  const normalizedOptions = normalizeOptions(tree, options);
+  if (options.e2eTestRunner === 'cypress') {
+    return addCypress(tree, normalizedOptions);
+  }
+
+  if (options.e2eTestRunner === 'playwright') {
+    return addPlaywright(tree, normalizedOptions);
+  }
+}
+
+async function addCypress(tree: Tree, options: NormalizedSchema) {
+  await ensurePackage(tree, '@nrwl/cypress', getInstalledNxVersion(tree));
+  const { cypressProjectGenerator } = await import('@nrwl/cypress');
+
+  return await cypressProjectGenerator(tree, {
+    ...options,
+    name: options.e2eProjectName,
+    directory: options.directory,
+    project: options.project,
+    bundler: 'vite',
+    skipFormat: options.skipFormat,
+  });
+}
+
+async function addPlaywright(tree: Tree, options: NormalizedSchema) {
+  await ensurePackage(tree, '@nxkit/playwright', nxKitVersion);
+  const { projectGenerator } = await import('@nxkit/playwright');
+
+  return await projectGenerator(tree, {
+    ...options,
+    name: options.e2eProjectName,
+    directory: options.directory,
+    frontendProject: options.project,
+    skipFormat: options.skipFormat,
+  });
+}
+
+export default addE2eProject;

packages/qwik-nx/src/generators/e2e-project/generator.ts

@@ -0,0 +1,12 @@
+export interface E2eProjectGeneratorSchema {
+  project: string;
+  e2eTestRunner: 'playwright' | 'cypress';
+  directory?: string;
+  skipFormat?: boolean;
+}
+
+export interface NormalizedSchema extends E2eProjectGeneratorSchema {
+  e2eProjectName: string;
+  projectRoot: string;
+  projectDirectory: string;
+}

packages/qwik-nx/src/generators/e2e-project/schema.d.ts

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "E2eProject",
+  "title": "Create an E2E app for a Qwik app",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "The name of the frontend project to test."
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["playwright", "cypress"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "default": "playwright"
+    },
+    "directory": {
+      "type": "string",
+      "description": "A directory where the project is placed"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": ["project", "e2eTestRunner"]
+}

packages/qwik-nx/src/generators/e2e-project/schema.json

@@ -0,0 +1,21 @@
+import { getWorkspaceLayout, names, Tree } from '@nrwl/devkit';
+import { E2eProjectGeneratorSchema, NormalizedSchema } from '../schema';
+
+export function normalizeOptions(
+  tree: Tree,
+  options: E2eProjectGeneratorSchema
+): NormalizedSchema {
+  const name = names(options.project + '-e2e').fileName;
+  const projectDirectory = options.directory
+    ? `${names(options.directory).fileName}/${name}`
+    : name;
+  const e2eProjectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
+  const projectRoot = `${getWorkspaceLayout(tree).libsDir}/${projectDirectory}`;
+
+  return {
+    ...options,
+    e2eProjectName,
+    projectRoot,
+    projectDirectory,
+  };
+}