tests(angular): Add file-uploader and error-summary tests e2e tests (#1007)

* test: Add file-uploader and error-summary tests to angular

* Update packages/angular/tests/e2e/file-uploader.spec.ts

Co-authored-by: Daine Trinidad <[email protected]>

* Update packages/angular/tests/app/src/app/components/fileuploader/file-uploader.component.ts

Co-authored-by: Daine Trinidad <[email protected]>

---------

Co-authored-by: Daine Trinidad <[email protected]>

Author: ethanWallace

packages/angular/tests/app/src/app/app.routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.components';
 import { FormsComponent } from './components/forms/forms.component';
 import { NavComponent } from './components/navigation/navigation.components';
+import { FileUploaderComponent } from './components/fileuploader/file-uploader.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   { path: 'forms', component: FormsComponent },
+  { path: 'file-uploader', component: FileUploaderComponent },
   {
     path: 'nav-one',
     component: NavComponent,

packages/angular/tests/app/src/app/components/fileuploader/file-uploader.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';
+
+@Component({
+  selector: 'app-fileuploader',
+  standalone: true,
+  imports: [CommonModule, GcdsComponentsModule],
+  template: `
+    <gcds-breadcrumbs hide-canada-link>
+      <gcds-breadcrumbs-item href="/home" routerLink="/home">
+        Home
+      </gcds-breadcrumbs-item>
+    </gcds-breadcrumbs>
+
+    <gcds-heading tag="h1">File Uploader Test</gcds-heading>
+
+    <form novalidate>
+      <section class="b-solid p-300 mb-300" id="file-uploader">
+        <gcds-heading tag="h2" margin-top="0">Gcds-file-uploader</gcds-heading>
+        <p>
+          Testing whether the file-uploader still functions properly in Angular.
+        </p>
+
+        <gcds-file-uploader
+          name="file-uploader"
+          label="Upload your files"
+          hint="You can upload multiple files."
+          [multiple]="true"
+          (change)="handleChange($event)"
+        ></gcds-file-uploader>
+
+        <p>You entered: <span id="files"></span></p>
+      </section>
+    </form>
+  `,
+})
+export class FileUploaderComponent {
+  handleChange(event: any) {
+    const inputFiles = event.target.files;
+    const filesElement = document.getElementById('files');
+    if (filesElement) {
+      filesElement.innerText = Array.from(inputFiles)
+        .map(file => (file as File).name)
+        .join(', ');
+    }
+  }
+}

packages/angular/tests/app/src/app/components/forms/forms.component.ts

@@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms';
     <gcds-heading tag="h1">Form components</gcds-heading>
 
     <form>
+      <gcds-error-summary></gcds-error-summary>
       <section class="b-solid p-300 mb-300" id="input">
         <gcds-heading tag="h2" margin-top="0">Gcds-input</gcds-heading>
         <p>Text input and number input</p>
@@ -27,6 +28,8 @@ import { FormsModule } from '@angular/forms';
           name="name"
           label="Full name"
           [(ngModel)]="name"
+          validate-on="submit"
+          [required]="true"
         ></gcds-input>
 
         <gcds-input
@@ -35,6 +38,8 @@ import { FormsModule } from '@angular/forms';
           name="number"
           label="Number"
           [(ngModel)]="number"
+          validate-on="submit"
+          [required]="true"
         ></gcds-input>
 
         <p>
@@ -53,6 +58,8 @@ import { FormsModule } from '@angular/forms';
           textarea-id="message"
           name="message"
           [(ngModel)]="message"
+          validate-on="submit"
+          [required]="true"
         ></gcds-textarea>
 
         <p>
@@ -69,13 +76,17 @@ import { FormsModule } from '@angular/forms';
           name="date-full"
           format="full"
           [(ngModel)]="dateFull"
+          validate-on="submit"
+          [required]="true"
         ></gcds-date-input>
 
         <gcds-date-input
           legend="Compact date"
           name="date-compact"
           format="compact"
           [(ngModel)]="dateCompact"
+          validate-on="submit"
+          [required]="true"
         ></gcds-date-input>
 
         <div>
@@ -97,6 +108,8 @@ import { FormsModule } from '@angular/forms';
           name="select"
           default-value="Select an option"
           [(ngModel)]="select"
+          validate-on="submit"
+          [required]="true"
         >
           <option value="1">1</option>
           <option value="2">2</option>
@@ -116,11 +129,13 @@ import { FormsModule } from '@angular/forms';
           name="radio"
           legend="Radios"
           options='[
-          { "label": "Label for radio 1", "id": "radio1", "value": "radio1"},
-          { "label": "Label for radio 2", "id": "radio2", "value": "radio2"},
-          { "label": "Label for radio 3", "id": "radio3", "value": "radio3"}
-        ]'
+            { "label": "Label for radio 1", "id": "radio1", "value": "radio1"},
+            { "label": "Label for radio 2", "id": "radio2", "value": "radio2"},
+            { "label": "Label for radio 3", "id": "radio3", "value": "radio3"}
+          ]'
           [(ngModel)]="radio"
+          validate-on="submit"
+          [required]="true"
         ></gcds-radios>
 
         <p>
@@ -140,13 +155,18 @@ import { FormsModule } from '@angular/forms';
             { "label": "Label for checkbox 3", "id": "check3", "value": "check3"}
           ]'
           [(ngModel)]="check"
