refactor(tests): reduce TypeScript errors #10344

maxpatiiuk · 2024-09-18T21:44:26Z

Run the migration script on tests.
This PR includes some small fixups that affect TypeScript typings to reduce number of TypeScript errors after the codemod.
With these changes, there are only 57 TypeScript error in the entire calcite-components package after the codemod!

maxpatiiuk · 2024-09-18T21:44:46Z

packages/calcite-components/src/components/chip-group/chip-group.e2e.ts

@@ -520,7 +520,7 @@ describe("calcite-chip-group", () => {
      expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
      expect(chipSelectSpy2).toHaveReceivedEventTimes(0);

-      await chip5.setAttribute("selected", true);
+      await chip5.toggleAttribute("selected", true);


This is a boolean attribute
Before it was being set here to selected="true"

maxpatiiuk · 2024-09-18T21:46:27Z

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -1632,7 +1632,7 @@ describe("calcite-combobox", () => {
    let element: E2EElement;
    let comboboxItem: E2EElement;
    let itemNestedLi: E2EElement;
-    let closeEvent: Promise<void>;
+    let closeEvent: Promise<unknown>;


Stencil's waitForEvent has return type Promise<any> so this worked.
In Lumina, the return type is Promise<SerializedEvent>.

(at runtime, Stencil's waitForEvent also returned Promise, but they didn't publicly expose the SerializedEvent type)

maxpatiiuk · 2024-09-18T21:49:05Z

packages/calcite-components/src/components/list-item-group/list-item-group.tsx

@@ -49,7 +49,7 @@ export class ListItemGroup implements InteractiveComponent {
   * Fires when changes occur in the default slot, notifying parent lists of the changes.
   */
  @Event({ cancelable: false })
-  calciteInternalListItemGroupDefaultSlotChange: EventEmitter<DragEvent>;
+  calciteInternalListItemGroupDefaultSlotChange: EventEmitter<void>;


it didn't actually emit this type, and no one was listening for it to emit this type

maxpatiiuk · 2024-09-18T21:51:25Z

packages/calcite-components/src/components/loader/loader.tsx

-        aria-valuemax={isDeterminate ? 100 : undefined}
-        aria-valuemin={isDeterminate ? 0 : undefined}
-        aria-valuenow={isDeterminate ? valueNow : undefined}
+        aria-valuemax={isDeterminate ? "100" : undefined}


Stencil's aria-valuemax type is string | number, and at runtime, the DOM stringifies numbers automatically, so this was good.
However, the TypeScript's type for HTMLElement.ariaValuemax is string. Since this code is converted by the codemod to this.el.ariaValuemax = ..., we need to be setting strings here to avoid type error.

maxpatiiuk · 2024-09-18T21:51:53Z

packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts

@@ -292,7 +292,7 @@ describe("calcite-segmented-control", () => {

      async function cycleThroughItemsAndAssertValue(keys: "left-right" | "up-down"): Promise<void> {
        const [moveBeforeArrowKey, moveAfterArrowKey] =
-          keys === "left-right" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+          keys === "left-right" ? (["ArrowLeft", "ArrowRight"] as const) : (["ArrowUp", "ArrowDown"] as const);


Lumina's typings for await element.press(moveAfterArrowKey); are more strict

maxpatiiuk · 2024-09-18T21:52:14Z

packages/calcite-components/src/components/table/table.tsx

-    const rowPos = event["detail"].rowPosition;
-    const destination = event["detail"].destination;
-    const lastCell = event["detail"].lastCell;
+  calciteInternalTableRowFocusEvent(event: CustomEvent<TableRowFocusEvent>): void {


looks like a mistake in typing.
TableRowFocusEvent is the payload type, not event type

maxpatiiuk · 2024-09-18T21:53:22Z

packages/calcite-components/src/components/text-area/text-area.e2e.ts

@@ -150,7 +150,7 @@ describe("calcite-text-area", () => {
    await page.setContent("<calcite-text-area></calcite-text-area>");

    const element = await page.find("calcite-text-area");
-    element.setAttribute("max-length", 5);
+    element.setAttribute("max-length", "5");


Stencil's E2EElement.setAttribute had type (string, any)=>void
In Lumina, it is (string, string)=>void so that it matches the HTMLElement.setAttribute type.
I want to align us closer with DOM typings so that migrating to Vitest browser mode is easier

maxpatiiuk · 2024-09-18T21:53:47Z

packages/calcite-components/src/components/time-picker/time-picker.tsx

@@ -202,7 +202,7 @@ export class TimePicker
  /**
   * @internal
   */
-  @Event({ cancelable: false }) calciteInternalTimePickerChange: EventEmitter<string>;
+  @Event({ cancelable: false }) calciteInternalTimePickerChange: EventEmitter<void>;


never actually included a string payload type, and no one was listening for it

maxpatiiuk · 2024-09-18T21:54:29Z

packages/calcite-components/src/utils/dom.spec.ts

@@ -665,8 +665,8 @@ describe("dom", () => {

    let element: HTMLDivElement;
    let dispatchTransitionEvent: TransitionEventDispatcher;
-    let onStartCallback: jest.Mock<any, any, any>;
-    let onEndCallback: jest.Mock<any, any, any>;
+    let onStartCallback: jest.Mock;


With this change, the type would be equivalent both in Jest and Vite.
Otherwise it was causing issues because Vite's Mock has only 2 type arguments

jcfranco

Other than a few comments, this is looking great! Thanks, @maxpatiiuk!

jcfranco · 2024-09-19T00:32:26Z

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -304,7 +304,7 @@ export class ListItem

  @Listen("calciteInternalListItemGroupDefaultSlotChange")
  @Listen("calciteInternalListDefaultSlotChange")
-  handleCalciteInternalListDefaultSlotChanges(event: CustomEvent<void>): void {
+  handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void {


Do Lumina's type set CustomEvent.detail's' type as void by default?

yes!

To be more precise, regarding authoring events:

default payload type in createEvent() is undefined, rather than any like it was in Stencil.

it is a typescript error to not provide a payload to the .emit() function if the event has non-undefined payload type

the codemod will update EventEmitter<void> to EventEmitter as needed

edit:
Regarding listening to events, CustomEvent.detail is still any since that's coming from TypeScript.
I also see that you used CustomEvent<void> in many places, so I will revert this place to use CustomEvent<void> for consistency

jcfranco · 2024-09-19T00:37:09Z

packages/calcite-components/src/utils/interactive.tsx

@@ -111,7 +111,7 @@ function removeInteractionListeners(element: HTMLElement): void {
  );
 }

-export interface InteractiveContainerProps extends JSXAttributes {
+export interface InteractiveContainerProps extends JSXAttributes<HTMLDivElement> {


This could stay the same as we're not using any props from a particular HTML element.

Applies to XButtonProps too.

Without the change in XButtonProps, I was getting a type error here:

calcite-design-system/packages/calcite-components/src/components/functional/XButton.tsx

Line 31 in 0b03a57

ref={ref}

The issue is that in Lumina JSX, the ref prop can be assigned either (element: HTMLButtonElement) => void or { value: HTMLButtonElement } (like a RefObject type in React).

The RefObject type is causing issues.
By default JSXAttributes interface is assuming HTMLElement type.
That means the ref prop type in the <XButton> is RefObject<HTMLElement>, which is not assignable to the RefObject<HTMLButtonElement> in the <button>.

The same issue is present in React since they also have object refs. Not an issue in Stencil since they don't have object refs, only callback refs.

The change in <InteractiveContainer> is not necessary, but I done it for consistency, and to avoid issues if someone does add a ref prop to it in the future.

maxpatiiuk · 2024-09-19T15:34:51Z

Looks like GitHub action was stuck on E2E tests for 6 hours and then timed out:

https://github.com/Esri/calcite-design-system/actions/runs/10933000573/job/30350737756

Triggering E2E re-run completed successfully 🤔

refactor(tests): reduce TypeScript errors

0b03a57

maxpatiiuk self-assigned this Sep 18, 2024

github-actions bot added the refactor Issues tied to code that needs to be significantly reworked. label Sep 18, 2024

maxpatiiuk commented Sep 18, 2024

View reviewed changes

jcfranco approved these changes Sep 19, 2024

View reviewed changes

revert: undo loosening CustomEvent type

ae98a77

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(tests): reduce TypeScript errors #10344

refactor(tests): reduce TypeScript errors #10344

maxpatiiuk commented Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024 •

edited by jcfranco

Loading

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

maxpatiiuk Sep 18, 2024

jcfranco left a comment

jcfranco Sep 19, 2024

maxpatiiuk Sep 19, 2024 •

edited

Loading

maxpatiiuk Sep 19, 2024

jcfranco Sep 19, 2024

maxpatiiuk Sep 19, 2024

maxpatiiuk commented Sep 19, 2024

refactor(tests): reduce TypeScript errors #10344

Are you sure you want to change the base?

refactor(tests): reduce TypeScript errors #10344

Conversation

maxpatiiuk commented Sep 18, 2024

Choose a reason for hiding this comment

maxpatiiuk Sep 18, 2024 • edited by jcfranco Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maxpatiiuk Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maxpatiiuk commented Sep 19, 2024

maxpatiiuk Sep 18, 2024 •

edited by jcfranco

Loading

maxpatiiuk Sep 19, 2024 •

edited

Loading