Skip to content

Commit

Permalink
Expand bi-directional scroll handling tests (#771)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jalal246
jalal246 authored Nov 2, 2023
1 parent 62dd8ca commit 381680b
Showing 1 changed file with 157 additions and 70 deletions.
227 changes: 157 additions & 70 deletions ...rounds/dflex-dnd-playground/tests/scroll/one-container/scroll.biDirection.outside.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,8 @@ test.describe("Drag the first element down vertically testing visibility and thr
visibleDFlexElements.forEach((dflexElm) => {
const { translate } = dflexElm;

expect(translate).toEqual({
x: 0,
y: -59.1875,
});
expect(translate.x).toBeCloseTo(0, 0);
expect(translate.y).toBeCloseTo(-59.1875, 1);
});
});

Expand All @@ -118,10 +116,8 @@ test.describe("Drag the first element down vertically testing visibility and thr
invisibleDFlexElements.forEach((dflexElm) => {
const { translate } = dflexElm;

expect(translate).toEqual({
x: 0,
y: -59.1875,
});
expect(translate.x).toBeCloseTo(0, 0);
expect(translate.y).toBeCloseTo(-59.1875, 1);
});
});

Expand All @@ -130,7 +126,7 @@ test.describe("Drag the first element down vertically testing visibility and thr
invisibleElementsBeforeDrag.map((element) =>
expect(element).toHaveCSS(
"transform",
"matrix(1, 0, 0, 1, 0, -59.1875)",
/matrix\(1, 0, 0, 1, 0, -?59\.1\d+\)/,
),
),
);
Expand Down Expand Up @@ -179,93 +175,184 @@ test.describe("Drag the first element down vertically testing visibility and thr
// await activeBrowser.close();
});

