gene crud

backend/test/fixtures/pbmc3k-genesets.csv

@@ -15,4 +15,7 @@ summary test,,AATF,
 summary test,,F5,
 summary test,,PIGU,
 geneset_to_delete,,,
-geneset_to_edit,,,
+geneset_to_edit,,,
+fill_this_geneset,,RER1,
+empty_this_geneset,,SIK1,
+brush_this_gene,,SIK1,

client/__tests__/e2e/cellxgeneActions.js

@@ -160,14 +160,6 @@ export async function expandCategory(category) {
   if (notExpanded) await clickOn(`${category}:category-expand`);
 }
 
-export async function expandGeneset(genesetName) {
-  const expand = await waitByID(`${genesetName}:geneset-expand`);
-  const notExpanded = await expand.$(
-    "[data-testclass='geneset-expand-is-not-expanded']"
-  );
-  if (notExpanded) await clickOn(`${genesetName}:geneset-expand`);
-}
-
 export async function clip(min = 0, max = 100) {
   await clickOn("visualization-settings");
   await clearInputAndTypeInto("clip-min-input", min);
@@ -184,6 +176,20 @@ export async function createCategory(categoryName) {
   await clickOn("submit-category");
 }
 
+/* 
+
+  GENESET 
+
+*/
+
+export async function expandGeneset(genesetName) {
+  const expand = await waitByID(`${genesetName}:geneset-expand`);
+  const notExpanded = await expand.$(
+    "[data-testclass='geneset-expand-is-not-expanded']"
+  );
+  if (notExpanded) await clickOn(`${genesetName}:geneset-expand`);
+}
+
 export async function createGeneset(genesetName) {
   await clickOnUntil("open-create-geneset-dialog", async () => {
     await expect(page).toMatchElement(getTestId("create-geneset-input"));
@@ -235,6 +241,54 @@ export async function assertGenesetExists(genesetName) {
   return expect(result).toBe(genesetName);
 }
 
+/* 
+
+  GENE
+
+*/
+
+export async function addGeneToSet(genesetName, geneToAddToSet) {
+  const submitButton = `${genesetName}:submit-gene`;
+
+  await clickOn(`${genesetName}:add-new-gene-to-geneset`);
+  await typeInto("add-genes", geneToAddToSet);
+  await clickOn(submitButton);
+}
+
+export async function removeGene(geneSymbol) {
+  const targetId = `delete-from-geneset:${geneSymbol}`;
+
+  await clickOn(targetId);
+
+  await waitByClass("autosave-complete");
+}
+
+export async function assertGeneExistsInGeneset(geneSymbol) {
+  const handle = await waitByID(`${geneSymbol}:gene-label`);
+
+  const result = await handle.evaluate((node) => {
+    return node.getAttribute("aria-label");
+  });
+
+  return expect(result).toBe(geneSymbol);
+}
+
+export async function assertGeneDoesNotExist(geneSymbol) {
+  const result = await isElementPresent(getTestId(`${geneSymbol}:gene-label`));
+
+  await expect(result).toBe(false);
+}
+
+export async function expandGene(geneSymbol) {
+  await clickOn(`maximize-${geneSymbol}`);
+}
+
+/* 
+
+  CATEGORY 
+
+*/
+
 export async function duplicateCategory(categoryName) {
   await clickOn("open-annotation-dialog");
 

client/__tests__/e2e/e2eAnnotations.test.js

@@ -34,21 +34,42 @@ import {
   getCellSetCount,
   expandGeneset,
   editGenesetName,
+  addGeneToSet,
+  assertGeneExistsInGeneset,
+  removeGene,
+  assertGeneDoesNotExist,
+  expandGene,
 } from "./cellxgeneActions";
 
 const data = datasets[DATASET];
 
 const perTestCategoryName = "TEST-CATEGORY";
 const perTestLabelName = "TEST-LABEL";
+
+// geneset CRUD
 const genesetToDeleteName = "geneset_to_delete";
 const preExistingGenesetName = "fifth_dataset";
 const meanExpressionBrushGenesetName = "second_gene_set";
 const meanExpressionBrushCellsSelected = "557";
+
 // initial text, the text we type in, the result
 const editableGenesetName = "geneset_to_edit";
 const editText = "_111";
 const newGenesetName = "geneset_to_edit_111";
 
+// add gene to set
+const geneToAddToSet = "RER1";
+const setToAddGeneTo = "fill_this_geneset";
+
+// remove gene from set
+const geneToRemove = "SIK1";
+const setToRemoveFrom = "empty_this_geneset";
+
+// brush a gene
+const geneToBrush = "SIK1";
+const brushThisGeneGeneset = "brush_this_gene";
+const geneBrushedCellCount = "109";
+
 async function setup(config) {
   await goToPage(appUrlBase);
 
@@ -63,13 +84,15 @@ async function setup(config) {
   await waitByClass("autosave-complete");
 }
 
-describe("geneSET crud operations and interactions", (config = {}) => {
+describe("geneSET crud operations and interactions", () => {
   test("static pre existing genesets load from csv, expand", async () => {
-    await setup(config);
+    await goToPage(appUrlBase);
+
     await assertGenesetExists(preExistingGenesetName);
   });
   test("brush on geneset mean", async () => {
-    await setup(config);
+    await goToPage(appUrlBase);
+
     await expandGeneset(meanExpressionBrushGenesetName);
 
     const histBrushableAreaId = `histogram-${meanExpressionBrushGenesetName}-plot-brushable-area`;
@@ -88,7 +111,7 @@ describe("geneSET crud operations and interactions", (config = {}) => {
     expect(cellCount).toBe(meanExpressionBrushCellsSelected);
   });
   test("create a new geneset", async () => {
-    await setup(config);
+    await goToPage(appUrlBase);
 
     const genesetName = `test-geneset-foo-123`;
     await assertGenesetDoesNotExist(genesetName);
@@ -97,22 +120,50 @@ describe("geneSET crud operations and interactions", (config = {}) => {
     await assertGenesetExists(genesetName);
   });
   test("edit geneset name", async () => {
-    await setup(config);
+    await goToPage(appUrlBase);
+
     await editGenesetName(editableGenesetName, editText);
     await assertGenesetExists(newGenesetName);
   });
   test("delete a geneset", async () => {
-    await setup(config);
+    await goToPage(appUrlBase);
+
     await deleteGeneset(genesetToDeleteName);
   });
 });
 
-// describe("GENE crud operations and interactions", () => {
-//   test("add a gene to geneset", async () => {});
-//   test("color by gene", async () => {});
-//   test("expand gene and brush", async () => {});
-//   test("delete gene from geneset", async () => {});
-// });
+describe("GENE crud operations and interactions", () => {
+  test("add a gene to geneset", async () => {
+    await goToPage(appUrlBase);
+
+    await addGeneToSet(setToAddGeneTo, geneToAddToSet);
+    await expandGeneset(setToAddGeneTo);
+    await assertGeneExistsInGeneset(geneToAddToSet);
+  });
+  test("expand gene and brush", async () => {
+    await goToPage(appUrlBase);
+    await expandGeneset(brushThisGeneGeneset);
+    await expandGene(geneToBrush);
+    const histBrushableAreaId = `histogram-${geneToBrush}-plot-brushable-area`;
+
+    const coords = await calcDragCoordinates(histBrushableAreaId, {
+      x1: 0.25,
+      y1: 0.5,
+      x2: 0.55,
+      y2: 0.5,
+    });
+    await drag(histBrushableAreaId, coords.start, coords.end);
+    const cellCount = await getCellSetCount(1);
+    expect(cellCount).toBe(geneBrushedCellCount);
+  });
+  test("delete gene from geneset", async () => {
+    await goToPage(appUrlBase);
+
+    await expandGeneset(setToRemoveFrom);
+    await removeGene(geneToRemove);
+    await assertGeneDoesNotExist(geneToRemove);
+  });
+});
 
 describe.each([
   { withSubset: true, tag: "subset" },

client/src/components/geneExpression/gene.js

@@ -124,7 +124,7 @@ class Gene extends React.Component {
             <AnchorButton
               minimal
               small
-              data-testid={`delete-from-geneset-${gene}`}
+              data-testid={`delete-from-geneset:${gene}`}
               onClick={this.handleDeleteGeneFromSet}
               intent="none"
               style={{ fontWeight: 700, marginRight: 2 }}

client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js

@@ -58,7 +58,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
           inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{
-            "data-testid": `${geneset}:submit-label`,
+            "data-testid": `${geneset}:submit-gene`,
           }}
           title="Add genes to gene set"
           instruction={`Add gene to ${geneset}`}

client/src/components/geneExpression/menus/genesetMenus.js

@@ -76,8 +76,8 @@ class GenesetMenus extends React.PureComponent {
             >
               <Button
                 style={{ marginLeft: 0, marginRight: 2 }}
-                data-testclass="handleAddNewLabelToCategory"
-                data-testid={`${geneset}:add-new-label-to-category`}
+                data-testclass="handleAddNewGeneToGeneset"
+                data-testid={`${geneset}:add-new-gene-to-geneset`}
                 icon={<Icon icon="plus" iconSize={10} />}
                 onClick={this.activateAddGeneToGenesetMode}
                 small