test: add more ui tests

.github/workflows/tests.yml

@@ -20,7 +20,7 @@ jobs:
         run: cargo test
 
   typescript_tests:
-    name: Typescript tests
+    name: TypeScript tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

lib/angular-ui/src/lib/atoms/badge/badge.component.ts

@@ -1,12 +1,25 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { defineCustomElement } from '@cg/ui/dist/components/cg-badge';
 import { DefineCustomElement } from '../../define-custom-element';
+import { defineCustomElementComponent } from '../../custom-element-component';
+
+type CustomElement = HTMLCgBadgeElement;
 
 @DefineCustomElement(defineCustomElement)
 @Component({
   selector: 'cg-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
 })
-export class BadgeComponent {}
+export class BadgeComponent extends defineCustomElementComponent<CustomElement>(
+  defineCustomElement,
+) {
+  public readonly theme = input<CustomElement['theme']>('primary');
+
+  constructor() {
+    super();
+
+    this.elemProxyEffect(this.theme, 'theme');
+  }
+}

lib/angular-ui/src/lib/atoms/card/card.component.ts

@@ -1,12 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { defineCustomElement } from '@cg/ui/dist/components/cg-card';
-import { DefineCustomElement } from '../../define-custom-element';
+import { defineCustomElementComponent } from '../../custom-element-component';
+
+type CustomElement = HTMLCgCardElement;
 
-@DefineCustomElement(defineCustomElement)
 @Component({
   selector: 'cg-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
 })
-export class CardComponent {}
+export class CardComponent extends defineCustomElementComponent<CustomElement>(
+  defineCustomElement,
+) {}

lib/angular-ui/src/lib/atoms/icon-btn/icon-btn.component.spec.ts

