spring-board-element

├── src ├── vite-env.d.ts ├── default-board.css ├── utils.ts └── spring-board-element.ts ├── vite.config.ts ├── tests ├── test-constants.js ├── fixtures │ └── index.html ├── server.js └── tests.spec.ts ├── tsconfig.json ├── .github └── workflows │ └── ci.yaml ├── package.json ├── LICENSE ├── examples ├── index.html └── viewer.html ├── README.md ├── playwright.config.ts └── .gitignore /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | 3 | export default defineConfig({ 4 | build: { 5 | lib: { 6 | entry: 'src/spring-board-element.ts', 7 | formats: ['es', 'umd'], 8 | name: 'SpringBoardElement', 9 | }, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /tests/test-constants.js: -------------------------------------------------------------------------------- 1 | export const publicKey = 2 | '41299b80b09f0bd623f3ce230328a7bab374975a7c497a5afb298b30183e0623'; 3 | export const privateKey = 4 | '52d117b99f320a1a66df787a6d86c7adb77ae4f881bdd5705c1bbbbdcd50f9c5'; 5 | export const generateBoardHTML = () => 6 | Buffer.from( 7 | `

Foo bar blee. Here's a number to prove it's me: 83.

`, 8 | ); 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "noEmit": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "noImplicitReturns": true, 17 | "skipLibCheck": true 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /src/default-board.css: -------------------------------------------------------------------------------- 1 | /* 2 | This is imported into spring-board-element.ts and used to build the template 3 | for the default board styles. 4 | 5 | Based on the Spring '83 spec's default style expectations: 6 | https://github.com/robinsloan/spring-83/blob/main/draft-20220629.md#boards-in-the-client 7 | */ 8 | 9 | :host { 10 | background-color: var(--board-background-color); 11 | box-sizing: border-box; 12 | display: block; 13 | padding: 2rem; 14 | } 15 | time { 16 | display: none; 17 | } 18 | p, 19 | h1, 20 | h2, 21 | h3, 22 | h4, 23 | h5 { 24 | margin: 0 0 2rem 0; 25 | } 26 | -------------------------------------------------------------------------------- /tests/fixtures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | spring-board-element 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.github/workflows/ci.yaml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | tests: 7 | runs-on: ubuntu-latest 8 | 9 | env: 10 | CI: true 11 | 12 | steps: 13 | - name: Clone repository 14 | uses: actions/checkout@v3 15 | 16 | - name: Setup Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: '18.5.x' 20 | cache: 'npm' 21 | 22 | - name: Install dependencies 23 | run: npm ci 24 | 25 | - name: Install Playwright 26 | run: npx playwright install --with-deps 27 | 28 | - name: Run tests 29 | run: npm test 30 | 31 | - uses: actions/upload-artifact@v3 32 | if: always() 33 | with: 34 | name: playwright-report 35 | path: playwright-report/ 36 | retention-days: 30 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spring-board-element", 3 | "type": "module", 4 | "version": "0.3.0", 5 | "files": [ 6 | "dist" 7 | ], 8 | "main": "dist/spring-board-element.umd.cjs", 9 | "module": "dist/spring-board-element.js", 10 | "exports": { 11 | ".": { 12 | "import": "./dist/spring-board-element.js", 13 | "require": "./dist/spring-board-element.umd.cjs" 14 | } 15 | }, 16 | "scripts": { 17 | "build": "tsc && vite build", 18 | "dev": "vite", 19 | "preview": "vite preview", 20 | "test": "playwright test", 21 | "test:dev": "node tests/server.js" 22 | }, 23 | "devDependencies": { 24 | "@noble/ed25519": "^1.6.1", 25 | "@playwright/test": "^1.23.3", 26 | "@rdm/prettier-config": "^3.0.0", 27 | "prettier": "^2.7.1", 28 | "typescript": "^4.5.4", 29 | "vite": "^3.0.0" 30 | }, 31 | "prettier": "@rdm/prettier-config" 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ryan Murphy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Ensures that all links within a board open in a new tab. 3 | * 4 | * @private 5 | * @param event 6 | */ 7 | export function openLinksInNewTabs(event: MouseEvent) { 8 | const target = event.target as HTMLElement; 9 | 10 | if (target.matches('a')) { 11 | target.setAttribute('target', '_blank'); 12 | target.setAttribute('rel', 'noopener'); 13 | } 14 | } 15 | 16 | /** 17 | * Makes properties lazy. Enables board creation via document.createElement. 18 | * https://web.dev/custom-elements-best-practices/#make-properties-lazy 19 | * 20 | * @private 21 | * @param object 22 | * @param property 23 | */ 24 | export function upgradeProperty(object: any, property: string) { 25 | if (object.hasOwnProperty(property)) { 26 | let value = object[property]; 27 | delete object[property]; 28 | object[property] = value; 29 | } 30 | } 31 | 32 | export const enum States { 33 | Pending = 'pending', 34 | Fulfilled = 'fulfilled', 35 | Rejected = 'rejected', 36 | } 37 | 38 | export class Deferred { 39 | declare state: States; 40 | declare promise: Promise; 41 | declare resolve: (value: T) => void; 42 | declare reject: (value: any) => void; 43 | 44 | constructor() { 45 | this.state = States.Pending; 46 | 47 | this.promise = new Promise((resolve, reject) => { 48 | this.resolve = (value: T) => { 49 | this.state = States.Fulfilled; 50 | resolve(value); 51 | }; 52 | this.reject = (value: any) => { 53 | this.state = States.Rejected; 54 | reject(value); 55 | }; 56 | }); 57 | } 58 | 59 | get pending() { 60 | return this.state === States.Pending; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /tests/server.js: -------------------------------------------------------------------------------- 1 | // packages 2 | import { sign } from '@noble/ed25519'; 3 | import { createServer } from 'vite'; 4 | 5 | // local 6 | import { generateBoardHTML, privateKey, publicKey } from './test-constants.js'; 7 | 8 | const BASE_URL = 'http://localhost'; 9 | 10 | async function run() { 11 | const server = await createServer({ 12 | plugins: [ 13 | { 14 | name: 'vite-micro-spring-server', 15 | async configureServer(server) { 16 | const boardHTML = generateBoardHTML(); 17 | const signatureBytes = await sign(boardHTML, privateKey); 18 | const signatureHex = Buffer.from(signatureBytes).toString('hex'); 19 | server.middlewares.use((request, response, next) => { 20 | const url = new URL(request.url, BASE_URL); 21 | if (url.pathname === '/') { 22 | response.statusCode = 200; 23 | response.end('OK'); 24 | } else if (url.pathname === `/${publicKey}`) { 25 | response.statusCode = 200; 26 | response.setHeader('Content-Type', 'text/html'); 27 | response.setHeader('Spring-Verson', '83'); 28 | response.setHeader('Spring-Signature', signatureHex); 29 | response.setHeader( 30 | 'Access-Control-Allow-Methods', 31 | 'GET, OPTIONS', 32 | ); 33 | response.setHeader('Access-Control-Allow-Origin', '*'); 34 | response.setHeader( 35 | 'Access-Control-Allow-Headers', 36 | 'Content-Type, If-Modified-Since, Spring-Signature, Spring-Version', 37 | ); 38 | response.setHeader( 39 | 'Access-Control-Expose-Headers', 40 | 'Content-Type, Last-Modified, Spring-Signature, Spring-Version', 41 | ); 42 | response.end(boardHTML); 43 | } else { 44 | next(); 45 | } 46 | }); 47 | }, 48 | }, 49 | ], 50 | }); 51 | 52 | server.listen(7000); 53 | } 54 | 55 | run().catch(console.error); 56 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | spring-board-element 12 | 21 | 29 | 36 | 37 | 38 | 39 | 42 | 45 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `` element 2 | 3 | A custom element that makes it simple to embed [Spring '83 boards](https://github.com/robinsloan/spring-83)! 4 | 5 | ## Usage 6 | 7 | If you are using `` in a client-side framework you'll likely want to install it via [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.js.org/). 8 | 9 | ```sh 10 | npm install spring-board-element 11 | # or 12 | yarn add spring-board-element 13 | # or 14 | pnpm install spring-board-element 15 | ``` 16 | 17 | Then in your bundle, import the element: 18 | 19 | ```js 20 | import 'spring-board-element'; 21 | ``` 22 | 23 | However, a simple ` 29 | 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | ## Attributes 37 | 38 | `` has one optional attribute: 39 | 40 | - `href`: The URL of the board to embed. When this is changed a new board will be loaded. 41 | 42 | ## Properties 43 | 44 | `` has three properties: 45 | 46 | - `href`: The URL of the board to embed. Used to get or set the board URL. 47 | - `loaded`: A pending `Promise` that resolves when the board has loaded. Each time the `href` property is changed the `loaded` property will reference a new `Promise`. 48 | - `pubdate`: A `Date` object representing the date and time the board was published. This is retrieved from the board's `` element. Returns `null` if the board has not been loaded. 49 | 50 | ```js 51 | const board = document.querySelector('spring-board'); 52 | 53 | board.href = 'https://bogbody.biz/1...'; 54 | board.loaded.then(() => { 55 | // board has loaded 56 | }); 57 | 58 | board.href = 'https://bogbody.biz/2...'; 59 | board.loaded.then(() => { 60 | // new board has loaded 61 | }); 62 | ``` 63 | 64 | ## LICENSE 65 | 66 | MIT 67 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import type { PlaywrightTestConfig } from '@playwright/test'; 2 | import { devices } from '@playwright/test'; 3 | 4 | /** 5 | * See https://playwright.dev/docs/test-configuration. 6 | */ 7 | const config: PlaywrightTestConfig = { 8 | testDir: './tests', 9 | /* Maximum time one test can run for. */ 10 | timeout: 30 * 1000, 11 | expect: { 12 | /** 13 | * Maximum time expect() should wait for the condition to be met. 14 | * For example in `await expect(locator).toHaveText();` 15 | */ 16 | timeout: 5000, 17 | }, 18 | /* Run tests in files in parallel */ 19 | fullyParallel: true, 20 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 21 | forbidOnly: !!process.env.CI, 22 | /* Retry on CI only */ 23 | retries: process.env.CI ? 2 : 0, 24 | /* Opt out of parallel tests on CI. */ 25 | workers: process.env.CI ? 1 : undefined, 26 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */ 27 | reporter: process.env.CI ? [['html'], ['github']] : 'list', 28 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ 29 | use: { 30 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ 31 | actionTimeout: 0, 32 | /* Base URL to use in actions like `await page.goto('/')`. */ 33 | baseURL: 'http://localhost:7000/', 34 | 35 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 36 | trace: 'on-first-retry', 37 | }, 38 | 39 | /* Configure projects for major browsers */ 40 | projects: [ 41 | { 42 | name: 'chromium', 43 | use: { 44 | ...devices['Desktop Chrome'], 45 | }, 46 | }, 47 | 48 | // { 49 | // name: 'firefox', 50 | // use: { 51 | // ...devices['Desktop Firefox'], 52 | // }, 53 | // }, 54 | 55 | // { 56 | // name: 'webkit', 57 | // use: { 58 | // ...devices['Desktop Safari'], 59 | // }, 60 | // }, 61 | ], 62 | 63 | webServer: { 64 | command: 'npm run test:dev', 65 | port: 7000, 66 | timeout: 120 * 1000, 67 | reuseExistingServer: !process.env.CI, 68 | }, 69 | }; 70 | 71 | export default config; 72 | -------------------------------------------------------------------------------- /examples/viewer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | spring-board-element 12 | 21 | 29 | 38 | 39 | 40 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | # Playwright 133 | /test-results/ 134 | /playwright-report/ 135 | /playwright/.cache/ 136 | -------------------------------------------------------------------------------- /src/spring-board-element.ts: -------------------------------------------------------------------------------- 1 | // packages 2 | import { verify } from '@noble/ed25519'; 3 | 4 | // local 5 | import { Deferred, openLinksInNewTabs, upgradeProperty } from './utils.js'; 6 | 7 | // styles 8 | import css from './default-board.css?inline'; 9 | 10 | const cssTemplate = document.createElement('template'); 11 | cssTemplate.innerHTML = ``; 12 | 13 | const encoder = new TextEncoder(); 14 | 15 | class SpringBoardElement extends HTMLElement { 16 | #loaded = new Deferred(); 17 | 18 | static get observedAttributes() { 19 | return ['href']; 20 | } 21 | 22 | get href() { 23 | return this.getAttribute('href') ?? ''; 24 | } 25 | 26 | set href(value: string) { 27 | this.setAttribute('href', value); 28 | } 29 | 30 | get key() { 31 | const href = this.href; 32 | 33 | if (!href) { 34 | return ''; 35 | } 36 | 37 | // TODO: do more to ensure it's a valid Spring '83 URL 38 | const url = new URL(href); 39 | return url.pathname.replace('/', '').toLowerCase().trim(); 40 | } 41 | 42 | get loaded() { 43 | return this.#loaded.promise; 44 | } 45 | 46 | get pubdate() { 47 | const time = this.shadowRoot?.querySelector('time'); 48 | 49 | if (time) { 50 | const datetime = time.getAttribute('datetime'); 51 | 52 | if (datetime) { 53 | return new Date(datetime); 54 | } 55 | } 56 | 57 | return null; 58 | } 59 | 60 | constructor() { 61 | super(); 62 | 63 | this.attachShadow({ mode: 'open' }); 64 | } 65 | 66 | connectedCallback() { 67 | /** @ts-ignore */ 68 | this.shadowRoot.addEventListener('click', openLinksInNewTabs); 69 | upgradeProperty(this, 'href'); 70 | } 71 | 72 | disconnectedCallback() { 73 | /** @ts-ignore */ 74 | this.shadowRoot.removeEventListener('click', openLinksInNewTabs); 75 | } 76 | 77 | attributeChangedCallback(name: string, oldValue: string, newValue: string) { 78 | if (name === 'href' && oldValue !== newValue) { 79 | this.fetch(); 80 | } 81 | } 82 | 83 | async fetch() { 84 | if (!this.#loaded.pending) { 85 | this.#loaded = new Deferred(); 86 | } 87 | 88 | const request = new Request(this.href, { 89 | method: 'GET', 90 | mode: 'cors', 91 | headers: { 92 | 'Accept': 'text/html', 93 | 'Spring-Version': '83', 94 | }, 95 | }); 96 | 97 | const response = await fetch(request); 98 | const signature = response.headers.get('Spring-Signature')!; 99 | const body = await response.text(); 100 | const verified = await verify(signature, encoder.encode(body), this.key); 101 | 102 | if (verified) { 103 | const template = document.createElement('template'); 104 | template.innerHTML = body; 105 | const content = template.content.cloneNode(true); 106 | 107 | const shadowRoot = this.shadowRoot!; 108 | shadowRoot.textContent = ''; 109 | shadowRoot.append(cssTemplate.content.cloneNode(true), content); 110 | 111 | this.#loaded.resolve(true); 112 | } 113 | // TODO: throw an error when invalid? maybe a custom event? 114 | } 115 | } 116 | 117 | declare global { 118 | interface Window { 119 | SpringBoardElement: typeof SpringBoardElement; 120 | } 121 | } 122 | 123 | export default SpringBoardElement; 124 | 125 | if (!window.customElements.get('spring-board')) { 126 | window.SpringBoardElement = SpringBoardElement; 127 | window.customElements.define('spring-board', SpringBoardElement); 128 | } 129 | -------------------------------------------------------------------------------- /tests/tests.spec.ts: -------------------------------------------------------------------------------- 1 | // packages 2 | import { expect, type Locator, test } from '@playwright/test'; 3 | 4 | // types 5 | import type SpringBoardElement from '../src/spring-board-element.js'; 6 | 7 | // local 8 | import { publicKey } from './test-constants.js'; 9 | 10 | const testBoardUrl = `http://localhost:7000/${publicKey}`; 11 | 12 | test.beforeEach(async ({ page }) => { 13 | await page.goto('/tests/fixtures/'); 14 | }); 15 | 16 | test.describe('element creation', () => { 17 | test('creates from document.createElement', async ({ page }) => { 18 | const elementHandle = await page.evaluateHandle(() => 19 | document.createElement('spring-board'), 20 | ); 21 | 22 | expect(await elementHandle.evaluate((element) => element.nodeName)).toBe( 23 | 'SPRING-BOARD', 24 | ); 25 | }); 26 | 27 | test('creates from constructor', async ({ page }) => { 28 | const elementHandle = await page.evaluateHandle(() => { 29 | return new window.SpringBoardElement(); 30 | }); 31 | 32 | expect(await elementHandle.evaluate((element) => element.nodeName)).toBe( 33 | 'SPRING-BOARD', 34 | ); 35 | }); 36 | }); 37 | 38 | test.describe('after tree insertion', () => { 39 | test('can assign an href', async ({ page }) => { 40 | const locator = page.locator('spring-board'); 41 | await loadBoardInElement(locator); 42 | 43 | expect( 44 | await locator.evaluate((element: SpringBoardElement) => element.href), 45 | ).toBe(testBoardUrl); 46 | }); 47 | 48 | test('can retreive the key', async ({ page }) => { 49 | const locator = page.locator('spring-board'); 50 | await loadBoardInElement(locator); 51 | 52 | expect( 53 | await locator.evaluate((element: SpringBoardElement) => element.key), 54 | ).toBe(publicKey); 55 | }); 56 | 57 | test('can retrieve pubdate with getter', async ({ page }) => { 58 | const locator = page.locator('spring-board'); 59 | await loadBoardInElement(locator); 60 | 61 | expect( 62 | await locator.evaluate((element: SpringBoardElement) => 63 | element.pubdate?.toISOString(), 64 | ), 65 | ).toBe(await locator.locator('time').getAttribute('datetime')); 66 | }); 67 | 68 | test('pubdate getter returns null in empty board', async ({ page }) => { 69 | const locator = page.locator('spring-board'); 70 | 71 | expect( 72 | await locator.evaluate((element: SpringBoardElement) => element.pubdate), 73 | ).toBeNull(); 74 | }); 75 | 76 | test('assert board contents', async ({ page }) => { 77 | const locator = page.locator('spring-board'); 78 | const innerLocator = locator.locator('#number'); 79 | 80 | await loadBoardInElement(locator); 81 | 82 | expect(await innerLocator.textContent()).toBe('83'); 83 | }); 84 | 85 | test('shadow DOM should be purged before loading a new board', async ({ 86 | page, 87 | }) => { 88 | const locator = page.locator('spring-board'); 89 | const timeLocator = locator.locator('time'); 90 | 91 | await loadBoardInElement(locator); 92 | expect(await timeLocator.count()).toBe(1); 93 | 94 | await loadBoardInElement(locator, `${testBoardUrl}?again`); 95 | expect(await timeLocator.count()).toBe(1); 96 | }); 97 | }); 98 | 99 | function loadBoardInElement(locator: Locator, href = testBoardUrl) { 100 | return Promise.all([ 101 | locator.evaluate( 102 | (element: SpringBoardElement, href) => (element.href = href), 103 | href, 104 | ), 105 | locator.evaluate((element: SpringBoardElement) => element.loaded), 106 | ]); 107 | } 108 | --------------------------------------------------------------------------------