test.describe("in the top", async () => {
test.beforeAll(async () => {
// Drag it outside the container.
await getDraggedRect(elements[0]);
await moveDragged(-220, -1);
test.describe("Up to down direction", () => {
test.describe("in the top", async () => {
test.beforeAll(async () => {
// Drag it outside the container.
await getDraggedRect(elements[0]);
await moveDragged(-220, -1);

await page.waitForTimeout(1000);
await page.waitForTimeout(1000);

dflexElements = await getSerializedElementsAfterKeyPress();
dflexElements = await getSerializedElementsAfterKeyPress();

// Slices elements from index 0 to 10 (inclusive)
visibleDFlexElements = dflexElements.slice(1, 11);
visibleElements = elements.slice(1, 11);
// Slices elements from index 0 to 10 (inclusive)
visibleDFlexElements = dflexElements.slice(1, 11);
visibleElements = elements.slice(1, 11);

// Generates elements from index 11 to the end but with 5
// elements margin to take into consideration the threshold.
invisibleElements = elements.slice(16);
invisibleDFlexElements = dflexElements.slice(16);
// Generates elements from index 11 to the end but with 5
// elements margin to take into consideration the threshold.
invisibleElements = elements.slice(16);
invisibleDFlexElements = dflexElements.slice(16);

invisibleElementsBeforeDrag = [];
invisibleDflexElementsBeforeDrag = [];
});
invisibleElementsBeforeDrag = [];
invisibleDflexElementsBeforeDrag = [];
});

await launchTestProcess(() => {
test("Invisible elements have not actually CSS transformed", async () => {
await Promise.all(
invisibleElements.map((element) =>
expect(element).toHaveCSS("transform", "none"),
),
);
await launchTestProcess(() => {
test("Invisible elements have not actually CSS transformed", async () => {
await Promise.all(
invisibleElements.map((element) =>
expect(element).toHaveCSS("transform", "none"),
),
);
});
});
});
});

test.describe("in the middle", async () => {
test.beforeAll(async () => {
// Move it to 50
await moveDragged(-1, 600);
await page.waitForTimeout(2700);
await moveDragged(-1, 500);
test.describe("in the middle", async () => {
test.beforeAll(async () => {
// Move it to 50
await moveDragged(-1, 600);

await page.waitForFunction(() => {
const { scrollTop } = document.documentElement;

return scrollTop >= 2900;
});

await moveDragged(-1, 500);

await page.waitForTimeout(1000);
await page.waitForTimeout(1000);

dflexElements = await getSerializedElementsAfterKeyPress();
dflexElements = await getSerializedElementsAfterKeyPress();

// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(50, 61);
visibleElements = elements.slice(50, 61);
// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(50, 61);
visibleElements = elements.slice(50, 61);

// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.
// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.

invisibleElements = [...elements.slice(66)];
invisibleDFlexElements = [...dflexElements.slice(66)];
invisibleElements = [...elements.slice(66)];
invisibleDFlexElements = [...dflexElements.slice(66)];

invisibleElementsBeforeDrag = [...elements.slice(1, 45)];
invisibleDflexElementsBeforeDrag = [...dflexElements.slice(1, 45)];
invisibleElementsBeforeDrag = [...elements.slice(1, 45)];
invisibleDflexElementsBeforeDrag = [...dflexElements.slice(1, 45)];
});

await launchTestProcess();
});

await launchTestProcess();
test.describe("in the end", async () => {
test.beforeAll(async () => {
// Move it to 50
await moveDragged(-1, 600);

await page.waitForFunction(() => {
const { scrollTop } = document.documentElement;

return scrollTop >= 5200;
});

await moveDragged(-1, 500);

await page.waitForTimeout(1000);

dflexElements = await getSerializedElementsAfterKeyPress();

// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(90, dflexElements.length);
visibleElements = elements.slice(90, elements.length);

// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.

invisibleElements = [];
invisibleDFlexElements = [];

invisibleElementsBeforeDrag = [...elements.slice(1, 85)];
invisibleDflexElementsBeforeDrag = [...dflexElements.slice(1, 85)];
});

await launchTestProcess();
});
});

test.describe("in the end", async () => {
test.beforeAll(async () => {
// Move it to 50
await moveDragged(-1, 600);
await page.waitForTimeout(2700);
await moveDragged(-1, 500);
test.describe("down to up direction", () => {
test.describe("in the middle", async () => {
test.beforeAll(async () => {
// Move it to 50
await moveDragged(-1, 1);

await page.waitForFunction(() => {
const { scrollTop } = document.documentElement;

return scrollTop <= 2900;
});

await page.waitForTimeout(1000);
await moveDragged(-1, 2);

dflexElements = await getSerializedElementsAfterKeyPress();
await page.waitForTimeout(1000);

// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(90, dflexElements.length);
visibleElements = elements.slice(90, elements.length);
dflexElements = await getSerializedElementsAfterKeyPress();

// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.
// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(50, 61);
visibleElements = elements.slice(50, 61);

invisibleElements = [];
invisibleDFlexElements = [];
// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.

invisibleElementsBeforeDrag = [...elements.slice(1, 85)];
invisibleDflexElementsBeforeDrag = [...dflexElements.slice(1, 85)];
invisibleElementsBeforeDrag = [
...elements.slice(1, 45),
...elements.slice(66),
];
invisibleDflexElementsBeforeDrag = [
...dflexElements.slice(1, 45),
...dflexElements.slice(66),
];

invisibleElements = [];
invisibleDFlexElements = [];
});

await launchTestProcess();
});

await launchTestProcess();
test.describe("in the top", async () => {
test.beforeAll(async () => {
await moveDragged(-1, -150);

await page.waitForFunction(() => {
const { scrollTop } = document.documentElement;

return scrollTop <= 40;
});

await moveDragged(-1, 0);

await page.waitForTimeout(1000);

dflexElements = await getSerializedElementsAfterKeyPress();

// Slices elements from index 50 to 60 (inclusive)
visibleDFlexElements = dflexElements.slice(1, 11);
visibleElements = elements.slice(1, 11);

// Generates elements from index 0 to 44 and from 66 to the end but with 5
// elements margin to take into consideration the threshold.

invisibleElementsBeforeDrag = [...elements.slice(16, elements.length)];
invisibleDflexElementsBeforeDrag = [
...dflexElements.slice(16, dflexElements.length),
];

invisibleElements = [];
invisibleDFlexElements = [];
});

await launchTestProcess();
});
});
});

0 comments on commit 381680b

Please sign in to comment.