Skip to content

Commit

Permalink
test: add snapshots to graph related tests also disable chromatic on …
Browse files Browse the repository at this point in the history 
…geneset names and tooltips
  • Loading branch information
@seve
seve committed Feb 29, 2024
1 parent b7d377b commit 8fa8dc4
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 124 deletions.
34 changes: 0 additions & 34 deletions client/__tests__/common/playwrightContext.ts
View file

This file was deleted.

37 changes: 26 additions & 11 deletions client/__tests__/e2e/cellxgeneActions.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable no-await-in-loop -- await in loop is needed to emulate sequential user actions */
import { Page, expect } from "@playwright/test";
import { Page, TestInfo, expect } from "@playwright/test";
import { Classes } from "@blueprintjs/core";
import { takeSnapshot } from "@chromatic-com/playwright";
import { clearInputAndTypeInto, tryUntil, typeInto } from "./puppeteerUtils";

interface Coordinate {
Expand Down Expand Up @@ -90,7 +91,7 @@ export async function waitUntilNoSkeletonDetected(page: Page): Promise<void> {
* (thuang): The diff exp test needs more retry, since the API call takes
* some time to complete.
*/
maxRetry: 300
maxRetry: 300,
}
);
}
Expand Down Expand Up @@ -421,7 +422,7 @@ export async function assertGenesetExists(
/**
* (thuang): Don't wait for the default timeout, since we want to fail fast
*/
timeout: 1 * 1000
timeout: 1 * 1000,
});

expect(result).toBe(genesetName);
Expand Down Expand Up @@ -643,18 +644,32 @@ export async function assertUndoRedo(
assertOne: () => Promise<void>,
assertTwo: () => Promise<void>
): Promise<void> {
await tryUntil(async () => {
await keyboardUndo(page);
await assertOne();
}, { page });
await tryUntil(
async () => {
await keyboardUndo(page);
await assertOne();
},
{ page }
);

// if we redo too quickly after undo, the shortcut handler capture the action
await page.waitForTimeout(1000);

await tryUntil(async () => {
await keyboardRedo(page);
await assertTwo();
}, { page });
await tryUntil(
async () => {
await keyboardRedo(page);
await assertTwo();
},
{ page }
);
}

export async function snapshotTestGraph(page: Page, testInfo: TestInfo) {
const buttonID = "capture-and-display-graph";
const imageID = "graph-image";
await page.getByTestId(buttonID).click();
page.getByTestId(imageID).waitFor();
await takeSnapshot(page, testInfo);
}

/* eslint-enable no-await-in-loop -- await in loop is needed to emulate sequential user actions */
169 changes: 96 additions & 73 deletions client/__tests__/e2e/e2e.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import {
waitUntilNoSkeletonDetected,
checkGenesetDescription,
assertUndoRedo,
snapshotTestGraph,
} from "./cellxgeneActions";

import { datasets } from "./data";
Expand Down Expand Up @@ -154,16 +155,19 @@ describe("metadata loads", () => {
}
});

