396677540: (feat) [GM3] add steps to resolve modal

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html

@@ -0,0 +1,45 @@
+<!--
+Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<span mat-dialog-title class="dialog-title">{{ data.testResult.name }}</span>
+<mat-dialog-content class="content-container">
+  <section class="result-info-main">
+    <div>
+      <p class="info-label">Description</p>
+      <p class="info-main-data">{{ data.testResult.description }}</p>
+    </div>
+    <div>
+      <p class="info-label">Test result</p>
+      <p class="info-result">{{ data.testResult.result }}</p>
+    </div>
+  </section>
+  <section class="result-info-steps">
+    <p class="info-label steps">Steps to resolve</p>
+    <ul class="info-steps-list">
+      <li *ngFor="let point of data.testResult.recommendations">{{ point }}</li>
+    </ul>
+  </section>
+</mat-dialog-content>
+<mat-dialog-actions align="end" class="actions-container">
+  <button
+    mat-dialog-close
+    class="close-button"
+    color="primary"
+    mat-flat-button
+    aria-label="Close dialog"
+    type="button">
+    Close
+  </button>
+</mat-dialog-actions>

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.scss

@@ -0,0 +1,108 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use 'colors';
+@use 'variables';
+@use 'mixins';
+
+::ng-deep :root {
+  --mat-dialog-container-max-width: 640px;
+}
+
+:host {
+  @include mixins.dialog;
+}
+
+.dialog-title {
+  background: colors.$white;
+  padding: 48px 24px 40px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 0;
+  &:before {
+    height: 0;
+  }
+}
+
+p {
+  margin: 0;
+}
+
+mat-dialog-content.content-container {
+  padding: 0;
+}
+
+.result-info-main {
+  display: grid;
+  background: colors.$error-container;
+  grid-template-columns: 1.2fr 1fr;
+  padding: 32px 48px;
+  gap: 48px;
+}
+
+.info-label {
+  color: colors.$on-surface-variant;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.1px;
+
+  &.steps {
+    color: colors.$on-surface;
+  }
+}
+
+.info-main-data {
+  color: colors.$on-surface;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+.info-result {
+  color: colors.$on-error-container;
+  font-family: variables.$font-primary;
+  font-size: 28px;
+  line-height: 36px;
+  letter-spacing: 0;
+}
+
+.result-info-steps {
+  padding: 32px 48px;
+}
+
+.info-steps-list {
+  margin: 0;
+  padding-left: 24px;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+mat-dialog-actions.actions-container {
+  padding: 18px 36px 26px;
+}
+
+.close-button {
+  border-radius: variables.$corner-medium;
+  padding: 0 16px;
+  min-width: 54px;
+
+  ::ng-deep .mat-focus-indicator {
+    display: none;
+  }
+}

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.spec.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestResultDialogComponent } from './test-result-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { TEST_DATA_RESULT_WITH_RECOMMENDATIONS } from '../../../../mocks/testrun.mock';
+
+describe('TestResultDialogComponent', () => {
+  let component: TestResultDialogComponent;
+  let fixture: ComponentFixture<TestResultDialogComponent>;
+  let compiled: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestResultDialogComponent],
+      providers: [
+        {
+          provide: MatDialogRef,
+          useValue: {
+            keydownEvents: () => of(new KeyboardEvent('keydown', { code: '' })),
+            close: () => ({}),
+          },
+        },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestResultDialogComponent);
+    component = fixture.componentInstance;
+    component.data = {
+      testResult: TEST_DATA_RESULT_WITH_RECOMMENDATIONS[0],
+    };
+    compiled = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should close dialog on click "Close" button', () => {
+    const closeSpy = spyOn(component.dialogRef, 'close');
+    const closeButton = compiled.querySelector(
+      '.close-button'
+    ) as HTMLButtonElement;
+
+    closeButton?.click();
+
+    expect(closeSpy).toHaveBeenCalled();
+
+    closeSpy.calls.reset();
+  });
+});

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { EscapableDialogComponent } from '../../../../components/escapable-dialog/escapable-dialog.component';
+import { IResult } from '../../../../model/testrun-status';
+
+interface DialogData {
+  testResult: IResult;
+}
+
+@Component({
+  selector: 'app-test-result-dialog',
+  imports: [MatDialogModule, MatButtonModule, CommonModule],
+  templateUrl: './test-result-dialog.component.html',
+  styleUrl: './test-result-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestResultDialogComponent extends EscapableDialogComponent {
+  override dialogRef: MatDialogRef<TestResultDialogComponent>;
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+
+  constructor() {
+    const dialogRef =
+      inject<MatDialogRef<TestResultDialogComponent>>(MatDialogRef);
+
+    super();
+    this.dialogRef = dialogRef;
+  }
+}

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

@@ -13,7 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 
 import { TestrunTableComponent } from './testrun-table.component';
 
@@ -31,6 +36,9 @@ import { TestRunService } from '../../../../services/test-run.service';
 import { Component, Input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { MatDialogRef } from '@angular/material/dialog';
+import { TestResultDialogComponent } from '../test-result-dialog/test-result-dialog.component';
 
 describe('ProgressTableComponent', () => {
   let component: TestrunTableComponent;
@@ -156,6 +164,30 @@ describe('ProgressTableComponent', () => {
 
         expect(clickableRow).not.toBeNull();
       });
+
+      it('#onRowSelected should open test result modal', fakeAsync(() => {
+        const openSpy = spyOn(component.dialog, 'open').and.returnValue({
+          afterClosed: () => of(true),
+        } as MatDialogRef<typeof TestResultDialogComponent>);
+        tick();
+
+        const testResult = TEST_DATA_RESULT_WITH_RECOMMENDATIONS[0];
+        component.onRowSelected(testResult);
+        tick();
+
+        expect(openSpy).toHaveBeenCalledWith(TestResultDialogComponent, {
+          ariaLabel: 'Test result information',
+          data: {
+            testResult,
+          },
+          autoFocus: true,
+          hasBackdrop: true,
+          disableClose: true,
+          panelClass: ['simple-dialog'],
+        });
+
+        openSpy.calls.reset();
+      }));
     });
   });
 });

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

@@ -36,7 +36,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTableModule } from '@angular/material/table';
 import { MatRippleModule } from '@angular/material/core';
-import { SimpleDialogComponent } from '../../../../components/simple-dialog/simple-dialog.component';
+import { TestResultDialogComponent } from '../test-result-dialog/test-result-dialog.component';
 
 @Component({
   selector: 'app-testrun-table',
@@ -71,13 +71,11 @@ export class TestrunTableComponent {
     'clickableIcon',
   ];
 
-  onRowSelected(row: IResult) {
-    // TODO: Will be updated. Testing modal will be implemented in the next ticket
-    this.dialog.open(SimpleDialogComponent, {
-      ariaLabel: 'Selected test will be updated',
+  onRowSelected(testResult: IResult) {
+    this.dialog.open(TestResultDialogComponent, {
+      ariaLabel: 'Test result information',
       data: {
-        title: `${row.name}`,
-        content: `Selected test info will be updated`,
+        testResult,
       },
       autoFocus: true,
       hasBackdrop: true,