chore(testing): Extends Coverage #1 (#6457)

* Add a test demonstrating how you can use extends to directly manage state as part of your baseClass

* Extend Tests for @method decorator inheritance, super() calls, method override, and method composition.

* Extend Tests for @prop and @State inheritance from base classes.

* Extend Tests for extending Stencil-decorated classes with render() method inheritance.

* Demonstrates base classes triggering host component updates via requestUpdate

* Tests demonstrating lifecycle hooks living on the base class

* Tests for multi-level lifecycle inheritance

* Tests for ReactiveControllerHost pattern - composition based controllers with automatic lifecycle hooking

* Run prettier

---------

Co-authored-by: John Jenkins <johnljenkins@Hotmail.com>

Author: paulvisciano

test/wdio/ts-target/components.d.ts

@@ -54,6 +54,10 @@ export namespace Components {
          */
         "prop2": string;
     }
+    interface ExtendsControllerUpdates {
+    }
+    interface ExtendsDirectState {
+    }
     interface ExtendsExternal {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -66,6 +70,10 @@ export namespace Components {
          */
         "prop2": string;
     }
+    interface ExtendsLifecycleBasic {
+    }
+    interface ExtendsLifecycleMultilevel {
+    }
     interface ExtendsLocal {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -78,6 +86,40 @@ export namespace Components {
          */
         "prop2": string;
     }
+    interface ExtendsMethods {
+        /**
+          * Base method that can be called by child components
+         */
+        "baseMethod": () => Promise<string>;
+        /**
+          * Child-specific method that uses parent's protected helper
+         */
+        "childMethod": () => Promise<string>;
+        /**
+          * Method that composes parent and child behavior
+         */
+        "composedMethod": () => Promise<string>;
+        /**
+          * Method to get the call log for testing
+         */
+        "getCallLog": () => Promise<string[]>;
+        /**
+          * Method to get internal value for testing
+         */
+        "getInternalValue": () => Promise<string>;
+        /**
+          * Override parent method with super() call
+         */
+        "overridableMethod": () => Promise<string>;
+        /**
+          * Method to reset state for testing
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Method to trigger display update from test
+         */
+        "updateDisplay": (value: string) => Promise<void>;
+    }
     interface ExtendsMixinCmp {
         "method1": () => Promise<void>;
         "method2": () => Promise<void>;
@@ -95,6 +137,48 @@ export namespace Components {
          */
         "prop3": string;
     }
+    /**
+     * Test Case #3: Property & State Inheritance Basics
+     * This component extends PropsStateBase to test:
+     * -
+     * @Prop inheritance from base class
+     * -
+     * @State inheritance from base class
+     * - Additional
+     * @Prop and
+     * @State without conflicts
+     * - Property reactivity (inherited props/state trigger re-renders)
+     */
+    interface ExtendsPropsState {
+        /**
+          * @default 0
+         */
+        "baseCount": number;
+        /**
+          * @default 'base prop value'
+         */
+        "baseProp": string;
+        /**
+          * @default 'component prop value'
+         */
+        "componentProp": string;
+        "incrementBaseCount": () => Promise<void>;
+        "toggleBaseEnabled": () => Promise<void>;
+        "updateBaseState": (value: string) => Promise<void>;
+        "updateComponentState": (value: string) => Promise<void>;
+    }
+    /**
+     * Test Case #5: Render Method Inheritance
+     * This component extends RenderBase to test:
+     * - Render Inheritance: Component render() method calls super.render() to include parent template
+     * - Template Composition: Component composes parent template with additional content and structure
+     * - Slot Integration: Parent template slots work correctly when inherited and extended
+     * - CSS Class Inheritance: CSS classes from parent template maintained in component extension
+     */
+    interface ExtendsRender {
+    }
+    interface ExtendsViaHostCmp {
+    }
     interface TsTargetProps {
         /**
           * @default 'basicProp'
@@ -137,12 +221,36 @@ declare global {
         prototype: HTMLExtendsCmpCmpElement;
         new (): HTMLExtendsCmpCmpElement;
     };
+    interface HTMLExtendsControllerUpdatesElement extends Components.ExtendsControllerUpdates, HTMLStencilElement {
+    }
+    var HTMLExtendsControllerUpdatesElement: {
+        prototype: HTMLExtendsControllerUpdatesElement;
+        new (): HTMLExtendsControllerUpdatesElement;
+    };
+    interface HTMLExtendsDirectStateElement extends Components.ExtendsDirectState, HTMLStencilElement {
+    }
+    var HTMLExtendsDirectStateElement: {
+        prototype: HTMLExtendsDirectStateElement;
+        new (): HTMLExtendsDirectStateElement;
+    };
     interface HTMLExtendsExternalElement extends Components.ExtendsExternal, HTMLStencilElement {
     }
     var HTMLExtendsExternalElement: {
         prototype: HTMLExtendsExternalElement;
         new (): HTMLExtendsExternalElement;
     };
+    interface HTMLExtendsLifecycleBasicElement extends Components.ExtendsLifecycleBasic, HTMLStencilElement {
+    }
+    var HTMLExtendsLifecycleBasicElement: {
+        prototype: HTMLExtendsLifecycleBasicElement;
+        new (): HTMLExtendsLifecycleBasicElement;
+    };
+    interface HTMLExtendsLifecycleMultilevelElement extends Components.ExtendsLifecycleMultilevel, HTMLStencilElement {
+    }
+    var HTMLExtendsLifecycleMultilevelElement: {
+        prototype: HTMLExtendsLifecycleMultilevelElement;
+        new (): HTMLExtendsLifecycleMultilevelElement;
+    };
     interface HTMLExtendsLocalElementEventMap {
         "myEvent": string;
     }
@@ -160,12 +268,56 @@ declare global {
         prototype: HTMLExtendsLocalElement;
         new (): HTMLExtendsLocalElement;
     };
+    interface HTMLExtendsMethodsElement extends Components.ExtendsMethods, HTMLStencilElement {
+    }
+    var HTMLExtendsMethodsElement: {
+        prototype: HTMLExtendsMethodsElement;
+        new (): HTMLExtendsMethodsElement;
+    };
     interface HTMLExtendsMixinCmpElement extends Components.ExtendsMixinCmp, HTMLStencilElement {
     }
     var HTMLExtendsMixinCmpElement: {
         prototype: HTMLExtendsMixinCmpElement;
         new (): HTMLExtendsMixinCmpElement;
     };
+    /**
+     * Test Case #3: Property & State Inheritance Basics
+     * This component extends PropsStateBase to test:
+     * -
+     * @Prop inheritance from base class
+     * -
+     * @State inheritance from base class
+     * - Additional
+     * @Prop and
+     * @State without conflicts
+     * - Property reactivity (inherited props/state trigger re-renders)
+     */
+    interface HTMLExtendsPropsStateElement extends Components.ExtendsPropsState, HTMLStencilElement {
+    }
+    var HTMLExtendsPropsStateElement: {
+        prototype: HTMLExtendsPropsStateElement;
+        new (): HTMLExtendsPropsStateElement;
+    };
+    /**
+     * Test Case #5: Render Method Inheritance
+     * This component extends RenderBase to test:
+     * - Render Inheritance: Component render() method calls super.render() to include parent template
+     * - Template Composition: Component composes parent template with additional content and structure
+     * - Slot Integration: Parent template slots work correctly when inherited and extended
+     * - CSS Class Inheritance: CSS classes from parent template maintained in component extension
+     */
+    interface HTMLExtendsRenderElement extends Components.ExtendsRender, HTMLStencilElement {
+    }
+    var HTMLExtendsRenderElement: {
+        prototype: HTMLExtendsRenderElement;
+        new (): HTMLExtendsRenderElement;
+    };
+    interface HTMLExtendsViaHostCmpElement extends Components.ExtendsViaHostCmp, HTMLStencilElement {
+    }
+    var HTMLExtendsViaHostCmpElement: {
+        prototype: HTMLExtendsViaHostCmpElement;
+        new (): HTMLExtendsViaHostCmpElement;
+    };
     interface HTMLTsTargetPropsElement extends Components.TsTargetProps, HTMLStencilElement {
     }
     var HTMLTsTargetPropsElement: {
@@ -177,9 +329,17 @@ declare global {
         "extended-cmp-cmp": HTMLExtendedCmpCmpElement;
         "extends-abstract": HTMLExtendsAbstractElement;
         "extends-cmp-cmp": HTMLExtendsCmpCmpElement;
+        "extends-controller-updates": HTMLExtendsControllerUpdatesElement;
+        "extends-direct-state": HTMLExtendsDirectStateElement;
         "extends-external": HTMLExtendsExternalElement;
+        "extends-lifecycle-basic": HTMLExtendsLifecycleBasicElement;
+        "extends-lifecycle-multilevel": HTMLExtendsLifecycleMultilevelElement;
         "extends-local": HTMLExtendsLocalElement;
+        "extends-methods": HTMLExtendsMethodsElement;
         "extends-mixin-cmp": HTMLExtendsMixinCmpElement;
+        "extends-props-state": HTMLExtendsPropsStateElement;
+        "extends-render": HTMLExtendsRenderElement;
+        "extends-via-host-cmp": HTMLExtendsViaHostCmpElement;
         "ts-target-props": HTMLTsTargetPropsElement;
     }
 }
@@ -224,6 +384,10 @@ declare namespace LocalJSX {
          */
         "prop2"?: string;
     }
+    interface ExtendsControllerUpdates {
+    }
+    interface ExtendsDirectState {
+    }
     interface ExtendsExternal {
         /**
           * @default 'default text'
@@ -234,6 +398,10 @@ declare namespace LocalJSX {
          */
         "prop2"?: string;
     }
+    interface ExtendsLifecycleBasic {
+    }
+    interface ExtendsLifecycleMultilevel {
+    }
     interface ExtendsLocal {
         "onMyEvent"?: (event: ExtendsLocalCustomEvent<string>) => void;
         /**
@@ -245,6 +413,8 @@ declare namespace LocalJSX {
          */
         "prop2"?: string;
     }
+    interface ExtendsMethods {
+    }
     interface ExtendsMixinCmp {
         /**
           * @default 'default text'
@@ -259,6 +429,44 @@ declare namespace LocalJSX {
          */
         "prop3"?: string;
     }
+    /**
+     * Test Case #3: Property & State Inheritance Basics
+     * This component extends PropsStateBase to test:
+     * -
+     * @Prop inheritance from base class
+     * -
+     * @State inheritance from base class
+     * - Additional
+     * @Prop and
+     * @State without conflicts
+     * - Property reactivity (inherited props/state trigger re-renders)
+     */
+    interface ExtendsPropsState {
+        /**
+          * @default 0
+         */
+        "baseCount"?: number;
+        /**
+          * @default 'base prop value'
+         */
+        "baseProp"?: string;
+        /**
+          * @default 'component prop value'
+         */
+        "componentProp"?: string;
+    }
+    /**
+     * Test Case #5: Render Method Inheritance
+     * This component extends RenderBase to test:
+     * - Render Inheritance: Component render() method calls super.render() to include parent template
+     * - Template Composition: Component composes parent template with additional content and structure
+     * - Slot Integration: Parent template slots work correctly when inherited and extended
+     * - CSS Class Inheritance: CSS classes from parent template maintained in component extension
+     */
+    interface ExtendsRender {
+    }
+    interface ExtendsViaHostCmp {
+    }
     interface TsTargetProps {
         /**
           * @default 'basicProp'
@@ -276,9 +484,17 @@ declare namespace LocalJSX {
         "extended-cmp-cmp": ExtendedCmpCmp;
         "extends-abstract": ExtendsAbstract;
         "extends-cmp-cmp": ExtendsCmpCmp;
+        "extends-controller-updates": ExtendsControllerUpdates;
+        "extends-direct-state": ExtendsDirectState;
         "extends-external": ExtendsExternal;
+        "extends-lifecycle-basic": ExtendsLifecycleBasic;
+        "extends-lifecycle-multilevel": ExtendsLifecycleMultilevel;
         "extends-local": ExtendsLocal;
+        "extends-methods": ExtendsMethods;
         "extends-mixin-cmp": ExtendsMixinCmp;
+        "extends-props-state": ExtendsPropsState;
+        "extends-render": ExtendsRender;
+        "extends-via-host-cmp": ExtendsViaHostCmp;
         "ts-target-props": TsTargetProps;
     }
 }
@@ -290,9 +506,37 @@ declare module "@stencil/core" {
             "extended-cmp-cmp": LocalJSX.ExtendedCmpCmp & JSXBase.HTMLAttributes<HTMLExtendedCmpCmpElement>;
             "extends-abstract": LocalJSX.ExtendsAbstract & JSXBase.HTMLAttributes<HTMLExtendsAbstractElement>;
             "extends-cmp-cmp": LocalJSX.ExtendsCmpCmp & JSXBase.HTMLAttributes<HTMLExtendsCmpCmpElement>;
+            "extends-controller-updates": LocalJSX.ExtendsControllerUpdates & JSXBase.HTMLAttributes<HTMLExtendsControllerUpdatesElement>;
+            "extends-direct-state": LocalJSX.ExtendsDirectState & JSXBase.HTMLAttributes<HTMLExtendsDirectStateElement>;
             "extends-external": LocalJSX.ExtendsExternal & JSXBase.HTMLAttributes<HTMLExtendsExternalElement>;
+            "extends-lifecycle-basic": LocalJSX.ExtendsLifecycleBasic & JSXBase.HTMLAttributes<HTMLExtendsLifecycleBasicElement>;
+            "extends-lifecycle-multilevel": LocalJSX.ExtendsLifecycleMultilevel & JSXBase.HTMLAttributes<HTMLExtendsLifecycleMultilevelElement>;
             "extends-local": LocalJSX.ExtendsLocal & JSXBase.HTMLAttributes<HTMLExtendsLocalElement>;
+            "extends-methods": LocalJSX.ExtendsMethods & JSXBase.HTMLAttributes<HTMLExtendsMethodsElement>;
             "extends-mixin-cmp": LocalJSX.ExtendsMixinCmp & JSXBase.HTMLAttributes<HTMLExtendsMixinCmpElement>;
+            /**
+             * Test Case #3: Property & State Inheritance Basics
+             * This component extends PropsStateBase to test:
+             * -
+             * @Prop inheritance from base class
+             * -
+             * @State inheritance from base class
+             * - Additional
+             * @Prop and
+             * @State without conflicts
+             * - Property reactivity (inherited props/state trigger re-renders)
+             */
+            "extends-props-state": LocalJSX.ExtendsPropsState & JSXBase.HTMLAttributes<HTMLExtendsPropsStateElement>;
+            /**
+             * Test Case #5: Render Method Inheritance
+             * This component extends RenderBase to test:
+             * - Render Inheritance: Component render() method calls super.render() to include parent template
+             * - Template Composition: Component composes parent template with additional content and structure
+             * - Slot Integration: Parent template slots work correctly when inherited and extended
+             * - CSS Class Inheritance: CSS classes from parent template maintained in component extension
+             */
+            "extends-render": LocalJSX.ExtendsRender & JSXBase.HTMLAttributes<HTMLExtendsRenderElement>;
+            "extends-via-host-cmp": LocalJSX.ExtendsViaHostCmp & JSXBase.HTMLAttributes<HTMLExtendsViaHostCmpElement>;
             "ts-target-props": LocalJSX.TsTargetProps & JSXBase.HTMLAttributes<HTMLTsTargetPropsElement>;
         }
     }