diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index 335637884d..1c29ec3733 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core'; +import { SimpleChange, NO_ERRORS_SCHEMA, QueryList, Component, TemplateRef, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { MatCheckboxChange } from '@angular/material'; import { DataColumn } from '../../data/data-column.model'; @@ -29,6 +29,13 @@ import { CoreTestingModule } from '../../../testing/core.testing.module'; import { DataColumnListComponent } from '../../../data-column/data-column-list.component'; import { DataColumnComponent } from '../../../data-column/data-column.component'; +@Component({selector: 'adf-custom-column-template-component', template: ` + +`}) +class CustomColumnTemplateComponent { + @ViewChild('tmplRef') templateRef: TemplateRef; +} + class FakeDataRow implements DataRow { isDropTarget = false; isSelected = true; @@ -1127,15 +1134,18 @@ describe('Accesibility', () => { let fixture: ComponentFixture; let dataTable: DataTableComponent; let element: any; + let columnCustomTemplate: TemplateRef; setupTestBed({ imports: [ CoreTestingModule ], + declarations: [CustomColumnTemplateComponent], schemas: [NO_ERRORS_SCHEMA] }); beforeEach(() => { + columnCustomTemplate = TestBed.createComponent(CustomColumnTemplateComponent).componentInstance.templateRef; fixture = TestBed.createComponent(DataTableComponent); dataTable = fixture.componentInstance; element = fixture.debugElement.nativeElement; @@ -1330,4 +1340,42 @@ describe('Accesibility', () => { expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-1'); }); + + it('should remove cell focus when [focus] is set to false', () => { + dataTable.showHeader = false; + const dataRows = [ { name: 'name1' } ]; + + dataTable.data = new ObjectDataTableAdapter([], + [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: false })] + ); + + dataTable.ngOnChanges({ + rows: new SimpleChange(null, dataRows, false) + }); + + fixture.detectChanges(); + dataTable.ngAfterViewInit(); + + const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value'); + expect(cell.getAttribute('tabindex')).toBe(null); + }); + + it('should allow element focus when [focus] is set to true', () => { + dataTable.showHeader = false; + const dataRows = [ { name: 'name1' } ]; + + dataTable.data = new ObjectDataTableAdapter([], + [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: true })] + ); + + dataTable.ngOnChanges({ + rows: new SimpleChange(null, dataRows, false) + }); + + fixture.detectChanges(); + dataTable.ngAfterViewInit(); + + const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value'); + expect(cell.getAttribute('tabindex')).toBe('0'); + }); });