Skip to content

Commit

Permalink
fix: disable animations for horizontal-scroll when running tests (#5046)
Browse files Browse the repository at this point in the history 
* Horizontal-scroll tests cleanup

* Change files

* Awaiting dom update to run test

* Using Big Sur for MacOS tests

Co-authored-by: Chris Holt <chhol@microsoft.com>
  • Loading branch information
@robarbms @chrisdholt
robarbms and chrisdholt authored Sep 22, 2021
1 parent 9b0d06a commit 9105fb3
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 136 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci-weekly.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ jobs:
PLAYWRIGHT_BROWSER: webkit

macos_cross-platform_cross-browser:
runs-on: [macos-latest]
runs-on: [macos-11]
env:
PLAYWRIGHT_BROWSERS_PATH: 0

Expand Down
7 changes: 7 additions & 0 deletions change/@microsoft-fast-foundation-edc9b322-97d0-4fcd-b4fd-0c6dd4849f1c.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Horizontal-scroll tests cleanup",
"packageName": "@microsoft/fast-foundation",
"email": "robarb@microsoft.com",
"dependentChangeType": "patch"
}
202 changes: 67 additions & 135 deletions packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const cardSpace: number = cardWidth + (cardMargin * 2);
const getXPosition = (elm: any): number | null => {
if (!elm) return null;

return elm.scrollLeft;
return elm.shadowRoot?.querySelector(".scroll-view")?.scrollLeft;
}

