Skip to content

Commit ec16fa6

Browse files
clydinclydin
committed
test: initial protractor to puppeteer E2E conversion
This change converts 10 of the E2E tests to use the new puppeteer infrastructure instead of protractor.
1 parent 716ef9d commit ec16fa6

File tree

11 files changed

+66
-109
lines changed

11 files changed

+66
-109
lines changed

‎tests/e2e/tests/build/jit-ngmodule.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import { getGlobalVariable } from '../../utils/env';
22
import { ng } from '../../utils/process';
3-
import { updateJsonFile, useCIChrome, useCIDefaults } from '../../utils/project';
3+
import { updateJsonFile, useCIDefaults } from '../../utils/project';
4+
import { executeBrowserTest } from '../../utils/puppeteer';
45

56
export default async function () {
67
await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
7-
await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
8-
9-
// Setup testing to use CI Chrome.
10-
await useCIChrome('test-project-two', './projects/test-project-two/e2e');
118
await useCIDefaults('test-project-two');
129

1310
// Make prod use JIT.
@@ -46,6 +43,6 @@ export default async function () {
4643
serve.builder = '@angular-devkit/build-angular:dev-server';
4744
});
4845
// Test it works
49-
await ng('e2e', 'test-project-two', '--configuration=production');
50-
await ng('e2e', 'test-project-two', '--configuration=development');
46+
await executeBrowserTest({ project: 'test-project-two', configuration: 'production' });
47+
await executeBrowserTest({ project: 'test-project-two', configuration: 'development' });
5148
}

‎tests/e2e/tests/build/lazy-load-syntax.ts‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.dev/license
77
*/
8-
import { setTimeout } from 'node:timers/promises';
9-
import { replaceInFile, writeFile } from '../../utils/fs';
8+
9+
import { replaceInFile } from '../../utils/fs';
1010
import { ng } from '../../utils/process';
1111
import { updateJsonFile } from '../../utils/project';
12+
import { executeBrowserTest } from '../../utils/puppeteer';
1213

