Skip to content

396678430: (feat) [GM3] add download result options #1180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OlgaMardvilko merged 1 commit into from
Mar 10, 2025
Merged

396678430: (feat) [GM3] add download result options #1180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 48 additions & 35 deletions modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,51 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<mat-form-field
appearance="outline"
*ngIf="data"
class="download-options-field">
<mat-select placeholder="Download" class="download-options-select">
<mat-option
class="download-option pdf"
(onSelectionChange)="onSelected($event, data, DownloadOption.PDF)">
<mat-icon
matSuffix
class="download-report-icon"
fontSet="material-symbols-outlined">
lab_profile
</mat-icon>
<span>{{ DownloadOption.PDF }}</span>
</mat-option>
<app-download-report-zip
id="downloadReportZip"
class="download-option zip"
[report]="data.report"
[export]="data.export"
[profiles]="profiles">
<mat-option
(onSelectionChange)="onZipSelected($event)"
(click)="$event.stopPropagation()">
<mat-icon
class="download-report-icon"
fontSet="material-symbols-outlined">
archive
</mat-icon>
<span>{{ DownloadOption.ZIP }}</span>
</mat-option>
</app-download-report-zip>
</mat-select>
</mat-form-field>
<div class="download-actions" *ngIf="data">
<button
*ngIf="isOpenDownloadOptions"
(click)="downloadPdf(data)"
class="download-option"
aria-label="Download PDF report"
mat-flat-button>
<mat-icon fontSet="material-symbols-outlined" class="filled">
lab_profile
</mat-icon>
{{ DownloadOption.PDF }}
</button>
<app-download-report-zip
*ngIf="isOpenDownloadOptions"
class="download-option"
[report]="data.report"
[export]="data.export"
[profiles]="profiles">
<mat-icon
class="download-report-icon"
fontSet="material-symbols-outlined"
class="filled">
archive
</mat-icon>
<span>{{ DownloadOption.ZIP }}</span>
</app-download-report-zip>
<button
(click)="openDownloadOptions()"
class="download-button"
[class.download-button-opened]="isOpenDownloadOptions"
color="primary"
aria-label="Download options"
mat-flat-button>
<mat-icon
*ngIf="!isOpenDownloadOptions"
fontSet="material-symbols-outlined"
class="filled">
download
</mat-icon>
<mat-icon
*ngIf="isOpenDownloadOptions"
fontSet="material-symbols-outlined"
class="filled">
close
</mat-icon>
{{ isOpenDownloadOptions ? '' : 'Download' }}
</button>
</div>
118 changes: 57 additions & 61 deletions modules/ui/src/app/pages/testrun/components/download-options/download-options.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,79 +17,75 @@
@use 'node_modules/@angular/material/index' as mat;
@use 'm3-theme' as *;
@use 'colors';
@use 'variables';

$option-width: 170px;
$option-height: 36px;