/**
Expand All @@ -58,35 +58,39 @@ const cardTemplate: string = `<div class="card" style="width: ${cardWidth}px; he
const getCards = (cnt: number): string => new Array(cnt).fill(cardTemplate).reduce((s, c) => s += c, '');

async function setup() {
const { element, connect, disconnect } = await fixture(FASTHorizontalScroll());
const { element, connect, disconnect }:
{
element: HorizontalScroll & HTMLElement,
connect: () => void,
disconnect: () => void
} = await fixture(FASTHorizontalScroll());

// Removing animated scroll so that tests don't have to wait on DOM updates
element.speed = 0;

return { element, connect, disconnect };
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();

return { element, disconnect };
}

describe("HorinzontalScroll", () => {
describe("Flippers", () => {
it("should enable the next flipper when content exceeds horizontal-scroll width", async () => {
const { element, connect, disconnect } = await setup();

element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect } = await setup();

expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(false);

await disconnect();
});

it("should disable the next flipper if content is less than horizontal-scroll width", async () => {
const { element, connect, disconnect } = await setup();
const { element, disconnect } = await setup();

element.setAttribute("style", "width: 800px");
element.innerHTML = cardTemplate;

await connect();
await DOM.nextUpdate();

expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
Expand All @@ -95,165 +99,101 @@ describe("HorinzontalScroll", () => {
});

it("should disable the previous flipper by default", async () => {
const { element, connect, disconnect} = await setup();

element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect} = await setup();

expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(true);

await disconnect();
});

it("should enable the previous flipper when content is scrolled", async () => {
const { element, connect, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect } = await setup();

element.scrollToNext();
await DOM.nextUpdate();

await setTimeout(async () => {
expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(false);
await disconnect();
}, 1);
expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(false);
await disconnect();
});

it("should disable the previous flipper when scrolled back to the beginning", async () => {
const { element, connect, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect } = await setup();

element.scrollToNext();
element.scrollToPrevious();
await DOM.nextUpdate();

await setTimeout(async () => {
await setTimeout(() => expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(true), 10);
await disconnect();
}, 1);
expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(true);
await disconnect();
});

it("should disable the next flipper when it reaches the end of the content", async () => {
const { element, connect, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(5);
const { element, disconnect } = await setup();

await connect();
await DOM.nextUpdate();
element.scrollToNext();
element.scrollToNext();
element.scrollToNext();
element.scrollToNext();
await DOM.nextUpdate();

await setTimeout(async () => {
expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(45)
await disconnect();
}, 1);
expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
await disconnect();
});

it("should re-enable the next flipper when its scrolled back from the end", async () => {
const { element, connect, disconnect } = await setup();
const { element, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
element.scrollToNext();
element.scrollToNext();
element.scrollToNext();
element.scrollToNext();
element.scrollToPrevious();
await DOM.nextUpdate();

expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(false);

await setTimeout(async () => {
expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(false);

await disconnect();
}, 1);
await disconnect();
});
});

describe("Scrolling", () => {
it("should start in the 0 position", async () => {
const { element, connect, disconnect } = await setup();

element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect } = await setup();

expect(getXPosition(element)).to.equal(0);

await disconnect();
});

it("should scroll to the beginning of the last element in full view", async () => {
const { element, connect, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);
const { element, disconnect } = await setup();

await connect();
await DOM.nextUpdate();
element.scrollToNext();
await DOM.nextUpdate();

await setTimeout(async () => {
const position: number = getXPosition(element) || 0;
const cardsFit = (horizontalScrollWidth - horizontalScrollWidth % cardSpace) / cardSpace;
const cardStart = cardSpace * (cardsFit - 1);
const currentInView: boolean = (position + cardSpace) < horizontalScrollWidth;
const nextInView: boolean = (position - cardSpace * 2) < horizontalScrollWidth;
const position: number = getXPosition(element) || 0;

expect(currentInView && !nextInView).to.equal(true);
expect(position + cardSpace).to.lessThan(horizontalScrollWidth);
expect(position + cardSpace * 2).to.gte(horizontalScrollWidth);

await disconnect();
}, 1);
await disconnect();
});

it("should not scroll past the beginning", async () => {
const { element, connect, disconnect } = await setup();

element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);
const { element, disconnect } = await setup();

await connect();
await DOM.nextUpdate();
element.scrollToPrevious();
await DOM.nextUpdate();

await setTimeout(async () => {
const scrollPosition: number | null = getXPosition(element);
const scrollPosition: number | null = getXPosition(element);

expect(scrollPosition !== null && scrollPosition >= 0).to.equal(true);
expect(scrollPosition).to.not.null;
expect(scrollPosition).to.gte(0);

await disconnect();
}, 1);
await disconnect();
});

it("should not scroll past the last in view element", async () => {
const { element, connect, disconnect } = await setup();

element.setAttribute("style", `width: ${horizontalScrollWidth}px}`);
element.innerHTML = getCards(8);

await connect();
await DOM.nextUpdate();
const { element, disconnect } = await setup();

element.scrollToNext();
element.scrollToNext();
Expand All @@ -262,43 +202,35 @@ describe("HorinzontalScroll", () => {
element.scrollToNext();
element.scrollToNext();

await setTimeout(async () => {
let cardViewWidth: number = cardSpace * 5 * -1;
const scrollPosition: number | null = getXPosition(element);
await DOM.nextUpdate();

expect(scrollPosition !== null && scrollPosition > cardViewWidth).to.equal(true);
let cardViewWidth: number = cardSpace * 5 * -1;
const scrollPosition: number | null = getXPosition(element);

await disconnect();
}, 1);
expect(scrollPosition).to.not.null;
expect(scrollPosition).to.gte(cardViewWidth);

await disconnect();
});

it("should change scroll stop on resize", async () => {
const { element, connect, disconnect } = await setup();

element.speed = -1;
element.setAttribute("style", `width: ${horizontalScrollWidth * 2}px}`);
element.innerHTML = getCards(8);
it("should change scroll stop on resize", async () => {
const { element, disconnect } = await setup();

await connect();
element.scrollToNext();
await DOM.nextUpdate();
const scrollContent: any = element.shadowRoot?.querySelector(".content-container");

element.scrollToNext();
await setTimeout(async () => {
const firstXPos: number | null = getXPosition(scrollContent);
element.scrollToPrevious();
const firstXPos: number | null = getXPosition(element);
element.scrollToPrevious();

element.style.width = `${horizontalScrollWidth}px`;
element.scrollToNext();
element.style.width = `${horizontalScrollWidth * 2}px`;
element.scrollToNext();
await DOM.nextUpdate();

await setTimeout(async () => {
const secondXPos: number | null = getXPosition(scrollContent);
const secondXPos: number | null = getXPosition(element);

expect(firstXPos === secondXPos).to.equal(false);
expect(firstXPos).to.not.equal(secondXPos);

await disconnect();
}, 1);
}, 1);
await disconnect();
});

});
Expand Down
5 changes: 5 additions & 0 deletions packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,11 @@ export class HorizontalScroll extends FoundationElement {
return;
}

if (this.speed < 1) {
this.scrollContainer.scrollLeft = newPosition;
return;
}

this.scrolling = true;

const steps: number[] = [];
Expand Down

0 comments on commit 9105fb3

Please sign in to comment.