1314
export default async function () {
1415
// Add lazy route.
@@ -22,29 +23,6 @@ export default async function () {
2223
}];`,
2324
);
2425

25-
// Add lazy route e2e
26-
await writeFile(
27-
'e2e/src/app.e2e-spec.ts',
28-
`
29-
import { browser, logging, element, by } from 'protractor';
30-
31-
describe('workspace-project App', () => {
32-
it('should display lazy route', async () => {
33-
await browser.get(browser.baseUrl + '/lazy');
34-
expect(await element(by.css('app-lazy-comp p')).getText()).toEqual('lazy-comp works!');
35-
});
36-
37-
afterEach(async () => {
38-
// Assert that there are no errors emitted from the browser
39-
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
40-
expect(logs).not.toContain(jasmine.objectContaining({
41-
level: logging.Level.SEVERE,
42-
}));
43-
});
44-
});
45-
`,
46-
);
47-
4826
// Convert the default config to use JIT and prod to just do AOT.
4927
// This way we can use `ng e2e` to test JIT and `ng e2e --configuration=production` to test AOT.
5028
await updateJsonFile('angular.json', (json) => {
@@ -53,7 +31,17 @@ export default async function () {
5331
buildTarget['configurations']['development']['aot'] = false;
5432
});
5533

56-
await ng('e2e');
57-
await setTimeout(500);
58-
await ng('e2e', '--configuration=production');
34+
const checkFn = async (page: any) => {
35+
await page.goto(page.url() + 'lazy');
36+
await page.waitForFunction(
37+
() =>
38+
!!(globalThis as any).document
39+
.querySelector('app-lazy-comp p')
40+
?.textContent?.includes('lazy-comp works!'),
41+
{ timeout: 10000 },
42+
);
43+
};
44+
45+
await executeBrowserTest({ checkFn });
46+
await executeBrowserTest({ configuration: 'production', checkFn });
5947
}

‎tests/e2e/tests/build/library/lib-consumption-full-aot.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { setTimeout } from 'node:timers/promises';
21
import { ng } from '../../../utils/process';
3-
import { libraryConsumptionSetup } from './setup';
2+
import { executeBrowserTest } from '../../../utils/puppeteer';
3+
import { browserCheck, libraryConsumptionSetup } from './setup';
44

55
export default async function () {
66
await libraryConsumptionSetup();
@@ -9,7 +9,6 @@ export default async function () {
99
await ng('build', 'my-lib', '--configuration=development');
1010

1111
// Check that the e2e succeeds prod and non prod mode
12-
await ng('e2e', '--configuration=production');
13-
await setTimeout(500);
14-
await ng('e2e', '--configuration=development');
12+
await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
13+
await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
1514
}

‎tests/e2e/tests/build/library/lib-consumption-full-jit.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { setTimeout } from 'node:timers/promises';
21
import { updateJsonFile } from '../../../utils/project';
32
import { expectFileToMatch } from '../../../utils/fs';
43
import { ng } from '../../../utils/process';
5-
import { libraryConsumptionSetup } from './setup';
4+
import { executeBrowserTest } from '../../../utils/puppeteer';
5+
import { browserCheck, libraryConsumptionSetup } from './setup';
66
import { getGlobalVariable } from '../../../utils/env';
77

88
export default async function () {
@@ -21,10 +21,9 @@ export default async function () {
2121
}
2222
});
2323

24-
// Check that the e2e succeeds prod and non prod mode
25-
await ng('e2e', '--configuration=production');
26-
await setTimeout(500);
27-
await ng('e2e', '--configuration=development');
24+
// Ensure app works in prod and non prod mode
25+
await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
26+
await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
2827

2928
// Validate that sourcemaps for the library exists.
3029
await ng('build', '--configuration=development');

‎tests/e2e/tests/build/library/lib-consumption-partial-aot.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { setTimeout } from 'node:timers/promises';
21
import { ng } from '../../../utils/process';
3-
import { libraryConsumptionSetup } from './setup';
2+
import { executeBrowserTest } from '../../../utils/puppeteer';
3+
import { browserCheck, libraryConsumptionSetup } from './setup';
44

55
export default async function () {
66
await libraryConsumptionSetup();
@@ -9,7 +9,6 @@ export default async function () {
99
await ng('build', 'my-lib', '--configuration=production');
1010

1111
// Check that the e2e succeeds prod and non prod mode
12-
await ng('e2e', '--configuration=production');
13-
await setTimeout(500);
14-
await ng('e2e', '--configuration=development');
12+
await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
13+
await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
1514
}

‎tests/e2e/tests/build/library/lib-consumption-partial-jit.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { setTimeout } from 'node:timers/promises';
21
import { updateJsonFile } from '../../../utils/project';
32
import { ng } from '../../../utils/process';
4-
import { libraryConsumptionSetup } from './setup';
3+
import { executeBrowserTest } from '../../../utils/puppeteer';
4+
import { browserCheck, libraryConsumptionSetup } from './setup';
55
import { getGlobalVariable } from '../../../utils/env';
66

77
export default async function () {
@@ -22,7 +22,6 @@ export default async function () {
2222
});
2323

2424
// Check that the e2e succeeds prod and non prod mode
25-
await ng('e2e', '--configuration=production');
26-
await setTimeout(500);
27-
await ng('e2e', '--configuration=development');
25+
await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
26+
await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
2827
}

‎tests/e2e/tests/build/library/setup.ts‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { Page } from 'puppeteer';
12
import { writeMultipleFiles } from '../../../utils/fs';
23
import { silentNg } from '../../../utils/process';
34

@@ -30,30 +31,15 @@ export async function libraryConsumptionSetup(): Promise<void> {
3031
}
3132
}
3233
`,
33-
'e2e/src/app.e2e-spec.ts': `
34-
import { browser, logging, element, by } from 'protractor';
35-
import { AppPage } from './app.po';
36-
37-
describe('workspace-project App', () => {
38-
let page: AppPage;
39-
40-
beforeEach(() => {
41-
page = new AppPage();
42-
});
43-
44-
it('should display text from library component', async () => {
45-
await page.navigateTo();
46-
expect(await element(by.css('lib-my-lib p')).getText()).toEqual('my-lib works!');
47-
});
48-
49-
afterEach(async () => {
50-
// Assert that there are no errors emitted from the browser
51-
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
52-
expect(logs).not.toContain(jasmine.objectContaining({
53-
level: logging.Level.SEVERE,
54-
}));
55-
});
56-
});
57-
`,
5834
});
5935
}
36+
37+
export async function browserCheck(page: Page): Promise<void> {
38+
await page.waitForFunction(
39+
() =>
40+
!!(globalThis as any).document
41+
.querySelector('lib-my-lib p')
42+
?.textContent?.includes('my-lib works!'),
43+
{ timeout: 10000 },
44+
);
45+
}

