Skip to content

Commit

Permalink
Can just call focus instead of a wtr plugin
Browse files Browse the repository at this point in the history
At some point the focus/enter key based unit test was failing in webkit.
I wrote the `focusPlugin` that used the playwright `focus` method which
I thought fixed my issue. I wanted to revisit the issue and in doing so
realized that it was in fact working as expected without the plugin.
Unsure what I was doing differently at first now.
  • Loading branch information
brandonaaron committed Nov 25, 2023
1 parent 1b928c1 commit c5efd14
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 27 deletions.
1 change: 0 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
docs/
examples/
.editorconfig
focusPlugin.js
index.html
rollup.config.js
test.html
Expand Down
20 changes: 0 additions & 20 deletions focusPlugin.js

This file was deleted.

11 changes: 8 additions & 3 deletions src/DarkPrefToggleElement.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { assert } from 'chai'
import { DarkPref, DarkPrefUserSetting } from './DarkPref.js'
import { DarkPrefToggleElement } from './DarkPrefToggleElement.js'
import { sendMouse, resetMouse, sendKeys, executeServerCommand } from '@web/test-runner-commands'
import { sendMouse, resetMouse, sendKeys } from '@web/test-runner-commands'

const darkModeQuery = matchMedia('(prefers-color-scheme: dark)')
const testDarkMode = darkModeQuery.matches
Expand Down Expand Up @@ -63,9 +63,14 @@ describe(`DarkPrefToggleElement (system: ${testDarkMode ? 'dark' : 'light'}, use
})

it('toggles DarkPref when focused and enter key is pressed', async function () {
await executeServerCommand('focus', '#default button')
const darkPrefToggle = document.getElementById('default') as DarkPrefToggleElement | null
const button = darkPrefToggle?.shadowRoot?.querySelector('button') as HTMLButtonElement | null
if (!button) { throw new Error('no button') }
button.focus()
assert.strictEqual(DarkPref.current.isDark, (testUserPref ?? testDarkMode), 'initial dark pref matches user/system')
await sendKeys({ press: 'Enter' })
assert.strictEqual(DarkPref.current.isDark, !(testUserPref ?? testDarkMode), 'dark pref was toggled')
assert.strictEqual(!DarkPref.current.isDark, (testUserPref ?? testDarkMode), 'dark pref was toggled')
await sendKeys({ press: 'Enter' })
assert.strictEqual(DarkPref.current.isDark, (testUserPref ?? testDarkMode), 'dark pref was toggled again')
})
})
4 changes: 1 addition & 3 deletions web-test-runner.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { esbuildPlugin } from '@web/dev-server-esbuild'
import { playwrightLauncher } from '@web/test-runner-playwright'
import { defaultReporter, summaryReporter } from '@web/test-runner'

import { focusPlugin } from './focusPlugin.js'

const port = 8889

// Setup `browsers` config so we test all permutations of product * colorScheme * stored user preference
Expand Down Expand Up @@ -54,7 +52,7 @@ export default {
// use typescript esbuild loader for all js and ts files
loaders: { '.js': 'ts', '.ts': 'ts' },
tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url))
}), focusPlugin()],
})],
port,
reporters: [defaultReporter(), summaryReporter()],
testRunnerHtml: (testFramework) => `
Expand Down

0 comments on commit c5efd14

Please sign in to comment.