Skip to content

Commit a38def1

Browse files
author
tong.hau
committed
test(cards): update failing test cases
1 parent 09d3fa1 commit a38def1

File tree

4 files changed

+67
-64
lines changed

4 files changed

+67
-64
lines changed

‎test/card.test.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ describe("<sgds-card>", () => {
2424
</div>
2525
<slot></slot>
2626
</div>
27+
<slot name="description"></slot>
2728
<slot name="lower"></slot>
2829
<slot name="link"></slot>
2930
</div>
@@ -54,6 +55,7 @@ describe("<sgds-card>", () => {
5455
</div>
5556
<slot></slot>
5657
</div>
58+
<slot name="description"></slot>
5759
<slot name="lower"></slot>
5860
<slot name="link"></slot>
5961
</div>
@@ -86,6 +88,7 @@ describe("<sgds-card>", () => {
8688
</div>
8789
<slot></slot>
8890
</div>
91+
<slot name="description"></slot>
8992
<slot name="lower"></slot>
9093
<slot name="link"></slot>
9194
</div>
@@ -115,6 +118,7 @@ describe("<sgds-card>", () => {
115118
</div>
116119
<slot></slot>
117120
</div>
121+
<slot name="description"></slot>
118122
<slot name="lower"></slot>
119123
<slot name="link"></slot>
120124
</div>
@@ -123,31 +127,27 @@ describe("<sgds-card>", () => {
123127
);
124128
});
125129

126-
it("renders description when slotted", async () => {
130+
it("renders content in the description slot", async () => {
127131
const el = await fixture<SgdsCard>(html`
128132
<sgds-card>
129133
<span slot="description">This is a description</span>
130134
</sgds-card>
131135
`);
132136

133-
await el.updateComplete;
137+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
138+
expect(descriptionSlot).to.exist;
134139

135-
const desc = el.shadowRoot?.querySelector(".card-text");
136-
expect(desc).to.exist;
137-
138-
const slot = desc?.querySelector("slot[name=description]") as HTMLSlotElement;
139-
const assigned = slot.assignedNodes({ flatten: true });
140-
expect(assigned.length).to.be.greaterThan(0);
141-
expect((assigned[0] as HTMLElement).textContent).to.equal("This is a description");
140+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
141+
expect(assignedNodes.length).to.equal(1);
142+
expect(assignedNodes[0].textContent?.trim()).to.equal("This is a description");
142143
});
143144

144-
it("does not render description when not slotted", async () => {
145+
it("renders nothing if no description slot is provided", async () => {
145146
const el = await fixture<SgdsCard>(html`<sgds-card></sgds-card>`);
146147

147-
await el.updateComplete;
148-
149-
const desc = el.shadowRoot?.querySelector(".card-text");
150-
expect(desc).to.not.exist;
148+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
149+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
150+
expect(assignedNodes.length).to.equal(0);
151151
});
152152
});
153153

‎test/icon-card.test.ts‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,31 +49,27 @@ describe("<sgds-icon-card>", () => {
4949
expect(title).to.exist;
5050
});
5151

52-
it("renders description when slotted", async () => {
52+
it("renders content in the description slot", async () => {
5353
const el = await fixture<SgdsIconCard>(html`
5454
<sgds-icon-card>
5555
<span slot="description">This is a description</span>
5656
</sgds-icon-card>
5757
`);
5858

59-
await el.updateComplete;
60-
61-
const desc = el.shadowRoot?.querySelector(".card-text");
62-
expect(desc).to.exist;
59+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
60+
expect(descriptionSlot).to.exist;
6361

64-
const slot = desc?.querySelector("slot[name=description]") as HTMLSlotElement;
65-
const assigned = slot.assignedNodes({ flatten: true });
66-
expect(assigned.length).to.be.greaterThan(0);
67-
expect((assigned[0] as HTMLElement).textContent).to.equal("This is a description");
62+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
63+
expect(assignedNodes.length).to.equal(1);
64+
expect(assignedNodes[0].textContent?.trim()).to.equal("This is a description");
6865
});
6966

70-
it("does not render description when not slotted", async () => {
67+
it("renders nothing if no description slot is provided", async () => {
7168
const el = await fixture<SgdsIconCard>(html`<sgds-icon-card></sgds-icon-card>`);
7269

73-
await el.updateComplete;
74-
75-
const desc = el.shadowRoot?.querySelector(".card-text");
76-
expect(desc).to.not.exist;
70+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
71+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
72+
expect(assignedNodes.length).to.equal(0);
7773
});
7874

7975
it("applies disabled class when disabled", async () => {
@@ -88,14 +84,24 @@ describe("<sgds-icon-card>", () => {
8884
});
8985

9086
it("applies tabindex correctly when stretchedLink and not disabled", async () => {
91-
const el = await fixture<SgdsIconCard>(html`<sgds-icon-card stretchedLink></sgds-icon-card>`);
87+
const el = await fixture<SgdsIconCard>(html`<sgds-icon-card></sgds-icon-card>`);
88+
el.stretchedLink = true;
89+
await el.updateComplete;
90+
9291
const card = el.shadowRoot?.querySelector(".card") as HTMLElement;
9392
expect(card.getAttribute("tabindex")).to.equal("0");
9493
});
9594

9695
it("sets tabindex to -1 when disabled", async () => {
97-
const el = await fixture<SgdsIconCard>(html`<sgds-icon-card stretchedLink disabled></sgds-icon-card>`);
96+
const el = await fixture<SgdsIconCard>(html`<sgds-icon-card></sgds-icon-card>`);
97+
el.stretchedLink = true;
98+
await el.updateComplete;
99+
98100
const card = el.shadowRoot?.querySelector(".card") as HTMLElement;
101+
expect(card.getAttribute("tabindex")).to.equal("0");
102+
103+
el.disabled = true;
104+
await el.updateComplete;
99105
expect(card.getAttribute("tabindex")).to.equal("-1");
100106
});
101107
});

‎test/image-card.test.ts‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,31 +50,27 @@ describe("sgds-image-card", () => {
5050
expect(title).dom.to.equal(`<slot name="title"></slot>`);
5151
});
5252

53-
it("renders description when slotted", async () => {
53+
it("renders content in the description slot", async () => {
5454
const el = await fixture<SgdsImageCard>(html`
5555
<sgds-image-card>
5656
<span slot="description">This is a description</span>
5757
</sgds-image-card>
5858
`);
5959

60-
await el.updateComplete;
61-
62-
const desc = el.shadowRoot?.querySelector(".card-text");
63-
expect(desc).to.exist;
60+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
61+
expect(descriptionSlot).to.exist;
6462

65-
const slot = desc?.querySelector("slot[name=description]") as HTMLSlotElement;
66-
const assigned = slot.assignedNodes({ flatten: true });
67-
expect(assigned.length).to.be.greaterThan(0);
68-
expect((assigned[0] as HTMLElement).textContent).to.equal("This is a description");
63+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
64+
expect(assignedNodes.length).to.equal(1);
65+
expect(assignedNodes[0].textContent?.trim()).to.equal("This is a description");
6966
});
7067

71-
it("does not render description when not slotted", async () => {
68+
it("renders nothing if no description slot is provided", async () => {
7269
const el = await fixture<SgdsImageCard>(html`<sgds-image-card></sgds-image-card>`);
7370

74-
await el.updateComplete;
75-
76-
const desc = el.shadowRoot?.querySelector(".card-text");
77-
expect(desc).to.not.exist;
71+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
72+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
73+
expect(assignedNodes.length).to.equal(0);
7874
});
7975

8076
it("sets tabindex correctly based on stretchedLink and disabled", async () => {

‎test/thumbnail-card.test.ts‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,38 @@ describe("sgds-thumbnail-card", () => {
1212

1313
it("renders title and subtitle properly", async () => {
1414
const el = await fixture<SgdsThumbnailCard>(html`
15-
<sgds-icon-card>
15+
<sgds-thumbnail-card>
1616
<span slot="subtitle">Subtitle text</span>
1717
<span slot="title">Title text</span>
18-
</sgds-icon-card>
18+
</sgds-thumbnail-card>
1919
`);
2020
const subtitle = el.shadowRoot?.querySelector("slot[name=subtitle]");
2121
const title = el.shadowRoot?.querySelector("slot[name=title]");
2222
expect(subtitle).to.exist;
2323
expect(title).to.exist;
2424
});
2525

26-
it("renders description when slotted", async () => {
26+
it("renders content in the description slot", async () => {
2727
const el = await fixture<SgdsThumbnailCard>(html`
2828
<sgds-thumbnail-card>
2929
<span slot="description">This is a description</span>
3030
</sgds-thumbnail-card>
3131
`);
3232

33-
await el.updateComplete;
34-
35-
const desc = el.shadowRoot?.querySelector(".card-text");
36-
expect(desc).to.exist;
33+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
34+
expect(descriptionSlot).to.exist;
3735

38-
const slot = desc?.querySelector("slot[name=description]") as HTMLSlotElement;
39-
const assigned = slot.assignedNodes({ flatten: true });
40-
expect(assigned.length).to.be.greaterThan(0);
41-
expect((assigned[0] as HTMLElement).textContent).to.equal("This is a description");
36+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
37+
expect(assignedNodes.length).to.equal(1);
38+
expect(assignedNodes[0].textContent?.trim()).to.equal("This is a description");
4239
});
4340

44-
it("does not render description when not slotted", async () => {
41+
it("renders nothing if no description slot is provided", async () => {
4542
const el = await fixture<SgdsThumbnailCard>(html`<sgds-thumbnail-card></sgds-thumbnail-card>`);
4643

47-
await el.updateComplete;
48-
49-
const desc = el.shadowRoot?.querySelector(".card-text");
50-
expect(desc).to.not.exist;
44+
const descriptionSlot = el.shadowRoot?.querySelector('slot[name="description"]') as HTMLSlotElement;
45+
const assignedNodes = descriptionSlot.assignedNodes({ flatten: true });
46+
expect(assignedNodes.length).to.equal(0);
5147
});
5248

5349
it("supports noPadding prop (removes padding and tint)", async () => {
@@ -77,11 +73,16 @@ describe("sgds-thumbnail-card", () => {
7773
expect(tag.tagName.toLowerCase()).to.equal("a");
7874
});
7975

80-
it("sets tabindex correctly when stretchedLink + disabled", async () => {
81-
const el = await fixture<SgdsThumbnailCard>(
82-
html`<sgds-thumbnail-card stretchedLink disabled></sgds-thumbnail-card>`
83-
);
76+
it("sets tabindex correctly based on stretchedLink and disabled", async () => {
77+
const el = await fixture<SgdsThumbnailCard>(html`<sgds-thumbnail-card></sgds-thumbnail-card>`);
78+
el.stretchedLink = true;
79+
await el.updateComplete;
80+
8481
const card = el.shadowRoot?.querySelector(".card") as HTMLElement;
82+
expect(card.getAttribute("tabindex")).to.equal("0");
83+
84+
el.disabled = true;
85+
await el.updateComplete;
8586
expect(card.getAttribute("tabindex")).to.equal("-1");
8687
});
8788

0 commit comments

Comments
 (0)