test(storybook): add snapshot tests

.github/workflows/test.yml

@@ -8,14 +8,6 @@ on:
     types: [opened, synchronize, reopened]
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/dependencies-install
-      - run: yarn lint
-      - run: yarn test
-
   build:
     runs-on: ubuntu-latest
     steps:
@@ -24,9 +16,8 @@ jobs:
     - run: npm config set scripts-prepend-node-path true
     - run: yarn build
 
-    # Build caches for unicorn deployment
-    - if: github.ref != 'refs/heads/master'
-      name: Upload build artifacts for unicorn deployment
+    # Build caches for unicorn deployment & snapshot tests
+    - name: Upload build artifacts for unicorn deployment
       uses: ./.github/workflows/artifacts-upload
       with:
         upload-storybook-artifact: true
@@ -39,3 +30,18 @@ jobs:
         upload-core-artifacts: true
         upload-example-artifacts: true
         upload-storybook-artifact: true
+
+  test:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/dependencies-install
+      - uses: actions/download-artifact@v3
+        name: Download Storybook Artifact
+        with:
+          name: storybook
+          path: packages/storybook/dist
+      - run: yarn lint
+      - run: yarn test

package.json

@@ -31,7 +31,9 @@
     "@types/fs-extra": "^9.0.13",
     "camelcase": "^6.2.0",
     "chalk": "^4.1.2",
+    "concurrently": "^7.3.0",
     "fs-extra": "^9.0.0",
+    "http-server": "^14.1.1",
     "js-yaml": "^3.14.0",
     "lint-staged": "^10.5.3",
     "prettier": "^2.1.2",
@@ -42,6 +44,7 @@
     "svgo": "^2.8.0",
     "ts-node": "^10.9.1",
     "tslint-config-prettier": "^1.18.0",
+    "wait-on": "^6.0.1",
     "yalc": "^1.0.0-pre.32"
   },
   "dependencies": {

packages/elements-angular/elements/src/directives/proxies.ts

@@ -142,13 +142,13 @@ export declare interface InoCheckbox extends Components.InoCheckbox {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'disabled', 'indeterminate', 'name', 'selection', 'value']
+  inputs: ['checkboxId', 'checked', 'disabled', 'indeterminate', 'name', 'selection', 'value']
 })
 @Component({
   selector: 'ino-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'disabled', 'indeterminate', 'name', 'selection', 'value']
+  inputs: ['checkboxId', 'checked', 'disabled', 'indeterminate', 'name', 'selection', 'value']
 })
 export class InoCheckbox {
   protected el: HTMLElement;
@@ -855,13 +855,13 @@ This event will only be emitted if the current state of the radio button is fals
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'disabled', 'name', 'value']
+  inputs: ['checked', 'disabled', 'name', 'radioId', 'value']
 })
 @Component({
   selector: 'ino-radio',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'disabled', 'name', 'value']
+  inputs: ['checked', 'disabled', 'name', 'radioId', 'value']
 })
 export class InoRadio {
   protected el: HTMLElement;
@@ -950,13 +950,13 @@ If the button is disabled or checked, the event will not be emitted.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'dense', 'disabled', 'name', 'value']
+  inputs: ['checked', 'dense', 'disabled', 'name', 'segmentButtonId', 'value']
 })
 @Component({
   selector: 'ino-segment-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'dense', 'disabled', 'name', 'value']
+  inputs: ['checked', 'dense', 'disabled', 'name', 'segmentButtonId', 'value']
 })
 export class InoSegmentButton {
   protected el: HTMLElement;
@@ -1088,13 +1088,13 @@ export declare interface InoSwitch extends Components.InoSwitch {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'disabled', 'name']
+  inputs: ['checked', 'disabled', 'name', 'switchId']
 })
 @Component({
   selector: 'ino-switch',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'disabled', 'name']
+  inputs: ['checked', 'disabled', 'name', 'switchId']
 })
 export class InoSwitch {
   protected el: HTMLElement;
@@ -1206,14 +1206,14 @@ export declare interface InoTableHeaderCell extends Components.InoTableHeaderCel
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['autofocus', 'columnId', 'label', 'notSortable', 'searchIcon', 'searched', 'sortDirection', 'sortStart'],
+  inputs: ['autofocus', 'cellId', 'columnId', 'label', 'notSortable', 'searchIcon', 'searched', 'sortDirection', 'sortStart'],
   methods: ['setSearchable', 'setFocus', 'setBlur']
 })
 @Component({
   selector: 'ino-table-header-cell',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['autofocus', 'columnId', 'label', 'notSortable', 'searchIcon', 'searched', 'sortDirection', 'sortStart']
+  inputs: ['autofocus', 'cellId', 'columnId', 'label', 'notSortable', 'searchIcon', 'searched', 'sortDirection', 'sortStart']
 })
 export class InoTableHeaderCell {
   protected el: HTMLElement;

packages/elements-vue/src/proxies.ts

@@ -62,6 +62,7 @@ export const InoCheckbox = /*@__PURE__*/ defineContainer<JSX.InoCheckbox>('ino-c
   'value',
   'selection',
   'indeterminate',
+  'checkboxId',
   'checkedChange'
 ],
 'checked', 'v-checked-change', 'checkedChange');
