I am evaluating the web-test-runner with playwright from modern-web (https://modern-web.dev/docs/test-runner/overview/) to test my web-components.
My sample project is the following:
./package.json
{
"scripts": {
"test": "web-test-runner \"**/*.test.html\" \"**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit --coverage",
"test:watch": "web-test-runner \"**/*.test.html\" \"**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit --watch"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@web/test-runner": "^0.10.0",
"@web/test-runner-playwright": "^0.6.6"
}
}
./my-component/my-component.js
(async() => {
const res = await fetch('/my-component/my-component.html');
const template = document.createElement('template');
template.innerHTML = await res.text();
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-component', MyComponent);
})();
./my-component/my-component.html
<style>
h2 {
color: red;
}
</style>
<h2>Hello world!</h2>
./my-component/test/my-component.test.html
<html>
<head>
<script src="/my-component/my-component.js"></script>
</head>
<body>
<script type="module">
import { runTests } from '@web/test-runner-mocha';
import { expect } from '@esm-bundle/chai';
let element;
runTests(async () => {
describe('HTML tests', () => {
beforeEach(() => {
element = document.createElement("my-component");
document.body.appendChild(element);
});
afterEach(() => {
document.body.removeChild(element);
});
it('component is loaded', () => {
expect(element.shadowRoot).to.exist;
});
it('component contains h2 with text', () => {
expect(element.shadowRoot.querySelector('h2').innerHTML).to.equal('Hello world!');
});
it('component is displayed in red color', () => {
const el = element.shadowRoot.querySelector('h2');
expect(getComputedStyle(el)).to.have.property('color', 'rgb(255, 0, 0)');
});
});
});
</script>
</body>
</html>
this test is passing successfully.
according to modern-web documentation, it is also possible to create tests within js files. So, I am trying with this test:
./my-component/test/my-component.test.js
import { runTests } from '@web/test-runner-mocha';
import { expect } from '@esm-bundle/chai';
let element;
runTests(async () => {
describe('HTML tests', () => {
before(() => {
const script = document.createElement("script");
script.setAttribute("src", "/my-component/my-component.js");
document.head.appendChild(script);
});
beforeEach(() => {
element = document.createElement("my-component");
document.body.appendChild(element);
});
afterEach(() => {
document.body.removeChild(element);
});
it('component is loaded', () => {
expect(element.shadowRoot).to.exist;
});
it('component contains h2 with text', () => {
expect(element.shadowRoot.querySelector('h2').innerHTML).to.equal('Hello world!');
});
it('component is displayed in red color', () => {
const el = element.shadowRoot.querySelector('h2');
expect(getComputedStyle(el)).to.have.property('color', 'rgb(255, 0, 0)');
});
});
});
This is basically the same as for the html test with the addition of the before directive to register my component script.
When running the js test, I get this error:
my-component/test/my-component.test.js:
❌ Tests were interrupted because the page was reloaded. This can happen when clicking a link, submitting a form or interacting with window.location.
Chromium: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed
Firefox: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed
Webkit: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed
View full coverage report at coverage/lcov-report/index.html
How could I solve it?
Best Regards,
Aucun commentaire:
Enregistrer un commentaire