Skip to content

Commit 7f3b739

Browse files
crisbetocrisbeto
committed
Merge branch 'master' into 2326/tooltip-touch-click
2 parents 0898098 + 1a67107 commit 7f3b739

File tree

119 files changed

+1932
-1300
lines changed

Some content is hidden

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

119 files changed

+1932
-1300
lines changed

‎CHANGELOG.md

+164-1
Large diffs are not rendered by default.

‎e2e/components/button/button.e2e.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {browser, by, element} from 'protractor';
1+
import {browser, by, element, ExpectedConditions} from 'protractor';
22
import {screenshot} from '../../screenshot';
33

44

@@ -9,12 +9,16 @@ describe('button', () => {
99
it('should prevent click handlers from executing when disabled', () => {
1010
element(by.id('test-button')).click();
1111
expect(element(by.id('click-counter')).getText()).toEqual('1');
12-
screenshot('clicked once');
12+
browser.wait(ExpectedConditions.not(
13+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
14+
.then(() => screenshot('clicked once'));
1315

1416
element(by.id('disable-toggle')).click();
1517
element(by.id('test-button')).click();
1618
expect(element(by.id('click-counter')).getText()).toEqual('1');
17-
screenshot('click disabled');
19+
browser.wait(ExpectedConditions.not(
20+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
21+
.then(() => screenshot('click disabled'));
1822
});
1923
});
2024
});

‎e2e/components/checkbox/checkbox.e2e.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {browser, by, element, Key} from 'protractor';
1+
import {browser, by, element, Key, ExpectedConditions} from 'protractor';
22
import {screenshot} from '../../screenshot';
33

44
describe('checkbox', function () {
@@ -17,31 +17,32 @@ describe('checkbox', function () {
1717
checkboxEl.click();
1818
inputEl.getAttribute('checked').then((value: string) => {
1919
expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
20+
browser.wait(ExpectedConditions.not(
21+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
22+
.then(() => screenshot('checked'));
2023
});
21-
screenshot('checked');
2224

2325
checkboxEl.click();
2426
inputEl.getAttribute('checked').then((value: string) => {
2527
expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
28+
browser.wait(ExpectedConditions.not(
29+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
30+
.then(() => screenshot('unchecked'));
2631
});
27-
screenshot('unchecked');
2832
});
2933

3034
it('should toggle the checkbox when pressing space', () => {
3135
let inputEl = element(by.css('input[id=input-test-checkbox]'));
3236

3337
inputEl.getAttribute('checked').then((value: string) => {
3438
expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
35-
screenshot('start');
3639
});
3740

3841
inputEl.sendKeys(Key.SPACE);
3942

4043
inputEl.getAttribute('checked').then((value: string) => {
4144
expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
42-
screenshot('pressed space');
4345
});
4446
});
45-
4647
});
4748
});

‎e2e/components/dialog/dialog.e2e.ts

+10
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ describe('dialog', () => {
3535
});
3636
});
3737

38+
it('should close by pressing escape when the first tabbable element has lost focus', () => {
39+
element(by.id('default')).click();
40+
41+
waitForDialog().then(() => {
42+
clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
43+
pressKeys(Key.ESCAPE);
44+
expectToExist('md-dialog-container', false);
45+
});
46+
});
47+
3848
it('should close by clicking on the "close" button', () => {
3949
element(by.id('default')).click();
4050

‎e2e/components/grid-list/grid-list.e2e.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import {browser} from 'protractor';
22
import {expectToExist} from '../../util/asserts';
3+
import {screenshot} from '../../screenshot';
34

45
describe('grid-list', () => {
56
beforeEach(() => browser.get('/grid-list'));
67

78
it('should render a grid list container', () => {
89
expectToExist('md-grid-list');
10+
screenshot();
911
});
1012

1113
it('should render list items inside the grid list container', () => {

‎e2e/components/icon/icon.e2e.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {browser, by, element} from 'protractor';
2+
import {screenshot} from '../../screenshot';
23

34
describe('icon', () => {
45
describe('font icons by ligature', () => {
@@ -13,6 +14,7 @@ describe('icon', () => {
1314
testIcon.getAttribute('aria-label').then((attr: string) => {
1415
expect(attr).toEqual('favorite');
1516
});
17+
screenshot();
1618
});
1719

1820
it('should have the correct class when used', () => {

‎e2e/components/list/list.e2e.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import {browser} from 'protractor';
22
import {expectToExist} from '../../util/asserts';
3+
import {screenshot} from '../../screenshot';
34

45
describe('list', () => {
56
beforeEach(() => browser.get('/list'));
67

78
it('should render a list container', () => {
89
expectToExist('md-list');
10+
screenshot();
911
});
1012

1113
it('should render list items inside the list container', () => {

‎e2e/components/menu/menu.e2e.ts

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Key, protractor} from 'protractor';
22
import {MenuPage} from './menu-page';
33
import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts';
44
import {pressKeys} from '../../util/actions';
5+
import {screenshot} from '../../screenshot';
56

67
describe('menu', () => {
78
const menuSelector = '.mat-menu-panel';
@@ -15,28 +16,33 @@ describe('menu', () => {
1516

1617
expectToExist(menuSelector);
1718
expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
19+
screenshot();
1820
});
1921

2022
it('should close menu when menu item is clicked', () => {
2123
page.trigger().click();
2224
page.items(0).click();
2325
expectToExist(menuSelector, false);
26+
screenshot();
2427
});
2528

2629
it('should run click handlers on regular menu items', () => {
2730
page.trigger().click();
2831
page.items(0).click();
2932
expect(page.getResultText()).toEqual('one');
33+
screenshot('one');
3034

3135
page.trigger().click();
3236
page.items(1).click();
3337
expect(page.getResultText()).toEqual('two');
38+
screenshot('two');
3439
});
3540

3641
it('should run not run click handlers on disabled menu items', () => {
3742
page.trigger().click();
3843
page.items(2).click();
3944
expect(page.getResultText()).toEqual('');
45+
screenshot();
4046
});
4147

4248
it('should support multiple triggers opening the same menu', () => {

‎e2e/components/radio/radio.e2e.ts

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {browser, by, element} from 'protractor';
1+
import {browser, by, element, ExpectedConditions} from 'protractor';
2+
import {screenshot} from '../../screenshot';
23

34
describe('radio', () => {
45
describe('disabling behavior', () => {
@@ -8,6 +9,9 @@ describe('radio', () => {
89
element(by.id('water')).click();
910
element(by.id('water')).getAttribute('class').then((value: string) => {
1011
expect(value).toContain('mat-radio-checked');
12+
browser.wait(ExpectedConditions.not(
13+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
14+
.then(() => screenshot('water'));
1115
});
1216
element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
1317
expect(value).toBeTruthy();
@@ -19,6 +23,9 @@ describe('radio', () => {
1923
element(by.id('leaf')).click();
2024
element(by.id('leaf')).getAttribute('class').then((value: string) => {
2125
expect(value).toContain('mat-radio-checked');
26+
browser.wait(ExpectedConditions.not(
27+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
28+
.then(() => screenshot('leaf'));
2229
});
2330
element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
2431
expect(value).toBeTruthy();
@@ -33,14 +40,19 @@ describe('radio', () => {
3340
element(by.id('water')).click();
3441
element(by.id('water')).getAttribute('class').then((value: string) => {
3542
expect(value).toContain('mat-radio-disabled');
43+
browser.wait(ExpectedConditions.presenceOf(element(by.css('.mat-radio-disabled'))))
44+
.then(() => screenshot('water'));
3645
});
37-
element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
46+
element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
3847
expect(value).toBeTruthy();
3948
});
4049

4150
element(by.id('leaf')).click();
4251
element(by.id('leaf')).getAttribute('class').then((value: string) => {
4352
expect(value).toContain('mat-radio-disabled');
53+
browser.wait(ExpectedConditions.not(
54+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
55+
.then(() => screenshot('leaf'));
4456
});
4557
element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
4658
expect(value).toBeTruthy();

‎e2e/components/slide-toggle/slide-toggle.e2e.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {browser, element, by, Key} from 'protractor';
22
import {expectToExist} from '../../util/asserts';
3+
import {screenshot} from '../../screenshot';
34

45
describe('slide-toggle', () => {
56
const getInput = () => element(by.css('#normal-slide-toggle input'));
@@ -9,6 +10,7 @@ describe('slide-toggle', () => {
910

1011
it('should render a slide-toggle', () => {
1112
expectToExist('md-slide-toggle');
13+
screenshot();
1214
});
1315

1416
it('should change the checked state on click', () => {
@@ -19,6 +21,7 @@ describe('slide-toggle', () => {
1921
getNormalToggle().click();
2022

2123
expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
24+
screenshot();
2225
});
2326

2427
it('should change the checked state on click', () => {
@@ -29,6 +32,7 @@ describe('slide-toggle', () => {
2932
getNormalToggle().click();
3033

3134
expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
35+
screenshot();
3236
});
3337

3438
it('should not change the checked state on click when disabled', () => {
@@ -39,6 +43,7 @@ describe('slide-toggle', () => {
3943
element(by.css('#disabled-slide-toggle')).click();
4044

4145
expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
46+
screenshot();
4247
});
4348

4449
it('should move the thumb on state change', () => {
@@ -52,6 +57,7 @@ describe('slide-toggle', () => {
5257
let newX = thumbEl.getLocation().then(pos => pos.x);
5358

5459
expect(previousX).not.toBe(newX);
60+
screenshot();
5561
});
5662

5763
it('should toggle the slide-toggle on space key', () => {

‎e2e/components/tabs/tabs.e2e.ts

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor';
1+
import {
2+
browser,
3+
by,
4+
element,
5+
ElementArrayFinder,
6+
ElementFinder,
7+
Key,
8+
ExpectedConditions
9+
} from 'protractor';
210
import {pressKeys} from '../../util/actions';
11+
import {screenshot} from '../../screenshot';
312

413
describe('tabs', () => {
514
describe('basic behavior', () => {
@@ -18,10 +27,16 @@ describe('tabs', () => {
1827
tabLabels.get(1).click();
1928
expect(getLabelActiveStates(tabLabels)).toEqual([false, true, false]);
2029
expect(getBodyActiveStates(tabBodies)).toEqual([false, true, false]);
30+
browser.wait(ExpectedConditions.not(
31+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
32+
.then(() => screenshot('click1'));
2133

2234
tabLabels.get(0).click();
2335
expect(getLabelActiveStates(tabLabels)).toEqual([true, false, false]);
2436
expect(getBodyActiveStates(tabBodies)).toEqual([true, false, false]);
37+
browser.wait(ExpectedConditions.not(
38+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
39+
.then(() => screenshot('click0'));
2540
});
2641

2742
it('should change focus with keyboard interaction', () => {

‎e2e/screenshot.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export class Screenshot {
3434
return path.resolve(OUTPUT_DIR, this.filename);
3535
}
3636

37-
constructor(id: string) {
38-
this.id = `${currentJasmineSpecName} ${id}`;
37+
constructor(id?: string) {
38+
this.id = id ? `${currentJasmineSpecName} ${id}` : currentJasmineSpecName;
3939
browser.takeScreenshot().then(png => this.storeScreenshot(png));
4040
}
4141

@@ -51,7 +51,7 @@ export class Screenshot {
5151
}
5252
}
5353

54-
export function screenshot(id: string) {
54+
export function screenshot(id?: string) {
5555
if (process.env['TRAVIS']) {
5656
return new Screenshot(id);
5757
}

‎guides/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ npm install --save @angular/material
2727
import { MaterialModule } from '@angular/material';
2828
// other imports
2929
@NgModule({
30-
imports: [MaterialModule.forRoot()],
30+
imports: [MaterialModule],
3131
...
3232
})
3333
export class PizzaPartyAppModule { }

‎guides/theming-your-components.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss
2424

2525
// Use md-color to extract individual colors from a palette as necessary.
2626
.candy-carousel {
27-
background-color: md-color($primary);
28-
border-color: md-color($accent, A400);
27+
background-color: mat-color($primary);
28+
border-color: mat-color($accent, A400);
2929
}
3030
}
3131
```
@@ -53,17 +53,17 @@ Styles that are affected by the theme should be placed in a separated theming fi
5353

5454

5555
## Using colors from a palette
56-
You can consume the theming functions from the `@angular/material/core/theming/theming` and Material palette vars from `@angular/material/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example:
56+
You can consume the theming functions from the `@angular/material/core/theming/theming` and Material palette vars from `@angular/material/core/theming/palette`. You can use the `mat-color` function to extract a specific color from a palette. For example:
5757

5858
```scss
5959
// Import theming functions
6060
@import '~@angular/material/core/theming/theming';
6161
// Import your custom theme
6262
@import 'src/unicorn-app-theme.scss';
6363

64-
// Use md-color to extract individual colors from a palette as necessary.
64+
// Use mat-color to extract individual colors from a palette as necessary.
6565
.candy-carousel {
66-
background-color: md-color($candy-app-primary);
67-
border-color: md-color($candy-app-accent, A400);
66+
background-color: mat-color($candy-app-primary);
67+
border-color: mat-color($candy-app-accent, A400);
6868
}
6969
```

0 commit comments

Comments
 (0)