Skip to content

Commit

Permalink
fix(testing): fix issues in static server target migrations (#27547)
Browse files Browse the repository at this point in the history
<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #27470
  • Loading branch information
leosvelperez authored Aug 21, 2024
1 parent da823e0 commit 2ffec0a
Show file tree
Hide file tree
Showing 4 changed files with 293 additions and 121 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ describe('update-ci-webserver-for-static-serve migration', () => {
ciTargetName: 'e2e-ci',
appName: 'app',
noVite: true,
ciWebServerCommand: 'nx run app:serve',
});

await expect(updateCiWebserverForStaticServe(tree)).resolves.not.toThrow();
Expand Down Expand Up @@ -75,6 +76,7 @@ describe('update-ci-webserver-for-static-serve migration', () => {
ciTargetName: 'e2e-ci',
appName: 'app',
noVite: true,
ciWebServerCommand: 'nx run app:serve',
});

// ACT
Expand Down Expand Up @@ -103,7 +105,7 @@ describe('update-ci-webserver-for-static-serve migration', () => {
`);
});

it('should not update the full command to serve-static target for webpack', async () => {
it('should update ciWebServerCommand to preview for vite app', async () => {
// ARRANGE
const nxJson = readNxJson(tree);
nxJson.plugins = [
Expand All @@ -115,41 +117,16 @@ describe('update-ci-webserver-for-static-serve migration', () => {
},
},
{
plugin: '@nx/webpack/plugin',
plugin: '@nx/vite/plugin',
options: {
serveStaticTargetName: 'webpack:serve-static',
buildTargetName: 'build',
previewTargetName: 'preview',
},
},
];
updateNxJson(tree, nxJson);

addProject(tree, tempFs, {
buildTargetName: 'build',
ciTargetName: 'e2e-ci',
appName: 'app',
noVite: true,
});

tree.write(
'app-e2e/cypress.config.ts',
`import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
...nxE2EPreset(__filename, {
cypressDir: 'src',
bundler: 'vite',
webServerCommands: {
default: 'nx run app:serve',
production: 'nx run app:preview',
},
ciWebServerCommand: 'echo "start" && nx run app:serve',
}),
baseUrl: 'http://localhost:4200',
},
});
`
);
addProject(tree, tempFs);

// ACT
await updateCiWebserverForStaticServe(tree);
Expand All @@ -168,7 +145,8 @@ export default defineConfig({
default: 'nx run app:serve',
production: 'nx run app:preview',
},
ciWebServerCommand: 'echo "start" && nx run app:webpack:serve-static',
ciWebServerCommand: 'nx run app:preview',
ciBaseUrl: 'http://localhost:4300',
}),
baseUrl: 'http://localhost:4200',
},
Expand All @@ -177,35 +155,113 @@ export default defineConfig({
`);
});

