@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";
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(() => 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(() => require('@nx/cypress/src/utils/config'));
    const { getInstalledCypressMajorVersion } = await Promise.resolve().then(() => 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;