+          validate-on="submit"
+          [required]="true"
         ></gcds-checkboxes>
 
         <p>
           You entered: <span id="input-check">{{ check }}</span>
         </p>
       </section>
 
+      <gcds-button type="submit" button-role="primary" id="submit">
+        Submit
+      </gcds-button>
       <gcds-button
         type="button"
         button-role="primary"

packages/angular/tests/app/src/app/components/home/home.components.ts

@@ -22,6 +22,16 @@ import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';
           Navigation components
         </gcds-link>
       </li>
+      <li>
+        <p>Extra tests:</p>
+        <ul class="list-disc">
+          <li>
+            <gcds-link href="/file-uploader" routerLink="/file-uploader">
+              File uploader
+            </gcds-link>
+          </li>
+        </ul>
+      </li>
     </ul>
   `,
 })

packages/angular/tests/e2e/file-uploader.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+
+test('File uploader loads and functions', async ({ page }) => {
+  await page.goto('http://localhost:4200/file-uploader');
+
+  const fileInput = await page.locator('input[type="file"]');
+  await expect(fileInput).toBeVisible();
+
+  // Simulate single file upload
+  const filePath = 'tests/e2e/file-uploader.spec.ts';
+  await fileInput.setInputFiles(filePath);
+
+  await expect(await page.locator('#files')).toHaveText(
+    'file-uploader.spec.ts',
+  );
+
+  // Remove file
+  await page.locator('.file-uploader__uploaded-file button').click();
+  await expect(await page.locator('#files')).toHaveText('');
+
+  // Simulate mutliple file upload
+  const multipleFilePath = [
+    'tests/e2e/file-uploader.spec.ts',
+    'tests/e2e/app.spec.ts',
+  ];
+  await fileInput.setInputFiles(multipleFilePath);
+
+  await expect(await page.locator('#files')).toHaveText(
+    'file-uploader.spec.ts, app.spec.ts',
+  );
+
+  // Remove files
+  await page.locator('.file-uploader__uploaded-file button').first().click();
+  await page.locator('.file-uploader__uploaded-file button').first().click();
+  await expect(await page.locator('#files')).toHaveText('');
+});

packages/angular/tests/e2e/ngmodel.spec.ts

@@ -159,3 +159,73 @@ test('Form component ngModel - setting programatically', async ({ page }) => {
   await expect(page.locator('#input-radios')).toHaveText('');
   await expect(page.locator('#input-check')).toHaveText('');
 });
+
+test(`Error summary`, async ({ page }) => {
+  await page.goto('http://localhost:4200/forms');
+
+  expect(await page.locator('gcds-error-summary a').count()).toBe(0);
+
+  await expect(page.locator('#input-name')).toHaveText('');
+  await expect(page.locator('#input-message')).toHaveText('');
+  await expect(page.locator('#input-date-full')).toHaveText('');
+  await expect(page.locator('#input-date-compact')).toHaveText('');
+  await expect(page.locator('#input-select')).toHaveText('');
+  await expect(page.locator('#input-radios')).toHaveText('');
+  await expect(page.locator('#input-check')).toHaveText('');
+
+  await page.locator('button[type="submit"]').click();
+
+  await page.waitForTimeout(500); // Wait for error summary to render
+
+  let errorLinks = await page.locator('gcds-error-summary a').all();
+
+  expect(errorLinks.length).toBe(7);
+
+  await errorLinks[0].click();
+  await expect(page.locator('input[name="name"]')).toBeFocused();
+  await page.locator('input[name="name"]').fill('John');
+
+  await errorLinks[1].click();
+  await expect(page.locator('textarea[name="message"]')).toBeFocused();
+  await page.locator('textarea[name="message"]').fill('This is a message.');
+
+  await errorLinks[2].click();
+  const dateFull = page.locator('gcds-date-input[name="date-full"]');
+
+  await expect(
+    await dateFull.evaluate(el => el === document.activeElement),
+  ).toBe(true);
+  await dateFull.evaluate(el => el.setAttribute('value', '2024-12-31'));
+
+  await errorLinks[3].click();
+  const dateCompact = page.locator('gcds-date-input[name="date-compact"]');
+
+  await expect(
+    await dateCompact.evaluate(el => el === document.activeElement),
+  ).toBe(true);
+  await dateCompact.evaluate(el => el.setAttribute('value', '2024-12'));
+
+  await errorLinks[4].click();
+  await expect(page.locator('gcds-select select[name="select"]')).toBeFocused();
+  await page.locator('gcds-select select[name="select"]').selectOption('1');
+
+  await errorLinks[5].click();
+  await expect(page.locator('gcds-radios fieldset')).toBeFocused();
+  await page
+    .locator('gcds-radios input[value="radio1"]')
+    .check({ force: true });
+
+  await errorLinks[6].click();
+  await expect(page.locator('gcds-checkboxes fieldset')).toBeFocused();
+  await page
+    .locator('gcds-checkboxes input[value="check1"]')
+    .check({ force: true });
+
+  await page.locator('button[type="submit"]').click();
+
+  await page.waitForTimeout(500); // Wait for error summary to render
+
+  errorLinks = await page.locator('gcds-error-summary a').all();
+
+  expect(errorLinks.length).toBe(0);
+});