it('should update ciWebServerCommand to preview for vite app', async () => {
// ARRANGE
const nxJson = readNxJson(tree);
nxJson.plugins = [
{
plugin: '@nx/cypress/plugin',
options: {
targetName: 'e2e',
ciTargetName: 'e2e-ci',
it.each`
ciWebServerCommand | expectedCommand
${'echo "start" && nx run app:serve'} | ${'echo "start" && nx run app:static-serve'}
${'echo "start" && nx run app:serve:prod'} | ${'echo "start" && nx run app:static-serve'}
${'echo "start" && nx run app:serve --configuration=prod'} | ${'echo "start" && nx run app:static-serve'}
${'echo "start" && nx run app:serve --port 4200'} | ${'echo "start" && nx run app:static-serve --port=4200'}
${'echo "start" && nx run app:serve --port=4200'} | ${'echo "start" && nx run app:static-serve --port=4200'}
${'echo "start" && nx serve app'} | ${'echo "start" && nx run app:static-serve'}
${'echo "start" && nx serve app --configuration=prod'} | ${'echo "start" && nx run app:static-serve'}
${'echo "start" && nx serve app --port 4200'} | ${'echo "start" && nx run app:static-serve --port=4200'}
${'echo "start" && nx serve app --port=4200'} | ${'echo "start" && nx run app:static-serve --port=4200'}
`(
'should replace "$ciWebServerCommand" with "$expectedCommand" when using webpack',
async ({ ciWebServerCommand, expectedCommand }) => {
const nxJson = readNxJson(tree);
nxJson.plugins = [
{
plugin: '@nx/cypress/plugin',
options: {
targetName: 'e2e',
ciTargetName: 'e2e-ci',
},
},
},
{
plugin: '@nx/vite/plugin',
options: {
buildTargetName: 'build',
previewTargetName: 'preview',
{
plugin: '@nx/webpack/plugin',
options: {
serveStaticTargetName: 'static-serve',
},
},
},
];
updateNxJson(tree, nxJson);
];
updateNxJson(tree, nxJson);
addProject(tree, tempFs, {
buildTargetName: 'build',
ciTargetName: 'e2e-ci',
appName: 'app',
noVite: true,
ciWebServerCommand,
});

addProject(tree, tempFs);
await updateCiWebserverForStaticServe(tree);

// ACT
await updateCiWebserverForStaticServe(tree);
expect(tree.read('app-e2e/cypress.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
...nxE2EPreset(__filename, {
cypressDir: 'src',
bundler: 'vite',
webServerCommands: {
default: 'nx run app:serve',
production: 'nx run app:preview',
},
ciWebServerCommand: '${expectedCommand}',
}),
baseUrl: 'http://localhost:4200',
},
});
"
`);
}
);

// ASSERT
expect(tree.read('app-e2e/cypress.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
it.each`
ciWebServerCommand | expectedCommand | expectedUrl
${'echo "start" && nx run app:serve'} | ${'echo "start" && nx run app:preview'} | ${'http://localhost:4300'}
${'echo "start" && nx run app:serve:prod'} | ${'echo "start" && nx run app:preview'} | ${'http://localhost:4300'}
${'echo "start" && nx run app:serve --configuration=prod'} | ${'echo "start" && nx run app:preview'} | ${'http://localhost:4300'}
${'echo "start" && nx run app:serve --port 4200'} | ${'echo "start" && nx run app:preview --port=4200'} | ${'http://localhost:4200'}
${'echo "start" && nx run app:serve --port=4200'} | ${'echo "start" && nx run app:preview --port=4200'} | ${'http://localhost:4200'}
${'echo "start" && nx serve app'} | ${'echo "start" && nx run app:preview'} | ${'http://localhost:4300'}
${'echo "start" && nx serve app --configuration=prod'} | ${'echo "start" && nx run app:preview'} | ${'http://localhost:4300'}
${'echo "start" && nx serve app --port 4200'} | ${'echo "start" && nx run app:preview --port=4200'} | ${'http://localhost:4200'}
${'echo "start" && nx serve app --port=4200'} | ${'echo "start" && nx run app:preview --port=4200'} | ${'http://localhost:4200'}
`(
'should replace "$ciWebServerCommand" with "$expectedCommand" when using vite',
async ({ ciWebServerCommand, expectedCommand, expectedUrl }) => {
const nxJson = readNxJson(tree);
nxJson.plugins = [
{
plugin: '@nx/cypress/plugin',
options: {
targetName: 'e2e',
ciTargetName: 'e2e-ci',
},
},
{
plugin: '@nx/vite/plugin',
options: {
buildTargetName: 'build',
previewTargetName: 'preview',
},
},
];
updateNxJson(tree, nxJson);
addProject(tree, tempFs, {
buildTargetName: 'build',
ciTargetName: 'e2e-ci',
appName: 'app',
ciWebServerCommand,
});

await updateCiWebserverForStaticServe(tree);

expect(tree.read('app-e2e/cypress.config.ts', 'utf-8'))
.toMatchInlineSnapshot(`
"import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';
export default defineConfig({
Expand All @@ -217,15 +273,16 @@ export default defineConfig({
default: 'nx run app:serve',
production: 'nx run app:preview',
},
ciWebServerCommand: 'nx run app:preview',
ciBaseUrl: 'http://localhost:4300',
ciWebServerCommand: '${expectedCommand}',
ciBaseUrl: '${expectedUrl}',
}),
baseUrl: 'http://localhost:4200',
},
});
"
`);
});
}
);

it('should use @nx/vite:preview-server executor target value if it exists when no plugins are found', async () => {
// ARRANGE
Expand All @@ -246,6 +303,7 @@ export default defineConfig({
ciTargetName: 'e2e-ci',
buildTargetName: 'build',
usesExecutors: true,
ciWebServerCommand: 'nx run app:serve',
});

// ACT
Expand Down Expand Up @@ -283,10 +341,15 @@ function addProject(
ciTargetName: string;
buildTargetName: string;
appName: string;
noCi?: boolean;
ciWebServerCommand: string;
noVite?: boolean;
usesExecutors?: boolean;
} = { ciTargetName: 'e2e-ci', buildTargetName: 'build', appName: 'app' }
} = {
ciTargetName: 'e2e-ci',
buildTargetName: 'build',
appName: 'app',
ciWebServerCommand: 'nx run app:serve',
}
) {
const appProjectConfig = {
name: overrides.appName,
Expand Down Expand Up @@ -354,8 +417,8 @@ export default defineConfig({
production: 'nx run ${overrides.appName}:preview',
},
${
!overrides.noCi
? `ciWebServerCommand: 'nx run ${overrides.appName}:serve',`
overrides.ciWebServerCommand
? `ciWebServerCommand: '${overrides.ciWebServerCommand}',`
: ''
}
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,32 @@ export default async function (tree: Tree) {
continue;
}
const ciWebServerCommand = nodes[0].getText();
const NX_TARGET_REGEX = "(?<=nx run )[^']+";
const matches = ciWebServerCommand.match(NX_TARGET_REGEX);
if (!matches) {
let project: string;
let portFlagValue: string | undefined;
if (ciWebServerCommand.includes('nx run')) {
const NX_TARGET_REGEX =
/(?<=nx run )([^' ]+)(?: [^']*--port[= ](\d+))?/;
const matches = ciWebServerCommand.match(NX_TARGET_REGEX);
if (!matches) {
continue;
}
const targetString = matches[1];
project = parseTargetString(targetString, graph).project;
portFlagValue = matches[2];
} else {
const NX_PROJECT_REGEX =
/(?<=nx [^ ]+ )([^' ]+)(?: [^']*--port[= ](\d+))?/;
const matches = ciWebServerCommand.match(NX_PROJECT_REGEX);
if (!matches) {
continue;
}
project = matches[1];
portFlagValue = matches[2];
}

if (!project || !graph.nodes[project]) {
continue;
}
const targetString = matches[0];
const { project, target, configuration } = parseTargetString(
targetString,
graph
);

const pathToViteConfig = [
joinPathFragments(graph.nodes[project].data.root, 'vite.config.ts'),
Expand Down Expand Up @@ -124,7 +140,9 @@ export default async function (tree: Tree) {

const newCommand = ciWebServerCommand.replace(
/nx.*[^"']/,
`nx run ${project}:${serveStaticTargetName}`
`nx run ${project}:${serveStaticTargetName}${
portFlagValue ? ` --port=${portFlagValue}` : ''
}`
);
tree.write(
configFile,
Expand Down Expand Up @@ -162,14 +180,16 @@ export default async function (tree: Tree) {

const newCommand = ciWebServerCommand.replace(
/nx.*[^"']/,
`nx run ${project}:${previewTargetName}`
`nx run ${project}:${previewTargetName}${
portFlagValue ? ` --port=${portFlagValue}` : ''
}`
);
tree.write(
configFile,
`${configFileContents.slice(0, nodes[0].getStart())}${newCommand},
ciBaseUrl: "http://localhost:4300"${configFileContents.slice(
nodes[0].getEnd()
)}`
ciBaseUrl: "http://localhost:${
portFlagValue ?? '4300'
}"${configFileContents.slice(nodes[0].getEnd())}`
);
}
}
Expand Down
Loading

0 comments on commit 2ffec0a

Please sign in to comment.