Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test environment (npm run test:browser) behaves differently than real browser #2352

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Test environment (npm run test:browser) behaves differently than real browser #2352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a412588
Modify test runner and add a test for exposing disabled lion-button …
aghArdeshir Aug 27, 2024
a707af7
remove leftover async
aghArdeshir Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions packages/ui/components/button/test-suites/LionButton.suite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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</${tagButton}>`));
Expand Down
17 changes: 14 additions & 3 deletions web-test-runner.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
);

/**
Expand All @@ -28,14 +31,20 @@ const testRunnerHtml = testRunnerImport =>
`
<html>
<head>
<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>
<!-- This line below is where the problem is coming from. This alters behavior -->
<!-- And I believe its dangerous, because it gives us false positives. -->
<!-- Not everybody is importing this module in their app -->
<!-- Only tests that need it, should import it individually -->
<!-- <script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script> -->

<script type="module" src="${testRunnerImport}"></script>
</head>
</html>
`;

export default {
nodeResolve: { exportConditions: [devMode && 'development'] },
browserLogs: true,
coverageConfig: {
report: true,
reportDir: 'coverage',
Expand All @@ -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,
Expand Down
Loading