.download-options-field {
width: $option-width;
background: mat.get-theme-color($light-theme, primary, 95);

::ng-deep.mat-mdc-text-field-wrapper {
padding: 0 16px;
}

::ng-deep.mat-mdc-form-field-subscript-wrapper {
display: none;
}

::ng-deep.mat-mdc-form-field-infix {
padding: 6px 0;
width: $option-width;
min-height: $option-height;
}

::ng-deep.mat-mdc-select-placeholder {
color: mat.get-theme-color($light-theme, primary, 30);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.25px;
}
.download-actions {
position: fixed;
right: 40px;
bottom: 32px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 4px;
}

::ng-deep.mat-mdc-select-arrow {
color: mat.get-theme-color($light-theme, primary, 30);
}
.download-button {
padding: 26px;
border-radius: variables.$corner-large;
font-weight: 400;
font-size: 22px;
line-height: 28px;
height: 80px;
margin-top: 4px;

::ng-deep .mat-mdc-text-field-wrapper .mdc-notched-outline > * {
border-color: mat.get-theme-color($light-theme, primary, 95);
}

::ng-deep
.mat-mdc-text-field-wrapper.mdc-text-field--focused
.mdc-notched-outline
> * {
border-color: #000000de;
mat-icon {
font-size: 28px;
width: 28px;
height: 28px;
}
}

&:has(.download-options-select[aria-expanded='true'])
::ng-deep
.mat-mdc-text-field-wrapper.mdc-text-field--focused
.mdc-notched-outline
> * {
border: none;
}
.download-button.download-button-opened {
min-width: 56px;
height: 56px;
border-radius: 50%;
padding: 16px;

::ng-deep
.mat-mdc-text-field-wrapper.mdc-text-field--outlined:hover
.mdc-notched-outline
> * {
border: none;
mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
margin: 0;
}
}

.download-option {
::ng-deep .mat-mdc-focus-indicator {
display: none;
display: flex;
height: 56px;
box-sizing: border-box;
padding: 16px 24px;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
gap: 8px;
border-radius: 28px;
background: colors.$primary-container;
color: colors.$on-primary-container;
font-size: 16px;
font-weight: 500;
line-height: 24px;

mat-icon {
width: 24px;
height: 24px;
font-size: 24px;
margin: 0;
}
}

.download-option {
min-height: 32px;
color: colors.$grey-800;
&.zip app-download-report-zip {
display: flex;
align-items: center;
button {
::ng-deep .mat-focus-indicator {
display: none;
}
}
91 changes: 19 additions & 72 deletions ...s/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,13 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';

import {
DownloadOption,
DownloadOptionsComponent,
} from './download-options.component';
import { DownloadOptionsComponent } from './download-options.component';
import {
MOCK_PROGRESS_DATA_CANCELLED,
MOCK_PROGRESS_DATA_COMPLIANT,
MOCK_PROGRESS_DATA_NON_COMPLIANT,
} from '../../../../mocks/testrun.mock';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatOptionSelectionChange } from '@angular/material/core';
import { TestRunService } from '../../../../services/test-run.service';

interface GAEvent {
Expand Down Expand Up @@ -63,43 +59,33 @@ describe('DownloadOptionsComponent', () => {
expect(downloadReportZipComponent).toBeDefined();
});

it('#onSelected should call getReportTitle', () => {
it('#downloadPdf should call getReportTitle', () => {
const spyGetReportTitle = spyOn(component, 'getReportTitle');

const mockEvent = {
source: {},
isUserInput: true,
} as MatOptionSelectionChange;

component.onSelected(
mockEvent,
MOCK_PROGRESS_DATA_COMPLIANT,
DownloadOption.PDF
);
component.downloadPdf(MOCK_PROGRESS_DATA_COMPLIANT);

expect(spyGetReportTitle).toHaveBeenCalled();
});

it('#onSelected should call getZipLink when using for zip report', () => {
const spyGetZipLink = spyOn(component, 'getZipLink');
it('#getReportTitle should return data for title of link', () => {
const expectedResult = 'delta_03-din-cpu_1.2.2_complete_22_jun_2023_9:20';

const mockEvent = {
source: {},
isUserInput: true,
} as MatOptionSelectionChange;
const result = component.getReportTitle(MOCK_PROGRESS_DATA_COMPLIANT);

component.onSelected(
mockEvent,
MOCK_PROGRESS_DATA_COMPLIANT,
DownloadOption.ZIP
);
expect(result).toEqual(expectedResult);
});

it('#openDownloadOptions should change isOpenDownloadOptions', () => {
component.openDownloadOptions();
expect(component.isOpenDownloadOptions).toBeTrue();

expect(spyGetZipLink).toHaveBeenCalled();
component.openDownloadOptions();
expect(component.isOpenDownloadOptions).toBeFalse();
});

describe('#sendGAEvent', () => {
it('should send download_report_pdf when type is pdf', () => {
component.sendGAEvent(MOCK_PROGRESS_DATA_CANCELLED, DownloadOption.PDF);
component.sendGAEvent(MOCK_PROGRESS_DATA_CANCELLED);

expect(
// @ts-expect-error data layer should be defined
Expand All @@ -109,8 +95,8 @@ describe('DownloadOptionsComponent', () => {
).toBeTruthy();
});

it('should send download_report_pdf_compliant when type is pdf and status is compliant', () => {
component.sendGAEvent(MOCK_PROGRESS_DATA_COMPLIANT, DownloadOption.PDF);
it('should send download_report_pdf_compliant when status is compliant', () => {
component.sendGAEvent(MOCK_PROGRESS_DATA_COMPLIANT);

expect(
// @ts-expect-error data layer should be defined
Expand All @@ -120,11 +106,8 @@ describe('DownloadOptionsComponent', () => {
).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
);
it('should send download_report_pdf_non_compliant when status is not compliant', () => {
component.sendGAEvent(MOCK_PROGRESS_DATA_NON_COMPLIANT);

expect(
// @ts-expect-error data layer should be defined
Expand All @@ -133,41 +116,5 @@ describe('DownloadOptionsComponent', () => {
)
).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();
});
});
});
Loading
Loading