Fix linting and testing

.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "no-prototype-builtins": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["rollup.config.js", "web-test-runner.config.js"],
+      "env": {
+        "node": true
+      }
+    },
+    {
+      "files": [
+        "*_test.ts",
+        "**/custom_typings/*.ts",
+        "packages/labs/ssr/src/test/integration/tests/**",
+        "packages/labs/ssr/src/lib/util/parse5-utils.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}

package.json

@@ -34,6 +34,7 @@
     "@types/node": "^20.12.2",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
+    "cheerio": "^1.0.0-rc.12",
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
     "ts-node": "^10.9.2",

src/vellum-random-table.test.ts

@@ -1,8 +1,10 @@
-import { test, expect, Page } from '@playwright/test'
-import { promises as fs } from "fs"
+import { test, expect, Page, Locator } from '@playwright/test'
+import { promises as fs } from 'fs'
+import * as cheerio from 'cheerio'
+import { randomUUID } from 'crypto';
 
 test('displays table', async ({ page }) => {
-  await fixture(page)(`
+  const fixture = await mountOn(page, `
     <vellum-random-table>
       <table>
         <tr>
@@ -18,19 +20,22 @@ test('displays table', async ({ page }) => {
     </vellum-random-table>
   `);
 
-  await expect(page.getByText('Encounter')).toBeVisible();
+  await expect(fixture.getByText('Encounter')).toBeVisible();
 });
 
-function fixture(page: Page): (_: string) => Promise<void> {
-  return async (fragment: string) => {
-    const code = await fs.readFile('./vellum-random-table.js')
+async function mountOn(page: Page, fragment: string): Promise<Locator> {
+  const code = await fs.readFile('./vellum-random-table.js')
+  const html = cheerio.load(fragment)('vellum-random-table')
+  const uuid = randomUUID()
+  const component = html.attr('data-testid', uuid)
 
-    await page.setContent(`
+  await page.setContent(`
       <script>
         ${code.toString()}
       </script>
 
-      ${fragment}
+      ${component.toString()}
   `);
-  }
+
+  return await page.getByTestId(uuid)
 }