@nx/next/src/generators/cypress-component-configuration/cypress-component-configuration.js

The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides: - Scaffolding for creating, building, serving, linting, and testing Next.js applications. - Integration wit

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.cypressComponentConfiguration = cypressComponentConfiguration;
exports.cypressComponentConfigurationInternal = cypressComponentConfigurationInternal;
const devkit_1 = require("@nx/devkit");
const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
const react_1 = require("@nx/react");
const ct_utils_1 = require("@nx/react/src/utils/ct-utils");
const path_1 = require("path");
const versions_1 = require("../../utils/versions");
function cypressComponentConfiguration(tree, options) {
    return cypressComponentConfigurationInternal(tree, {
        addPlugin: false,
        ...options,
    });
}
async function cypressComponentConfigurationInternal(tree, options) {
    const tasks = [];
    const { componentConfigurationGenerator: baseCyCtConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
    tasks.push(await baseCyCtConfig(tree, {
        project: options.project,
        skipFormat: true,
        framework: 'next',
        jsx: true,
        addPlugin: options.addPlugin,
    }));
    const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
    tasks.push(await webpackInitGenerator(tree, {
        skipFormat: true,
        addPlugin: options.addPlugin,
    }));
    const { ensureDependencies } = await Promise.resolve().then(() => __importStar(require('@nx/webpack/src/utils/ensure-dependencies')));
    tasks.push(ensureDependencies(tree, { compiler: 'swc', uiFramework: 'react' }));
    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
    if (projectConfig.targets?.['component-test']?.executor ===
        '@nx/cypress:cypress') {
        projectConfig.targets['component-test'].options = {
            ...projectConfig.targets['component-test'].options,
            skipServe: true,
        };
        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
    }
    await addFiles(tree, projectConfig, options);
    if (!options.skipFormat) {
        await (0, devkit_1.formatFiles)(tree);
    }
    return (0, devkit_1.runTasksInSerial)(...tasks);
}
async function addFiles(tree, projectConfig, opts) {
    const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => __importStar(require('@nx/cypress/src/utils/config')));
    const { getInstalledCypressMajorVersion } = await Promise.resolve().then(() => __importStar(require('@nx/cypress/src/utils/versions')));
    const installedCypressMajorVersion = getInstalledCypressMajorVersion(tree);
    const ctFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
    const updatedCommandFile = await addMountDefinition(tree.read(ctFile, 'utf-8'));
    const moduleSpecifier = installedCypressMajorVersion >= 14 ? 'cypress/react' : 'cypress/react18';
    tree.write(ctFile, `import { mount } from '${moduleSpecifier}';\nimport './styles.ct.css';\n${updatedCommandFile}`);
    const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
    const updatedCyConfig = await addDefaultCTConfig(tree.read(cyFile, 'utf-8'));
    tree.write(cyFile, `import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';\n${updatedCyConfig}`);
    const isUsingTailwind = ['js', 'cjs'].some((ext) => tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, `tailwind.config.${ext}`)));
    tree.write((0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'styles.ct.css'), `/* This is where you can load global styles to apply to all components. */
${isUsingTailwind
        ? `@tailwind base;
@tailwind components;
@tailwind utilities;`
        : ''}
`);
    if (opts.generateTests) {
        const filePaths = [];
        const sourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(projectConfig, tree);
        (0, devkit_1.visitNotIgnoredFiles)(tree, sourceRoot, (filePath) => {
            const fromProjectRootPath = (0, path_1.relative)(projectConfig.root, filePath);
            // we don't generate tests for pages/server-side/appDir components
            if (fromProjectRootPath.includes('pages') ||
                fromProjectRootPath.includes('server') ||
                fromProjectRootPath.includes('app')) {
                return;
            }
            if ((0, ct_utils_1.isComponent)(tree, filePath)) {
                filePaths.push(filePath);
            }
        });
        for (const filePath of filePaths) {
            await (0, react_1.componentTestGenerator)(tree, {
                project: opts.project,
                componentPath: filePath,
            });
        }
    }
}
exports.default = cypressComponentConfiguration;