From 723baeb8eaed1933bce5b466379dd46f01f06679 Mon Sep 17 00:00:00 2001 From: kurilova Date: Tue, 7 May 2024 10:42:17 +0000 Subject: [PATCH] Adds class for links to track report type on download; adds event when download report is clicked on progress page --- .../download-report-pdf.component.html | 1 + .../download-report-zip.component.html | 1 + .../download-report.component.html | 2 +- .../download-report.component.spec.ts | 36 +++++++- .../download-report.component.ts | 13 ++- modules/ui/src/app/mocks/progress.mock.ts | 8 ++ .../download-options.component.spec.ts | 85 ++++++++++++++++++- .../download-options.component.ts | 19 ++++- 8 files changed, 160 insertions(+), 5 deletions(-) diff --git a/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.html b/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.html index 001808452..430241297 100644 --- a/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.html +++ b/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.html @@ -15,6 +15,7 @@ --> diff --git a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.html b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.html index 7a0278132..2e8bbd7d9 100644 --- a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.html +++ b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.html @@ -15,6 +15,7 @@ --> diff --git a/modules/ui/src/app/components/download-report/download-report.component.html b/modules/ui/src/app/components/download-report/download-report.component.html index e862fc8f5..d4ee224fe 100644 --- a/modules/ui/src/app/components/download-report/download-report.component.html +++ b/modules/ui/src/app/components/download-report/download-report.component.html @@ -15,7 +15,7 @@ --> { 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', () => { diff --git a/modules/ui/src/app/components/download-report/download-report.component.ts b/modules/ui/src/app/components/download-report/download-report.component.ts index 3871bacdb..14d6c7659 100644 --- a/modules/ui/src/app/components/download-report/download-report.component.ts +++ b/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; + } } diff --git a/modules/ui/src/app/mocks/progress.mock.ts b/modules/ui/src/app/mocks/progress.mock.ts index 2911ea794..e740ff756 100644 --- a/modules/ui/src/app/mocks/progress.mock.ts +++ b/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); diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts index c28c453c1..42d084a5c 100644 --- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts +++ b/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; 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(); + }); + }); }); diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts index 847feb30e..58d61947f 100644 --- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts +++ b/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, + }); + } }