skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(select): various test inconsistencies (#3861)

Browse Source 
* test(select): various test inconsistencies

* Fixes a select test that occasionally fails to capture the error inside the expect, causing it to get logged without actually being thrown. This seems to be a Zone-related issue since wrapping a few calls in `async` makes it behave correctly.
* Fixes an RTL test that fails if it is made async. This incorporates the changes from #3866 and #3163 and fixes the underlying issue. It appears that the test was failing, because IE does a slight twitch on the select panel since it goes from a pixel-based `min-width` to one with `calc` and percentages to just percentages. I've set the default width to 100% which is the same as the pixel-based one, which appears to make IE happy.

* chore: verify that changing the min-width causes failures

* chore: revert min-width change

* chore: remove a few unnecessary expressions
This commit is contained in:
Kristiyan Kostadinov
2017-04-04 18:17:09 -06:00
committed by Jeremy Elbourn
parent f40296e0fa
commit c486cf817a
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/select/select.scss
+1 -1
View File
@@ -125,9 +125,9 @@ $mat-select-trigger-font-size: 16px !default;
padding-top: 0;
padding-bottom: 0;
max-height: $mat-select-panel-max-height;
min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
@include cdk-high-contrast {
outline: solid 1px;
}
}
src/lib/select/select.spec.ts
+34 -28
View File
@@ -988,37 +988,43 @@ describe('MdSelect', () => {
select.style.marginRight = '30px';
});
it('should align the trigger and the selected option on the x-axis in ltr', () => {
it('should align the trigger and the selected option on the x-axis in ltr', async(() => {
trigger.click();
fixture.detectChanges();
const triggerLeft = trigger.getBoundingClientRect().left;
const firstOptionLeft =
document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left;
fixture.whenStable().then(() => {
const triggerLeft = trigger.getBoundingClientRect().left;
const firstOptionLeft = document.querySelector('.cdk-overlay-pane md-option')
.getBoundingClientRect().left;
// Each option is 32px wider than the trigger, so it must be adjusted 16px
// to ensure the text overlaps correctly.
expect(firstOptionLeft.toFixed(2))
.toEqual((triggerLeft - 16).toFixed(2),
`Expected trigger to align with the selected option on the x-axis in LTR.`);
});
// Each option is 32px wider than the trigger, so it must be adjusted 16px
// to ensure the text overlaps correctly.
expect(firstOptionLeft.toFixed(2)).toEqual((triggerLeft - 16).toFixed(2),
`Expected trigger to align with the selected option on the x-axis in LTR.`);
});
}));
it('should align the trigger and the selected option on the x-axis in rtl', () => {
it('should align the trigger and the selected option on the x-axis in rtl', async(() => {
dir.value = 'rtl';
fixture.whenStable().then(() => {
fixture.detectChanges();
trigger.click();
fixture.detectChanges();
trigger.click();
fixture.detectChanges();
const triggerRight = trigger.getBoundingClientRect().right;
const firstOptionRight =
document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right;
fixture.whenStable().then(() => {
const triggerRight = trigger.getBoundingClientRect().right;
const firstOptionRight =
document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right;
// Each option is 32px wider than the trigger, so it must be adjusted 16px
// to ensure the text overlaps correctly.
expect(firstOptionRight.toFixed(2))
.toEqual((triggerRight + 16).toFixed(2),
`Expected trigger to align with the selected option on the x-axis in RTL.`);
});
// Each option is 32px wider than the trigger, so it must be adjusted 16px
// to ensure the text overlaps correctly.
expect(firstOptionRight.toFixed(2))
.toEqual((triggerRight + 16).toFixed(2),
`Expected trigger to align with the selected option on the x-axis in RTL.`);
});
});
}));
});
describe('x-axis positioning in multi select mode', () => {
@@ -1450,13 +1456,13 @@ describe('MdSelect', () => {
let testInstance: MultiSelect;
let trigger: HTMLElement;
beforeEach(() => {
beforeEach(async(() => {
fixture = TestBed.createComponent(MultiSelect);
testInstance = fixture.componentInstance;
fixture.detectChanges();
trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
});
}));
it('should be able to select multiple values', () => {
trigger.click();
@@ -1616,17 +1622,17 @@ describe('MdSelect', () => {
expect(trigger.textContent).toContain('Tacos, Pizza, Steak');
});
it('should throw an exception when trying to set a non-array value', () => {
it('should throw an exception when trying to set a non-array value', async(() => {
expect(() => {
testInstance.control.setValue('not-an-array');
}).toThrowError(wrappedErrorMessage(new MdSelectNonArrayValueError()));
});
}));
it('should throw an exception when trying to change multiple mode after init', () => {
it('should throw an exception when trying to change multiple mode after init', async(() => {
expect(() => {
testInstance.select.multiple = false;
}).toThrowError(wrappedErrorMessage(new MdSelectDynamicMultipleError()));
});
}));
it('should pass the `multiple` value to all of the option instances', async(() => {
trigger.click();