diff --git a/packages/web/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/web/src/generators/application/__snapshots__/application.spec.ts.snap index b21d49dd878238..95ca429da2c024 100644 --- a/packages/web/src/generators/application/__snapshots__/application.spec.ts.snap +++ b/packages/web/src/generators/application/__snapshots__/application.spec.ts.snap @@ -1,5 +1,151 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`app not nested should generate files if bundler is vite 1`] = ` +"import { defineConfig, devices } from '@playwright/test'; +import { nxE2EPreset } from '@nx/playwright/preset'; + +import { workspaceRoot } from '@nx/devkit'; + +// For CI, you may want to set BASE_URL to the deployed application. +const baseURL = process.env['BASE_URL'] || 'http://localhost:4300'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + ...nxE2EPreset(__filename, { testDir: './src' }), + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + baseURL, + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + /* Run your local dev server before starting the tests */ + webServer: { + command: 'npx nx my-app:preview', + url: 'http://localhost:4300', + reuseExistingServer: !process.env.CI, + cwd: workspaceRoot, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + // Uncomment for mobile browsers support + /* { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, */ + + // Uncomment for branded browsers + /* { + name: 'Microsoft Edge', + use: { ...devices['Desktop Edge'], channel: 'msedge' }, + }, + { + name: 'Google Chrome', + use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + } */ + ], +}); +" +`; + +exports[`app not nested should use serve target and port if bundler=vite, e2eTestRunner=playwright, addPlugin=false 1`] = ` +"import { defineConfig, devices } from '@playwright/test'; +import { nxE2EPreset } from '@nx/playwright/preset'; + +import { workspaceRoot } from '@nx/devkit'; + +// For CI, you may want to set BASE_URL to the deployed application. +const baseURL = process.env['BASE_URL'] || 'http://localhost:4200'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + ...nxE2EPreset(__filename, { testDir: './src' }), + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + baseURL, + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + /* Run your local dev server before starting the tests */ + webServer: { + command: 'npx nx my-app:serve', + url: 'http://localhost:4200', + reuseExistingServer: !process.env.CI, + cwd: workspaceRoot, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + // Uncomment for mobile browsers support + /* { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, */ + + // Uncomment for branded browsers + /* { + name: 'Microsoft Edge', + use: { ...devices['Desktop Edge'], channel: 'msedge' }, + }, + { + name: 'Google Chrome', + use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + } */ + ], +}); +" +`; + exports[`app setup web app with --bundler=vite should setup vite configuration 1`] = `null`; exports[`app should setup eslint 1`] = ` diff --git a/packages/web/src/generators/application/application.legacy.spec.ts b/packages/web/src/generators/application/application.legacy.spec.ts index 7da4e436afc3cb..a541524603e598 100644 --- a/packages/web/src/generators/application/application.legacy.spec.ts +++ b/packages/web/src/generators/application/application.legacy.spec.ts @@ -179,6 +179,9 @@ describe('web app generator (legacy)', () => { }, }, "defaultConfiguration": "development", + "dependsOn": [ + "build", + ], "executor": "@nx/vite:preview-server", "options": { "buildTarget": "my-vite-app:build", diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts index 7c46f607846b02..52c4eff79fa995 100644 --- a/packages/web/src/generators/application/application.spec.ts +++ b/packages/web/src/generators/application/application.spec.ts @@ -1,7 +1,12 @@ import 'nx/src/internal-testing-utils/mock-project-graph'; import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version'; -import { readProjectConfiguration, Tree } from '@nx/devkit'; +import { + readNxJson, + readProjectConfiguration, + Tree, + updateNxJson, +} from '@nx/devkit'; import { getProjects, readJson } from '@nx/devkit'; import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; @@ -159,10 +164,22 @@ describe('app', () => { }); it('should generate files if bundler is vite', async () => { + const nxJson = readNxJson(tree); + nxJson.plugins ??= []; + nxJson.plugins.push({ + plugin: '@nx/vite/plugin', + options: { + buildTargetName: 'build', + previewTargetName: 'preview', + }, + }); + updateNxJson(tree, nxJson); await applicationGenerator(tree, { name: 'my-app', bundler: 'vite', projectNameAndRootFormat: 'as-provided', + e2eTestRunner: 'playwright', + addPlugin: true, }); expect(tree.exists('my-app/src/main.ts')).toBeTruthy(); expect(tree.exists('my-app/src/app/app.element.ts')).toBeTruthy(); @@ -179,7 +196,9 @@ describe('app', () => { path: './tsconfig.spec.json', }, ]); - expect(tree.exists('my-app-e2e/playwright.config.ts')).toBeTruthy(); + expect( + tree.read('my-app-e2e/playwright.config.ts', 'utf-8') + ).toMatchSnapshot(); expect(tree.exists('my-app/index.html')).toBeTruthy(); expect(tree.exists('my-app/vite.config.ts')).toBeTruthy(); expect(tree.exists(`my-app/environments/environment.ts`)).toBeFalsy(); @@ -188,6 +207,18 @@ describe('app', () => { ).toBeFalsy(); }); + it('should use serve target and port if bundler=vite, e2eTestRunner=playwright, addPlugin=false', async () => { + await applicationGenerator(tree, { + name: 'my-app', + bundler: 'vite', + projectNameAndRootFormat: 'as-provided', + e2eTestRunner: 'playwright', + }); + expect( + tree.read('my-app-e2e/playwright.config.ts', 'utf-8') + ).toMatchSnapshot(); + }); + it('should extend from root tsconfig.json when no tsconfig.base.json', async () => { tree.rename('tsconfig.base.json', 'tsconfig.json'); diff --git a/packages/web/src/generators/application/application.ts b/packages/web/src/generators/application/application.ts index 8547f4c899d645..fbc361454a9da0 100644 --- a/packages/web/src/generators/application/application.ts +++ b/packages/web/src/generators/application/application.ts @@ -406,8 +406,8 @@ export async function applicationGeneratorInternal(host: Tree, schema: Schema) { linter: options.linter, setParserOptionsProject: options.setParserOptionsProject, webServerCommand: `${getPackageManagerCommand().exec} nx ${ - options.e2eWebServerTarget - } ${options.name}`, + options.projectName + }:${options.e2eWebServerTarget}`, webServerAddress: options.e2eWebServerAddress, addPlugin: options.addPlugin, }); @@ -493,6 +493,7 @@ async function normalizeOptions( nxJson.useInferencePlugins !== false; options.addPlugin ??= addPluginDefault; + let e2ePort = 4200; let e2eWebServerTarget = 'serve'; if (options.addPlugin) { if (nxJson.plugins) { @@ -500,11 +501,20 @@ async function normalizeOptions( if ( options.bundler === 'vite' && typeof plugin === 'object' && - plugin.plugin === '@nx/vite/plugin' && - (plugin.options as VitePluginOptions).serveTargetName + plugin.plugin === '@nx/vite/plugin' ) { - e2eWebServerTarget = (plugin.options as VitePluginOptions) - .serveTargetName; + e2eWebServerTarget = + options.e2eTestRunner === 'playwright' + ? (plugin.options as VitePluginOptions).previewTargetName ?? + 'preview' + : (plugin.options as VitePluginOptions).serveTargetName ?? + 'serve'; + e2ePort = + e2eWebServerTarget === + (plugin.options as VitePluginOptions)?.previewTargetName || + e2eWebServerTarget === 'preview' + ? 4300 + : e2ePort; } else if ( options.bundler === 'webpack' && typeof plugin === 'object' && @@ -518,7 +528,6 @@ async function normalizeOptions( } } - let e2ePort = 4200; if ( nxJson.targetDefaults?.[e2eWebServerTarget] && nxJson.targetDefaults?.[e2eWebServerTarget].options?.port