feat(testing): Adds testing module for propagation of an attribute to…

… a components overlay.

apps/dev/src/app.module.ts

@@ -85,6 +85,10 @@ import { ToggleButtonGroupDemo } from './toggle-button-group/toggle-button-group
 import { TopBarNavigationDemo } from './top-bar-navigation/top-bar-navigation-demo.component';
 import { TreeTableDemo } from './tree-table/tree-table-demo.component';
 import { DtIconModule } from '@dynatrace/barista-components/icon';
+import {
+  DT_UI_TEST_CONFIG,
+  DT_DEFAULT_UI_TEST_CONFIG,
+} from '@dynatrace/barista-components/core';
 
 // tslint:disable-next-line: use-component-selector
 @Component({ template: '' })
@@ -164,6 +168,7 @@ export class NoopRouteComponent {}
   providers: [
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
+    { provide: DT_UI_TEST_CONFIG, useValue: DT_DEFAULT_UI_TEST_CONFIG },
     { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } },
   ],
 })

apps/dev/src/autocomplete/autocomplete-demo.component.html

@@ -3,6 +3,7 @@
   [dtAutocomplete]="auto"
   [(ngModel)]="value"
   placeholder="Start typing"
+  dt-ui-test-id="autocomplete"
 />
 <dt-autocomplete #auto="dtAutocomplete">
   <dt-option *ngFor="let option of options" [value]="option">

apps/dev/src/context-dialog/context-dialog-demo.component.html

@@ -2,6 +2,7 @@
   aria-label="Open context dialog"
   aria-label-close-button="Close context dialog"
   [overlayPanelClass]="panel"
+  dt-ui-test-id="context-dialog"
 >
   <button dt-button>First button</button>
   <button dt-button variant="secondary">Second button</button>

apps/dev/src/devapp.component.html

@@ -2,7 +2,8 @@
   <dt-sidenav #sidenav mode="side" opened>
     <dt-sidenav-header>
       <div class="sidenav-title">
-        Barista dev app
+        <dt-icon class="sidenav-title-image" name="dynatrace"></dt-icon>
+        Dynatrace
       </div>
     </dt-sidenav-header>
     <dt-menu *ngFor="let navItem of filteredNavItems">

apps/dev/src/select/select-demo.component.html

@@ -1,4 +1,4 @@
-<dt-select placeholder="Choose your coffee">
+<dt-select placeholder="Choose your coffee" dt-ui-test-id="select">
   <dt-option value="ThePerfectPour">
     ThePerfectPour with some very long text even longer longlonglong
   </dt-option>

apps/dev/src/tag/tag-demo.component.html

@@ -58,6 +58,7 @@
     <dt-tag-add
       placeholder="insert tag here"
       (tagAdded)="addTag($event)"
+      dt-ui-test-id="tag-add"
     ></dt-tag-add>
   </dt-tag-list>
 </div>

components/autocomplete/src/autocomplete-trigger.ts

@@ -77,6 +77,9 @@ import {
   _readKeyCode,
   stringify,
   DtFlexibleConnectedPositionStrategy,
+  dtSetUiTestAttribute,
+  DT_UI_TEST_CONFIG,
+  DtUiTestConfiguration,
 } from '@dynatrace/barista-components/core';
 import { DtFormField } from '@dynatrace/barista-components/form-field';
 
@@ -269,6 +272,9 @@ export class DtAutocompleteTrigger<T>
     @Optional() private _platform?: Platform,
     /** @breaking-change 7.0.0 Make the _overlayContainer non optional. */
     @Optional() private _overlayContainer?: OverlayContainer,
