Skip to content

Commit 1c0e451

Browse files
devversionjosephperrott
devversion
authored and
josephperrott
committed
build: run e2e tests with bazel (angular#14656)
* Builds the e2e app with Bazel * Serves the e2e app with Bazel * Runs the e2e tests with Bazel protractor rules
1 parent 74a9c46 commit 1c0e451

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+546
-715
lines changed

‎.circleci/config.yml

+4-5
Original file line numberDiff line numberDiff line change
@@ -130,18 +130,17 @@ jobs:
130130

131131
- run: bazel test tools/public_api_guard/...
132132

133-
# ----------------------------------------------------------------
134-
# Job that runs the e2e tests with Protractor and Chrome Headless
135-
# ----------------------------------------------------------------
133+
# -----------------------------------------------------------------
134+
# Job that runs the e2e tests with Protractor and Chromium headless
135+
# -----------------------------------------------------------------
136136
e2e_tests:
137137
<<: *job_defaults
138138
resource_class: xlarge
139139
steps:
140140
- *checkout_code
141141
- *restore_cache
142-
- *yarn_install
143142

144-
- run: yarn gulp ci:e2e
143+
- run: bazel test e2e/...
145144

146145
# ------------------------------------------------------------------------------------------
147146
# Job that runs the unit tests on locally installed browsers (Chrome and Firefox headless).

‎WORKSPACE

+4-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ http_archive(
1212
# Add TypeScript rules
1313
http_archive(
1414
name = "build_bazel_rules_typescript",
15-
url = "https://github.com/bazelbuild/rules_typescript/archive/0.22.0.zip",
16-
strip_prefix = "rules_typescript-0.22.0",
15+
# Explicitly depend on https://github.com/bazelbuild/rules_typescript/pull/327 which fixes the devserver
16+
# for windows. Once this has been reviewed and merged, we can switch back to a normal release.
17+
url = "https://github.com/bazelbuild/rules_typescript/archive/1bb017e2f9c58f96bac8ddda2ed4a170282bc58e.zip",
18+
strip_prefix = "rules_typescript-1bb017e2f9c58f96bac8ddda2ed4a170282bc58e",
1719
)
1820

1921
# Add Angular source and Bazel rules.

‎e2e/BUILD.bazel

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
package(default_visibility=["//visibility:public"])
2+
3+
load("@angular//:index.bzl", "protractor_web_test_suite")
4+
load("//tools:defaults.bzl", "ts_library")
5+
6+
ts_library(
7+
name = "e2e_specs_lib",
8+
srcs = glob(["**/*.ts"]),
9+
tsconfig = ":tsconfig.json",
10+
deps = [
11+
"@matdeps//@types/jasmine",
12+
"@matdeps//protractor"
13+
]
14+
)
15+
16+
protractor_web_test_suite(
17+
name = "e2e",
18+
configuration = ":protractor.conf.js",
19+
on_prepare = ":start-devserver.js",
20+
server = "//src/e2e-app:devserver",
21+
deps = [
22+
"@matdeps//protractor",
23+
":e2e_specs_lib"
24+
],
25+
data = [
26+
"@angular//packages/bazel/src/protractor/utils",
27+
"//tools/axe-protractor",
28+
],
29+
)
30+

‎e2e/components/block-scroll-strategy-e2e.spec.ts

+34-32
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,44 @@ describe('scroll blocking', () => {
77
afterEach(() => clickOn('disable'));
88

99
it('should not be able to scroll programmatically along the x axis', async () => {
10-
scrollPage(0, 100);
10+
await scrollPage(0, 100);
1111
expect((await getScrollPosition()).y).toBe(100, 'Expected the page to be scrollable.');
1212

13-
clickOn('enable');
14-
scrollPage(0, 200);
13+
await clickOn('enable');
14+
await scrollPage(0, 200);
1515
expect((await getScrollPosition()).y).toBe(100, 'Expected the page not to be scrollable.');
1616

17-
clickOn('disable');
18-
scrollPage(0, 300);
17+
await clickOn('disable');
18+
await scrollPage(0, 300);
1919
expect((await getScrollPosition()).y).toBe(300, 'Exected page to be scrollable again.');
2020
});
2121

2222
it('should not be able to scroll programmatically along the y axis', async () => {
23-
scrollPage(100, 0);
23+
await scrollPage(100, 0);
2424
expect((await getScrollPosition()).x).toBe(100, 'Expected the page to be scrollable.');
2525

26-
clickOn('enable');
27-
scrollPage(200, 0);
26+
await clickOn('enable');
27+
await scrollPage(200, 0);
2828
expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to be scrollable.');
2929

30-
clickOn('disable');
31-
scrollPage(300, 0);
30+
await clickOn('disable');
31+
await scrollPage(300, 0);
3232
expect((await getScrollPosition()).x).toBe(300, 'Exected page to be scrollable again.');
3333
});
3434

3535
it('should not be able to scroll via the keyboard along the y axis', async () => {
3636
const body = element(by.tagName('body'));
3737

38-
scrollPage(0, 100);
38+
await scrollPage(0, 100);
3939
expect((await getScrollPosition()).y).toBe(100, 'Expected the page to be scrollable.');
4040

41-
clickOn('enable');
41+
await clickOn('enable');
4242
await body.sendKeys(Key.ARROW_DOWN);
4343
await body.sendKeys(Key.ARROW_DOWN);
4444
await body.sendKeys(Key.ARROW_DOWN);
4545
expect((await getScrollPosition()).y).toBe(100, 'Expected the page not to be scrollable.');
4646

47-
clickOn('disable');
47+
await clickOn('disable');
4848
await body.sendKeys(Key.ARROW_DOWN);
4949
await body.sendKeys(Key.ARROW_DOWN);
5050
await body.sendKeys(Key.ARROW_DOWN);
@@ -55,16 +55,16 @@ describe('scroll blocking', () => {
5555
it('should not be able to scroll via the keyboard along the x axis', async () => {
5656
const body = element(by.tagName('body'));
5757

58-
scrollPage(100, 0);
58+
await scrollPage(100, 0);
5959
expect((await getScrollPosition()).x).toBe(100, 'Expected the page to be scrollable.');
6060

61-
clickOn('enable');
61+
await clickOn('enable');
6262
await body.sendKeys(Key.ARROW_RIGHT);
6363
await body.sendKeys(Key.ARROW_RIGHT);
6464
await body.sendKeys(Key.ARROW_RIGHT);
6565
expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to be scrollable.');
6666

67-
clickOn('disable');
67+
await clickOn('disable');
6868
await body.sendKeys(Key.ARROW_RIGHT);
6969
await body.sendKeys(Key.ARROW_RIGHT);
7070
await body.sendKeys(Key.ARROW_RIGHT);
@@ -76,40 +76,42 @@ describe('scroll blocking', () => {
7676
async () => {
7777
const scroller = element(by.id('scroller'));
7878

79-
browser.executeScript(`document.getElementById('scroller').scrollTop = 200;`);
80-
scrollPage(0, 100);
79+
await browser.executeScript(`document.getElementById('scroller').scrollTop = 200;`);
80+
await scrollPage(0, 100);
8181
expect((await getScrollPosition()).y).toBe(100, 'Expected the page to be scrollable.');
8282

83-
clickOn('enable');
84-
scroller.sendKeys(Key.ARROW_DOWN);
85-
scroller.sendKeys(Key.ARROW_DOWN);
86-
scroller.sendKeys(Key.ARROW_DOWN);
83+
await clickOn('enable');
84+
await scroller.sendKeys(Key.ARROW_DOWN);
85+
await scroller.sendKeys(Key.ARROW_DOWN);
86+
await scroller.sendKeys(Key.ARROW_DOWN);
87+
8788
expect((await getScrollPosition()).y).toBe(100, 'Expected the page not to have scrolled.');
8889
});
8990

9091
it('should not be able to scroll the page after reaching the end of an element along the x axis',
9192
async () => {
9293
const scroller = element(by.id('scroller'));
9394

94-
browser.executeScript(`document.getElementById('scroller').scrollLeft = 200;`);
95-
scrollPage(100, 0);
95+
await browser.executeScript(`document.getElementById('scroller').scrollLeft = 200;`);
96+
await scrollPage(100, 0);
9697
expect((await getScrollPosition()).x).toBe(100, 'Expected the page to be scrollable.');
9798

98-
clickOn('enable');
99-
scroller.sendKeys(Key.ARROW_RIGHT);
100-
scroller.sendKeys(Key.ARROW_RIGHT);
101-
scroller.sendKeys(Key.ARROW_RIGHT);
99+
await clickOn('enable');
100+
await scroller.sendKeys(Key.ARROW_RIGHT);
101+
await scroller.sendKeys(Key.ARROW_RIGHT);
102+
await scroller.sendKeys(Key.ARROW_RIGHT);
103+
102104
expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to have scrolled.');
103105
});
104106
});
105107

106108
// Clicks on a button programmatically. Note that we can't use Protractor's `.click`, because
107109
// it performs a real click, which will scroll the button into view.
108-
function clickOn(id: string) {
109-
browser.executeScript(`document.getElementById('${id}').click()`);
110+
async function clickOn(id: string) {
111+
await browser.executeScript(`document.getElementById('${id}').click()`);
110112
}
111113

112114
// Scrolls the page to the specified coordinates.
113-
function scrollPage(x: number, y: number) {
114-
return browser.executeScript(`window.scrollTo(${x}, ${y});`);
115+
async function scrollPage(x: number, y: number) {
116+
await browser.executeScript(`window.scrollTo(${x}, ${y});`);
115117
}

‎e2e/components/button-e2e.spec.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import {browser, by, element, ExpectedConditions} from 'protractor';
22

33
describe('button', () => {
4+
45
describe('disabling behavior', () => {
5-
beforeEach(() => browser.get('/button'));
6+
7+
beforeEach(async () => await browser.get('/button'));
68

79
it('should prevent click handlers from executing when disabled', async () => {
8-
element(by.id('test-button')).click();
10+
await element(by.id('test-button')).click();
911
expect(await element(by.id('click-counter')).getText()).toEqual('1');
1012

1113
await browser.wait(ExpectedConditions.not(
1214
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
1315

14-
element(by.id('disable-toggle')).click();
15-
element(by.id('test-button')).click();
16+
await element(by.id('disable-toggle')).click();
17+
await element(by.id('test-button')).click();
1618
expect(await element(by.id('click-counter')).getText()).toEqual('1');
1719

1820
await browser.wait(ExpectedConditions.not(

‎e2e/components/button-toggle-e2e.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import {browser, by, element} from 'protractor';
22

33
describe('button-toggle', () => {
44

5-
beforeEach(() => browser.get('/button-toggle'));
5+
beforeEach(async () => await browser.get('/button-toggle'));
66

77
it('should show a button-toggle', async () => {
8-
expect(element(by.tagName('mat-button-toggle'))).toBeDefined();
8+
expect(await element(by.tagName('mat-button-toggle'))).toBeDefined();
99
});
1010

1111
});

‎e2e/components/card-e2e.spec.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import {browser, by, element} from 'protractor';
22

33
describe('mat-card', () => {
44

5-
beforeEach(() => browser.get('/cards'));
5+
beforeEach(async () => await browser.get('/cards'));
66

77
it('should show a card', async () => {
8-
const card = element(by.tagName('mat-card'));
9-
expect(card).toBeDefined();
8+
expect(await element(by.tagName('mat-card'))).toBeDefined();
109
});
1110

1211
});

‎e2e/components/checkbox-e2e.spec.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,31 @@ import {browser, by, element, Key} from 'protractor';
33
describe('checkbox', () => {
44

55
describe('check behavior', () => {
6-
beforeEach(() => browser.get('/checkbox'));
6+
beforeEach(async () => await browser.get('/checkbox'));
77

88
it('should be checked when clicked, and unchecked when clicked again', async () => {
9-
let checkboxEl = element(by.id('test-checkbox'));
10-
let inputEl = element(by.css('input[id=test-checkbox-input]'));
9+
const checkboxEl = element(by.id('test-checkbox'));
10+
const inputEl = element(by.css('input[id=test-checkbox-input]'));
1111

12-
checkboxEl.click();
12+
await checkboxEl.click();
1313

14-
expect(inputEl.getAttribute('checked'))
14+
expect(await inputEl.getAttribute('checked'))
1515
.toBeTruthy('Expect checkbox "checked" property to be true');
1616

17-
checkboxEl.click();
17+
await checkboxEl.click();
1818

19-
expect(inputEl.getAttribute('checked'))
19+
expect(await inputEl.getAttribute('checked'))
2020
.toBeFalsy('Expect checkbox "checked" property to be false');
2121
});
2222

23-
it('should toggle the checkbox when pressing space', () => {
24-
let inputEl = element(by.css('input[id=test-checkbox-input]'));
23+
it('should toggle the checkbox when pressing space', async () => {
24+
const inputEl = element(by.css('input[id=test-checkbox-input]'));
2525

26-
expect(inputEl.getAttribute('checked'))
26+
expect(await inputEl.getAttribute('checked'))
2727
.toBeFalsy('Expect checkbox "checked" property to be false');
28-
inputEl.sendKeys(Key.SPACE);
28+
await inputEl.sendKeys(Key.SPACE);
2929

30-
expect(inputEl.getAttribute('checked'))
30+
expect(await inputEl.getAttribute('checked'))
3131
.toBeTruthy('Expect checkbox "checked" property to be true');
3232
});
3333
});

0 commit comments

Comments
 (0)