atomico/test-dom

fixture

function that allows to keep the render on a single node for each execution of it, the container will be unmounted at the end of each execution of it.
1
import { html } from "atomico";
2
import { expect } from "@esm-bundle/chai";
3
import { fixture } from "atomico/test-dom";
4
import { Component } from "./component.js";
5
6
describe("my test", () => {
7
it("my-component", async () => {
8
const component = fixture(html`<${Component}>
9
<span>content...</span>
10
</${Component}>`);
11
12
await component.updated;
13
14
/** Test logic */
15
});
16
});
Copied!
This allows each fixture execution inside it to be related to the container used for the test, allowing you to fily test external DOM changes, example:
1
import { html } from "atomico";
2
import { expect } from "@esm-bundle/chai";
3
import { fixture } from "atomico/test-dom";
4
import { Component } from "./component.js";
5
6
7
describe("my test", () => {
8
it("my-component", async () => {
9
// first instance of the render, it will return the component
10
const component = fixture(html`<${Component}>
11
<span>content...</span>
12
</${Component}>`);
13
14
await component.updated;
15
16
// updates the content of the span tag of the first instance of the render
17
fixture(html`<${Component}>
18
<span>new content...</span>
19
</${Component}>`);
20
21
await component.updated;
22
23
expect(
24
component.querySelector("span").textContent
25
).to.equal("new content...");
26
});
27
});
Copied!
Copy link
Edit on GitHub