test(
"categories and values from dataset appear and properly truncate if applicable",
async ({ page }) => {
await goToPage(page, pageURLTruncate);
test("categories and values from dataset appear and properly truncate if applicable", async ({
page,
}) => {
await goToPage(page, pageURLTruncate);

await tryUntil(async () => {
await tryUntil(
async () => {
for (const label of Object.keys(
dataTruncate.categorical
) as (keyof typeof dataTruncate.categorical)[]) {
const element = await page.getByTestId(`category-${label}`).innerHTML();
const element = await page
.getByTestId(`category-${label}`)
.innerHTML();

expect(element).toMatchSnapshot();

Expand All @@ -179,9 +183,10 @@ describe("metadata loads", () => {
Object.values(dataTruncate.categorical[label])
);
}
}, { page });
}
);
},
{ page }
);
});

test("continuous data appears", async ({ page }) => {
await goToPage(page);
Expand Down Expand Up @@ -355,7 +360,7 @@ describe("clipping", () => {

// interact with UI elements just that they do not break
describe("ui elements don't error", () => {
test("color by", async ({ page }) => {
test("color by", async ({ page }, testInfo) => {
await goToPage(page);
const allLabels = [
...Object.keys(data.categorical),
Expand All @@ -365,9 +370,10 @@ describe("ui elements don't error", () => {
for (const label of allLabels) {
await page.getByTestId(`colorby-${label}`).click();
}
await snapshotTestGraph(page, testInfo);
});

test("pan and zoom", async ({ page }) => {
test("pan and zoom", async ({ page }, testInfo) => {
await goToPage(page);
await page.getByTestId("mode-pan-zoom").click();
const panCoords = await calcDragCoordinates(
Expand All @@ -379,6 +385,7 @@ describe("ui elements don't error", () => {
await drag("layout-graph", panCoords.start, panCoords.end, page);

await page.evaluate("window.scrollBy(0, 1000);");
await snapshotTestGraph(page, testInfo);
});
});

Expand Down Expand Up @@ -609,13 +616,14 @@ for (const option of options) {
expect(cellCount).toBe("131");
}
});
test("color by mean expression", async ({ page }) => {
test("color by mean expression", async ({ page }, testInfo) => {
await setup(option, page);
await createGeneset(meanExpressionBrushGenesetName, page);
await addGeneToSetAndExpand(meanExpressionBrushGenesetName, "SIK1", page);

await colorByGeneset(meanExpressionBrushGenesetName, page);
await assertColorLegendLabel(meanExpressionBrushGenesetName, page);
await snapshotTestGraph(page, testInfo);
});
test("diffexp", async ({ page }) => {
if (option.withSubset) return;
Expand Down Expand Up @@ -678,57 +686,66 @@ for (const option of options) {
/**
* (thuang): Test is flaky, so we need to retry until it passes
*/
await tryUntil(async () => {
if (option.withSubset) return;
await tryUntil(
async () => {
if (option.withSubset) return;

await setup(option, page);
await setup(option, page);

waitUntilNoSkeletonDetected(page);
waitUntilNoSkeletonDetected(page);

const genesetName = `test-geneset-foo-123`;
await assertGenesetDoesNotExist(genesetName, page);
await createGeneset(genesetName, page);
await assertGenesetExists(genesetName, page);
await assertUndoRedo(
page,
async () => assertGenesetDoesNotExist(genesetName, page),
async () => assertGenesetExists(genesetName, page)
);
}, { page })
const genesetName = `test-geneset-foo-123`;
await assertGenesetDoesNotExist(genesetName, page);
await createGeneset(genesetName, page);
await assertGenesetExists(genesetName, page);
await assertUndoRedo(
page,
async () => assertGenesetDoesNotExist(genesetName, page),
async () => assertGenesetExists(genesetName, page)
);
},
{ page }
);
});

test("edit geneset name and undo/redo", async ({ page }) => {
/**
* (thuang): Test is flaky, so we need to retry until it passes
*/
await tryUntil(async () => {
await setup(option, page);
await createGeneset(editableGenesetName, page);
await editGenesetName(editableGenesetName, newGenesetName, page);
await assertGenesetExists(newGenesetName, page);
await assertUndoRedo(
page,
async () => assertGenesetExists(editableGenesetName, page),
async () => assertGenesetExists(newGenesetName, page)
);
}, { page })
await tryUntil(
async () => {
await setup(option, page);
await createGeneset(editableGenesetName, page);
await editGenesetName(editableGenesetName, newGenesetName, page);
await assertGenesetExists(newGenesetName, page);
await assertUndoRedo(
page,
async () => assertGenesetExists(editableGenesetName, page),
async () => assertGenesetExists(newGenesetName, page)
);
},
{ page }
);
});
test("delete a geneset and undo/redo", async ({ page }) => {
/**
* (thuang): Test is flaky, so we need to retry until it passes
*/
await tryUntil(async () => {
if (option.withSubset) return;

await setup(option, page);
await createGeneset(genesetToDeleteName, page);
await deleteGeneset(genesetToDeleteName, page);
await assertUndoRedo(
page,
async () => assertGenesetExists(genesetToDeleteName, page),
async () => assertGenesetDoesNotExist(genesetToDeleteName, page)
await tryUntil(
async () => {
if (option.withSubset) return;

await setup(option, page);
await createGeneset(genesetToDeleteName, page);
await deleteGeneset(genesetToDeleteName, page);
await assertUndoRedo(
page,
async () => assertGenesetExists(genesetToDeleteName, page),
async () => assertGenesetDoesNotExist(genesetToDeleteName, page)
);
},
{ page }
);
}, { page });
});
test("geneset description", async ({ page }) => {
if (option.withSubset) return;
Expand All @@ -752,17 +769,20 @@ for (const option of options) {
/**
* (thuang): Test is flaky, so we need to retry until it passes
*/
await tryUntil(async () => {
await setup(option, page);
await createGeneset(setToAddGeneTo, page);
await addGeneToSetAndExpand(setToAddGeneTo, geneToAddToSet, page);
await assertGeneExistsInGeneset(geneToAddToSet, page);
await assertUndoRedo(
page,
async () => assertGeneDoesNotExist(geneToAddToSet, page),
async () => assertGeneExistsInGeneset(geneToAddToSet, page)
);
}, { page });
await tryUntil(
async () => {
await setup(option, page);
await createGeneset(setToAddGeneTo, page);
await addGeneToSetAndExpand(setToAddGeneTo, geneToAddToSet, page);
await assertGeneExistsInGeneset(geneToAddToSet, page);
await assertUndoRedo(
page,
async () => assertGeneDoesNotExist(geneToAddToSet, page),
async () => assertGeneExistsInGeneset(geneToAddToSet, page)
);
},
{ page }
);
});
test("expand gene and brush", async ({ page }) => {
await setup(option, page);
Expand Down Expand Up @@ -805,20 +825,23 @@ for (const option of options) {
/**
* (thuang): Test is flaky, so we need to retry until it passes
*/
await tryUntil(async () => {
if (option.withSubset) return;

await setup(option, page);
await createGeneset(setToRemoveFrom, page);
await addGeneToSetAndExpand(setToRemoveFrom, geneToRemove, page);
await removeGene(geneToRemove, page);
await assertGeneDoesNotExist(geneToRemove, page);
await assertUndoRedo(
page,
async () => assertGeneExistsInGeneset(geneToRemove, page),
async () => assertGeneDoesNotExist(geneToRemove, page)
);
}, { page });
await tryUntil(
async () => {
if (option.withSubset) return;

await setup(option, page);
await createGeneset(setToRemoveFrom, page);
await addGeneToSetAndExpand(setToRemoveFrom, geneToRemove, page);
await removeGene(geneToRemove, page);
await assertGeneDoesNotExist(geneToRemove, page);
await assertUndoRedo(
page,
async () => assertGeneExistsInGeneset(geneToRemove, page),
async () => assertGeneDoesNotExist(geneToRemove, page)
);
},
{ page }
);
});
test("open gene info card and hide/remove", async ({ page }) => {
await setup(option, page);
Expand Down
Loading

0 comments on commit 8fa8dc4

Please sign in to comment.