diff --git a/index.html b/index.html
index e1d820f..6ed6865 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,11 @@
One-column random table
-
-
- Random Encounters
-
+
+
+ Random Encounters
+
| Encounter |
@@ -34,7 +34,8 @@ One-column random table
-
+
+
Two-column random table with dice
diff --git a/package-lock.json b/package-lock.json
index 6044d00..1e7d834 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
"@types/node": "^20.12.5",
"@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",
"playwright": "^1.43.0",
@@ -1005,12 +1004,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/boolbase": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
- "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
- "dev": true
- },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1058,44 +1051,6 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
- "node_modules/cheerio": {
- "version": "1.0.0-rc.12",
- "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
- "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
- "dev": true,
- "dependencies": {
- "cheerio-select": "^2.1.0",
- "dom-serializer": "^2.0.0",
- "domhandler": "^5.0.3",
- "domutils": "^3.0.1",
- "htmlparser2": "^8.0.1",
- "parse5": "^7.0.0",
- "parse5-htmlparser2-tree-adapter": "^7.0.0"
- },
- "engines": {
- "node": ">= 6"
- },
- "funding": {
- "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
- }
- },
- "node_modules/cheerio-select": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
- "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
- "dev": true,
- "dependencies": {
- "boolbase": "^1.0.0",
- "css-select": "^5.1.0",
- "css-what": "^6.1.0",
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.3",
- "domutils": "^3.0.1"
- },
- "funding": {
- "url": "https://github.com/sponsors/fb55"
- }
- },
"node_modules/chokidar": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
@@ -1205,34 +1160,6 @@
"node": ">= 8"
}
},
- "node_modules/css-select": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
- "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
- "dev": true,
- "dependencies": {
- "boolbase": "^1.0.0",
- "css-what": "^6.1.0",
- "domhandler": "^5.0.2",
- "domutils": "^3.0.1",
- "nth-check": "^2.0.1"
- },
- "funding": {
- "url": "https://github.com/sponsors/fb55"
- }
- },
- "node_modules/css-what": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
- "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
- "dev": true,
- "engines": {
- "node": ">= 6"
- },
- "funding": {
- "url": "https://github.com/sponsors/fb55"
- }
- },
"node_modules/custom-elements-manifest": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -1306,79 +1233,12 @@
"node": ">=6.0.0"
}
},
- "node_modules/dom-serializer": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
- "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
- "dev": true,
- "dependencies": {
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.2",
- "entities": "^4.2.0"
- },
- "funding": {
- "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
- }
- },
- "node_modules/domelementtype": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
- "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/fb55"
- }
- ]
- },
- "node_modules/domhandler": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
- "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
- "dev": true,
- "dependencies": {
- "domelementtype": "^2.3.0"
- },
- "engines": {
- "node": ">= 4"
- },
- "funding": {
- "url": "https://github.com/fb55/domhandler?sponsor=1"
- }
- },
- "node_modules/domutils": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
- "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
- "dev": true,
- "dependencies": {
- "dom-serializer": "^2.0.0",
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.3"
- },
- "funding": {
- "url": "https://github.com/fb55/domutils?sponsor=1"
- }
- },
"node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true
},
- "node_modules/entities": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
- "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
- "dev": true,
- "engines": {
- "node": ">=0.12"
- },
- "funding": {
- "url": "https://github.com/fb55/entities?sponsor=1"
- }
- },
"node_modules/es-module-lexer": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -1833,25 +1693,6 @@
"node": ">=8"
}
},
- "node_modules/htmlparser2": {
- "version": "8.0.2",
- "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
- "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
- "dev": true,
- "funding": [
- "https://github.com/fb55/htmlparser2?sponsor=1",
- {
- "type": "github",
- "url": "https://github.com/sponsors/fb55"
- }
- ],
- "dependencies": {
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.3",
- "domutils": "^3.0.1",
- "entities": "^4.4.0"
- }
- },
"node_modules/ignore": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2242,18 +2083,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/nth-check": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
- "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
- "dev": true,
- "dependencies": {
- "boolbase": "^1.0.0"
- },
- "funding": {
- "url": "https://github.com/fb55/nth-check?sponsor=1"
- }
- },
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2322,31 +2151,6 @@
"node": ">=6"
}
},
- "node_modules/parse5": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
- "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
- "dev": true,
- "dependencies": {
- "entities": "^4.4.0"
- },
- "funding": {
- "url": "https://github.com/inikulin/parse5?sponsor=1"
- }
- },
- "node_modules/parse5-htmlparser2-tree-adapter": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
- "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
- "dev": true,
- "dependencies": {
- "domhandler": "^5.0.2",
- "parse5": "^7.0.0"
- },
- "funding": {
- "url": "https://github.com/inikulin/parse5?sponsor=1"
- }
- },
"node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
diff --git a/package.json b/package.json
index 8d59eb8..e926c88 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
"@typescript-eslint/eslint-plugin": "^7.5.0",
"@typescript-eslint/parser": "^7.5.0",
"@playwright/test": "^1.43.0",
- "cheerio": "^1.0.0-rc.12",
"esbuild": "^0.20.2",
"eslint": "^8.57.0",
"playwright": "^1.43.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 8a2fa25..af8f53e 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -15,5 +15,9 @@ export default defineConfig({
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
+ {
+ name: 'firefox',
+ use: { ...devices['Desktop Firefox'] },
+ },
],
})
diff --git a/src/vellum-random-table.test.ts b/src/vellum-random-table.test.ts
index 7bbdc22..ecc56af 100644
--- a/src/vellum-random-table.test.ts
+++ b/src/vellum-random-table.test.ts
@@ -1,15 +1,11 @@
-import { test, expect, Page, Locator } from '@playwright/test'
-import { promises as fs } from 'fs'
-import * as cheerio from 'cheerio'
-import { randomUUID } from 'crypto'
+import { test, expect } from '@playwright/test'
test('displays table', async ({ page }) => {
- const fixture = await mountOn(
- page,
- `
-
+ await page.addScriptTag({ path: './vellum-random-table.js' })
+ await page.setContent(`
+
- Random Encounters
+ Table
| Encounter |
@@ -25,40 +21,39 @@ test('displays table', async ({ page }) => {
+
- `,
- )
+ `)
- await expect(
- fixture.getByRole('table', { name: 'Random Encounters' }),
- ).toBeVisible()
+ await expect(page.getByRole('table', { name: 'Table' })).toBeVisible()
})
test('displays empty table', async ({ page }) => {
- const fixture = await mountOn(
- page,
- `
-
+ await page.addScriptTag({ path: './vellum-random-table.js' })
+ await page.setContent(`
+
- Random Encounters
+ Table
+
- `,
- )
+ `)
- await expect(
- fixture.getByRole('table', { name: 'Random Encounters' }),
- ).toBeVisible()
+ await expect(page.getByRole('table', { name: 'Table' })).toBeVisible()
})
test('rolls on random table', async ({ page }) => {
- const fixture = await mountOn(
- page,
- `
-
+ await page.addScriptTag({ path: './vellum-random-table.js' })
+
+ page.on('pageerror', (exception) => {
+ console.log(`Uncaught exception: "${exception}"`)
+ console.log(exception.stack)
+ })
+
+ await page.setContent(`
+
- Random Encounters
| Encounter |
@@ -66,39 +61,26 @@ test('rolls on random table', async ({ page }) => {
- | 1 wolf |
+ A |
- | 2 goblins |
+ B |
+
+
- `,
- )
-
- await fixture.getByRole('button', { name: 'Roll' }).click()
- const result = await fixture
- .getByRole('alert', { name: 'Roll Result' })
- .textContent()
-
- expect(['1 wolf', '2 goblins']).toContain(result?.trim())
-})
+ `)
-async function mountOn(page: Page, fragment: string): Promise {
- 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.getByRole('button', { name: 'Roll' }).click()
- await page.setContent(`
-
+ await page.screenshot({ path: './screenshot.png' })
- ${component.toString()}
- `)
+ const result = await page.getByLabel('Result').textContent()
- return await page.getByTestId(uuid)
-}
+ const html = await page.content()
+ console.log(html)
+ expect(['A', 'B']).toContain(result?.trim())
+})