Migrate interactors material-ui to deno

Signed-off-by: Dmitriy Lazarev <w@kich.dev>

deno.json

@@ -3,7 +3,8 @@
     "./packages/core",
     "./packages/globals",
     "./packages/html",
-    "./packages/keyboard"
+    "./packages/keyboard",
+    "./packages/material-ui"
   ],
   "compilerOptions": {
     "lib": [

packages/core/test/extend.test.ts

@@ -4,7 +4,7 @@ import { dom } from './helpers.ts';
 import { Header, Link, Thing, HTML } from './fixtures.ts';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
+//@ts-ignore Create HTML Instance without a name
 const HTMLWithNoLabel = HTML.extend()
 
 describe('Interactor.extend', () => {

packages/globals/test/globals.test.ts

@@ -12,7 +12,7 @@ describe("@interactors/globals", () => {
   beforeEach(() => {
     globals.reset();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-ignore Reset jsdom state
     delete globalThis.document;
   });
 
@@ -61,9 +61,9 @@ describe("@interactors/globals", () => {
       ).toBe(action);
     });
 
-    it("applies defined interaction wrapper", async () => {
-      let action = async () => "foo";
-      let removeWrapper = addInteractionWrapper(() => async () => "bar");
+    it("applies defined interaction wrapper", () => {
+      let action = async () => await Promise.resolve("foo");
+      let removeWrapper = addInteractionWrapper(() => async () => await Promise.resolve("bar"));
       globals.wrapInteraction(
         action,
         {

packages/html/deno.json

@@ -9,6 +9,7 @@
   },
   "exports": "./mod.ts",
   "imports": {
+    "@frontside/tsconfig": "npm:@frontside/tsconfig@^1.2.0",
     "jsdom": "npm:jsdom@^24.0.0",
     "parcel": "npm:parcel@^2.10.2",
     "typedoc": "npm:typedoc@^0.25.13"

packages/material-ui/deno.json

@@ -0,0 +1,36 @@
+{
+  "name": "@interactors/material-ui",
+  "version": "5.0.0",
+  "tasks": {
+    "build:npm": "deno run -A tasks/build-npm.ts",
+    "docs": "rm -rf docs && typedoc --options typedoc.json --tsconfig tsconfig.docs.json",
+    "preview": "deno task docs && parcel docs/api/v4/index.html"
+  },
+  "exports": "./mod.ts",
+  "imports": {
+    "parcel": "npm:parcel@^2.10.2",
+    "typedoc": "npm:typedoc@^0.25.13"
+  },
+  "lint": {
+    "rules": {
+      "exclude": ["prefer-const", "require-yield", "no-slow-types"]
+    },
+    "exclude": [
+      "build",
+      "docs"
+    ]
+  },
+  "fmt": {
+    "exclude": [
+      "build",
+      "docs",
+      "README.md"
+    ]
+  },
+  "test": {
+    "exclude": [
+      "build",
+      "docs"
+    ]
+  }
+}

packages/material-ui/mod.ts

@@ -0,0 +1 @@
+export * from './src/index.ts'

packages/material-ui/src/accordion.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isDisabled, isHTMLElement } from "./helpers";
+import { isDisabled, isHTMLElement } from "./helpers.ts";
 
 const getSummary = (element: HTMLElement) => element.querySelector('[class*="MuiAccordionSummary-root"]');
 const isExpanded = (element: HTMLElement) => getSummary(element)?.getAttribute("aria-expanded") == "true";

packages/material-ui/src/bottom-navigation.ts

@@ -1,5 +1,5 @@
 import { click, createInteractor, innerText } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 const BottomNavigationAction = createInteractor<HTMLButtonElement>("MUIBottomNavigationAction")
   .selector('button[class*="MuiBottomNavigationAction-root"]')

packages/material-ui/src/button.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isDisabled } from "./helpers";
+import { isDisabled } from "./helpers.ts";
 
 const ButtonInteractor = HTML.extend<HTMLButtonElement | HTMLLinkElement>("MUIButton")
   .selector(

packages/material-ui/src/calendar.ts

@@ -1,6 +1,7 @@
-import { click, HTML, createInteractor, including, Interaction, Interactor, not, innerText } from "@interactors/html";
-import { delay, isHTMLElement } from "./helpers";
-import { DatePickerUtils } from "./types";
+import { click, HTML, createInteractor, including, not, innerText } from "@interactors/html";
+import type { Interaction, Interactor } from '@interactors/html';
+import { delay, isHTMLElement } from "./helpers.ts";
+import type { DatePickerUtils } from "./types.ts";
 
 function getHeaderElement(element: HTMLElement) {
   let header = element.parentElement?.querySelector('[class*="MuiPickersCalendarHeader-switchHeader"]');

packages/material-ui/src/date-field.ts

@@ -1,5 +1,5 @@
 import { TextField } from "@interactors/html";
-import { dispatchChange, setValue } from "./helpers";
+import { dispatchChange, setValue } from "./helpers.ts";
 
 const DateFieldInteractor = TextField.extend<HTMLInputElement>("DateField")
   .selector('input[type="date"]')

packages/material-ui/src/datetime-field.ts

@@ -1,5 +1,5 @@
 import { TextField } from "@interactors/html";
-import { dispatchChange, setValue } from "./helpers";
+import { dispatchChange, setValue } from "./helpers.ts";
 
 const DateTimeFieldInteractor = TextField.extend<HTMLInputElement>("DateTimeField")
   .selector('input[type="datetime-local"]')

packages/material-ui/src/dialog.ts

@@ -1,5 +1,5 @@
 import { click, HTML, innerText } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 const DialogInteractor = HTML.extend("MUIDialog")
   .selector('[class*="MuiDialog-root"][role="presentation"]:not([aria-hidden="true"])')

packages/material-ui/src/form-control.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 function getLabelElement(root: HTMLElement) {
   let label = root.querySelector('label[class*="MuiFormLabel-root"]');

packages/material-ui/src/form-field-filters.ts

@@ -1,5 +1,5 @@
 import { innerText } from "@interactors/html";
-import { getInputLabel, isHTMLElement } from "./helpers";
+import { getInputLabel, isHTMLElement } from "./helpers.ts";
 
 export const createFormFieldFilters = <E extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(): {
   valid: (element: E) => boolean;

packages/material-ui/src/helpers.ts

@@ -57,12 +57,12 @@ export function setValue(element: HTMLInputElement, value: string): void {
 }
 
 export function dispatchChange(element: HTMLElement): boolean {
-  let Event = element.ownerDocument.defaultView?.Event || window.Event;
+  let Event = element.ownerDocument.defaultView?.Event || globalThis.Event;
   return element.dispatchEvent(new Event("change", { bubbles: true, cancelable: false }));
 }
 
 export function dispatchMouseDown(element: HTMLElement, options: MouseEventInit = {}): boolean {
-  let MouseEvent = element.ownerDocument.defaultView?.MouseEvent || window.MouseEvent;
+  let MouseEvent = element.ownerDocument.defaultView?.MouseEvent || globalThis.MouseEvent;
   return element.dispatchEvent(
     new MouseEvent("mousedown", Object.assign({ bubbles: true, cancelable: true }, options))
   );

packages/material-ui/src/index.ts

@@ -13,30 +13,30 @@ export {
   TextField as HTMLTextField,
 } from "@interactors/html";
 
-export * from "./types";
+export * from "./types.ts";
 
-export * from "./date-field";
-export * from "./time-field";
-export * from "./datetime-field";
+export * from "./date-field.ts";
+export * from "./time-field.ts";
+export * from "./datetime-field.ts";
 
-export * from "./checkbox";
-export * from "./calendar";
-export * from "./accordion";
-export * from "./menu";
-export * from "./switch";
-export * from "./bottom-navigation";
-export * from "./link";
-export * from "./list";
-export * from "./menu";
-export * from "./tabs";
-export * from "./select";
-export * from "./native-select";
-export * from "./popover";
-export * from "./text-field";
-export * from "./button";
-export * from "./snackbar";
-export * from "./form-control";
-export * from "./dialog";
-export * from "./fab";
-export * from "./slider";
-export * from "./radio";
+export * from "./checkbox.ts";
+export * from "./calendar.ts";
+export * from "./accordion.ts";
+export * from "./menu.ts";
+export * from "./switch.ts";
+export * from "./bottom-navigation.ts";
+export * from "./link.ts";
+export * from "./list.ts";
+export * from "./menu.ts";
+export * from "./tabs.ts";
+export * from "./select.ts";
+export * from "./native-select.ts";
+export * from "./popover.ts";
+export * from "./text-field.ts";
+export * from "./button.ts";
+export * from "./snackbar.ts";
+export * from "./form-control.ts";
+export * from "./dialog.ts";
+export * from "./fab.ts";
+export * from "./slider.ts";
+export * from "./radio.ts";

packages/material-ui/src/menu.ts

@@ -1,6 +1,6 @@
 import { click, HTML, createInteractor } from "@interactors/html";
-import { Button } from "./button";
-import { isDisabled } from "./helpers";
+import { Button } from "./button.ts";
+import { isDisabled } from "./helpers.ts";
 
 const MenuItemInteractor = HTML.extend<HTMLElement>("MUIMenuItem")
   .selector('[class*="MuiMenuItem-root"][role="menuitem"]')
@@ -22,7 +22,7 @@ const MenuInteractor = Button.extend("MUIMenu")
   .selector(`${Button().options.specification.selector as string}[aria-haspopup="true"]`)
   .filters({ menuId: (element) => element.getAttribute("aria-controls") ?? "" })
   .actions({
-    open: async ({ perform }) => perform((element) => click(element)),
+    open: async ({ perform }) => await perform((element) => click(element)),
     click: async (interactor, value: string) => {
       await interactor.perform((element) => click(element));
 

packages/material-ui/src/native-select.ts

@@ -1,6 +1,6 @@
 import { Select, MultiSelect } from "@interactors/html";
-import { createFormFieldFilters } from "./form-field-filters";
-import { GetElementType } from "./types";
+import { createFormFieldFilters } from "./form-field-filters.ts";
+import type { GetElementType } from "./types.ts";
 
 const NativeSelectInteractor = Select.extend("MUINativeSelect").filters(
   createFormFieldFilters<GetElementType<typeof Select>>()

packages/material-ui/src/popover.ts

@@ -1,5 +1,5 @@
 import { HTML } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 const PopoverInteractor = HTML.extend("MUIPopover")
   .selector('[class*="MuiPopover-root"][role="presentation"]')

packages/material-ui/src/radio.ts

@@ -1,5 +1,5 @@
 import { RadioButton, isVisible } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 const RadioInteractor = RadioButton.extend("Radio")
   .selector('[class*="MuiRadio-root"] input[type=radio]')

packages/material-ui/src/select.ts

@@ -1,6 +1,6 @@
-import { click, HTML, createInteractor, Interactor, innerText } from "@interactors/html";
-import { createFormFieldFilters } from "./form-field-filters";
-import { isDefined, isHTMLElement, delay, dispatchMouseDown, getInputLabel, isDisabled } from "./helpers";
+import { click, HTML, createInteractor, type Interactor, innerText } from "@interactors/html";
+import { createFormFieldFilters } from "./form-field-filters.ts";
+import { isDefined, isHTMLElement, delay, dispatchMouseDown, getInputLabel, isDisabled } from "./helpers.ts";
 
 export const SelectOption = HTML.extend<HTMLLIElement>("MUISelectOption")
   .selector('li[role="option"]')

packages/material-ui/src/slider.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isDefined } from "./helpers";
+import { isDefined } from "./helpers.ts";
 
 function isDisabled(element: Element) {
   return element.className.includes("Mui-disabled");

packages/material-ui/src/snackbar.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isHTMLElement } from "./helpers";
+import { isHTMLElement } from "./helpers.ts";
 
 const SnackbarInteractor = HTML.extend("MUISnackbar")
   .selector('[class*="MuiSnackbar-root"]')

packages/material-ui/src/switch.ts

@@ -1,4 +1,4 @@
-import { Checkbox } from "./checkbox";
+import { Checkbox } from "./checkbox.ts";
 
 const SwitchInteractor = Checkbox.extend("MUISwitch").selector('[class*="MuiSwitch-input"]');
 

packages/material-ui/src/tabs.ts

@@ -1,5 +1,5 @@
 import { HTML, innerText } from "@interactors/html";
-import { isDisabled, isHTMLElement } from "./helpers";
+import { isDisabled, isHTMLElement } from "./helpers.ts";
 
 const TabInteractor = HTML.extend<HTMLElement>("MUITab")
   .selector('[class*="MuiTab-root"][role="tab"]')