@nx/storybook 19.0.1 → 19.0.3

package/generators.json

@@ -18,7 +18,8 @@
     "cypress-project": {
       "factory": "./src/generators/cypress-project/cypress-project",
       "schema": "./src/generators/cypress-project/schema.json",
-      "description": "Add cypress e2e app to test a UI library that is set up for Storybook.",
+      "description": "Add cypress E2E app to test a ui library that is set up for Storybook.",
+      "x-deprecated": "Deprecated: Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.",
       "hidden": false
     },
     "migrate-7": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "19.0.1",
+  "version": "19.0.3",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -30,14 +30,14 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "19.0.1",
+    "@nx/devkit": "19.0.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "19.0.1",
-    "@nx/js": "19.0.1",
-    "@nx/eslint": "19.0.1",
-    "@nrwl/storybook": "19.0.1"
+    "@nx/cypress": "19.0.3",
+    "@nx/js": "19.0.3",
+    "@nx/eslint": "19.0.3",
+    "@nrwl/storybook": "19.0.3"
   },
   "publishConfig": {
     "access": "public"

package/presets/cypress.d.ts

@@ -1 +1,2 @@
-export declare function nxE2EStorybookPreset(filePath: string): any;
+import { NxCypressE2EPresetOptions } from '@nx/cypress/plugins/cypress-preset';
+export declare function nxE2EStorybookPreset(filePath: string, options?: NxCypressE2EPresetOptions): any;

package/presets/cypress.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nxE2EStorybookPreset = void 0;
 const cypress_preset_1 = require("@nx/cypress/plugins/cypress-preset");
-function nxE2EStorybookPreset(filePath) {
+function nxE2EStorybookPreset(filePath, options) {
     return {
-        ...(0, cypress_preset_1.nxE2EPreset)(filePath),
+        ...(0, cypress_preset_1.nxE2EPreset)(filePath, options),
         baseUrl: 'http://localhost:4400',
     };
 }

package/src/generators/configuration/schema.d.ts

@@ -12,11 +12,11 @@ export interface StorybookConfigureSchema {
   configureStaticServe?: boolean;
   skipFormat?: boolean;
   /**
-   * @deprecated Use interactionTests instead. This option will be removed in v19.
+   * @deprecated Use interactionTests instead. This option will be removed in v20.
    */
   configureCypress?: boolean;
   /**
-   * @deprecated Use interactionTests instead. This option will be removed in v19.
+   * @deprecated Use interactionTests instead. This option will be removed in v20.
    */
   cypressDirectory?: string;
   addPlugin?: boolean;

package/src/generators/configuration/schema.json

@@ -28,12 +28,12 @@
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v19."
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
     },
     "cypressDirectory": {
       "type": "string",
       "description": "A directory where the Cypress project will be placed. Added at root by default.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v19."
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
     },
     "linter": {
       "description": "The tool to use for running lint checks.",

package/src/generators/cypress-project/cypress-project.js

@@ -15,6 +15,7 @@ async function cypressProjectGenerator(tree, schema) {
 }
 exports.cypressProjectGenerator = cypressProjectGenerator;
 async function cypressProjectGeneratorInternal(tree, schema) {
+    devkit_1.logger.warn(`Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.`);
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
     const e2eName = schema.name ? `${schema.name}-e2e` : undefined;
     const { projectName, projectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
@@ -37,28 +38,42 @@ async function cypressProjectGeneratorInternal(tree, schema) {
         project: projectName,
         js: schema.js,
         linter: schema.linter,
-        directory: projectRoot,
         devServerTarget: `${schema.name}:storybook`,
         skipFormat: true,
     });
     const generatedCypressProjectName = (0, project_name_1.getE2eProjectName)(schema.name, libRoot, schema.directory);
     removeUnneededFiles(tree, generatedCypressProjectName, schema.js);
-    addBaseUrlToCypressConfig(tree, generatedCypressProjectName);
-    updateAngularJsonBuilder(tree, {
-        e2eProjectName: generatedCypressProjectName,
-        targetProjectName: schema.name,
-        ciTargetName: schema.ciTargetName,
-    });
+    const project = (0, devkit_1.readProjectConfiguration)(tree, generatedCypressProjectName);
+    if (project.targets.e2e && project.targets.e2e.options) {
+        addBaseUrlToCypressConfig(tree, generatedCypressProjectName, project.root);
+        updateAngularJsonBuilder(tree, {
+            e2eProjectName: generatedCypressProjectName,
+            targetProjectName: schema.name,
+            ciTargetName: schema.ciTargetName,
+        });
+    }
+    else if (hasCypressPlugin(tree)) {
+        generateCypressConfigForInferredPlugin(tree, generatedCypressProjectName, project.root, schema.name, schema.ciTargetName);
+    }
+    else {
+        throw new Error(`Unable to generate Cypress Project for Storybook project. Please report this issue at https://github.com/nrwl/nx/issues/new/choose`);
+    }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return cypressTask;
 }
 exports.cypressProjectGeneratorInternal = cypressProjectGeneratorInternal;
+function hasCypressPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/cypress/plugin'
+        : p.plugin === '@nx/cypress/plugin');
+}
 function removeUnneededFiles(tree, projectName, js) {
     const { sourceRoot, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const fileType = js ? 'js' : 'ts';
-    if (tree.exists((0, path_1.join)(root, 'cypress.config.ts'))) {
+    if (tree.exists((0, devkit_1.joinPathFragments)(root, 'cypress.config.ts'))) {
         (0, utilities_1.safeFileDelete)(tree, `${sourceRoot}/e2e/app.cy.${fileType}`);
         (0, utilities_1.safeFileDelete)(tree, `${sourceRoot}/support/app.po.${fileType}`);
     }
@@ -67,10 +82,27 @@ function removeUnneededFiles(tree, projectName, js) {
         (0, utilities_1.safeFileDelete)(tree, `${sourceRoot}/support/app.po.${fileType}`);
     }
 }
-function addBaseUrlToCypressConfig(tree, projectName) {
-    const projectRoot = (0, devkit_1.readProjectConfiguration)(tree, projectName).root;
-    const cypressJson = (0, path_1.join)(projectRoot, 'cypress.json');
-    const cypressTs = (0, path_1.join)(projectRoot, 'cypress.config.ts');
+function generateCypressConfigForInferredPlugin(tree, projectName, projectRoot, targetProjectName, ciTargetName) {
+    const cypressJson = (0, devkit_1.joinPathFragments)(projectRoot, 'cypress.json');
+    const cypressTs = (0, devkit_1.joinPathFragments)(projectRoot, 'cypress.config.ts');
+    if (tree.exists(cypressJson)) {
+        tree.delete(cypressJson);
+    }
+    if (tree.exists(cypressTs)) {
+        // cypress >= v10
+        tree.delete(cypressTs);
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files', 'inferred-target'), projectRoot, {
+            defaultWebServerCommand: `npx nx run ${targetProjectName}:storybook`,
+            ciWebServerCommand: ciTargetName
+                ? `npx nx run ${targetProjectName}:${ciTargetName}:ci`
+                : `npx nx run ${targetProjectName}:storybook:ci`,
+            tpl: '',
+        });
+    }
+}
+function addBaseUrlToCypressConfig(tree, projectName, projectRoot) {
+    const cypressJson = (0, devkit_1.joinPathFragments)(projectRoot, 'cypress.json');
+    const cypressTs = (0, devkit_1.joinPathFragments)(projectRoot, 'cypress.config.ts');
     // TODO(caleb): remove this when cypress < v10 is deprecated
     if (tree.exists(cypressJson)) {
         // cypress < v10
@@ -82,14 +114,14 @@ function addBaseUrlToCypressConfig(tree, projectName) {
     else if (tree.exists(cypressTs)) {
         // cypress >= v10
         tree.delete(cypressTs);
-        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files', 'explicit-target'), projectRoot, {
             tpl: '',
         });
     }
 }
 function updateAngularJsonBuilder(tree, opts) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, opts.e2eProjectName);
-    const e2eTarget = project.targets.e2e;
+    const e2eTarget = project.targets.e2e ?? {};
     project.targets.e2e = {
         ...e2eTarget,
         options: {

package/src/generators/cypress-project/files/inferred-target/cypress.config.ts__tpl__

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress';
+
+export default defineConfig({
+  e2e: nxE2EStorybookPreset(__dirname, {
+    cypressDir: 'src',
+    webServerCommands: {
+        default: "<%= defaultWebServerCommand %>",
+        ci: "<%= ciWebServerCommand %>"
+    },
+    ciWebServerCommand: "<%= ciWebServerCommand %>"
+  }),
+});

package/src/generators/cypress-project/schema.json

@@ -4,6 +4,7 @@
   "$id": "cypress-configure",
   "title": "Cypress Configuration",
   "description": "Add cypress E2E app to test a ui library that is set up for Storybook.",
+  "x-deprecated": "Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.",
   "type": "object",
   "properties": {
     "name": {

package/src/generators/init/init.js

@@ -60,7 +60,7 @@ async function initGeneratorInternal(tree, schema) {
         nxJson.useInferencePlugins !== false;
     schema.addPlugin ??= addPluginDefault;
     if (schema.addPlugin) {
-        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/storybook/plugin', plugin_1.createNodes, {
+        await (0, add_plugin_1.addPlugin)(tree, '@nx/storybook/plugin', plugin_1.createNodes, {
             serveStorybookTargetName: [
                 'storybook',
                 'serve:storybook',