Skip to content

Commit 5a37173

Browse files
committed
Improve e2e
1 parent 45c127d commit 5a37173

File tree

3 files changed

+118
-117
lines changed

3 files changed

+118
-117
lines changed

e2e/WindowVirtualizer.spec.ts

Lines changed: 100 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { test, expect, Page } from "@playwright/test";
1+
import { test, expect } from "@playwright/test";
22
import {
33
storyUrl,
44
getFirstItem,
@@ -7,6 +7,10 @@ import {
77
getFirstItemRtl,
88
windowScrollToLeft,
99
getVirtualizer,
10+
getWindowScrollTop,
11+
getWindowScrollLeft,
12+
getWindowScrollBottom,
13+
getWindowScrollRight,
1014
} from "./utils";
1115

1216
test.describe("smoke", () => {
@@ -84,109 +88,101 @@ test.describe("smoke", () => {
8488
});
8589
});
8690

87-
// test.describe("check if scroll jump compensation works", () => {
88-
// test("vertical start -> end", async ({ page }) => {
89-
// await page.goto(storyUrl("basics-windowvirtualizer--default"));
90-
// const component = await getVirtualizer(page);
91-
// await component.waitForElementState("stable");
92-
93-
// // check if start is displayed
94-
// await expect((await getFirstItem(component)).text).toEqual("0");
95-
96-
// // check if offset from start is always keeped
97-
// await component.click();
98-
// const min = 200;
99-
// const initial = await component.evaluate((e) => window.scrollY);
100-
// let prev = initial;
101-
// for (let i = 0; i < 500; i++) {
102-
// await page.keyboard.press("ArrowDown", { delay: 10 });
103-
// const offset = await component.evaluate((e) => window.scrollY);
104-
// await expect(offset).toBeGreaterThanOrEqual(prev);
105-
// prev = offset;
106-
// }
107-
// await expect(prev).toBeGreaterThan(initial + min);
108-
// });
109-
110-
// test("vertical end -> start", async ({ page }) => {
111-
// await page.goto(storyUrl("basics-windowvirtualizer--default"));
112-
// const component = await getVirtualizer(page);
113-
// await component.waitForElementState("stable");
114-
115-
// // check if start is displayed
116-
// await expect((await getFirstItem(component)).text).toEqual("0");
117-
118-
// // scroll to the end
119-
// await windowScrollToBottom(component);
120-
121-
// // check if offset from end is always keeped
122-
// await component.click();
123-
// const min = 200;
124-
// const initial = await component.evaluate(
125-
// (e) => document.body.scrollHeight - window.scrollY
126-
// );
127-
// let prev = initial;
128-
// for (let i = 0; i < 500; i++) {
129-
// await page.keyboard.press("ArrowUp", { delay: 10 });
130-
// const offset = await component.evaluate(
131-
// (e) => document.body.scrollHeight - window.scrollY
132-
// );
133-
// await expect(offset).toBeGreaterThanOrEqual(prev);
134-
// prev = offset;
135-
// }
136-
// await expect(prev).toBeGreaterThan(initial + min);
137-
// });
138-
139-
// test("horizontal start -> end", async ({ page }) => {
140-
// await page.goto(storyUrl("basics-windowvirtualizer--horizontal"));
141-
// const component = await getVirtualizer(page);
142-
// await component.waitForElementState("stable");
143-
144-
// // check if start is displayed
145-
// await expect((await getFirstItem(component)).text).toEqual("Column 0");
146-
147-
// // check if offset from start is always keeped
148-
// await component.click();
149-
// const min = 200;
150-
// const initial = await component.evaluate((e) => window.scrollX);
151-
// let prev = initial;
152-
// for (let i = 0; i < 500; i++) {
153-
// await page.keyboard.press("ArrowRight", { delay: 10 });
154-
// const offset = await component.evaluate((e) => window.scrollX);
155-
// await expect(offset).toBeGreaterThanOrEqual(prev);
156-
// prev = offset;
157-
// }
158-
// await expect(prev).toBeGreaterThan(initial + min);
159-
// });
160-
161-
// test("horizontal end -> start", async ({ page }) => {
162-
// await page.goto(storyUrl("basics-windowvirtualizer--horizontal"));
163-
// const component = await getVirtualizer(page);
164-
// await component.waitForElementState("stable");
165-
166-
// // check if start is displayed
167-
// await expect((await getFirstItem(component)).text).toEqual("Column 0");
168-
169-
// // scroll to the end
170-
// await windowScrollToRight(component);
171-
172-
// // check if offset from end is always keeped
173-
// await component.click();
174-
// const min = 200;
175-
// const initial = await component.evaluate(
176-
// (e) => document.body.scrollWidth - window.scrollX
177-
// );
178-
// let prev = initial;
179-
// for (let i = 0; i < 500; i++) {
180-
// await page.keyboard.press("ArrowLeft", { delay: 10 });
181-
// const offset = await component.evaluate(
182-
// (e) => document.body.scrollWidth - window.scrollX
183-
// );
184-
// await expect(offset).toBeGreaterThanOrEqual(prev);
185-
// prev = offset;
186-
// }
187-
// await expect(prev).toBeGreaterThan(initial + min);
188-
// });
189-
// });
91+
test.describe("check if scroll jump compensation works", () => {
92+
test("vertical start -> end", async ({ page }) => {
93+
await page.goto(storyUrl("basics-windowvirtualizer--default"));
94+
const component = await getVirtualizer(page);
95+
await component.waitForElementState("stable");
96+
97+
// check if start is displayed
98+
await expect((await getFirstItem(component)).text).toEqual("0");
99+
100+
// check if offset from start is always keeped
101+
await component.click();
102+
const min = 200;
103+
const initial = await getWindowScrollTop(page);
104+
let prev = initial;
105+
for (let i = 0; i < 500; i++) {
106+
await page.keyboard.press("ArrowDown", { delay: 10 });
107+
const offset = await getWindowScrollTop(page);
108+
await expect(offset).toBeGreaterThanOrEqual(prev);
109+
prev = offset;
110+
}
111+
await expect(prev).toBeGreaterThan(initial + min);
112+
});
113+
114+
test("vertical end -> start", async ({ page }) => {
115+
await page.goto(storyUrl("basics-windowvirtualizer--default"));
116+
const component = await getVirtualizer(page);
117+
await component.waitForElementState("stable");
118+
119+
// check if start is displayed
120+
await expect((await getFirstItem(component)).text).toEqual("0");
121+
122+
// scroll to the end
123+
await windowScrollToBottom(component);
124+
125+
// check if offset from end is always keeped
126+
await component.click();
127+
const min = 200;
128+
const initial = await getWindowScrollBottom(page);
129+
let prev = initial;
130+
for (let i = 0; i < 500; i++) {
131+
await page.keyboard.press("ArrowUp", { delay: 10 });
132+
const offset = await getWindowScrollBottom(page);
133+
await expect(offset).toBeGreaterThanOrEqual(prev);
134+
prev = offset;
135+
}
136+
await expect(prev).toBeGreaterThan(initial + min);
137+
});
138+
139+
test("horizontal start -> end", async ({ page }) => {
140+
await page.goto(storyUrl("basics-windowvirtualizer--horizontal"));
141+
const component = await getVirtualizer(page);
142+
await component.waitForElementState("stable");
143+
144+
// check if start is displayed
145+
await expect((await getFirstItem(component)).text).toEqual("Column 0");
146+
147+
// check if offset from start is always keeped
148+
await component.click();
149+
const min = 200;
150+
const initial = await getWindowScrollLeft(page);
151+
let prev = initial;
152+
for (let i = 0; i < 500; i++) {
153+
await page.keyboard.press("ArrowRight", { delay: 10 });
154+
const offset = await getWindowScrollLeft(page);
155+
await expect(offset).toBeGreaterThanOrEqual(prev);
156+
prev = offset;
157+
}
158+
await expect(prev).toBeGreaterThan(initial + min);
159+
});
160+
161+
test("horizontal end -> start", async ({ page }) => {
162+
await page.goto(storyUrl("basics-windowvirtualizer--horizontal"));
163+
const component = await getVirtualizer(page);
164+
await component.waitForElementState("stable");
165+
166+
// check if start is displayed
167+
await expect((await getFirstItem(component)).text).toEqual("Column 0");
168+
169+
// scroll to the end
170+
await windowScrollToRight(component);
171+
172+
// check if offset from end is always keeped
173+
await component.click();
174+
const min = 200;
175+
const initial = await getWindowScrollRight(page);
176+
let prev = initial;
177+
for (let i = 0; i < 500; i++) {
178+
await page.keyboard.press("ArrowLeft", { delay: 10 });
179+
const offset = await getWindowScrollRight(page);
180+
await expect(offset).toBeGreaterThanOrEqual(prev);
181+
prev = offset;
182+
}
183+
await expect(prev).toBeGreaterThan(initial + min);
184+
});
185+
});
190186

191187
test.describe("RTL", () => {
192188
test("vertically scrollable", async ({ page }) => {

e2e/utils.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,22 @@ export const getScrollRight = (
110110
return scrollable.evaluate((e) => e.scrollWidth - e.scrollLeft);
111111
};
112112

113+
export const getWindowScrollTop = (page: Page) => {
114+
return page.evaluate(() => window.scrollY);
115+
};
116+
117+
export const getWindowScrollBottom = (page: Page) => {
118+
return page.evaluate(() => document.body.scrollHeight - window.scrollY);
119+
};
120+
121+
export const getWindowScrollLeft = (page: Page) => {
122+
return page.evaluate(() => window.scrollX);
123+
};
124+
125+
export const getWindowScrollRight = (page: Page) => {
126+
return page.evaluate(() => document.body.scrollWidth - window.scrollX);
127+
};
128+
113129
export const scrollBy = (
114130
scrollable: ElementHandle<HTMLElement | SVGElement>,
115131
offset: number

stories/react/basics/WindowVirtualizer.stories.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -323,22 +323,11 @@ export const IncreasingItems: StoryObj = {
323323
<div>
324324
<label style={{ marginRight: 4 }}>
325325
<input
326-
type="radio"
327-
style={{ marginLeft: 4 }}
328-
checked={!prepend}
329-
onChange={() => {
330-
setPrepend(false);
331-
}}
332-
/>
333-
append
334-
</label>
335-
<label style={{ marginRight: 4 }}>
336-
<input
337-
type="radio"
326+
type="checkbox"
338327
style={{ marginLeft: 4 }}
339328
checked={prepend}
340329
onChange={() => {
341-
setPrepend(true);
330+
setPrepend((prev) => !prev);
342331
}}
343332
/>
344333
prepend

0 commit comments

Comments
 (0)