Skip to content

Commit a9dc654

Browse files
agligaagliga
committed
ci: fixed faulty carousel and table tests
1 parent f566633 commit a9dc654

File tree

4 files changed

+83
-52
lines changed

4 files changed

+83
-52
lines changed

‎packages/ebayui-core/src/components/ebay-carousel/test/test.browser.js‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,48 @@ import {
77
describe,
88
it,
99
expect,
10+
vi,
1011
} from "vitest";
1112
import { fastAnimations } from "../../../common/test-utils/browser";
1213
import template from "../index.marko";
1314
import * as mock from "./mock";
15+
import * as scrollTransitionModule from "../utils/scroll-transition";
16+
1417
beforeAll(() => fastAnimations.start());
1518
afterAll(() => fastAnimations.stop());
1619
afterEach(cleanup);
1720

21+
beforeEach(() => {
22+
vi.useFakeTimers({
23+
toFake: [
24+
"setTimeout",
25+
"clearTimeout",
26+
"setImmediate",
27+
"clearImmediate",
28+
"setInterval",
29+
"clearInterval",
30+
"requestAnimationFrame",
31+
"cancelAnimationFrame",
32+
],
33+
shouldAdvanceTime: true,
34+
});
35+
36+
vi.mock("../utils/scroll-transition", { spy: true });
37+
38+
vi.mocked(scrollTransitionModule.scrollTransition).mockImplementation(
39+
(el, to, fn) => {
40+
el.scrollLeft = to;
41+
fn();
42+
return () => {};
43+
},
44+
);
45+
});
46+
47+
afterEach(() => {
48+
vi.clearAllTimers();
49+
vi.resetAllMocks();
50+
});
51+
1852
/** @type import("@marko/testing-library").RenderResult */
1953
let component;
2054

@@ -650,7 +684,7 @@ describe("given a discrete carousel", () => {
650684
await component.rerender(
651685
Object.assign({}, input, { paused: true }),
652686
);
653-
await new Promise((resolve) => setTimeout(resolve, 600));
687+
vi.advanceTimersByTime(600);
654688
});
655689

656690
it("then it did not emit any updates", () => {
@@ -666,7 +700,7 @@ describe("given a discrete carousel", () => {
666700
});
667701

668702
it("then the autoplay does not run", async () => {
669-
await new Promise((resolve) => setTimeout(resolve, 600));
703+
vi.advanceTimersByTime(600);
670704
expect(component.emitted("move")).has.length(0);
671705
});
672706

@@ -711,6 +745,8 @@ function doesNotEventuallyScroll() {
711745
window.removeEventListener("scroll", handleScroll);
712746
reject(err);
713747
}
748+
749+
vi.advanceTimersByTime(400);
714750
});
715751
}
716752

‎packages/ebayui-core/src/components/ebay-table/index.marko‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ $ const isLoading = bodyState === "loading";
8686
} else if (sortOrder) {
8787
sortEleAttr = {
8888
type: "button",
89+
tabindex: isLoading ? -1 : null,
8990
disabled: isLoading,
9091
};
9192
}

‎packages/ebayui-core/src/components/ebay-table/test/__snapshots__/test.server.js.snap‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1875,6 +1875,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
18751875
>
18761876
<button
18771877
disabled=""
1878+
tabindex="-1"
18781879
type="button"
18791880
>
18801881
Seller
@@ -1905,6 +1906,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
19051906
>
19061907
<button
19071908
disabled=""
1909+
tabindex="-1"
19081910
type="button"
19091911
>
19101912
Item
@@ -1935,6 +1937,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
19351937
>
19361938
<button
19371939
disabled=""
1940+
tabindex="-1"
19381941
type="button"
19391942
>
19401943
Status
@@ -1955,6 +1958,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
19551958
>
19561959
<button
19571960
disabled=""
1961+
tabindex="-1"
19581962
type="button"
19591963
>
19601964
List Price
@@ -1975,6 +1979,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
19751979
>
19761980
<button
19771981
disabled=""
1982+
tabindex="-1"
19781983
type="button"
19791984
>
19801985
Quantity Available
@@ -1995,6 +2000,7 @@ exports[`ebay-table > renders with anchors loading 1`] = `
19952000
>
19962001
<button
19972002
disabled=""
2003+
tabindex="-1"
19982004
type="button"
19992005
>
20002006
Orders
@@ -2015,23 +2021,15 @@ exports[`ebay-table > renders with anchors loading 1`] = `
20152021
>
20162022
<button
20172023
disabled=""
2024+
tabindex="-1"
20182025
type="button"
20192026
>
20202027
Watchers
20212028
 
