chore(testing): Extends Coverage #2 (#6468)

* 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

* Tests for decorator conflicts - duplicate decorator names of the same type in inheritance chains

Test Case #13 - Decorator Conflicts
Features:
- Duplicate @prop names (component overrides base)
- Duplicate @State names (component overrides base)
- Duplicate @method names (component overrides base)
- Compiler precedence rules (component decorators take precedence)

* Tests for event handling inheritance - @listen decorator inheritance

Test Case #10 - Event Handling Inheritance
Features:
- Inherits base class window/document/host listeners
- Handles child class window/document/host listeners
- Child override event handler takes precedence over base
- Handles event bubbling correctly
- Tracks events in combined event log

* Tests for @watch decorator inheritance

Test Case #11 - Watch Decorator Inheritance
Features:
- Inherits base class @watch decorators
- Handles child class @watch decorators
- Executes watch handlers in correct order (base first, then child)
- Child override watch handler takes precedence over base
- Reactive property chains work correctly
- Tracks watch calls in combined watch log

* Tests for mixed decorator types - different decorator types with same name

Test Case #18 - Mixed Decorator Types
Features:
- @prop in Base, @State in Component (same name)
- @State in Base, @prop in Component (same name)
- @method in Base, @prop in Component (same name)
- Component decorator type takes precedence
- Runtime behavior verification

* Tests for inheritance-based scaling with multiple components and controllers

Test Case #15 - Inheritance-Based Scaling
Features:
- 3 components (TextInput, RadioGroup, CheckboxGroup) using inheritance
- 2 controllers (ValidationController, FocusController) via inheritance
- Lifecycle methods called correctly
- Validation triggers on blur
- Focus tracking works
- Controllers use inheritance pattern

* Tests for composition-based scaling with multiple components and controllers

Test Case #16 - Composition-Based Scaling
Features:
- 3 components (TextInput, RadioGroup, CheckboxGroup) using composition
- 2 controllers (ValidationController, FocusController) via composition
- Lifecycle methods called automatically via ReactiveControllerHost
- Validation triggers on blur
- Focus tracking works
- Controllers are properly composed (not inherited)

* Apply prettier formatting & tweak test case #s

* Remove the duplicate method as it was causing types error

---------

Co-authored-by: Paul Visciano <[email protected]>

Author: paulvisciano

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

@@ -0,0 +1,119 @@
+import { Component, h, State, Element, Event, EventEmitter } from '@stencil/core';
+import { ReactiveControllerHost } from './reactive-controller-host.js';
+import { ValidationController } from './validation-controller.js';
+import { FocusController } from './focus-controller.js';
+
+@Component({
+  tag: 'composition-checkbox-group',
+})
+export class CheckboxGroupCmp extends ReactiveControllerHost {
+  @Element() el!: HTMLElement;
+  @State() values: string[] = [];
+  @State() helperText: string = 'Select at least one option';
+
+  @Event() valueChange!: EventEmitter<string[]>;
+
+  // Controllers via composition
+  private validation = new ValidationController(this);
+  private focus = new FocusController(this);
+
+  private inputId = `checkbox-group-${Math.random().toString(36).substr(2, 9)}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
+
+  componentWillLoad() {
+    super.componentWillLoad(); // Call base class to trigger controllers
+    // Set up validation callback
+    this.validation.setValidationCallback((vals: string[]) => {
+      if (!vals || vals.length === 0) {
+        return 'Please select at least one option';
+      }
+      return undefined;
+    });
+  }
+
+  componentDidLoad() {
+    super.componentDidLoad(); // Call base class to trigger controllers
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback(); // Call base class to trigger controllers
+  }
+
+  private handleChange = (e: Event) => {
+    const checkbox = e.target as HTMLInputElement;
+    const value = checkbox.value;
+
+    if (checkbox.checked) {
+      this.values = [...this.values, value];
+    } else {
+      this.values = this.values.filter((v) => v !== value);
+    }
+
+    this.valueChange.emit(this.values);
+    this.validation.validate(this.values);
+  };
+
+  private handleFocus = () => {
+    this.focus.handleFocus();
+  };
+
+  private handleBlur = () => {
+    this.focus.handleBlur();
+    this.validation.handleBlur(this.values);
+  };
+
+  render() {
+    const focusState = this.focus.getFocusState();
+    const validationData = this.validation.getValidationMessageData(this.helperTextId, this.errorTextId);
+
+    return (
+      <div class="checkbox-group-container">
+        <label>Select Options</label>
+        <div class="checkbox-group" tabindex="0" onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option1"
+              checked={this.values.includes('option1')}
+              onChange={this.handleChange}
+            />
+            Option 1
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option2"
+              checked={this.values.includes('option2')}
+              onChange={this.handleChange}
+            />
+            Option 2
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              name={this.inputId}
+              value="option3"
+              checked={this.values.includes('option3')}
+              onChange={this.handleChange}
+            />
+            Option 3
+          </label>
+        </div>
+        {validationData.hasError && (
+          <div class="validation-message">
+            <div id={validationData.errorTextId} class="error-text">
+              {validationData.errorMessage}
+            </div>
+          </div>
+        )}
+        <div class="focus-info">
+          Focused: {focusState.isFocused ? 'Yes' : 'No'} | Focus Count: {focusState.focusCount} | Blur Count:{' '}
+          {focusState.blurCount}
+        </div>
+      </div>
+    );
+  }
+}