test(vue): add e2e test for Vue component changes (#627)

* test(vue): add e2e test for Vue component changes

* prettier

* minor tweak

* enable headless test back again

* prettier

Author: christian-bromann

example-project/component-library-angular/src/directives/proxies.ts

@@ -40,21 +40,21 @@ export declare interface MyButton extends Components.MyButton {
 
 
 @ProxyCmp({
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'my-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class MyCheckbox {
   protected el: HTMLMyCheckboxElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['myChange', 'myFocus', 'myBlur']);
+    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
   }
 }
 
@@ -63,17 +63,19 @@ import type { CheckboxChangeEventDetail as IMyCheckboxCheckboxChangeEventDetail
 
 export declare interface MyCheckbox extends Components.MyCheckbox {
   /**
-   * Emitted when the checked property has changed.
+   * Emitted when the checked property has changed as a result of a user action such as a click.
+
+This event will not emit when programmatically setting the `checked` property.
    */
-  myChange: EventEmitter<CustomEvent<IMyCheckboxCheckboxChangeEventDetail>>;
+  ionChange: EventEmitter<CustomEvent<IMyCheckboxCheckboxChangeEventDetail>>;
   /**
-   * Emitted when the toggle has focus.
+   * Emitted when the checkbox has focus.
    */
-  myFocus: EventEmitter<CustomEvent<void>>;
+  ionFocus: EventEmitter<CustomEvent<void>>;
   /**
-   * Emitted when the toggle loses focus.
+   * Emitted when the checkbox loses focus.
    */
-  myBlur: EventEmitter<CustomEvent<void>>;
+  ionBlur: EventEmitter<CustomEvent<void>>;
 }
 
 

example-project/component-library-react/src/components.ts

@@ -42,9 +42,9 @@ export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> =
 });
 
 type MyCheckboxEvents = {
-    onMyChange: EventName<MyCheckboxCustomEvent<CheckboxChangeEventDetail>>,
-    onMyFocus: EventName<CustomEvent<void>>,
-    onMyBlur: EventName<CustomEvent<void>>
+    onIonChange: EventName<MyCheckboxCustomEvent<CheckboxChangeEventDetail>>,
+    onIonFocus: EventName<CustomEvent<void>>,
+    onIonBlur: EventName<CustomEvent<void>>
 };
 
 export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEvents> = /*@__PURE__*/ createComponent<MyCheckboxElement, MyCheckboxEvents>({
@@ -53,9 +53,9 @@ export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEven
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {
-        onMyChange: 'myChange',
-        onMyFocus: 'myFocus',
-        onMyBlur: 'myBlur'
+        onIonChange: 'ionChange',
+        onIonFocus: 'ionFocus',
+        onIonBlur: 'ionBlur'
     } as MyCheckboxEvents,
     defineCustomElement: defineMyCheckbox
 });

example-project/component-library-vue/src/index.ts

@@ -68,15 +68,16 @@ export const MyCheckbox = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.
   'indeterminate',
   'disabled',
   'value',
-  'myChange',
-  'myFocus',
-  'myBlur',
-  'myStyle'
+  'labelPlacement',
+  'justify',
+  'alignment',
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
 ], [
-  'myChange',
-  'myFocus',
-  'myBlur',
-  'myStyle'
+  'ionChange',
+  'ionFocus',
+  'ionBlur'
 ],
 'checked', 'myChange') : defineStencilSSRComponent({
   tagName: 'my-checkbox',
@@ -87,11 +88,12 @@ export const MyCheckbox = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.
     'checked': [Boolean, "checked"],
     'indeterminate': [Boolean, "indeterminate"],
     'disabled': [Boolean, "disabled"],
-    'value': [String, "value"],
-    'onMyChange': [Function],
-    'onMyFocus': [Function],
-    'onMyBlur': [Function],
-    'onMyStyle': [Function]
+    'labelPlacement': [String, "label-placement"],
+    'justify': [String, "justify"],
+    'alignment': [String, "alignment"],
+    'onIonChange': [Function],
+    'onIonFocus': [Function],
+    'onIonBlur': [Function]
   }
 });
 

example-project/component-library/src/components.d.ts

