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: include all of the necessary CSS in unit tests (#2367)

Browse Source 
Includes the missing theme CSS in the unit tests and removes some of the styles that were used to simulate it.

Fixes #2358.
This commit is contained in:
Kristiyan Kostadinov
2016-12-23 20:30:30 +02:00
committed by Jeremy Elbourn
parent c43b171113
commit 38700e056b
4 changed files with 19 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/ripple/ripple.spec.ts
-1
View File
@@ -247,7 +247,6 @@ describe('MdRipple', () => {
let left = 50;
let top = 75;
rippleElement.style.position = 'absolute';
rippleElement.style.left = `${elementLeft}px`;
rippleElement.style.top = `${elementTop}px`;
src/lib/menu/menu.spec.ts
+1 -3
View File
@@ -248,9 +248,7 @@ describe('MdMenu', () => {
});
function getOverlayPane(): HTMLElement {
let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
pane.style.position = 'absolute';
return pane;
return overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
}
});
src/lib/select/select.spec.ts
+15 -69
View File
@@ -19,12 +19,9 @@ describe('MdSelect', () => {
declarations: [BasicSelect, NgModelSelect, ManySelects, NgIfSelect],
providers: [
{provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
overlayContainerElement = document.createElement('div') as HTMLElement;
overlayContainerElement.classList.add('cdk-overlay-container');
// add fixed positioning to match real overlay container styles
overlayContainerElement.style.position = 'fixed';
overlayContainerElement.style.top = '0';
overlayContainerElement.style.left = '0';
document.body.appendChild(overlayContainerElement);
// remove body padding to keep consistent cross-browser
@@ -561,12 +558,7 @@ describe('MdSelect', () => {
* @param index The index of the option.
*/
function checkTriggerAlignedWithOption(index: number): void {
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
overlayPane.style.position = 'absolute';
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
const triggerTop = trigger.getBoundingClientRect().top;
const overlayTop = overlayPane.getBoundingClientRect().top;
const options = overlayPane.querySelectorAll('md-option');
@@ -599,9 +591,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// The panel should be scrolled to 0 because centering the option is not possible.
expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
@@ -617,9 +607,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// The panel should be scrolled to 0 because centering the option is not possible.
expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
@@ -635,9 +623,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// The selected option should be scrolled to the center of the panel.
// This will be its original offset from the scrollTop - half the panel height + half the
@@ -657,9 +643,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// The selected option should be scrolled to the max scroll position.
// This will be the height of the scrollContainer - the panel height.
@@ -691,9 +675,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// Scroll should adjust by the difference between the top space available (85px + 8px
// viewport padding = 77px) and the height of the panel above the option (113px).
@@ -716,9 +698,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
// Scroll should adjust by the difference between the bottom space available
// (686px - 600px margin - 30px trigger height = 56px - 8px padding = 48px)
@@ -742,13 +722,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
overlayPane.style.position = 'absolute';
const overlayPane = document.querySelector('.cdk-overlay-pane');
const triggerBottom = trigger.getBoundingClientRect().bottom;
const overlayBottom = overlayPane.getBoundingClientRect().bottom;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
@@ -775,13 +749,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
overlayPane.style.position = 'absolute';
const overlayPane = document.querySelector('.cdk-overlay-pane');
const triggerTop = trigger.getBoundingClientRect().top;
const overlayTop = overlayPane.getBoundingClientRect().top;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
@@ -864,11 +832,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
overlayPane.style.position = 'absolute';
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
const triggerBottom = trigger.getBoundingClientRect().bottom;
const overlayBottom = overlayPane.getBoundingClientRect().bottom;
@@ -892,11 +856,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
overlayPane.style.position = 'absolute';
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
const triggerTop = trigger.getBoundingClientRect().top;
const overlayTop = overlayPane.getBoundingClientRect().top;
@@ -916,16 +876,9 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
overlayPane.style.position = 'absolute';
const triggerLeft = trigger.getBoundingClientRect().left;
const firstOptionLeft =
overlayPane.querySelector('md-option').getBoundingClientRect().left;
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.
@@ -940,16 +893,9 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
overlayPane.style.position = 'absolute';
const triggerRight = trigger.getBoundingClientRect().right;
const firstOptionRight =
overlayPane.querySelector('md-option').getBoundingClientRect().right;
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.
test/karma.config.ts
+3 -1
View File
@@ -29,12 +29,14 @@ export function config(config) {
{pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/hammerjs/hammer.min.js', included: true, watched: false},
{pattern: 'test/karma-test-shim.js', included: true, watched: false},
// paths loaded via module imports
{pattern: 'dist/**/*.js', included: false, watched: true},
// include one of the themes
{pattern: 'dist/**/prebuilt/indigo-pink.css', included: true, watched: true},
// paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{pattern: 'dist/**/*.html', included: false, watched: true},