diff --git a/packages/ui/components/button/test-suites/LionButton.suite.js b/packages/ui/components/button/test-suites/LionButton.suite.js
index c5525bdb5..7633795e4 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(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 5f269c6da..e3a166b82 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,