‎tests/e2e/tests/build/material.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import assert from 'node:assert/strict';
2-
import { appendFile, readdir } from 'node:fs/promises';
1+
import { appendFile } from 'node:fs/promises';
32
import { getGlobalVariable } from '../../utils/env';
43
import { readFile, replaceInFile } from '../../utils/fs';
54
import {
65
getActivePackageManager,
76
installPackage,
87
installWorkspacePackages,
98
} from '../../utils/packages';
10-
import { execWithEnv, ng } from '../../utils/process';
9+
import { ng } from '../../utils/process';
1110
import { isPrereleaseCli, updateJsonFile } from '../../utils/project';
11+
import { executeBrowserTest } from '../../utils/puppeteer';
1212

1313
const snapshots = require('../../ng-snapshot/package.json');
1414

@@ -85,5 +85,5 @@ export default async function () {
8585
}`,
8686
);
8787

88-
await ng('e2e', '--configuration=production');
88+
await executeBrowserTest({ configuration: 'production' });
8989
}

‎tests/e2e/tests/build/ts-standard-decorators.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getGlobalVariable } from '../../utils/env';
22
import { ng } from '../../utils/process';
33
import { updateJsonFile, updateTsConfig } from '../../utils/project';
4+
import { executeBrowserTest } from '../../utils/puppeteer';
45

56
export default async function () {
67
// Update project to disable experimental decorators
@@ -31,6 +32,6 @@ export default async function () {
3132
// Unit tests (JIT only)
3233
await ng('test', '--no-watch');
3334

34-
// E2E tests to ensure application functions in a browser
35-
await ng('e2e');
35+
// Ensure application functions in a browser
36+
await executeBrowserTest();
3637
}

‎tests/e2e/tests/build/wasm-esm.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ng } from '../../utils/process';
1111
import { prependToFile, replaceInFile } from '../../utils/fs';
1212
import { updateJsonFile, useSha } from '../../utils/project';
1313
import { installWorkspacePackages } from '../../utils/packages';
14+
import { executeBrowserTest } from '../../utils/puppeteer';
1415

1516
/**
1617
* Compiled and base64 encoded WASM file for the following WAT:
@@ -66,22 +67,7 @@ export default async function () {
6667
await ng('build');
6768

6869
// Update E2E test to check for WASM execution
69-
await writeFile(
70-
'e2e/src/app.e2e-spec.ts',
71-
`
72-
import { AppPage } from './app.po';
73-
import { browser, logging } from 'protractor';
74-
describe('WASM execution', () => {
75-
it('should log WASM result messages', async () => {
76-
const page = new AppPage();
77-
await page.navigateTo();
78-
expect(await page.getTitleText()).toEqual('Hello, 32');
79-
});
80-
});
81-
`,
82-
);
83-
84-
await ng('e2e');
70+
await executeBrowserTest({ expectedTitleText: 'Hello, 32' });
8571

8672
// Setup prerendering and build to test Node.js functionality
8773
await ng('add', '@angular/ssr', '--skip-confirmation', '--skip-install');

0 commit comments

Comments
 (0)