Adds class for links to track report type on download

modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.html

@@ -15,6 +15,7 @@
 -->
 <app-download-report
   *ngIf="data"
+  class="download-report-link-pdf"
   [data]="data"
   [href]="data.report"
   title="Download pdf for Testrun # {{ getTestRunId(data) }}">

modules/ui/src/app/components/download-report-zip/download-report-zip.component.html

@@ -15,6 +15,7 @@
 -->
 <app-download-report
   *ngIf="data"
+  class="download-report-link-zip"
   [data]="data"
   [href]="getZipLink(data)"
   title="Download zip file for Testrun # {{ getTestRunId(data) }}">

modules/ui/src/app/components/download-report/download-report.component.html

@@ -15,7 +15,7 @@
 -->
 <ng-container *ngIf="data">
   <a
-    class="download-report-link"
+    class="download-report-link {{ getClass(data) }}"
     [download]="getReportTitle(data)"
     [href]="href"
     target="_blank"

modules/ui/src/app/components/download-report/download-report.component.spec.ts

@@ -16,7 +16,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DownloadReportComponent } from './download-report.component';
-import { MOCK_PROGRESS_DATA_COMPLIANT } from '../../mocks/progress.mock';
+import {
+  MOCK_PROGRESS_DATA_CANCELLED,
+  MOCK_PROGRESS_DATA_COMPLIANT,
+  MOCK_PROGRESS_DATA_NON_COMPLIANT,
+} from '../../mocks/progress.mock';
 
 describe('DownloadReportComponent', () => {
   let component: DownloadReportComponent;
@@ -43,6 +47,36 @@ describe('DownloadReportComponent', () => {
 
       expect(result).toEqual(expectedResult);
     });
+
+    describe('#getClass', () => {
+      beforeEach(() => {
+        component.class = 'class';
+      });
+
+      it('should return class with -compliant if status is Compliant', () => {
+        const expectedResult = 'class-compliant';
+
+        const result = component.getClass(MOCK_PROGRESS_DATA_COMPLIANT);
+
+        expect(result).toEqual(expectedResult);
+      });
+
+      it('should return class with -non-compliant if status is Non Compliant', () => {
+        const expectedResult = 'class-non-compliant';
+
+        const result = component.getClass(MOCK_PROGRESS_DATA_NON_COMPLIANT);
+
+        expect(result).toEqual(expectedResult);
+      });
+
+      it('should return class if status is not Compliant and Non-compliant', () => {
+        const expectedResult = 'class';
+
+        const result = component.getClass(MOCK_PROGRESS_DATA_CANCELLED);
+
+        expect(result).toEqual(expectedResult);
+      });
+    });
   });
 
   describe('DOM tests', () => {

modules/ui/src/app/components/download-report/download-report.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { TestrunStatus } from '../../model/testrun-status';
+import { StatusOfTestrun, TestrunStatus } from '../../model/testrun-status';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ReportActionComponent } from '../report-action/report-action.component';
@@ -30,6 +30,7 @@ import { ReportActionComponent } from '../report-action/report-action.component'
 })
 export class DownloadReportComponent extends ReportActionComponent {
   @Input() href: string | undefined;
+  @Input() class!: string;
   @Input() title!: string;
 
   getReportTitle(data: TestrunStatus) {
@@ -39,4 +40,14 @@ export class DownloadReportComponent extends ReportActionComponent {
       .replace(/ /g, '_')
       .toLowerCase();
   }
+
+  getClass(data: TestrunStatus) {
+    if (data.status === StatusOfTestrun.Compliant) {
+      return `${this.class}-compliant`;
+    }
+    if (data.status === StatusOfTestrun.NonCompliant) {
+      return `${this.class}-non-compliant`;
+    }
+    return this.class;
+  }
 }

modules/ui/src/app/mocks/progress.mock.ts

@@ -96,6 +96,14 @@ export const MOCK_PROGRESS_DATA_COMPLIANT: TestrunStatus =
     'https://api.testrun.io/report.pdf'
   );
 
+export const MOCK_PROGRESS_DATA_NON_COMPLIANT: TestrunStatus =
+  PROGRESS_DATA_RESPONSE(
+    StatusOfTestrun.NonCompliant,
+    '2023-06-22T09:20:00.123Z',
+    TEST_DATA_RESULT,
+    'https://api.testrun.io/report.pdf'
+  );
+
 export const MOCK_PROGRESS_DATA_CANCELLED: TestrunStatus =
   PROGRESS_DATA_RESPONSE(StatusOfTestrun.Cancelled, null, TEST_DATA);
 

modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts

@@ -19,15 +19,24 @@ import {
   DownloadOption,
   DownloadOptionsComponent,
 } from './download-options.component';
-import { MOCK_PROGRESS_DATA_COMPLIANT } from '../../../../mocks/progress.mock';
+import {
+  MOCK_PROGRESS_DATA_CANCELLED,
+  MOCK_PROGRESS_DATA_COMPLIANT,
+  MOCK_PROGRESS_DATA_NON_COMPLIANT,
+} from '../../../../mocks/progress.mock';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatOptionSelectionChange } from '@angular/material/core';
 
+interface GAEvent {
+  event: string;
+}
 describe('DownloadOptionsComponent', () => {
   let component: DownloadOptionsComponent;
   let fixture: ComponentFixture<DownloadOptionsComponent>;
 
   beforeEach(async () => {
+    // @ts-expect-error data layer should be defined
+    window.dataLayer = window.dataLayer || [];
     await TestBed.configureTestingModule({
       imports: [DownloadOptionsComponent, NoopAnimationsModule],
     }).compileComponents();
@@ -75,4 +84,78 @@ describe('DownloadOptionsComponent', () => {
 
     expect(spyGetZipLink).toHaveBeenCalled();
   });
+
+  describe('#sendGAEvent', () => {
+    it('should send download_report_pdf when type is pdf', () => {
+      component.sendGAEvent(MOCK_PROGRESS_DATA_CANCELLED, DownloadOption.PDF);
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_pdf'
+        )
+      ).toBeTruthy();
+    });
+
+    it('should send download_report_pdf_compliant when type is pdf and status is compliant', () => {
+      component.sendGAEvent(MOCK_PROGRESS_DATA_COMPLIANT, DownloadOption.PDF);
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_pdf_compliant'
+        )
+      ).toBeTruthy();
+    });
+
+    it('should send download_report_pdf_non_compliant when type is pdf and status is not compliant', () => {
+      component.sendGAEvent(
+        MOCK_PROGRESS_DATA_NON_COMPLIANT,
+        DownloadOption.PDF
+      );
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_pdf_non_compliant'
+        )
+      ).toBeTruthy();
+    });
+
+    it('should send download_report_zip when type is zip', () => {
+      component.sendGAEvent(MOCK_PROGRESS_DATA_CANCELLED, DownloadOption.ZIP);
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_zip'
+        )
+      ).toBeTruthy();
+    });
+
+    it('should send download_report_zip_compliant when type is pdf and status is compliant', () => {
+      component.sendGAEvent(MOCK_PROGRESS_DATA_COMPLIANT, DownloadOption.ZIP);
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_zip_compliant'
+        )
+      ).toBeTruthy();
+    });
+
+    it('should send download_report_zip_non_compliant when type is zip and status is not compliant', () => {
+      component.sendGAEvent(
+        MOCK_PROGRESS_DATA_NON_COMPLIANT,
+        DownloadOption.ZIP
+      );
+
+      expect(
+        // @ts-expect-error data layer should be defined
+        window.dataLayer.some(
+          (item: GAEvent) => item.event === 'download_report_zip_non_compliant'
+        )
+      ).toBeTruthy();
+    });
+  });
 });

modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts

@@ -19,7 +19,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
-import { TestrunStatus } from '../../../../model/testrun-status';
+import {
+  StatusOfTestrun,
+  TestrunStatus,
+} from '../../../../model/testrun-status';
 import { MatOptionSelectionChange } from '@angular/material/core';
 
 export enum DownloadOption {
@@ -53,6 +56,7 @@ export class DownloadOptionsComponent {
   ) {
     if (event.isUserInput) {
       this.createLink(data, type);
+      this.sendGAEvent(data, type);
     }
   }
 
@@ -83,4 +87,17 @@ export class DownloadOptionsComponent {
   getFormattedDateString(date: string | null) {
     return date ? this.datePipe.transform(date, 'd MMM y H:mm') : '';
   }
+
+  sendGAEvent(data: TestrunStatus, type: string) {
+    let event = `download_report_${type === DownloadOption.PDF ? 'pdf' : 'zip'}`;
+    if (data.status === StatusOfTestrun.Compliant) {
+      event += '_compliant';
+    } else if (data.status === StatusOfTestrun.NonCompliant) {
+      event += '_non_compliant';
+    }
+    // @ts-expect-error data layer is not null
+    window.dataLayer.push({
+      event: event,
+    });
+  }
 }