fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-04 18:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

1510-smoke-test (#1548)

Browse Source 
* 1510-smoke-test

* config default

* update tests

* update test config

* fix linter errors

* more comments

* address comments

* use npm install in push_tests.yml

* use environment.default.json

* adding docs

* Take care of @mweiden's nits

* Save screenshots in the __tests__/screenshots/ directory

* typo

* docs

* Add chart tests (#1580)

* merge tests

* check if bin creation returned null before rendering charts (#1576)

* check if bin creation returned null before rendering charts

* refactor chart rendering into functions (#1577)

* little fixes from PR

* reintroduce fix to check for null values

* change getAllByClass to return element

* slice instead

* new stackedbar test

* feedback-1573-test (#1579)

* feedback-1573-test

* enable whole test set

* revert tests

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

* tweak test to actually render chart

* include snapshot

* remove async

* fix getAllHistograms

* properly grab id

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

Co-authored-by: Matt Weiden <538456+mweiden@users.noreply.github.com>
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
This commit is contained in:
Timmy Huang
2020-06-24 11:45:39 -07:00
committed by GitHub
co-authored by Matt Weiden Severiano Badajoz
parent e22e671f10
commit 83376627e8
42 changed files with 1388 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/__tests__/e2e/e2e.test.js
+280 -139
View File
@@ -1,62 +1,69 @@
/*
Smoke test suite that will be run in Travis CI
Tests included in this file are expected to be relatively stable and test core features
/**
* Smoke test suite that will be run in Travis CI
* Tests included in this file are expected to be relatively stable and test core features
*/
import { appUrlBase, DATASET, DEBUG } from "./config";
import setupTestBrowser from "./testBrowser";
/* eslint-disable no-await-in-loop -- await in loop is needed to emulate sequential user actions */
import { appUrlBase, DATASET } from "./config";
import { datasets } from "./data";
let browser;
let page;
let utils;
let cxgActions;
import {
clickOn,
getAllByClass,
getElementCoordinates,
getOneElementInnerHTML,
getTestId,
goToPage,
typeInto,
waitByID,
} from "./puppeteerUtils";
import {
addGeneToSearch,
bulkAddGenes,
calcDragCoordinates,
clip,
drag,
getAllCategoriesAndCounts,
getAllHistograms,
getCellSetCount,
runDiffExp,
selectCategory,
subset,
} from "./cellxgeneActions";
const data = datasets[DATASET];
beforeAll(async () => {
[browser, page, utils, cxgActions] = await setupTestBrowser();
});
beforeEach(async () => {
await page.goto(appUrlBase);
});
afterAll(() => {
if (!DEBUG && browser !== undefined) browser.close();
});
describe("did launch", () => {
test("page launched", async () => {
const element = await utils.getOneElementInnerHTML(
"[data-testid='header']"
);
expect(element).toMatchSnapshot();
});
await goToPage(appUrlBase);
test("terms of service, if they are there", async () => {
try {
await utils.clickOn("tos-cookies-accept", { timeout: 3000 });
} catch {
console.warn("No terms of service footer detected.");
}
page.waitFor(50); // give the footer a chance to disappear
const result = await page.$("[data-testid='tos-cookies-accept']");
expect(result).toBeNull();
const element = await getOneElementInnerHTML(getTestId("header"));
expect(element).toMatchSnapshot();
});
});
describe("metadata loads", () => {
test("categories and values from dataset appear", async () => {
for (const label in data.categorical) {
const elem = await utils.getOneElementInnerHTML(
`[data-testid="category-${label}"]`
await goToPage(appUrlBase);
for (const label of Object.keys(data.categorical)) {
const element = await getOneElementInnerHTML(
getTestId(`category-${label}`)
);
expect(elem).toMatchSnapshot();
await utils.clickOn(`${label}:category-expand`);
const categories = await cxgActions.getAllCategoriesAndCounts(label);
expect(element).toMatchSnapshot();
await clickOn(`${label}:category-expand`);
const categories = await getAllCategoriesAndCounts(label);
expect(Object.keys(categories)).toMatchObject(
Object.keys(data.categorical[label])
);
expect(Object.values(categories)).toMatchObject(
Object.values(data.categorical[label])
);
@@ -64,74 +71,98 @@ describe("metadata loads", () => {
});
test("continuous data appears", async () => {
for (const label in data.continuous) {
await utils.waitByID(`histogram-${label}`);
await goToPage(appUrlBase);
for (const label of Object.keys(data.continuous)) {
await waitByID(`histogram-${label}`);
}
});
});
describe("cell selection", () => {
test("selects all cells cellset 1", async () => {
const cellCount = await cxgActions.cellSet(1);
await goToPage(appUrlBase);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(data.dataframe.nObs);
});
test("selects all cells cellset 2", async () => {
const cellCount = await cxgActions.cellSet(2);
await goToPage(appUrlBase);
const cellCount = await getCellSetCount(2);
expect(cellCount).toBe(data.dataframe.nObs);
});
test("selects cells via lasso", async () => {
await goToPage(appUrlBase);
for (const cellset of data.cellsets.lasso) {
const cellset1 = await cxgActions.calcDragCoordinates(
const cellset1 = await calcDragCoordinates(
"layout-graph",
cellset["coordinates-as-percent"]
);
await cxgActions.drag("layout-graph", cellset1.start, cellset1.end, true);
const cellCount = await cxgActions.cellSet(1);
await drag("layout-graph", cellset1.start, cellset1.end, true);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(cellset.count);
}
});
test("selects cells via categorical", async () => {
await goToPage(appUrlBase);
for (const cellset of data.cellsets.categorical) {
await utils.clickOn(`${cellset.metadata}:category-expand`);
await utils.clickOn(`${cellset.metadata}:category-select`);
for (const val of cellset.values) {
await utils.clickOn(
`categorical-value-select-${cellset.metadata}-${val}`
);
await clickOn(`${cellset.metadata}:category-expand`);
await clickOn(`${cellset.metadata}:category-select`);
for (const value of cellset.values) {
await clickOn(`categorical-value-select-${cellset.metadata}-${value}`);
}
const cellCount = await cxgActions.cellSet(1);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(cellset.count);
}
});
test("selects cells via continuous", async () => {
await goToPage(appUrlBase);
for (const cellset of data.cellsets.continuous) {
const histBrushableAreaId = `histogram-${cellset.metadata}-plot-brushable-area`;
const coords = await cxgActions.calcDragCoordinates(
const coords = await calcDragCoordinates(
histBrushableAreaId,
cellset["coordinates-as-percent"]
);
await cxgActions.drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await cxgActions.cellSet(1);
await drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(cellset.count);
}
});
});
describe("gene entry", () => {
test("search for single gene", async () =>
cxgActions.addGeneToSearch(data.genes.search));
test("search for single gene", async () => {
await goToPage(appUrlBase);
addGeneToSearch(data.genes.search);
});
test("bulk add genes", async () => {
await goToPage(appUrlBase);
const testGenes = data.genes.bulkadd;
await cxgActions.bulkAddGenes(testGenes);
const allHistograms = await cxgActions.getAllHistograms(
await bulkAddGenes(testGenes);
const allHistograms = await getAllHistograms(
"histogram-user-gene",
testGenes
);
expect(allHistograms).toEqual(expect.arrayContaining(testGenes));
expect(allHistograms).toHaveLength(testGenes.length);
});
@@ -139,31 +170,42 @@ describe("gene entry", () => {
describe("differential expression", () => {
test("selects cells, saves them and performs diffexp", async () => {
await cxgActions.runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const allHistograms = await cxgActions.getAllHistograms(
await goToPage(appUrlBase);
await runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const allHistograms = await getAllHistograms(
"histogram-diffexp",
data.diffexp["gene-results"]
);
expect(allHistograms).toEqual(
expect.arrayContaining(data.diffexp["gene-results"])
);
expect(allHistograms).toHaveLength(data.diffexp["gene-results"].length);
});
});
describe("subset", () => {
test("subset - cell count matches", async () => {
await goToPage(appUrlBase);
for (const select of data.subset.cellset1) {
if (select.kind === "categorical") {
await cxgActions.selectCategory(select.metadata, select.values, true);
await selectCategory(select.metadata, select.values, true);
}
}
await utils.clickOn("subset-button");
for (const label in data.subset.categorical) {
const categories = await cxgActions.getAllCategoriesAndCounts(label);
await clickOn("subset-button");
for (const label of Object.keys(data.subset.categorical)) {
const categories = await getAllCategoriesAndCounts(label);
expect(Object.keys(categories)).toMatchObject(
Object.keys(data.subset.categorical[label])
);
expect(Object.values(categories)).toMatchObject(
Object.values(data.subset.categorical[label])
);
@@ -171,79 +213,99 @@ describe("subset", () => {
});
test("lasso after subset", async () => {
await goToPage(appUrlBase);
for (const select of data.subset.cellset1) {
if (select.kind === "categorical") {
await cxgActions.selectCategory(select.metadata, select.values, true);
await selectCategory(select.metadata, select.values, true);
}
}
await utils.clickOn("subset-button");
const lassoSelection = await cxgActions.calcDragCoordinates(
await clickOn("subset-button");
const lassoSelection = await calcDragCoordinates(
"layout-graph",
data.subset.lasso["coordinates-as-percent"]
);
await cxgActions.drag(
"layout-graph",
lassoSelection.start,
lassoSelection.end,
true
);
const cellCount = await cxgActions.cellSet(1);
await drag("layout-graph", lassoSelection.start, lassoSelection.end, true);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(data.subset.lasso.count);
});
test("undo selection appends the top diff exp genes to user defined genes", async () => {
await goToPage(appUrlBase);
const userDefinedGenes = data.genes.bulkadd;
const diffExpGenes = data.diffexp["gene-results"];
await cxgActions.bulkAddGenes(userDefinedGenes);
const userDefinedHistograms = await cxgActions.getAllHistograms(
await bulkAddGenes(userDefinedGenes);
const userDefinedHistograms = await getAllHistograms(
"histogram-user-gene",
userDefinedGenes
);
expect(userDefinedHistograms).toEqual(
expect.arrayContaining(userDefinedGenes)
);
await cxgActions.subset({ x1: 0.15, y1: 0.1, x2: 0.98, y2: 0.98 });
await cxgActions.runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const diffExpHistograms = await cxgActions.getAllHistograms(
await subset({ x1: 0.15, y1: 0.1, x2: 0.98, y2: 0.98 });
await runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const diffExpHistograms = await getAllHistograms(
"histogram-diffexp",
diffExpGenes
);
expect(diffExpHistograms).toEqual(expect.arrayContaining(diffExpGenes));
await utils.clickOn("reset-subset-button");
await clickOn("reset-subset-button");
const expected = [].concat(userDefinedGenes, diffExpGenes);
const userDefinedHistogramsAfterSubset = await cxgActions.getAllHistograms(
const userDefinedHistogramsAfterSubset = await getAllHistograms(
"histogram-user-gene",
expected
);
expect(userDefinedHistogramsAfterSubset).toEqual(
expect.arrayContaining(expected)
);
});
test("subset selection appends the top diff exp genes to user defined genes", async () => {
await goToPage(appUrlBase);
const userDefinedGenes = data.genes.bulkadd;
const diffExpGenes = data.diffexp["gene-results"];
await cxgActions.bulkAddGenes(userDefinedGenes);
const userDefinedHistograms = await cxgActions.getAllHistograms(
await bulkAddGenes(userDefinedGenes);
const userDefinedHistograms = await getAllHistograms(
"histogram-user-gene",
userDefinedGenes
);
expect(userDefinedHistograms).toEqual(
expect.arrayContaining(userDefinedGenes)
);
await cxgActions.subset({ x1: 0.15, y1: 0.1, x2: 0.98, y2: 0.98 });
await cxgActions.runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const diffExpHistograms = await cxgActions.getAllHistograms(
await subset({ x1: 0.15, y1: 0.1, x2: 0.98, y2: 0.98 });
await runDiffExp(data.diffexp.cellset1, data.diffexp.cellset2);
const diffExpHistograms = await getAllHistograms(
"histogram-diffexp",
diffExpGenes
);
expect(diffExpHistograms).toEqual(expect.arrayContaining(diffExpGenes));
await cxgActions.subset({ x1: 0.16, y1: 0.11, x2: 0.97, y2: 0.97 });
await subset({ x1: 0.16, y1: 0.11, x2: 0.97, y2: 0.97 });
const expected = [].concat(userDefinedGenes, diffExpGenes);
const userDefinedHistogramsAfterSubset = await cxgActions.getAllHistograms(
const userDefinedHistogramsAfterSubset = await getAllHistograms(
"histogram-user-gene",
expected
);
expect(userDefinedHistogramsAfterSubset).toEqual(
expect.arrayContaining(expected)
);
@@ -252,38 +314,51 @@ describe("subset", () => {
describe("scatter plot", () => {
test("scatter plot appears", async () => {
await cxgActions.bulkAddGenes(Object.values(data.scatter.genes));
await utils.clickOn(`plot-x-${data.scatter.genes.x}`);
await utils.clickOn(`plot-y-${data.scatter.genes.y}`);
await utils.waitByID("scatterplot");
await goToPage(appUrlBase);
await bulkAddGenes(Object.values(data.scatter.genes));
await clickOn(`plot-x-${data.scatter.genes.x}`);
await clickOn(`plot-y-${data.scatter.genes.y}`);
await waitByID("scatterplot");
});
});
describe("clipping", () => {
test("clip continuous", async () => {
await cxgActions.clip(data.clip.min, data.clip.max);
await goToPage(appUrlBase);
await clip(data.clip.min, data.clip.max);
const histBrushableAreaId = `histogram-${data.clip.metadata}-plot-brushable-area`;
const coords = await cxgActions.calcDragCoordinates(
const coords = await calcDragCoordinates(
histBrushableAreaId,
data.clip["coordinates-as-percent"]
);
await cxgActions.drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await cxgActions.cellSet(1);
await drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(data.clip.count);
});
test("clip gene", async () => {
await utils.typeInto("gene-search", data.clip.gene);
await goToPage(appUrlBase);
await typeInto("gene-search", data.clip.gene);
await page.keyboard.press("Enter");
await page.waitForSelector(`[data-testid='histogram-${data.clip.gene}']`);
await cxgActions.clip(data.clip.min, data.clip.max);
await clip(data.clip.min, data.clip.max);
const histBrushableAreaId = `histogram-${data.clip.gene}-plot-brushable-area`;
const coords = await cxgActions.calcDragCoordinates(
const coords = await calcDragCoordinates(
histBrushableAreaId,
data.clip["coordinates-as-percent"]
);
await cxgActions.drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await cxgActions.cellSet(1);
await drag(histBrushableAreaId, coords.start, coords.end);
const cellCount = await getCellSetCount(1);
expect(cellCount).toBe(data.clip["gene-cell-count"]);
});
});
@@ -291,85 +366,92 @@ describe("clipping", () => {
// interact with UI elements just that they do not break
describe("ui elements don't error", () => {
test("color by", async () => {
for (const label in data.categorical) {
await utils.clickOn(`colorby-${label}`);
}
for (const label in data.continuous) {
await utils.clickOn(`colorby-${label}`);
await goToPage(appUrlBase);
const allLabels = [
...Object.keys(data.categorical),
...Object.keys(data.continuous),
];
for (const label of allLabels) {
await clickOn(`colorby-${label}`);
}
});
test("color by for gene", async () => {
await utils.typeInto("gene-search", data.genes.search);
await goToPage(appUrlBase);
await typeInto("gene-search", data.genes.search);
await page.keyboard.press("Enter");
await page.waitForSelector(
`[data-testid='histogram-${data.genes.search}']`
);
await utils.clickOn(`colorby-${data.genes.search}`);
await clickOn(`colorby-${data.genes.search}`);
});
test("pan and zoom", async () => {
await utils.clickOn("mode-pan-zoom");
const panCoords = await cxgActions.calcDragCoordinates(
await goToPage(appUrlBase);
await clickOn("mode-pan-zoom");
const panCoords = await calcDragCoordinates(
"layout-graph",
data.pan["coordinates-as-percent"]
);
await cxgActions.drag(
"layout-graph",
panCoords.start,
panCoords.end,
false
);
await drag("layout-graph", panCoords.start, panCoords.end, false);
await page.evaluate("window.scrollBy(0, 1000);");
});
});
describe("centroid labels", () => {
test("labels are created", async () => {
await goToPage(appUrlBase);
const labels = Object.keys(data.categorical);
await utils.clickOn(`colorby-${labels[0]}`);
await utils.clickOn("centroid-label-toggle");
/* eslint-disable no-await-in-loop */
await clickOn(`colorby-${labels[0]}`);
await clickOn("centroid-label-toggle");
// Toggle colorby for each category and check to see if labels are generated
for (let i = 0, { length } = labels; i < length; i += 1) {
const label = labels[i];
// first label is already enabled
if (i !== 0) await utils.clickOn(`colorby-${label}`);
const generatedLabels = await utils.getAllByClass("centroid-label");
if (i !== 0) await clickOn(`colorby-${label}`);
const generatedLabels = await getAllByClass("centroid-label");
// Number of labels generated should be equal to size of the object
expect(generatedLabels).toHaveLength(
Object.keys(data.categorical[label]).length
);
}
/* eslint-enable no-await-in-loop */
});
});
describe("graph overlay", () => {
test("transform centroids correctly", async () => {
await goToPage(appUrlBase);
const category = Object.keys(data.categorical)[0];
await utils.clickOn(`colorby-${category}`);
await utils.clickOn("centroid-label-toggle");
await utils.clickOn("mode-pan-zoom");
const panCoords = await cxgActions.calcDragCoordinates(
await clickOn(`colorby-${category}`);
await clickOn("centroid-label-toggle");
await clickOn("mode-pan-zoom");
const panCoords = await calcDragCoordinates(
"layout-graph",
data.pan["coordinates-as-percent"]
);
const categoryValue = Object.keys(data.categorical[category])[0];
const initialCoordinates = await utils.getElementCoordinates(
const initialCoordinates = await getElementCoordinates(
`${categoryValue}-centroid-label`
);
await cxgActions.drag(
"layout-graph",
panCoords.start,
panCoords.end,
false
);
const terminalCoordinates = await utils.getElementCoordinates(
await drag("layout-graph", panCoords.start, panCoords.end, false);
const terminalCoordinates = await getElementCoordinates(
`${categoryValue}-centroid-label`
);
expect(terminalCoordinates[0] - initialCoordinates[0]).toBeCloseTo(
panCoords.end.x - panCoords.start.x
);
@@ -378,3 +460,62 @@ describe("graph overlay", () => {
);
});
});
test("pan zoom mode resets lasso selection", async () => {
await goToPage(appUrlBase);
const panzoomLasso = data.features.panzoom.lasso;
const lassoSelection = await calcDragCoordinates(
"layout-graph",
panzoomLasso["coordinates-as-percent"]
);
await drag("layout-graph", lassoSelection.start, lassoSelection.end, true);
await waitByID("lasso-element", { visible: true });
const initialCount = await getCellSetCount(1);
expect(initialCount).toBe(panzoomLasso.count);
await clickOn("mode-pan-zoom");
await clickOn("mode-lasso");
const modeSwitchCount = await getCellSetCount(1);
expect(modeSwitchCount).toBe(initialCount);
});
test("lasso moves after pan", async () => {
await goToPage(appUrlBase);
const panzoomLasso = data.features.panzoom.lasso;
const coordinatesAsPercent = panzoomLasso["coordinates-as-percent"];
const lassoSelection = await calcDragCoordinates(
"layout-graph",
coordinatesAsPercent
);
await drag("layout-graph", lassoSelection.start, lassoSelection.end, true);
await waitByID("lasso-element", { visible: true });
const initialCount = await getCellSetCount(1);
expect(initialCount).toBe(panzoomLasso.count);
await clickOn("mode-pan-zoom");
const panCoords = await calcDragCoordinates(
"layout-graph",
coordinatesAsPercent
);
await drag("layout-graph", panCoords.start, panCoords.end, false);
await clickOn("mode-lasso");
const panCount = await getCellSetCount(2);
expect(panCount).toBe(initialCount);
});
/* eslint-enable no-await-in-loop -- await in loop is needed to emulate sequential user actions */