Skip to content

test: include all of the necessary CSS in unit tests #2367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 23, 2016
Merged

test: include all of the necessary CSS in unit tests #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/lib/core/ripple/ripple.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;

Expand Down
4 changes: 1 addition & 3 deletions src/lib/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
});

Expand Down
84 changes: 15 additions & 69 deletions src/lib/select/select.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessary for this PR: we should make a FakeOverlayContainer and use that everywhere


// 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
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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.`);
Expand All @@ -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.`);
Expand All @@ -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
Expand All @@ -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.
Expand Down Expand Up @@ -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).
Expand All @@ -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)
Expand All @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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;

Expand All @@ -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;

Expand All @@ -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.
Expand All @@ -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.
Expand Down
4 changes: 3 additions & 1 deletion test/karma.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand Down