miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(js): enable end-to-end tests for Vue application in dev mode (#31415)

Browse Source 
This PR updates Vite's E2E testing setup for the Vue plugin. 

Instead of commenting out the serve for vite and rsbuild when using
playwright we update the test to ensure the ports are available before
attempting to run their preview target.
This commit is contained in:
Nicholas Cunningham 2025-06-02 10:52:35 -06:00 committed by GitHub
parent 80aeb92664
commit 94e54754a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 75 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
e2e/vue/src/vue.test.ts
View File

@ -5,6 +5,7 @@ import {
runCLI, runCLI,
runE2ETests, runE2ETests,
uniq, uniq,
updateFile,
} from '@nx/e2e/utils'; } from '@nx/e2e/utils';
describe('Vue Plugin', () => { describe('Vue Plugin', () => {
@ -18,7 +19,7 @@ describe('Vue Plugin', () => {
afterAll(() => cleanupProject()); afterAll(() => cleanupProject());
it('should serve application in dev mode', async () => { it('should serve application in dev mode vite config', async () => {
const app = uniq('app'); const app = uniq('app');
runCLI( runCLI(
@ -32,12 +33,32 @@ describe('Vue Plugin', () => {
`Successfully ran target build for project ${app}` `Successfully ran target build for project ${app}`
); );
// TODO: enable this when tests are passing again. if (runE2ETests('playwright')) {
// if (runE2ETests()) { const availablePort = await getAvailablePort();
// const e2eResults = runCLI(`e2e ${app}-e2e --no-watch`);
// expect(e2eResults).toContain('Successfully ran target e2e'); updateFile(`${app}-e2e/playwright.config.ts`, (content) => {
// expect(await killPorts()).toBeTruthy(); return content
// } .replace(
/const baseURL = process\.env\['BASE_URL'\] \|\| '[^']*';/,
`const baseURL = process.env['BASE_URL'] || 'http://localhost:${availablePort}';`
)
.replace(/url: '[^']*'/, `url: 'http://localhost:${availablePort}'`);
});
updateFile(`${app}/vite.config.ts`, (content) => {
return content.replace(
/preview:\s*{[^}]*}/,
`preview: {
port: ${availablePort},
host: 'localhost',
}`
);
});
const e2eResults = runCLI(`e2e ${app}-e2e`);
expect(e2eResults).toContain('Successfully ran target e2e');
expect(await killPorts(availablePort)).toBeTruthy();
}
}, 200_000); }, 200_000);
it('should serve application in dev mode with rsbuild', async () => { it('should serve application in dev mode with rsbuild', async () => {
@ -54,13 +75,31 @@ describe('Vue Plugin', () => {
`Successfully ran target build for project ${app}` `Successfully ran target build for project ${app}`
); );
// TODO: enable this when tests are passing again. if (runE2ETests('playwright')) {
// Colum confirmed locally that the generated config and the playwright tests are working. const availablePort = await getAvailablePort();
// if (runE2ETests()) {
// const e2eResults = runCLI(`e2e ${app}-e2e --no-watch`); updateFile(`${app}-e2e/playwright.config.ts`, (content) => {
// expect(e2eResults).toContain('Successfully ran target e2e'); return content
// expect(await killPorts()).toBeTruthy(); .replace(
// } /const baseURL = process\.env\['BASE_URL'\] \|\| '[^']*';/,
`const baseURL = process.env['BASE_URL'] || 'http://localhost:${availablePort}';`
)
.replace(/url: '[^']*'/, `url: 'http://localhost:${availablePort}'`);
});
updateFile(`${app}/rsbuild.config.ts`, (content) => {
return content.replace(
/server:\s*{[^}]*}/,
`server: {
port: ${availablePort},
}`
);
});
const e2eResults = runCLI(`e2e ${app}-e2e`);
expect(e2eResults).toContain('Successfully ran target e2e');
expect(await killPorts(availablePort)).toBeTruthy();
}
}, 200_000); }, 200_000);
it('should build library', async () => { it('should build library', async () => {
@ -76,3 +115,25 @@ describe('Vue Plugin', () => {
); );
}); });
}); });
async function getAvailablePort(): Promise<number> {
const net = require('net');
return new Promise((resolve, reject) => {
const server = net.createServer();
server.unref();
server.on('error', reject);
server.listen(0, () => {
const addressInfo = server.address();
if (!addressInfo) {
reject(new Error('Failed to get server address'));
return;
}
const port = addressInfo.port;
server.close(() => {
resolve(port);
});
});
});
}