@@ -13,6 +13,7 @@ describe('IconBtnComponent', () => {
 
     fixture = TestBed.createComponent(IconBtnComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('ariaLabel', 'test');
     fixture.detectChanges();
   });
 

lib/angular-ui/src/lib/atoms/icon-btn/icon-btn.component.ts

@@ -1,12 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { defineCustomElement } from '@cg/ui/dist/components/cg-icon-btn';
-import { DefineCustomElement } from '../../define-custom-element';
+import { defineCustomElementComponent } from '../../custom-element-component';
+
+type CustomElement = HTMLCgIconBtnElement;
 
-@DefineCustomElement(defineCustomElement)
 @Component({
   selector: 'cg-icon-btn',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
 })
-export class IconBtnComponent {}
+export class IconBtnComponent extends defineCustomElementComponent<CustomElement>(
+  defineCustomElement,
+) {
+  public readonly type = input<CustomElement['type']>('button');
+  public readonly disabled = input<CustomElement['disabled']>(false);
+  public readonly ariaLabel = input.required<CustomElement['ariaLabel']>();
+  public readonly ariaHasPopup = input<CustomElement['ariaHasPopup']>();
+  public readonly ariaExpanded = input<CustomElement['ariaExpanded']>();
+  public readonly ariaControls = input<CustomElement['ariaControls']>();
+
+  constructor() {
+    super();
+
+    this.elemProxyEffect(this.type, 'type');
+    this.elemProxyEffect(this.disabled, 'disabled');
+    this.elemProxyEffect(this.ariaLabel, 'ariaLabel');
+    this.elemProxyEffect(this.ariaHasPopup, 'ariaHasPopup');
+    this.elemProxyEffect(this.ariaExpanded, 'ariaExpanded');
+    this.elemProxyEffect(this.ariaControls, 'ariaControls');
+  }
+}

lib/ui/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@cg/styles": "workspace:*",
+    "@cg/utils": "workspace:*",
     "@stencil/core": "^4.23.1"
   },
   "devDependencies": {

lib/ui/src/components/atoms/badge/badge.e2e.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test';
 import { test } from '@stencil/playwright';
+import { waitForError } from '../../../e2e-utils';
 
 test.describe('cg-badge', () => {
   const content = 'Badge content';
@@ -32,19 +33,14 @@ test.describe('cg-badge', () => {
   });
 
   test('should throw error for an invalid theme', async ({ page }) => {
-    let errorThrown = false;
-    page.on('pageerror', error => {
-      if (error.message === 'Invalid theme: "garbage"') {
-        errorThrown = true;
-      }
-    });
-
-    await page.setContent(`
-      <cg-badge theme="garbage">
-        ${content}
-      </cg-badge>
-    `);
-
-    expect(errorThrown).toBe(true);
+    await waitForError(
+      page,
+      'Invalid theme provided: "garbage"',
+      page.setContent(`
+        <cg-badge theme="garbage">
+          ${content}
+        </cg-badge>
+      `),
+    );
   });
 });

lib/ui/src/components/atoms/badge/badge.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 import { Theme } from '../../../types';
-import { coerceTheme } from '../../../coercion';
+import { coerceTheme } from '../../../utils';
 
 @Component({
   tag: 'cg-badge',

lib/ui/src/components/atoms/focus-ring/focus-ring.e2e.ts

@@ -73,7 +73,7 @@ test.describe('cg-focus-ring', () => {
   test('should throw error for an invalid theme', async ({ page }) => {
     let errorThrown = false;
     page.on('pageerror', error => {
-      if (error.message === 'Invalid theme: "garbage"') {
+      if (error.message === 'Invalid theme provided: "garbage"') {
         errorThrown = true;
       }
     });

lib/ui/src/components/atoms/focus-ring/focus-ring.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 import { Theme } from '../../../types';
-import { coerceTheme } from '../../../coercion';
+import { coerceTheme } from '../../../utils';
 
 @Component({
   tag: 'cg-focus-ring',

lib/ui/src/components/atoms/icon-btn/icon-btn.e2e.ts

@@ -0,0 +1,85 @@
+import { test } from '@stencil/playwright';
+import { expect } from '@playwright/test';
+import { waitForError } from '../../../e2e-utils';
+
+test.describe('cg-icon-btn', () => {
+  const compLoc = 'cg-icon-btn';
+  const iconLoc = 'cg-profile-icon';
+  const focusRingLoc = 'cg-focus-ring';
+  const buttonLoc = 'button';
+
+  test('should render button with default attributes', async ({ page }) => {
+    await page.setContent(`
+      <cg-icon-btn aria-label="test">
+        <cg-profile-icon />
+      </cg-icon-btn>
+    `);
+
+    const component = page.locator(compLoc);
+
+    await expect(component).toHaveAttribute('type', 'button');
+    await expect(component).toHaveAttribute('aria-label', 'test');
+    await expect(component).not.toHaveAttribute('disabled');
+    await expect(component).not.toHaveAttribute('aria-haspopup');
+    await expect(component).not.toHaveAttribute('aria-expanded');
+    await expect(component).not.toHaveAttribute('aria-controls');
+
+    await expect(component.locator(iconLoc)).toBeVisible();
+
+    const focusRing = component.locator(focusRingLoc);
+    const innerButton = component.locator(buttonLoc);
+
+    await expect(focusRing).not.toHaveAttribute('is-focused');
+    await innerButton.focus();
+    await expect(focusRing).toHaveAttribute('is-focused');
+    await innerButton.blur();
+    await expect(focusRing).not.toHaveAttribute('is-focused');
+  });
+
+  test('should render button with custom attributes', async ({ page }) => {
+    await page.setContent(`
+      <cg-icon-btn
+        type="submit"
+        disabled
+        aria-label="test"
+        aria-haspopup="menu"
+        aria-expanded
+        aria-controls="menu-id"
+      >
+        <cg-profile-icon />
+      </cg-icon-btn>
+    `);
+
+    const component = page.locator(compLoc);
+
+    await expect(component).toHaveAttribute('type', 'submit');
+    await expect(component).toHaveAttribute('aria-label', 'test');
+    await expect(component).toHaveAttribute('disabled');
+    await expect(component).toHaveAttribute('aria-haspopup', 'menu');
+    await expect(component).toHaveAttribute('aria-expanded');
+    await expect(component).toHaveAttribute('aria-controls', 'menu-id');
+
+    await expect(component.locator(iconLoc)).toBeVisible();
+
+    const focusRing = component.locator(focusRingLoc);
+    const innerButton = component.locator(buttonLoc);
+
+    await expect(focusRing).not.toHaveAttribute('is-focused');
+    await innerButton.focus();
+    await expect(focusRing).not.toHaveAttribute('is-focused');
+    await innerButton.blur();
+    await expect(focusRing).not.toHaveAttribute('is-focused');
+  });
+
+  test.fixme('should throw error for missing aria-label', async ({ page }) => {
+    await waitForError(
+      page,
+      'Error: Empty string provided where a non-empty string was expected',
+      page.setContent(`
+        <cg-icon-btn>
+          <cg-profile-icon />
+        </cg-icon-btn>
+      `),
+    );
+  });
+});

lib/ui/src/components/atoms/icon-btn/icon-btn.stories.ts

@@ -16,8 +16,8 @@ const meta: Meta = {
     disabled: false,
   },
   render: args => `
-    <cg-icon-btn label="${args.ariaLabel}" disabled="${args.disabled}">
-      <cg-profile-icon></cg-profile-icon>
+    <cg-icon-btn aria-label="${args.ariaLabel}" disabled="${args.disabled}">
+      <cg-profile-icon />
     </cg-icon-btn>
   `,
 };

lib/ui/src/components/atoms/icon-btn/icon-btn.tsx

@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Prop, State, h } from '@stencil/core';
 import { AriaHasPopup, ButtonType } from '../../../types';
+import { assertStringNonEmpty } from '../../../utils';
 
 @Component({
   tag: 'cg-icon-btn',
@@ -11,10 +12,17 @@ export class IconBtnComponent implements ComponentInterface {
   public type: ButtonType = 'button';
 
   @Prop({ reflect: true })
-  public disabled?: boolean;
+  public disabled: boolean = false;
 
   @Prop({ reflect: true, attribute: 'aria-label' })
-  public ariaLabel!: string;
+  public get ariaLabel(): string {
+    return this.#ariaLabel;
+  }
+  public set ariaLabel(value: string) {
+    assertStringNonEmpty(value);
+    this.#ariaLabel = value;
+  }
+  #ariaLabel!: string;
 
   @Prop({ reflect: true, attribute: 'aria-haspopup' })
   public ariaHasPopup?: AriaHasPopup;
@@ -47,6 +55,9 @@ export class IconBtnComponent implements ComponentInterface {
       </button>
     );
   }
+  public componentWillLoad(): void {
+    assertStringNonEmpty(this.ariaLabel);
+  }
 
   private onFocused(): void {
     this.isFocused = true;

lib/ui/src/e2e-utils/index.ts

@@ -0,0 +1 @@
+export * from './wait-for-error';

lib/ui/src/e2e-utils/wait-for-error.ts

@@ -0,0 +1,14 @@
+import { Page } from '@playwright/test';
+
+export async function waitForError<T extends Promise<void>>(
+  page: Page,
+  errorMessage: string,
+  doFn: T,
+): Promise<Error> {
+  const [error] = await Promise.all([
+    page.waitForEvent('pageerror', error => error.message === errorMessage),
+    doFn,
+  ]);
+
+  return error;
+}

lib/ui/src/utils/assert-string-has-value.ts

@@ -0,0 +1,11 @@
+import { isNil } from '@cg/utils';
+
+export function assertStringNonEmpty(value: string | undefined | null): string {
+  if (isNil(value) || value.trim() === '') {
+    throw new Error(
+      'Empty string provided where a non-empty string was expected',
+    );
+  }
+
+  return value;
+}

lib/ui/src/coercion/coerce-theme.ts → lib/ui/src/utils/coerce-theme.ts

@@ -2,7 +2,7 @@ import { Theme } from '../types';
 
 export function coerceTheme(theme: unknown): Theme {
   if (!isTheme(theme)) {
-    throw new Error(`Invalid theme: "${theme}"`);
+    throw new Error(`Invalid theme provided: "${theme}"`);
   }
 
   return theme;

lib/ui/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './assert-string-has-value';
+export * from './coerce-theme';

lib/utils/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@cg/utils",
+  "private": true,
+  "scripts": {
+    "build": "tsc"
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js"
+}

lib/utils/src/index.ts

@@ -0,0 +1 @@
+export * from './nil';

lib/utils/src/nil.ts

@@ -0,0 +1,9 @@
+export function isNil<T>(
+  value: T | null | undefined,
+): value is null | undefined {
+  return value === null || value === undefined;
+}
+
+export function isNotNil<T>(value: T | null | undefined): value is T {
+  return !isNil(value);
+}