@justeattakeaway/pie-webc-core 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- [Removed] - Function for CSS loading in Safari visual tests due to fix on Percy side. ([#575](https://github.com/justeattakeaway/pie/pull/575)) by [@JoshuaNg2332](https://github.com/JoshuaNg2332)
+
+## 0.4.0
+
+### Minor Changes
+
+- [Added] - New function to fix CSS loading in Safari Percy tests ([#534](https://github.com/justeattakeaway/pie/pull/534)) by [@siggerzz](https://github.com/siggerzz)
+
 ## 0.3.0
 
 ### Minor Changes

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "index.ts",
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
+  "scripts": {
+    "test": "run -T vitest run"
+  },
   "volta": {
     "extends": "../../../package.json"
   }

package/src/decorators/required-property.ts

@@ -3,17 +3,17 @@
  * If the property's value is `undefined`, `null` or empty string, an error is logged.
  * @returns {Function} - The decorator function.
  */
-export const requiredProperty = (componentName: string) => function (target: any, propertyKey: string) : void {
+export const requiredProperty = <T>(componentName: string) => function validateRequiredProperty (target: object, propertyKey: string): void {
     const privatePropertyKey = `#${propertyKey}`;
 
     Object.defineProperty(target, propertyKey, {
-        get () : any {
+        get (): T {
             return this[privatePropertyKey];
         },
-        set (value: any) : void {
+        set (value: T): void {
             const oldValue = this[privatePropertyKey];
 
-            if (value === undefined || value === null || value === '') {
+            if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
                 console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
             }
             this[privatePropertyKey] = value;
@@ -22,3 +22,4 @@ export const requiredProperty = (componentName: string) => function (target: any
         },
     });
 };
+

package/src/decorators/test/required-property.spec.ts

@@ -0,0 +1,94 @@
+import {
+    beforeEach,
+    afterEach,
+    describe,
+    it,
+    expect,
+    vi,
+} from 'vitest';
+
+import { requiredProperty } from '../required-property';
+
+describe('requiredProperty', () => {
+    let consoleErrorSpy: unknown;
+
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // Mock class to test the decorator
+    class MockComponent {
+        @requiredProperty('mock-component')
+            color?: string | null;
+
+        private _requestUpdateArgs = {};
+
+        requestUpdate (propertyKey: string, oldValue: unknown) {
+            this._requestUpdateArgs = { propertyKey, oldValue };
+        }
+
+        requestUpdateCalledWith () {
+            return this._requestUpdateArgs;
+        }
+    }
+
+    it('should log an error if the property is undefined', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = undefined;
+
+        // Assert
+        expect(consoleErrorSpy).toHaveBeenCalled();
+    });
+
+    it('should log an error if the property is null', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = null;
+
+        // Assert
+        expect(consoleErrorSpy).toHaveBeenCalled();
+    });
+
+    it('should log an error if the property is an empty string', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = '';
+
+        // Assert
+        expect(consoleErrorSpy).toHaveBeenCalled();
+    });
+
+    it('should not log an error if the property is a non-empty string', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'blue';
+
+        // Assert
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call requestUpdate when the property is set', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'blue';
+
+        // Assert
+        expect(mockComponent.requestUpdateCalledWith()).toStrictEqual({ propertyKey: 'color', oldValue: undefined });
+    });
+});

package/src/decorators/test/valid-property-values.spec.ts

@@ -0,0 +1,90 @@
+import {
+    beforeEach,
+    afterEach,
+    describe,
+    it,
+    expect,
+    vi,
+} from 'vitest';
+
+import { validPropertyValues } from '../valid-property-values';
+
+describe('validPropertyValues', () => {
+    let consoleErrorSpy: unknown;
+
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    // Mock class to test the decorator
+    class MockComponent {
+        @validPropertyValues('mock-component', ['red', 'green', 'blue'], 'red')
+            color = 'red';
+
+        private _requestUpdateArgs = {};
+
+        requestUpdate (propertyKey: string, oldValue: unknown) {
+            this._requestUpdateArgs = { propertyKey, oldValue };
+        }
+
+        requestUpdateCalledWith () {
+            return this._requestUpdateArgs;
+        }
+    }
+
+    it('should allow value to be updated with a valid value', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'green';
+
+        // Assert
+        expect(mockComponent.color).toBe('green');
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should fallback to the default value if an invalid value is assigned', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'yellow';
+
+        // Assert
+        expect(mockComponent.color).toBe('red');
+        expect(consoleErrorSpy).toHaveBeenCalled();
+    });
+
+    it('should log an error message if an invalid value is assigned', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'yellow';
+
+        // Assert
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+            '<mock-component> Invalid value "yellow" provided for property "color".',
+            'Must be one of: red | green | blue.',
+            'Falling back to default value: "red"',
+        );
+    });
+
+    it('should call requestUpdate when the property is set', () => {
+        // Arrange
+        const mockComponent = new MockComponent();
+
+        // Act
+        mockComponent.color = 'yellow';
+
+        // Assert
+        expect(mockComponent.color).toBe('red');
+        expect(mockComponent.requestUpdateCalledWith()).toStrictEqual({ propertyKey: 'color', oldValue: 'red' });
+    });
+});

package/src/decorators/valid-property-values.ts

@@ -5,14 +5,14 @@
  * @param defaultValue - The value to fall back on
  * @returns  - The decorator function
  */
-export const validPropertyValues = (componentName: string, validValues: any[], defaultValue: any) => function (target: any, propertyKey: string) : void {
+export const validPropertyValues = <T>(componentName: string, validValues: readonly T[], defaultValue: T) => function validatePropertyValues (target: object, propertyKey: string): void {
     const privatePropertyKey = `#${propertyKey}`;
 
     Object.defineProperty(target, propertyKey, {
-        get () : any {
+        get (): T {
             return this[privatePropertyKey];
         },
-        set (value: any) : void {
+        set (value: T): void {
             const oldValue = this[privatePropertyKey];
 
             if (!validValues.includes(value)) {

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './mixins';
 export * from './decorators';
 export * from './test-helpers';
+export * from './type-helpers';

package/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
+import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './webComponentTestWrapper.scss?inline';
 
@@ -7,6 +7,12 @@ import styles from './webComponentTestWrapper.scss?inline';
  * It allows us to wrap a component we'd like to test in a container
  * that displays the component's props as a label.
  *
+ * Alternatively, this component supports a page mode. In this mode,
+ * the test component is not wrapped and labelled, however you can add
+ * any amount of HTML to the page to help with testing. This useful for components
+ * such as Modal and Dialog components where we need to test the component in the context of
+ * the page markup.
+ *
  * Components can be tested without this, but it's useful if your tests
  * require additional markup when testing a component.
  */
@@ -21,6 +27,13 @@ export class WebComponentTestWrapper extends LitElement {
     @property({ type: String })
         propKeyValues = '';
 
+    /**
+     * Use in combination with the `pageMarkup` named slot to render the component alongside additional HTML
+     * to test the component in the context of the page.
+     */
+    @property({ type: Boolean })
+        pageMode = false;
+
     // Renders a string such as 'size: small, isFullWidth: true'
     // as HTML such as:
     // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
@@ -33,13 +46,20 @@ export class WebComponentTestWrapper extends LitElement {
         });
     }
 
-    // eslint-disable-next-line class-methods-use-this
     render () {
+        if (this.pageMode) {
+            return html`
+            <div>
+                <slot name="component"></slot>
+                <slot name="pageMarkup"></slot>
+            </div>`;
+        }
+
         return html`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
+                    <slot name="component"></slot>
                 </div>
             </div>`;
     }

package/src/type-helpers/DependentMap.ts

@@ -0,0 +1,6 @@
+/**
+ * A type alias that represents a specialized version of the built-in Map type, but with a custom get method that enforces stricter type checking
+ */
+export type DependentMap<T> = Omit<Map<keyof T, T[keyof T]>, 'get'> & {
+    get<K extends keyof T>(key: K): T[K] | undefined;
+}

package/src/type-helpers/index.ts

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