feat(qwik-nx): use nx e2e generators directly (#210)

BREAKING CHANGE: `qwik-nx/e2e-project` has been removed in favour of direct usage of nx generators

Author: dmitry-stepanenko

package.json

@@ -30,14 +30,14 @@
     "@nx/jest": "16.10.0",
     "@nx/js": "16.10.0",
     "@nx/linter": "16.10.0",
+    "@nx/playwright": "16.10.0",
     "@nx/plugin": "16.10.0",
     "@nx/storybook": "16.10.0",
     "@nx/vite": "16.10.0",
     "@nx/workspace": "16.10.0",
-    "@nxkit/playwright": "^3.0.2",
     "@swc-node/register": "1.6.8",
     "@swc/cli": "0.1.62",
-    "@swc/core": "^1.2.173",
+    "@swc/core": "^1.3.95",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.4.0",
     "@types/node": "16.11.7",

packages/qwik-nx/generators.json

@@ -45,11 +45,6 @@
       "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"
-    },
     "cloudflare-pages-integration": {
       "factory": "./src/generators/integrations/cloudflare-pages-integration/generator",
       "schema": "./src/generators/integrations/cloudflare-pages-integration/schema.json",

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

@@ -60,7 +60,7 @@ describe('qwik-nx generator', () => {
       });
       const config = readProjectConfiguration(appTree, 'myapp-e2e');
       expect(config).toBeDefined();
-      expect(config.targets?.e2e.executor).toEqual('@nxkit/playwright:test');
+      expect(config.targets?.e2e.executor).toEqual('@nx/playwright:playwright');
       expect(
         appTree.exists('apps/myapp-e2e/playwright.config.ts')
       ).toBeTruthy();

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

@@ -20,7 +20,7 @@ import { SetupTailwindOptions } from './../setup-tailwind/schema.d';
 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';
+import { addE2eProject } from './utils/add-e2e';
 
 function addFiles(tree: Tree, options: NormalizedSchema) {
   const templateOptions = {
@@ -89,12 +89,7 @@ export async function appGenerator(
     normalizedOptions.e2eTestRunner &&
     normalizedOptions.e2eTestRunner !== 'none'
   ) {
-    const e2eProjectTask = await addE2eProject(tree, {
-      project: normalizedOptions.projectName,
-      directory: normalizedOptions.directory,
-      e2eTestRunner: normalizedOptions.e2eTestRunner,
-      skipFormat: true,
-    });
+    const e2eProjectTask = await addE2eProject(tree, normalizedOptions);
     tasks.push(e2eProjectTask);
   }
 

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

@@ -28,4 +28,6 @@ export interface NormalizedSchema extends QwikAppGeneratorSchema {
   parsedTags: string[];
   styleExtension: Exclude<QwikAppGeneratorSchema['style'], 'none'> | null;
   projectNameAndRootFormat: ProjectNameAndRootFormat;
+  e2eProjectName: string;
+  e2eProjectRoot: string;
 }

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

@@ -0,0 +1,74 @@
+import {
+  addProjectConfiguration,
+  ensurePackage,
+  GeneratorCallback,
+  getPackageManagerCommand,
+  joinPathFragments,
+  Tree,
+} from '@nx/devkit';
+import { getInstalledNxVersion } from '../../../utils/get-installed-nx-version';
+import { NormalizedSchema } from '../schema';
+import { Linter } from '@nx/linter';
+
+export async function addE2eProject(
+  tree: Tree,
+  options: NormalizedSchema
+): Promise<GeneratorCallback> {
+  if (options.e2eTestRunner === 'cypress') {
+    return addCypress(tree, options);
+  }
+
+  if (options.e2eTestRunner === 'playwright') {
+    return addPlaywright(tree, options);
+  }
+
+  return () => void 0;
+}
+
+async function addCypress(tree: Tree, options: NormalizedSchema) {
+  ensurePackage('@nx/cypress', getInstalledNxVersion(tree));
+  const { configurationGenerator } = await import('@nx/cypress');
+
+  addProjectConfiguration(tree, options.e2eProjectName, {
+    projectType: 'application',
+    root: options.e2eProjectRoot,
+    sourceRoot: joinPathFragments(options.e2eProjectRoot, 'src'),
+    targets: {},
+    tags: [],
+    implicitDependencies: [options.projectName],
+  });
+  return await configurationGenerator(tree, {
+    project: options.e2eProjectName,
+    directory: 'src',
+    linter: options.linter,
+    skipFormat: true,
+    devServerTarget: `${options.projectName}:serve:development`,
+  });
+}
+
+async function addPlaywright(tree: Tree, options: NormalizedSchema) {
+  ensurePackage('@nx/playwright', getInstalledNxVersion(tree));
+  const { configurationGenerator: playwrightConfigurationGenerator } =
+    await import('@nx/playwright');
+
+  addProjectConfiguration(tree, options.e2eProjectName, {
+    projectType: 'application',
+    root: options.e2eProjectRoot,
+    sourceRoot: joinPathFragments(options.e2eProjectRoot, 'src'),
+    targets: {},
+    implicitDependencies: [options.projectName],
+  });
+  return await playwrightConfigurationGenerator(tree, {
+    project: options.e2eProjectName,
+    skipFormat: true,
+    directory: 'src',
+    js: false,
+    linter: options.linter ?? Linter.EsLint,
+    webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
+      options.projectName
+    }`,
+    webServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
+    setParserOptionsProject: true,
+    skipPackageJson: false,
+  });
+}

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

@@ -26,6 +26,10 @@ export async function normalizeOptions(
   options.strict = options.strict ?? true;
   options.unitTestRunner = options.unitTestRunner ?? 'vitest';
 
+  const rootProject = appProjectRoot === '.';
+  const e2eProjectName = rootProject ? 'e2e' : `${appProjectName}-e2e`;
+  const e2eProjectRoot = rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+
   const styleExtension = options.style !== 'none' ? options.style : null;
 
   return {
@@ -40,5 +44,7 @@ export async function normalizeOptions(
     devServerPort: options.devServerPort ?? 5173,
     previewServerPort: options.previewServerPort ?? 4173,
     projectNameAndRootFormat,
+    e2eProjectName,
+    e2eProjectRoot,
   };
 }