Skip to content

Commit 38700e0

Browse files
crisbetojelbourn
crisbeto
authored and
jelbourn
committed
test: include all of the necessary CSS in unit tests (#2367)
Includes the missing theme CSS in the unit tests and removes some of the styles that were used to simulate it. Fixes #2358.
1 parent c43b171 commit 38700e0

File tree

4 files changed

+19
-74
lines changed

4 files changed

+19
-74
lines changed

‎src/lib/core/ripple/ripple.spec.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,6 @@ describe('MdRipple', () => {
247247
let left = 50;
248248
let top = 75;
249249

250-
rippleElement.style.position = 'absolute';
251250
rippleElement.style.left = `${elementLeft}px`;
252251
rippleElement.style.top = `${elementTop}px`;
253252

‎src/lib/menu/menu.spec.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -248,9 +248,7 @@ describe('MdMenu', () => {
248248
});
249249

250250
function getOverlayPane(): HTMLElement {
251-
let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
252-
pane.style.position = 'absolute';
253-
return pane;
251+
return overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
254252
}
255253
});
256254

‎src/lib/select/select.spec.ts

Lines changed: 15 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,9 @@ describe('MdSelect', () => {
1919
declarations: [BasicSelect, NgModelSelect, ManySelects, NgIfSelect],
2020
providers: [
2121
{provide: OverlayContainer, useFactory: () => {
22-
overlayContainerElement = document.createElement('div');
22+
overlayContainerElement = document.createElement('div') as HTMLElement;
23+
overlayContainerElement.classList.add('cdk-overlay-container');
2324

24-
// add fixed positioning to match real overlay container styles
25-
overlayContainerElement.style.position = 'fixed';
26-
overlayContainerElement.style.top = '0';
27-
overlayContainerElement.style.left = '0';
2825
document.body.appendChild(overlayContainerElement);
2926

3027
// remove body padding to keep consistent cross-browser
@@ -561,12 +558,7 @@ describe('MdSelect', () => {
561558
* @param index The index of the option.
562559
*/
563560
function checkTriggerAlignedWithOption(index: number): void {
564-
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
565-
566-
// We need to set the position to absolute, because the top/left positioning won't work
567-
// since the component CSS isn't included in the tests.
568-
overlayPane.style.position = 'absolute';
569-
561+
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
570562
const triggerTop = trigger.getBoundingClientRect().top;
571563
const overlayTop = overlayPane.getBoundingClientRect().top;
572564
const options = overlayPane.querySelectorAll('md-option');
@@ -599,9 +591,7 @@ describe('MdSelect', () => {
599591
trigger.click();
600592
fixture.detectChanges();
601593

602-
const overlayPane =
603-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
604-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
594+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
605595

606596
// The panel should be scrolled to 0 because centering the option is not possible.
607597
expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
@@ -617,9 +607,7 @@ describe('MdSelect', () => {
617607
trigger.click();
618608
fixture.detectChanges();
619609

620-
const overlayPane =
621-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
622-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
610+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
623611

624612
// The panel should be scrolled to 0 because centering the option is not possible.
625613
expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to be scrolled.`);
@@ -635,9 +623,7 @@ describe('MdSelect', () => {
635623
trigger.click();
636624
fixture.detectChanges();
637625

638-
const overlayPane =
639-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
640-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
626+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
641627

642628
// The selected option should be scrolled to the center of the panel.
643629
// This will be its original offset from the scrollTop - half the panel height + half the
@@ -657,9 +643,7 @@ describe('MdSelect', () => {
657643
trigger.click();
658644
fixture.detectChanges();
659645

660-
const overlayPane =
661-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
662-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
646+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
663647

664648
// The selected option should be scrolled to the max scroll position.
665649
// This will be the height of the scrollContainer - the panel height.
@@ -691,9 +675,7 @@ describe('MdSelect', () => {
691675
trigger.click();
692676
fixture.detectChanges();
693677

694-
const overlayPane =
695-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
696-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
678+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
697679

698680
// Scroll should adjust by the difference between the top space available (85px + 8px
699681
// viewport padding = 77px) and the height of the panel above the option (113px).
@@ -716,9 +698,7 @@ describe('MdSelect', () => {
716698
trigger.click();
717699
fixture.detectChanges();
718700

719-
const overlayPane =
720-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
721-
const scrollContainer = overlayPane.querySelector('.md-select-panel');
701+
const scrollContainer = document.querySelector('.cdk-overlay-pane .md-select-panel');
722702

723703
// Scroll should adjust by the difference between the bottom space available
724704
// (686px - 600px margin - 30px trigger height = 56px - 8px padding = 48px)
@@ -742,13 +722,7 @@ describe('MdSelect', () => {
742722
trigger.click();
743723
fixture.detectChanges();
744724

745-
const overlayPane =
746-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
747-
748-
// We need to set the position to absolute, because the top/left positioning won't work
749-
// since the component CSS isn't included in the tests.
750-
overlayPane.style.position = 'absolute';
751-
725+
const overlayPane = document.querySelector('.cdk-overlay-pane');
752726
const triggerBottom = trigger.getBoundingClientRect().bottom;
753727
const overlayBottom = overlayPane.getBoundingClientRect().bottom;
754728
const scrollContainer = overlayPane.querySelector('.md-select-panel');
@@ -775,13 +749,7 @@ describe('MdSelect', () => {
775749
trigger.click();
776750
fixture.detectChanges();
777751

778-
const overlayPane =
779-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
780-
781-
// We need to set the position to absolute, because the top/left positioning won't work
782-
// since the component CSS isn't included in the tests.
783-
overlayPane.style.position = 'absolute';
784-
752+
const overlayPane = document.querySelector('.cdk-overlay-pane');
785753
const triggerTop = trigger.getBoundingClientRect().top;
786754
const overlayTop = overlayPane.getBoundingClientRect().top;
787755
const scrollContainer = overlayPane.querySelector('.md-select-panel');
@@ -864,11 +832,7 @@ describe('MdSelect', () => {
864832
trigger.click();
865833
fixture.detectChanges();
866834

867-
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
868-
const overlayPane =
869-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
870-
overlayPane.style.position = 'absolute';
871-
835+
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
872836
const triggerBottom = trigger.getBoundingClientRect().bottom;
873837
const overlayBottom = overlayPane.getBoundingClientRect().bottom;
874838

@@ -892,11 +856,7 @@ describe('MdSelect', () => {
892856
trigger.click();
893857
fixture.detectChanges();
894858

895-
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
896-
const overlayPane =
897-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
898-
overlayPane.style.position = 'absolute';
899-
859+
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
900860
const triggerTop = trigger.getBoundingClientRect().top;
901861
const overlayTop = overlayPane.getBoundingClientRect().top;
902862

@@ -916,16 +876,9 @@ describe('MdSelect', () => {
916876
trigger.click();
917877
fixture.detectChanges();
918878

919-
const overlayPane =
920-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
921-
922-
// We need to set the position to absolute, because the top/left positioning won't work
923-
// since the component CSS isn't included in the tests.
924-
overlayPane.style.position = 'absolute';
925-
926879
const triggerLeft = trigger.getBoundingClientRect().left;
927880
const firstOptionLeft =
928-
overlayPane.querySelector('md-option').getBoundingClientRect().left;
881+
document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left;
929882

930883
// Each option is 32px wider than the trigger, so it must be adjusted 16px
931884
// to ensure the text overlaps correctly.
@@ -940,16 +893,9 @@ describe('MdSelect', () => {
940893
trigger.click();
941894
fixture.detectChanges();
942895

943-
const overlayPane =
944-
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
945-
946-
// We need to set the position to absolute, because the top/left positioning won't work
947-
// since the component CSS isn't included in the tests.
948-
overlayPane.style.position = 'absolute';
949-
950896
const triggerRight = trigger.getBoundingClientRect().right;
951897
const firstOptionRight =
952-
overlayPane.querySelector('md-option').getBoundingClientRect().right;
898+
document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right;
953899

954900
// Each option is 32px wider than the trigger, so it must be adjusted 16px
955901
// to ensure the text overlaps correctly.

‎test/karma.config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,14 @@ export function config(config) {
2929
{pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
3030
{pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
3131
{pattern: 'dist/vendor/hammerjs/hammer.min.js', included: true, watched: false},
32-
3332
{pattern: 'test/karma-test-shim.js', included: true, watched: false},
3433

3534
// paths loaded via module imports
3635
{pattern: 'dist/**/*.js', included: false, watched: true},
3736

37+
// include one of the themes
38+
{pattern: 'dist/**/prebuilt/indigo-pink.css', included: true, watched: true},
39+
3840
// paths loaded via Angular's component compiler
3941
// (these paths need to be rewritten, see proxies section)
4042
{pattern: 'dist/**/*.html', included: false, watched: true},

0 commit comments

Comments
 (0)