test/introduce unit testing

.eslintrc.js.json

@@ -79,6 +79,7 @@
     "no-sparse-arrays": "error",
     "no-this-before-super": "error",
     "no-throw-literal": "error",
+    "@typescript-eslint/no-undef": "off",
     "no-undef": "error",
     "no-unexpected-multiline": "error",
     "no-unmodified-loop-condition": "error",

.eslintrc.json

@@ -50,6 +50,9 @@
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      },
       "parser": "@typescript-eslint/parser",
       "plugins": ["@typescript-eslint", "import"]
     },
@@ -73,6 +76,7 @@
         "plugin:react/recommended",
         "eslint-config-prettier",
         "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],

.eslintrc.ts.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-undef": "off"
+  }
+}

packages/components-css/login-method-button/login-method-button.html

@@ -0,0 +1,4 @@
+<button class="lux-login-method-button">
+  <span class="lux-login-method-button__label"></span>
+  <div class="lux-login-method-button__icon lux-login-method-button__icon--variant" aria-hidden="true"></div>
+</button>

packages/storybook/src/web-component-login-method-button.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
       type: 'string',
     },
     variant: {
-      options: ['digid', 'digid-machtigen', 'e-herkenning', 'eidas'],
+      options: ['digid', 'digid-machtigen', 'eherkenning', 'eidas'],
       control: {
         type: 'select',
       },
@@ -56,15 +56,15 @@ export const DigidMachtigen: Story = {
 };
 
 export const EHerkenning: Story = {
-  name: 'E-Herkenning',
+  name: 'eHerkenning',
   args: {
     label: '',
-    variant: 'e-herkenning',
+    variant: 'eherkenning',
   },
 };
 
 export const Eidas: Story = {
-  name: 'Eidas',
+  name: 'eIDAS',
   args: {
     label: '',
     variant: 'eidas',

packages/web-components-stencil/package.json

@@ -29,17 +29,20 @@
     "build:typescript": "tsc",
     "clean": "rimraf dist/ ../web-components-react/src/components.ts ../web-components-react/src/react-component-lib/",
     "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec",
     "watch": "npm-run-all --parallel watch:**",
     "watch:stencil": "chokidar --follow-symlinks --initial --command 'npm run build:stencil' '../../components/**/*.(js|jsx|ts|tsx)'",
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@jest/globals": "29.7.0",
     "@lux/components-css": "workspace:*",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.10",
     "@types/jest": "29.5.12",
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
+    "react": "18.2.0",
     "rimraf": "5.0.5",
     "tslib": "2.6.2",
     "typescript": "5.4.2"

packages/web-components-stencil/src/components/login-method-button/constants.ts

@@ -5,6 +5,6 @@ export const COMPONENT_TAG = 'lux-login-method-button';
 export const loginMethodLabels: Record<LoginMethodVariant, string> = {
   digid: 'Inloggen',
   'digid-machtigen': 'Inloggen als gemachtigde',
-  'e-herkenning': 'Inloggen als bedrijf of instelling',
+  eherkenning: 'Inloggen als bedrijf of instelling',
   eidas: 'European login',
 };

packages/web-components-stencil/src/components/login-method-button/login-method-button.css

@@ -3,6 +3,10 @@
   display: contents;
 }
 
+:host([hidden]) {
+  display: none !important;
+}
+
 .lux-login-method-button {
   align-items: center;
   appearance: button;
@@ -51,25 +55,3 @@
   inline-size: var(--lux-login-method-button-icon-size);
   line-height: 1;
 }
-
-/* stylelint-disable selector-class-pattern */
-.lux-login-method-button__logo--e-herkenning .e {
-  fill: var(--lux-login-method-button-icon-eherkenning-e-color);
-}
-
-.lux-login-method-button__logo--eidas .line {
-  fill: var(--lux-login-method-button-icon-eidas-lines-color);
-}
-
-.lux-login-method-button__logo--eidas .star {
-  fill: var(--lux-login-method-button-icon-eidas-stars-color);
-}
-
-.lux-login-method-button__logo--eidas .background {
-  fill: var(--lux-login-method-button-icon-eidas-background-color);
-}
-
-.lux-login-method-button__logo--eidas .lock {
-  fill: var(--lux-login-method-button-icon-eidas-lock-color);
-}
-/* stylelint-enable selector-class-pattern */

packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx

@@ -1,13 +1,10 @@
-import { Component, Event, EventEmitter, getAssetPath, h, Prop, State } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';
 import { COMPONENT_TAG, loginMethodLabels } from './constants';
 import type { LoginMethodVariant } from './types';
-import { isStatusValid } from '../../utils/http/status';
-
-const requestsCache = new Map<string, Promise<string>>();
+import { applyTestId } from '../../utils/test/testid';
 
 @Component({
   tag: 'lux-login-method-button',
-  assetsDirs: ['assets'],
   shadow: true,
   styleUrl: 'login-method-button.css',
 })
@@ -20,88 +17,59 @@ export class LoginMethodButton {
     return loginMethodLabels[this.variant];
   }
 
-  @State() private svgContent: string = '';
+  @Element() el!: HTMLLuxLoginMethodButtonElement;
 
   @Prop() public readonly variant!: LoginMethodVariant;
   @Prop() public readonly label!: string;
 
   @Event() private luxClick!: EventEmitter<void>;
 
-  async componentWillLoad() {
-    return this.loadLogoAsset();
-  }
+  @Listen('click')
+  handleClick(evt: MouseEvent) {
+    evt.stopPropagation();
+    evt.preventDefault();
 
-  async componentWillRender() {
-    return this.loadLogoAsset();
+    this.luxClick.emit();
   }
 
   renderLabel() {
-    return <span class={`${COMPONENT_TAG}__label`}>{this.printedLabel}</span>;
+    return (
+      <span class={`${COMPONENT_TAG}__label`} {...applyTestId('label')}>
+        {this.printedLabel}
+      </span>
+    );
   }
 
-  renderLogo() {
-    const classNames = {
-      [`${COMPONENT_TAG}__logo`]: true,
-      [`${COMPONENT_TAG}__logo--${this.variant}`]: true,
+  renderLogoIcon() {
+    const loginMethodIcons: Record<LoginMethodVariant, any> = {
+      digid: <lux-icon-logo-digid />,
+      'digid-machtigen': <lux-icon-logo-digid />,
+      eherkenning: <lux-icon-logo-eherkenning />,
+      eidas: <lux-icon-logo-eidas />,
     };
 
-    return <div class={classNames} aria-hidden="true" innerHTML={this.svgContent} />;
+    return loginMethodIcons[this.variant];
   }
 
-  render() {
+  renderLogoContainer() {
     return (
-      <button class={COMPONENT_TAG} onClick={(evt: MouseEvent) => this.handleClick(evt)}>
-        {this.renderLabel()}
-        {this.renderLogo()}
-      </button>
+      <div class={`${COMPONENT_TAG}__logo`} aria-hidden="true" {...applyTestId('logo')}>
+        {this.renderLogoIcon()}
+      </div>
     );
   }
 
-  private handleClick(evt: MouseEvent) {
-    evt.stopPropagation();
-
-    this.luxClick.emit();
-  }
-
-  private async loadLogoAsset(): Promise<void> {
-    const assetPath = this.getLogoAssetPath();
-
-    try {
-      const content = await this.getLogoAssetHtmlString(assetPath);
-      this.svgContent = content;
-    } catch (err) {
-      console.error(`Icon '${this.variant}' was not resolved`);
-      console.error(err);
-    }
-  }
-
-  private getLogoAssetPath(): string {
-    return getAssetPath(`./logos/${this.variant}.svg`);
-  }
-
-  private async getLogoAssetHtmlString(assetPath: string): Promise<string> {
-    if (!assetPath) {
-      return Promise.reject();
-    }
-
-    // Get from cache, if available
-    let request = requestsCache.get(assetPath);
-
-    if (request) {
-      return request;
-    }
-
-    request = fetch(assetPath, { cache: 'force-cache', credentials: 'include' }).then((response) => {
-      if (isStatusValid(response)) {
-        return response.text();
-      }
-
-      return Promise.resolve('');
-    });
-
-    // Cache to prevent repetition
-    requestsCache.set(assetPath, request);
+  render() {
+    const classNames = {
+      [`${COMPONENT_TAG}`]: true,
+      [`${COMPONENT_TAG}--${this.variant}`]: true,
+    };
 
-    return request;
+    return (
+      <button class={classNames}>
+        {this.renderLabel()}
+        {this.renderLogoContainer()}
+      </button>
+    );
   }
 }