@@ -6,15 +6,17 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AutocompleteTypes, Color, ComponentProps, ComponentRef, OverlayEventDetail, TextFieldTypes } from "./interfaces";
-import { CheckboxChangeEventDetail, Color as Color1, StyleEventDetail } from "./components/element-interface";
+import { CheckboxChangeEventDetail } from "./components/my-checkbox/my-checkbox";
 import { IMyComponent } from "./components/helpers";
 import { InputChangeEventDetail } from "./components/my-input/my-input";
+import { Color as Color1, StyleEventDetail } from "./components/element-interface";
 import { RadioGroupChangeEventDetail } from "./components/my-radio-group/my-radio-group";
 import { RangeChangeEventDetail, RangeValue } from "./components/my-range/my-range";
 export { AutocompleteTypes, Color, ComponentProps, ComponentRef, OverlayEventDetail, TextFieldTypes } from "./interfaces";
-export { CheckboxChangeEventDetail, Color as Color1, StyleEventDetail } from "./components/element-interface";
+export { CheckboxChangeEventDetail } from "./components/my-checkbox/my-checkbox";
 export { IMyComponent } from "./components/helpers";
 export { InputChangeEventDetail } from "./components/my-input/my-input";
+export { Color as Color1, StyleEventDetail } from "./components/element-interface";
 export { RadioGroupChangeEventDetail } from "./components/my-radio-group/my-radio-group";
 export { RangeChangeEventDetail, RangeValue } from "./components/my-range/my-range";
 export namespace Components {
@@ -77,14 +79,18 @@ export namespace Components {
         "type": 'submit' | 'reset' | 'button';
     }
     interface MyCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
         "checked": boolean;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
-        "color"?: Color1;
+        "color"?: string;
         /**
           * If `true`, the user cannot interact with the checkbox.
          */
@@ -93,6 +99,14 @@ export namespace Components {
           * If `true`, the checkbox will visually appear as indeterminate.
          */
         "indeterminate": boolean;
+        /**
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * The mode determines which platform styles to use.
          */
@@ -101,10 +115,11 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        "setFocus": () => Promise<void>;
         /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
-        "value": string;
+        "value": any | null;
     }
     interface MyComponent {
         /**
@@ -462,10 +477,9 @@ declare global {
         new (): HTMLMyButtonElement;
     };
     interface HTMLMyCheckboxElementEventMap {
-        "myChange": CheckboxChangeEventDetail;
-        "myFocus": void;
-        "myBlur": void;
-        "myStyle": StyleEventDetail;
+        "ionChange": CheckboxChangeEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
     }
     interface HTMLMyCheckboxElement extends Components.MyCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMyCheckboxElementEventMap>(type: K, listener: (this: HTMLMyCheckboxElement, ev: MyCheckboxCustomEvent<HTMLMyCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -703,14 +717,18 @@ declare namespace LocalJSX {
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface MyCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
         "checked"?: boolean;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
-        "color"?: Color1;
+        "color"?: string;
         /**
           * If `true`, the user cannot interact with the checkbox.
          */
@@ -719,6 +737,14 @@ declare namespace LocalJSX {
           * If `true`, the checkbox will visually appear as indeterminate.
          */
         "indeterminate"?: boolean;
+        /**
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * The mode determines which platform styles to use.
          */
@@ -728,25 +754,21 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when the toggle loses focus.
+          * Emitted when the checkbox loses focus.
          */
-        "onMyBlur"?: (event: MyCheckboxCustomEvent<void>) => void;
+        "onIonBlur"?: (event: MyCheckboxCustomEvent<void>) => void;
         /**
-          * Emitted when the checked property has changed.
+          * Emitted when the checked property has changed as a result of a user action such as a click.  This event will not emit when programmatically setting the `checked` property.
          */
-        "onMyChange"?: (event: MyCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
+        "onIonChange"?: (event: MyCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
         /**
-          * Emitted when the toggle has focus.
+          * Emitted when the checkbox has focus.
          */
-        "onMyFocus"?: (event: MyCheckboxCustomEvent<void>) => void;
+        "onIonFocus"?: (event: MyCheckboxCustomEvent<void>) => void;
         /**
-          * Emitted when the styles change.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
-        "onMyStyle"?: (event: MyCheckboxCustomEvent<StyleEventDetail>) => void;
-        /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
-         */
-        "value"?: string;
+        "value"?: any | null;
     }
     interface MyComponent {
         /**