20222029
<svg
20232030
aria-hidden="true"
20242031
class="icon icon--12"
2025-
focusable="false"
2026-
>
2027-
<use
2028-
href="#icon-sort-12"
2029-
/>
2030-
</svg>
2031-
</button>
2032-
</th>
2033-
<th
2034-
class="table-cell table-c..."
2032+
focusab..."
20352033
`;
20362034

20372035
exports[`ebay-table > renders with columns client side loading 1`] = `
@@ -2067,6 +2065,7 @@ exports[`ebay-table > renders with columns client side loading 1`] = `
20672065
>
20682066
<button
20692067
disabled=""
2068+
tabindex="-1"
20702069
type="button"
20712070
>
20722071
List Price
@@ -2097,6 +2096,7 @@ exports[`ebay-table > renders with columns client side loading 1`] = `
20972096
>
20982097
<button
20992098
disabled=""
2099+
tabindex="-1"
21002100
type="button"
21012101
>
21022102
Quantity Available
@@ -2229,10 +2229,7 @@ exports[`ebay-table > renders with columns client side loading 1`] = `
22292229
class="table-cell table-cell--numeric"
22302230
>
22312231
45
2232-
</td>
2233-
<td
2234-
class="table-cell"
2235-
>[3..."
2232+
</td>[39..."
22362233
`;
22372234

22382235
exports[`ebay-table > renders with frozen header 1`] = `

‎packages/ebayui-core/src/components/ebay-table/test/loading/test.browser.js‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -77,44 +77,39 @@ describe("given table with actions with loading", () => {
7777

7878
describe("all interactive elements should be disabled and have tabindex -1", () => {
7979
it("should have all buttons disabled", async () => {
80-
component
81-
.getAllByRole("button", { hidden: true })
82-
.forEach(async (button) => {
83-
await waitFor(() => {
84-
expect(button).toHaveAttribute("disabled", "");
85-
expect(button).toHaveAttribute("tabindex", "-1");
86-
});
87-
});
88-
});
89-
it("should have all links disabled", async () => {
90-
component
91-
.getAllByRole("link", { hidden: true })
92-
.forEach(async (button) => {
93-
await waitFor(() => {
94-
expect(button).toHaveAttribute("disabled", "");
95-
expect(button).toHaveAttribute("tabindex", "-1");
96-
});
80+
for (const button of component.getAllByRole("button", {
81+
hidden: true,
82+
})) {
83+
await waitFor(() => {
84+
expect(button).toHaveAttribute("disabled", "true");
85+
expect(button).toHaveAttribute("tabindex", "-1");
9786
});
87+
}
9888
});
9989
});
90+
it("should have all links disabled", async () => {
91+
for (const button of component.getAllByRole("link", { hidden: true })) {
92+
await waitFor(() => {
93+
expect(button).not.toHaveAttribute("href");
94+
expect(button).toHaveAttribute("tabindex", "-1");
95+
});
96+
}
97+
});
10098
describe("When table is rerendered without loading", () => {
10199
beforeEach(async () => {
102100
await component.rerender({ bodyState: "default" });
103101
});
104102

105103
describe("all interactive elements should be enabled", () => {
106104
it("should have all buttons disabled", async () => {
107-
component
108-
.getAllByRole("button", { hidden: true })
109-
.forEach(async (button) => {
110-
await waitFor(() => {
111-
expect(button).not.toHaveAttribute("disabled", "");
112-
expect(button).not.toHaveAttribute(
113-
"tabindex",
114-
"-1",
115-
);
116-
});
105+
for (const button of component.getAllByRole("button", {
106+
hidden: true,
107+
})) {
108+
await waitFor(() => {
109+
expect(button).not.toHaveAttribute("disabled", "");
110+
expect(button).not.toHaveAttribute("tabindex", "-1");
117111
});
112+
}
118113
});
119114
});
120115
});
@@ -130,14 +125,14 @@ describe("given table with header actions with loading", () => {
130125

131126
describe("all interactive elements should be disabled and have tabindex -1", () => {
132127
it("should have all buttons disabled", async () => {
133-
component
134-
.getAllByRole("button", { hidden: true })
135-
.forEach(async (button) => {
136-
await waitFor(() => {
137-
expect(button).toHaveAttribute("disabled", "");
138-
expect(button).toHaveAttribute("tabindex", "-1");
139-
});
128+
for (const button of component.getAllByRole("button", {
129+
hidden: true,
130+
})) {
131+
await waitFor(() => {
132+
expect(button).toHaveAttribute("disabled", "");
133+
expect(button).toHaveAttribute("tabindex", "-1");
140134
});
135+
}
141136
});
142137
});
143138
describe("When table is rerendered without loading", () => {
@@ -147,12 +142,14 @@ describe("given table with header actions with loading", () => {
147142

148143
describe("all interactive elements should be enabled", () => {
149144
it("should have all buttons disabled", async () => {
150-
component.getAllByRole("button").forEach(async (button) => {
145+
for (const button of component.getAllByRole("button", {
146+
hidden: true,
147+
})) {
151148
await waitFor(() => {
152149
expect(button).not.toHaveAttribute("disabled", "");
153150
expect(button).not.toHaveAttribute("tabindex", "-1");
154151
});
155-
});
152+
}
156153
});
157154
});
158155
});

0 commit comments

Comments
 (0)