Merge pull request #760 from hms-dbmi-cellenics/add-heatmap-select-data

[BIOMAGE-2018] - Add heatmap select data

src/__test__/components/plots/styling/frequency/SelectCellSets.test.jsx

@@ -20,7 +20,7 @@ import { initialPlotConfigStates } from 'redux/reducers/componentConfig/initialS
 
 import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
 
-const mockOnUpdate = jest.fn().mockImplementation(() => {});
+const mockOnUpdate = jest.fn().mockImplementation(() => { });
 
 const defaultProps = {
   onUpdate: mockOnUpdate,
@@ -80,7 +80,7 @@ describe('Select cell sets tests ', () => {
       fireEvent.change(dropdown, { target: { value: 'Scratchpad' } });
     });
 
-    const option1 = screen.getByText('Scratchpad');
+    const option1 = screen.getByText('Custom cell sets');
 
     await act(async () => {
       fireEvent.click(option1);

src/__test__/pages/experiments/[experimentId]/plots-and-tables/heatmap/index.test.jsx

@@ -3,14 +3,14 @@ import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
 import _ from 'lodash';
 import Heatmap from 'pages/experiments/[experimentId]/plots-and-tables/heatmap/index';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import { loadBackendStatus } from 'redux/actions/backendStatus';
+import { loadPlotConfig, updatePlotConfig } from 'redux/actions/componentConfig';
 import { makeStore } from 'redux/store';
-import { seekFromS3 } from 'utils/work/seekWorkResponse';
-import expressionDataFAKEGENE from '__test__/data/gene_expression_FAKEGENE.json';
-import markerGenesData2 from '__test__/data/marker_genes_2.json';
-import markerGenesData5 from '__test__/data/marker_genes_5.json';
+
+import cellSetsWithScratchpad from '__test__/data/cell_sets_with_scratchpad.json';
 
 import preloadAll from 'jest-next-dynamic';
 
@@ -29,32 +29,25 @@ jest.mock('react-resize-detector', () => (props) => {
   return children({ width: 800, height: 800 });
 });
 
-// Mock hash so we can control the ETag that is produced by hash.MD5 when fetching work requests
-// EtagParams is the object that's passed to the function which generates ETag in fetchWork
-jest.mock('object-hash', () => {
-  const objectHash = jest.requireActual('object-hash');
-  const mockWorkResultETag = jest.requireActual('__test__/test-utils/mockWorkResultETag').default;
-
-  const mockWorkRequestETag = (ETagParams) => `${ETagParams.body.nGenes}-marker-genes`;
-  const mockGeneExpressionETag = (ETagParams) => `${ETagParams.missingGenesBody.genes.join('-')}-expression`;
-
-  return mockWorkResultETag(objectHash, mockWorkRequestETag, mockGeneExpressionETag);
+jest.mock('redux/actions/componentConfig', () => {
+  const originalModule = jest.requireActual('redux/actions/componentConfig');
+  const { UPDATE_CONFIG } = jest.requireActual('redux/actionTypes/componentConfig');
+
+  return {
+    ...originalModule,
+    updatePlotConfig: jest.fn((plotUuid, configChanges) => (dispatch) => {
+      dispatch({
+        type: UPDATE_CONFIG,
+        payload:
+          { plotUuid, configChanges },
+      });
+    }),
+  };
 });
 
-jest.mock('utils/work/seekWorkResponse', () => ({
-  __esModule: true,
-  dispatchWorkRequest: jest.fn(() => true),
-  seekFromS3: jest.fn(),
-}));
-
-const mockWorkerResponses = {
-  '5-marker-genes': markerGenesData5,
-  '2-marker-genes': markerGenesData2,
-  'FAKEGENE-expression': expressionDataFAKEGENE,
-};
-
 const experimentId = fake.EXPERIMENT_ID;
 const plotUuid = 'heatmapPlotMain';
+const plotType = 'heatmap';
 let storeState = null;
 
 const customAPIResponses = {
@@ -91,11 +84,6 @@ describe('Heatmap plot', () => {
   beforeEach(async () => {
     jest.clearAllMocks();
 
-    seekFromS3
-      .mockReset()
-      .mockImplementationOnce(() => null)
-      .mockImplementationOnce((Etag) => mockWorkerResponses[Etag]);
-
     enableFetchMocks();
     fetchMock.resetMocks();
     fetchMock.doMock();
@@ -105,11 +93,13 @@ describe('Heatmap plot', () => {
 
     // Set up state for backend status
     await storeState.dispatch(loadBackendStatus(experimentId));
+    await storeState.dispatch(loadPlotConfig(experimentId, plotUuid, plotType));
   });
 
   it('Loads controls and elements', async () => {
     await renderHeatmapPage(storeState);
 
+    expect(screen.getByText(/Select data/i)).toBeInTheDocument();
     expect(screen.getByText(/Gene selection/i)).toBeInTheDocument();
     expect(screen.getByText(/Metadata tracks/i)).toBeInTheDocument();
     expect(screen.getByText(/Group by/i)).toBeInTheDocument();
@@ -124,4 +114,58 @@ describe('Heatmap plot', () => {
 
     expect(screen.getByText(/Add some genes to this heatmap to get started/i)).toBeInTheDocument();
   });
+
+  it('Changing clusters updates the plot data', async () => {
+    await renderHeatmapPage(storeState);
+
+    // Open the Select Data panel
+    userEvent.click(screen.getByText(/Select data/i));
+
+    // Change from Louvain to Custom cell sets
+    userEvent.click(screen.getByText(/Louvain/i));
+    userEvent.click(screen.getByText(/Custom cell sets/i), null, { skipPointerEventsCheck: true });
+
+    expect(updatePlotConfig).toHaveBeenCalled();
+  });
+
+  it('It shows an informative text if there are cell sets to show', async () => {
+    await renderHeatmapPage(storeState);
+
+    // Open the Select Data panel
+    userEvent.click(screen.getByText(/Select data/i));
+
+    // Change from Louvain to Custom cell sets
+    userEvent.click(screen.getByText(/Louvain/i));
+    userEvent.click(screen.getByText(/Custom cell sets/i), null, { skipPointerEventsCheck: true });
+
+    expect(updatePlotConfig).toHaveBeenCalled();
+    expect(screen.getByText(/There are no custom cell sets to show/i)).toBeInTheDocument();
+  });
+
+  it('Shows the plot if there are custom clusters to show', async () => {
+    const withScratchpadResponse = _.merge(
+      generateDefaultMockAPIResponses(experimentId),
+      customAPIResponses,
+      {
+        [`experiments/${experimentId}/cellSets`]: () => promiseResponse(
+          JSON.stringify(cellSetsWithScratchpad),
+        ),
+      },
+    );
+
+    fetchMock.mockIf(/.*/, mockAPI(withScratchpadResponse));
+    await storeState.dispatch(loadPlotConfig(experimentId, plotUuid, plotType));
+
+    await renderHeatmapPage(storeState);
+
+    // Open the Select Data panel
+    userEvent.click(screen.getByText(/Select data/i));
+
+    // Change from Louvain to Custom cell sets
+    userEvent.click(screen.getByText(/Louvain/i));
+    userEvent.click(screen.getByText(/Custom cell sets/i), null, { skipPointerEventsCheck: true });
+
+    expect(updatePlotConfig).toHaveBeenCalled();
+    expect(screen.queryByText(/There are no custom cell sets to show/i)).toBeNull();
+  });
 });