+    @Optional()
+    @Inject(DT_UI_TEST_CONFIG)
+    private _config?: DtUiTestConfiguration,
   ) {
     // tslint:disable-next-line:strict-type-predicates
     if (typeof window !== 'undefined') {
@@ -433,7 +439,12 @@ export class DtAutocompleteTrigger<T>
 
     if (!this._overlayRef) {
       this._overlayRef = this._overlay.create(this._getOverlayConfig());
-
+      dtSetUiTestAttribute(
+        this._overlayRef.overlayElement,
+        this._overlayRef.overlayElement.id,
+        this._element,
+        this._config,
+      );
       this._overlayRef.keydownEvents().subscribe(event => {
         const keyCode = _readKeyCode(event);
         // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.

components/autocomplete/src/autocomplete.spec.ts

@@ -61,6 +61,8 @@ import {
 import {
   DtOption,
   DtOptionSelectionChange,
+  DT_UI_TEST_CONFIG,
+  DtUiTestConfiguration,
 } from '@dynatrace/barista-components/core';
 import {
   DtFormField,
@@ -82,6 +84,13 @@ describe('DtAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
   let zone: MockNgZone;
 
+  const overlayConfig: DtUiTestConfiguration = {
+    attributeName: 'dt-ui-test-id',
+    constructOverlayAttributeValue(attributeName: string): string {
+      return `${attributeName}-overlay`;
+    },
+  };
+
   // Creates a test component fixture.
   function createComponent<T>(
     component: Type<T>,
@@ -99,6 +108,7 @@ describe('DtAutocomplete', () => {
       declarations: [component],
       providers: [
         { provide: NgZone, useFactory: () => (zone = new MockNgZone()) },
+        { provide: DT_UI_TEST_CONFIG, useValue: overlayConfig },
         ...providers,
       ],
     });
@@ -1568,6 +1578,22 @@ describe('DtAutocomplete', () => {
       expect(panel.classList).toContain('class-two');
     }));
   });
+  describe('propagate attribute to overlay', () => {
+    it('should propagate attribute to overlay when `dt-ui-test-id` is provided', () => {
+      const fixture: ComponentFixture<PropagateAttribute> = createComponent(
+        PropagateAttribute,
+      );
+      fixture.detectChanges();
+      const trigger = fixture.componentInstance.trigger;
+      trigger.openPanel();
+      const overlay = overlayContainerElement.querySelector(
+        '.dt-autocomplete-panel',
+      )!.parentElement;
+      expect(overlay!.outerHTML).toContain(
+        'dt-ui-test-id="autocomplete-overlay"',
+      );
+    });
+  });
 });
 
 @Component({
@@ -1888,3 +1914,23 @@ class DynamicallyChangingAutocomplete {
   @ViewChild(DtAutocompleteTrigger, { static: false })
   trigger: DtAutocompleteTrigger<any>;
 }
+
+@Component({
+  template: `
+    <input
+      #input
+      dt-ui-test-id="autocomplete"
+      class="test"
+      type="number"
+      dtInput
+      [dtAutocomplete]="auto"
+    />
+    <dt-autocomplete #auto>
+      <dt-option [value]="0">First</dt-option>
+    </dt-autocomplete>
+  `,
+})
+class PropagateAttribute {
+  @ViewChild(DtAutocompleteTrigger, { static: false })
+  trigger: DtAutocompleteTrigger<any>;
+}

components/chart/src/tooltip/chart-tooltip.spec.ts

@@ -44,13 +44,23 @@ import { DtThemingModule } from '@dynatrace/barista-components/theming';
 import { createComponent } from '@dynatrace/barista-components/testing';
 import { MockIntersectionObserver } from '@dynatrace/barista-components/testing/mock';
 import { DtChartTooltipData } from '../highcharts/highcharts-tooltip-types';
+import {
+  DT_UI_TEST_CONFIG,
+  DtUiTestConfiguration,
+} from '@dynatrace/barista-components/core';
 
 describe('DtChartTooltip', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
   let chartComponent: DtChart;
   let fixture: ComponentFixture<ChartTest>;
   const mockIntersectionObserver = new MockIntersectionObserver();
+  const overlayConfig: DtUiTestConfiguration = {
+    attributeName: 'dt-ui-test-id',
+    constructOverlayAttributeValue(attributeName: string): string {
+      return `${attributeName}-overlay`;
+    },
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -62,6 +72,7 @@ describe('DtChartTooltip', () => {
         NoopAnimationsModule,
       ],
       declarations: [ChartTest],
+      providers: [{ provide: DT_UI_TEST_CONFIG, useValue: overlayConfig }],
     });
 
     TestBed.compileComponents();
@@ -163,13 +174,27 @@ describe('DtChartTooltip', () => {
       expect(overlayContainerElement.textContent).toContain('54321');
     });
   });
+  describe('propagate attribute to overlay', () => {
+    it('should propagate attribute to overlay when `dt-ui-test-id` is provided', fakeAsync(() => {
+      mockIntersectionObserver.mockAllIsIntersecting(true);
+      chartComponent._highChartsTooltipOpened$.next({
+        data: DUMMY_TOOLTIP_DATA_LINE_SERIES,
+      });
+      fixture.detectChanges();
+      tick();
+      flush();
+      expect(overlayContainerElement.innerHTML).toContain(
+        'dt-ui-test-id="tooltip-overlay',
+      );
+    }));
+  });
 });
 
 @Component({
   selector: 'dt-line',
   template: `
     <dt-chart [series]="series" [options]="options">
-      <dt-chart-tooltip>
+      <dt-chart-tooltip dt-ui-test-id="tooltip">
         <ng-template let-series>
           <dt-key-value-list style="min-width: 100px">
             <dt-key-value-list-item *ngFor="let data of series.points">

components/chart/src/tooltip/chart-tooltip.ts

@@ -30,10 +30,18 @@ import {
   TemplateRef,
   ViewContainerRef,
   ViewEncapsulation,
+  ElementRef,
+  Inject,
+  Optional,
 } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 
-import { isDefined } from '@dynatrace/barista-components/core';
+import {
+  isDefined,
+  DT_UI_TEST_CONFIG,
+  DtUiTestConfiguration,
+  dtSetUiTestAttribute,
+} from '@dynatrace/barista-components/core';
 
 import { DtChart } from '../chart';
 import { DtChartTooltipData } from '../highcharts/highcharts-tooltip-types';
@@ -86,6 +94,10 @@ export class DtChartTooltip implements OnDestroy {
     private _overlay: Overlay,
     private _viewContainerRef: ViewContainerRef,
     private _changeDetectorRef: ChangeDetectorRef,
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional()
+    @Inject(DT_UI_TEST_CONFIG)
+    private _config?: DtUiTestConfiguration,
   ) {}
 
   ngOnDestroy(): void {
@@ -133,6 +145,12 @@ export class DtChartTooltip implements OnDestroy {
       overlayRef.attach(this._portal);
 
       this._overlayRef = overlayRef;
+      dtSetUiTestAttribute(
+        this._overlayRef.overlayElement,
+        this._overlayRef.overlayElement.id,
+        this._elementRef,
+        this._config,
+      );
     }
   }
 

components/confirmation-dialog/src/confirmation-dialog.spec.ts

@@ -33,17 +33,27 @@ import {
 } from './confirmation-dialog-constants';
 import { DtConfirmationDialogModule } from './confirmation-dialog-module';
 import { DtConfirmationDialog } from './confirmation-dialog';
+import {
+  DT_UI_TEST_CONFIG,
+  DtUiTestConfiguration,
+} from '@dynatrace/barista-components/core';
 
 describe('ConfirmationDialogComponent', () => {
   const UP = 'translateY(0)';
   const DOWN = 'translateY(100%)';
 
   let overlayContainerElement: HTMLElement;
+  const overlayConfig: DtUiTestConfiguration = {
+    attributeName: 'dt-ui-test-id',
+    constructOverlayAttributeValue(attributeName: string): string {
+      return `${attributeName}-overlay`;
+    },
+  };
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, DtConfirmationDialogModule],
-      providers: [],
+      providers: [{ provide: DT_UI_TEST_CONFIG, useValue: overlayConfig }],
       declarations: [TestComponent, DynamicStates, TwoDialogsComponent],
     }).compileComponents();
   }));
@@ -210,6 +220,17 @@ describe('ConfirmationDialogComponent', () => {
       expect(dialog2State.textContent!.trim()).toEqual('state2');
     }));
   });
+  describe('propagate attribute to overlay', () => {
+    it('should propagate attribute to overlay when `dt-ui-test-id` is provided', fakeAsync(() => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.componentInstance.testState = 'missingState';
+      fixture.detectChanges();
+      tick();
+      expect(overlayContainerElement.innerHTML).toContain(
+        'dt-ui-test-id="confirmation-dialog-overlay',
+      );
+    }));
+  });
 });
 
 function testTextContent(
@@ -242,7 +263,11 @@ function getState(oc: HTMLElement, name: string): HTMLElement {
 @Component({
   selector: 'dt-test-component',
   template: `
-    <dt-confirmation-dialog [state]="testState" [showBackdrop]="showBackdrop">
+    <dt-confirmation-dialog
+      dt-ui-test-id="confirmation-dialog"
+      [state]="testState"
+      [showBackdrop]="showBackdrop"
+    >
       <dt-confirmation-dialog-state name="state1">
         state1
       </dt-confirmation-dialog-state>

components/confirmation-dialog/src/confirmation-dialog.ts

@@ -39,10 +39,19 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
   isDevMode,
+  Optional,
+  Inject,
+  ElementRef,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
-import { DtLogger, DtLoggerFactory } from '@dynatrace/barista-components/core';
+import {
+  DtLogger,
+  DtLoggerFactory,
+  DtUiTestConfiguration,
+  dtSetUiTestAttribute,
+  DT_UI_TEST_CONFIG,
+} from '@dynatrace/barista-components/core';
 
 import {
   DT_CONFIRMATION_BACKDROP_ACTIVE_OPACITY,
@@ -136,6 +145,10 @@ export class DtConfirmationDialog
     private _overlay: Overlay,
     private _viewContainerRef: ViewContainerRef,
     private _changeDetectorRef: ChangeDetectorRef,
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional()
+    @Inject(DT_UI_TEST_CONFIG)
+    private _config?: DtUiTestConfiguration,
   ) {}
 
   ngAfterContentChecked(): void {
@@ -236,6 +249,12 @@ export class DtConfirmationDialog
       },
       positionStrategy,
     });
+    dtSetUiTestAttribute(
+      overlayRef.overlayElement,
+      overlayRef.overlayElement.id,
+      this._elementRef,
+      this._config,
+    );
     const containerPortal = new TemplatePortal<{}>(
       this._templateRef,
       this._viewContainerRef,