@@ -369,6 +370,7 @@ export const InoRadio = /*@__PURE__*/ defineContainer<JSX.InoRadio>('ino-radio',
   'disabled',
   'name',
   'value',
+  'radioId',
   'checkedChange'
 ],
 'checked', 'v-checked-change', 'checkedChange');
@@ -407,6 +409,7 @@ export const InoSegmentButton = /*@__PURE__*/ defineContainer<JSX.InoSegmentButt
   'dense',
   'name',
   'value',
+  'segmentButtonId',
   'checkedChange'
 ],
 'checked', 'v-checked-change', 'checkedChange');
@@ -458,6 +461,7 @@ export const InoSpinner = /*@__PURE__*/ defineContainer<JSX.InoSpinner>('ino-spi
 
 
 export const InoSwitch = /*@__PURE__*/ defineContainer<JSX.InoSwitch>('ino-switch', undefined, [
+  'switchId',
   'checked',
   'disabled',
   'name',
@@ -495,6 +499,7 @@ export const InoTable = /*@__PURE__*/ defineContainer<JSX.InoTable>('ino-table',
 export const InoTableHeaderCell = /*@__PURE__*/ defineContainer<JSX.InoTableHeaderCell>('ino-table-header-cell', undefined, [
   'autofocus',
   'searchIcon',
+  'cellId',
   'columnId',
   'label',
   'searched',

packages/elements/src/components.d.ts

@@ -114,6 +114,10 @@ export namespace Components {
         "value": any;
     }
     interface InoCheckbox {
+        /**
+          * An optional id for the checkbox. Will be generated by default.
+         */
+        "checkboxId": string;
         /**
           * Marks this element as checked. (**unmanaged**)
          */
@@ -927,6 +931,10 @@ export namespace Components {
           * The name of this element. Use the same name for radio groups
          */
         "name"?: string;
+        /**
+          * An optional id for the radio. Will be generated by default.
+         */
+        "radioId": string;
         /**
           * The value of this element.
          */
@@ -1010,6 +1018,10 @@ export namespace Components {
           * Name of the element
          */
         "name"?: string;
+        /**
+          * An optional id for the checkbox. Will be generated by default.
+         */
+        "segmentButtonId": string;
         /**
           * Value of the element
          */
@@ -1129,6 +1141,10 @@ export namespace Components {
           * The name of this element.
          */
         "name"?: string;
+        /**
+          * An optional id for the switch. Will be generated by default.
+         */
+        "switchId": string;
     }
     interface InoTab {
         /**
@@ -1187,6 +1203,10 @@ export namespace Components {
           * Marks the header as autofocused (used for searchable header cells).  Use this in combination with the `data-ino-focus` attribute on the actual search target element to focus a specific input element.
          */
         "autofocus": boolean;
+        /**
+          * An optional id for the cell. Will be generated by default.
+         */
+        "cellId": string;
         /**
           * A unique identifier of the column (used for sorting).
          */
@@ -1892,6 +1912,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface InoCheckbox {
+        /**
+          * An optional id for the checkbox. Will be generated by default.
+         */
+        "checkboxId"?: string;
         /**
           * Marks this element as checked. (**unmanaged**)
          */
@@ -2760,6 +2784,10 @@ declare namespace LocalJSX {
           * Emits when the user interacts with the radio-button. Contains `true` in `event.detail`. This event will only be emitted if the current state of the radio button is false.
          */
         "onCheckedChange"?: (event: InoRadioCustomEvent<any>) => void;
+        /**
+          * An optional id for the radio. Will be generated by default.
+         */
+        "radioId"?: string;
         /**
           * The value of this element.
          */
@@ -2858,6 +2886,10 @@ declare namespace LocalJSX {
           * Emits if the user interacts with the button. If the button is disabled or checked, the event will not be emitted.
          */
         "onCheckedChange"?: (event: InoSegmentButtonCustomEvent<any>) => void;
+        /**
+          * An optional id for the checkbox. Will be generated by default.
+         */
+        "segmentButtonId"?: string;
         /**
           * Value of the element
          */
@@ -2997,6 +3029,10 @@ declare namespace LocalJSX {
           * Emits when the user clicks on the switch to change the `checked` state. Contains the status in `event.detail`.
          */
         "onCheckedChange"?: (event: InoSwitchCustomEvent<any>) => void;
+        /**
+          * An optional id for the switch. Will be generated by default.
+         */
+        "switchId"?: string;
     }
     interface InoTab {
         /**
@@ -3067,6 +3103,10 @@ declare namespace LocalJSX {
           * Marks the header as autofocused (used for searchable header cells).  Use this in combination with the `data-ino-focus` attribute on the actual search target element to focus a specific input element.
          */
         "autofocus"?: boolean;
+        /**
+          * An optional id for the cell. Will be generated by default.
+         */
+        "cellId"?: string;
         /**
           * A unique identifier of the column (used for sorting).
          */

packages/elements/src/components/ino-checkbox/ino-checkbox.tsx

@@ -6,10 +6,10 @@ import {
   Element,
   Event,
   EventEmitter,
+  h,
   Host,
   Prop,
   Watch,
-  h,
 } from '@stencil/core';
 import classNames from 'classnames';
 
@@ -73,14 +73,20 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() indeterminate?: boolean;
 
+  /**
+   * An optional id for the checkbox. Will be generated by default.
+   */
+  @Prop({ mutable: true }) checkboxId: string;
+
   @Watch('indeterminate')
   indeterminateChanged(newValue: boolean) {
     this.checkboxInstance.indeterminate = newValue;
   }
 
-  private checkboxId = `ino-checkbox-id_${generateUniqueId()}`;
-
   componentDidLoad() {
+    if (!this.checkboxId)
+      this.checkboxId = `ino-checkbox-id_${generateUniqueId()}`;
+
     this.checkboxInstance = new MDCCheckbox(
       this.el.shadowRoot.querySelector('.mdc-checkbox')
     );

packages/elements/src/components/ino-checkbox/readme.md

@@ -9,6 +9,7 @@ A checkbox that allows the user to select one or more items from a set of option
 
 | Property        | Attribute       | Description                                                                                                                                                                                                                                                                                                                                                                                          | Type      | Default     |
 | --------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `checkboxId`    | `checkbox-id`   | An optional id for the checkbox. Will be generated by default.                                                                                                                                                                                                                                                                                                                                       | `string`  | `undefined` |
 | `checked`       | `checked`       | Marks this element as checked. (**unmanaged**)                                                                                                                                                                                                                                                                                                                                                       | `boolean` | `false`     |
 | `disabled`      | `disabled`      | Disables this element.                                                                                                                                                                                                                                                                                                                                                                               | `boolean` | `undefined` |
 | `indeterminate` | `indeterminate` | Marks this element as indeterminate. It indicates that a user is indeterminate without changing the checked state. If a checkbox is unchecked and indeterminate then it will lose the indeterminate state on click and change to checked. For more information, see [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes). | `boolean` | `undefined` |

packages/elements/src/components/ino-menu/ino-menu.tsx

@@ -30,6 +30,7 @@ export class Menu implements ComponentInterface {
   @Prop() placement: Placement = 'auto';
 
   connectedCallback() {
+
     if (this.el.parentElement.id) {
       return;
     }

packages/elements/src/components/ino-radio/ino-radio.tsx

@@ -6,10 +6,10 @@ import {
   Element,
   Event,
   EventEmitter,
+  h,
   Host,
   Prop,
   Watch,
-  h,
 } from '@stencil/core';
 import classnames from 'classnames';
 
@@ -57,6 +57,11 @@ export class Radio implements ComponentInterface {
    */
   @Prop() value?: string;
 
+  /**
+   * An optional id for the radio. Will be generated by default.
+   */
+  @Prop({ mutable: true }) radioId: string;
+
   /**
    * An internal instance of the material design radio.
    */
@@ -79,9 +84,9 @@ export class Radio implements ComponentInterface {
     this.checkedChange.emit(true);
   };
 
-  private radioId = `ino-radio-id_${generateUniqueId()}`;
-
   componentDidLoad() {
+    if (!this.radioId) this.radioId = `ino-radio-id_${generateUniqueId()}`;
+
     this.radio = new MDCRadio(this.el.shadowRoot.querySelector('.mdc-radio'));
     this.formField = new MDCFormField(
       this.el.shadowRoot.querySelector('.mdc-form-field')

packages/elements/src/components/ino-radio/readme.md

@@ -101,6 +101,7 @@ Clicking on the radio button triggers an event that contains the boolean value `
 | `checked`  | `checked`  | Initially marks this element as checked. If another ino-radio element in the same group receives `true`, the value will be changed to false automatically. | `boolean` | `false`     |
 | `disabled` | `disabled` | Disables this element.                                                                                                                                     | `boolean` | `undefined` |
 | `name`     | `name`     | The name of this element. Use the same name for radio groups                                                                                               | `string`  | `undefined` |
+| `radioId`  | `radio-id` | An optional id for the radio. Will be generated by default.                                                                                                | `string`  | `undefined` |
 | `value`    | `value`    | The value of this element.                                                                                                                                 | `string`  | `undefined` |