Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { Button } from "./button";
import { newSpecPage } from "@stencil/core/testing";
it("should render correctly without attributes", async () => {
const page = await newSpecPage({
components: [Button],
html: `<hy-button>Hello tests!</hy-button>`
});
expect(page.root).toEqualHtml(`
<hy-button>
<button class="default hy-button">
<span class="button-text">
Hello tests!
</span>
</button>
</hy-button>
`);
});
it("should have classname matching the variant", async () => {
const page = await newSpecPage({
components: [Button],
html: `<hy-button variant="secondary">Hello icons!<hy-button>`
});
const button = page.doc.querySelector("button.secondary");
expect(button).toBeTruthy();
});
it("should display arrow element", async () => {
const page = await newSpecPage({
components: [Button],
html: `<hy-button
icon="hy-icon-arrow-left"
>Hello icons!<hy-button>`
});
const icon = page.doc.querySelector("span.button-icon");
expect(icon).toHaveClass("button-icon-left");
});
it("supports icons on both sides", async () => {
const page = await newSpecPage({
components: [Button],
html: `<hy-button
variant="secondary"
icon="hy-icon-arrow-left"
icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`
});
const icons = page.doc.querySelectorAll("span.button-icon");
expect(icons.length).toBe(2);
expect(icons[0]).toHaveClass("button-icon-left");
expect(icons[1]).toHaveClass("button-icon-right");
});