From 39063f8f4be5571c96534f55c643b75e1f79ad85 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 29 Sep 2020 13:07:46 +0300 Subject: [PATCH 1/4] test(material-experimental/mdc-menu): add missing test coverage Adds tests that were missing from the `mdc-menu` module. --- scripts/check-mdc-tests.ts | 2 +- .../mdc-menu/menu.spec.ts | 80 +++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/scripts/check-mdc-tests.ts b/scripts/check-mdc-tests.ts index 420f72e49f12..c8557399d26a 100644 --- a/scripts/check-mdc-tests.ts +++ b/scripts/check-mdc-tests.ts @@ -64,7 +64,7 @@ function getTestNames(files: string[]): string[] { sourceFile.forEachChild(function walk(node: ts.Node) { if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && - node.expression.text === 'it') { + (node.expression.text === 'it' || node.expression.text === 'xit')) { // Note that this is a little naive since it'll take the literal text of the test // name expression which could include things like string concatenation. It's fine // for the limited use cases of the script. diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts index 7f3643b1da08..f1e58d1ee7bd 100644 --- a/src/material-experimental/mdc-menu/menu.spec.ts +++ b/src/material-experimental/mdc-menu/menu.spec.ts @@ -14,6 +14,7 @@ import { QueryList, Type, Provider, + ChangeDetectionStrategy, } from '@angular/core'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {OverlayContainer, Overlay} from '@angular/cdk/overlay'; @@ -243,6 +244,42 @@ describe('MDC-based MatMenu', () => { expect(backdrop.classList).toContain('custom-backdrop'); })); + + it('should be able to set a custom class on the overlay panel', fakeAsync(() => { + const optionsProvider = { + provide: MAT_MENU_DEFAULT_OPTIONS, + useValue: {overlayPanelClass: 'custom-panel-class'} + }; + const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]); + + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + tick(500); + + const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane'); + + expect(overlayPane.classList).toContain('custom-panel-class'); + })); + + it('should be able to set a custom classes on the overlay panel', fakeAsync(() => { + const optionsProvider = { + provide: MAT_MENU_DEFAULT_OPTIONS, + useValue: {overlayPanelClass: ['custom-panel-class-1', 'custom-panel-class-2']} + }; + const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]); + + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + tick(500); + + const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane'); + + expect(overlayPane.classList).toContain('custom-panel-class-1'); + expect(overlayPane.classList).toContain('custom-panel-class-2'); + })); + it('should restore focus to the root trigger when the menu was opened by mouse', fakeAsync(() => { const fixture = createComponent(SimpleMenu, [], [FakeIcon]); fixture.detectChanges(); @@ -906,6 +943,25 @@ describe('MDC-based MatMenu', () => { flush(); })); + it('should open submenus when the menu is inside an OnPush component', fakeAsync(() => { + const fixture = createComponent(LazyMenuWithOnPush); + fixture.detectChanges(); + + // Open the top-level menu + fixture.componentInstance.rootTrigger.nativeElement.click(); + fixture.detectChanges(); + flush(); + + // Dispatch a `mouseenter` on the menu item to open the submenu. + // This will only work if the top-level menu is aware the this menu item exists. + dispatchMouseEvent(fixture.componentInstance.menuItemWithSubmenu.nativeElement, 'mouseenter'); + fixture.detectChanges(); + flush(); + + expect(overlayContainerElement.querySelectorAll('.mat-mdc-menu-item').length) + .toBe(2, 'Expected two open menus'); + })); + it('should focus the menu panel if all items are disabled', fakeAsync(() => { const fixture = createComponent(SimpleMenuWithRepeater, [], [FakeIcon]); fixture.componentInstance.items.forEach(item => item.disabled = true); @@ -2588,6 +2644,30 @@ class SimpleMenuWithRepeaterInLazyContent { } +@Component({ + template: ` + + + + + + + + + + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +class LazyMenuWithOnPush { + @ViewChild('triggerEl', {read: ElementRef}) rootTrigger: ElementRef; + @ViewChild('menuItem', {read: ElementRef}) menuItemWithSubmenu: ElementRef; +} + + @Component({ template: ` From 14e0c3ff43cd8abade969b226ace5abf9b9924d5 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 29 Sep 2020 13:08:00 +0300 Subject: [PATCH 2/4] test(material-experimental/mdc-radio): add missing test coverage Adds tests that were missing from the `mdc-radio` module. --- src/material-experimental/mdc-radio/radio.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/material-experimental/mdc-radio/radio.spec.ts b/src/material-experimental/mdc-radio/radio.spec.ts index 06c0049f45f3..b308cc31912c 100644 --- a/src/material-experimental/mdc-radio/radio.spec.ts +++ b/src/material-experimental/mdc-radio/radio.spec.ts @@ -784,6 +784,16 @@ describe('MDC-based MatRadio', () => { .toBe(4, 'Expected the tabindex to be set to "4".'); }); + it('should remove the tabindex from the host element', () => { + const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex); + predefinedFixture.detectChanges(); + + const radioButtonEl = + predefinedFixture.debugElement.query(By.css('.mat-mdc-radio-button'))!.nativeElement; + + expect(radioButtonEl.getAttribute('tabindex')).toBe('-1'); + }); + it('should set the tabindex to -1 on the host element', () => { const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex); predefinedFixture.detectChanges(); From deb158d8065167c01cda88c4f1dd77fc98872e04 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 29 Sep 2020 13:08:12 +0300 Subject: [PATCH 3/4] test(material-experimental/mdc-table): add missing test coverage Adds tests that were missing from the `mdc-table` module. --- .../mdc-table/table.spec.ts | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/src/material-experimental/mdc-table/table.spec.ts b/src/material-experimental/mdc-table/table.spec.ts index aa834fee58e5..93483012697b 100644 --- a/src/material-experimental/mdc-table/table.spec.ts +++ b/src/material-experimental/mdc-table/table.spec.ts @@ -23,6 +23,7 @@ describe('MDC-based MatTable', () => { MatTableApp, MatTableWithWhenRowApp, ArrayDataSourceMatTableApp, + NativeHtmlTableApp, MatTableWithSortApp, MatTableWithPaginatorApp, StickyTableApp, @@ -81,6 +82,21 @@ describe('MDC-based MatTable', () => { ]); }); + it('should be able to render a table correctly with native elements', () => { + let fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); + + const tableElement = fixture.nativeElement.querySelector('table'); + const data = fixture.componentInstance.dataSource!.data; + expectTableToMatchContent(tableElement, [ + ['Column A', 'Column B', 'Column C'], + [data[0].a, data[0].b, data[0].c], + [data[1].a, data[1].b, data[1].c], + [data[2].a, data[2].b, data[2].c], + [data[3].a, data[3].b, data[3].c], + ]); + }); + it('should be able to nest tables', () => { const fixture = TestBed.createComponent(NestedTableApp); fixture.detectChanges(); @@ -96,6 +112,28 @@ describe('MDC-based MatTable', () => { expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); }); + it('should be able to show a message when no data is being displayed in a native table', () => { + const fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); + + // Assert that the data is inside the tbody specifically. + const tbody = fixture.nativeElement.querySelector('tbody')!; + const dataSource = fixture.componentInstance.dataSource!; + const initialData = dataSource.data; + + expect(tbody.textContent.trim()).not.toContain('No data'); + + dataSource.data = []; + fixture.detectChanges(); + + expect(tbody.textContent.trim()).toContain('No data'); + + dataSource.data = initialData; + fixture.detectChanges(); + + expect(tbody.textContent.trim()).not.toContain('No data'); + }); + it('should be able to show a message when no data is being displayed', () => { const fixture = TestBed.createComponent(MatTableApp); fixture.detectChanges(); @@ -601,6 +639,39 @@ class MatTableApp { @ViewChild(MatTable) table: MatTable; } +@Component({ + template: ` + + + + + + + + + + + + + + + + + + + + + +
Column A {{row.a}} Column B {{row.b}} Column C {{row.c}}
No data
+ ` +}) +class NativeHtmlTableApp { + dataSource: FakeDataSource | null = new FakeDataSource(); + columnsToRender = ['column_a', 'column_b', 'column_c']; + + @ViewChild(MatTable) table: MatTable; +} + @Component({ template: ` From 46a8ccb7e9dd179bd668e87730ad56694fa1f7cc Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 29 Sep 2020 13:08:24 +0300 Subject: [PATCH 4/4] test(material-experimental/mdc-tabs): add missing test coverage Adds tests that were missing from the `mdc-tabs` module. --- .../mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts index ffae1ce95110..9de1071c5c4a 100644 --- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -260,6 +260,22 @@ describe('MDC-based MatTabNavBar', () => { expect(tabLink.tabIndex).toBe(3, 'Expected the tabIndex to be have been set to 3.'); }); + it('should select the proper tab, if the tabs come in after init', () => { + const fixture = TestBed.createComponent(SimpleTabNavBarTestApp); + const instance = fixture.componentInstance; + + instance.tabs = []; + instance.activeIndex = 1; + fixture.detectChanges(); + + expect(instance.tabNavBar.selectedIndex).toBe(-1); + + instance.tabs = [0, 1, 2]; + fixture.detectChanges(); + + expect(instance.tabNavBar.selectedIndex).toBe(1); + }); + describe('ripples', () => { let fixture: ComponentFixture;