From a412588f51b26a2ff85c1b7c7fbb43f81662bbab Mon Sep 17 00:00:00 2001 From: aghArdeshir Date: Tue, 27 Aug 2024 22:35:09 +0200 Subject: [PATCH 1/2] Modify test runner and add a test for exposing disabled lion-button event handler being called --- .../button/test-suites/LionButton.suite.js | 33 +++++++++++++++++++ web-test-runner.config.mjs | 17 ++++++++-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/packages/ui/components/button/test-suites/LionButton.suite.js b/packages/ui/components/button/test-suites/LionButton.suite.js index c5525bdb52..7cb025d749 100644 --- a/packages/ui/components/button/test-suites/LionButton.suite.js +++ b/packages/ui/components/button/test-suites/LionButton.suite.js @@ -16,6 +16,39 @@ export function LionButtonSuite({ klass = LionButton } = {}) { const tagStringButton = defineCE(class extends klass {}); const tagButton = unsafeStatic(tagStringButton); + // This test below is exactly the same code that we see in this reproductino link: + // https://studio.webcomponents.dev/edit/CdTHK8iuVNqVSuive1NH/src/index.js?p=README.md + // and in this branch, the output of the code in the console is identical to the + // output of the code in the reproduction link. + it('Clicking on disabled button', () => { + customElements.define('lion-button', LionButton); + + ['lion-button', 'button'].forEach(async tagName => { + let counter = 1; + + const theButton = document.createElement(tagName); + theButton.textContent = `This is ${tagName}`; + document.body.appendChild(theButton); + + theButton.addEventListener('click', () => { + console.log(`Hello from ${tagName} - ${counter}`); + }); + + theButton.click(); + counter += 1; + + theButton.setAttribute('disabled', 'true'); + + theButton.click(); + counter += 1; + + theButton.removeAttribute('disabled'); + + theButton.click(); + counter += 1; + }); + }); + describe('LionButton', () => { it('has .type="button" and type="button" by default', async () => { const el = /** @type {LionButton} */ (await fixture(html`<${tagButton}>foo`)); diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 5f269c6da5..e3a166b82e 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -17,7 +17,10 @@ const packages = fs fs.statSync(`packages/ui/components/${dir}`).isDirectory() && fs.existsSync(`packages/ui/components/${dir}/test`), ) - .map(dir => ({ name: dir, path: `packages/ui/components/${dir}/test` })), + .map(dir => ({ name: dir, path: `packages/ui/components/${dir}/test` })) + + // just run button tests so it runs faster + .filter(p => p.name === 'button'), ); /** @@ -28,7 +31,12 @@ const testRunnerHtml = testRunnerImport => ` - + + + + + + @@ -36,6 +44,7 @@ const testRunnerHtml = testRunnerImport => export default { nodeResolve: { exportConditions: [devMode && 'development'] }, + browserLogs: true, coverageConfig: { report: true, reportDir: 'coverage', @@ -55,7 +64,9 @@ export default { browsers: [ playwrightLauncher({ product: 'firefox', concurrency: 1 }), playwrightLauncher({ product: 'chromium' }), - playwrightLauncher({ product: 'webkit' }), + + // ignore this, didn't work for me locally + // playwrightLauncher({ product: 'webkit' }), ], groups: packages.map(pkg => ({ name: pkg.name, From a707af775632eb548b482e11749a6166b9f103a4 Mon Sep 17 00:00:00 2001 From: aghArdeshir Date: Tue, 27 Aug 2024 22:42:48 +0200 Subject: [PATCH 2/2] remove leftover async --- packages/ui/components/button/test-suites/LionButton.suite.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/button/test-suites/LionButton.suite.js b/packages/ui/components/button/test-suites/LionButton.suite.js index 7cb025d749..7633795e45 100644 --- a/packages/ui/components/button/test-suites/LionButton.suite.js +++ b/packages/ui/components/button/test-suites/LionButton.suite.js @@ -23,7 +23,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) { it('Clicking on disabled button', () => { customElements.define('lion-button', LionButton); - ['lion-button', 'button'].forEach(async tagName => { + ['lion-button', 'button'].forEach(tagName => { let counter = 1; const theButton = document.createElement(tagName);