chore: test fixes

Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Apr 14, 2023 · 03f368c · 03f368c
1 parent 6662131
commit 03f368c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionTab.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionTab.tsx
@@ -6,6 +6,7 @@ import { NodeExecutionsTable } from '../Tables/NodeExecutionsTable';
 import { DetailsPanelContextProvider } from './DetailsPanelContext';
 import { ScaleProvider } from './Timeline/scaleContext';
 import { ExecutionTimelineContainer } from './Timeline/ExecutionTimelineContainer';
+import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
 
 const useStyles = makeStyles((theme: Theme) => ({
   nodesContainer: {
@@ -24,12 +25,15 @@ interface ExecutionTabProps {
 /** Contains the available ways to visualize the nodes of a WorkflowExecution */
 export const ExecutionTab: React.FC<ExecutionTabProps> = ({ tabType }) => {
   const styles = useStyles();
+  const filterState = useNodeExecutionFiltersState();
 
   return (
     <ScaleProvider>
       <DetailsPanelContextProvider>
         <div className={styles.nodesContainer}>
-          {tabType === tabs.nodes.id && <NodeExecutionsTable />}
+          {tabType === tabs.nodes.id && (
+            <NodeExecutionsTable filterState={filterState}/>
+          )}
           {tabType === tabs.graph.id && <WorkflowGraph />}
           {tabType === tabs.timeline.id && <ExecutionTimelineContainer />}
         </div>

diff --git a/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx b/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx
@@ -21,7 +21,7 @@ import {
   useNodeExecutionsById,
 } from '../contextProvider/NodeExecutionDetails';
 import { NodeExecutionRow } from './NodeExecutionRow';
-import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
+import { ExecutionFiltersState, useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
 import { searchNode } from '../utils';
 import { nodeExecutionPhaseConstants } from '../constants';
 import { NodeExecutionDynamicProvider } from '../contextProvider/NodeExecutionDetails/NodeExecutionDynamicProvider';
@@ -115,19 +115,18 @@ const isPhaseFilter = (appliedFilters: FilterOperation[]) => {
  * NodeExecutions are expandable and will potentially render a list of child
  * TaskExecutions
  */
-export const NodeExecutionsTable: React.FC<{}> = () => {
+export const NodeExecutionsTable: React.FC<{filterState: ExecutionFiltersState}> = ({filterState}) => {
   const commonStyles = useCommonStyles();
   const tableStyles = useExecutionTableStyles();
   const { execution } = useContext(ExecutionContext);
 
-  const filterState = useNodeExecutionFiltersState();
+  const { appliedFilters } = filterState;
   const { nodeExecutionsById, initialDNodes: initialNodes } =
     useNodeExecutionsById();
 
   // query to get filtered data to narrow down Table outputs
   const { nodeExecutionsQuery: filteredNodeExecutionsQuery } =
     useExecutionNodeViewsStatePoll(execution, filterState?.appliedFilters);
-  const { appliedFilters } = useNodeExecutionFiltersState();
 
   const [showNodes, setShowNodes] = useState<dNode[]>([]);
   const [initialFilteredNodes, setInitialFilteredNodes] = useState<

diff --git a/packages/console/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx b/packages/console/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx
@@ -1,7 +1,5 @@
 import { render, waitFor } from '@testing-library/react';
-import {
-  NodeExecutionDetailsContextProvider,
-} from 'components/Executions/contextProvider/NodeExecutionDetails';
+import { NodeExecutionDetailsContextProvider } from 'components/Executions/contextProvider/NodeExecutionDetails';
 import {
   ExecutionContext,
   WorkflowNodeExecutionsContext,
@@ -113,7 +111,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     });
   });
 
-  const renderTable = ({ nodeExecutionsById, initialNodes }) =>
+  const renderTable = ({ nodeExecutionsById, initialNodes, filterState }) =>
     render(
       <QueryClientProvider client={queryClient}>
         <ExecutionContext.Provider
@@ -137,17 +135,22 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
                 shouldUpdate: false,
               }}
             >
-              <NodeExecutionsTable />
+              <NodeExecutionsTable filterState={filterState} />
             </WorkflowNodeExecutionsContext.Provider>
           </NodeExecutionDetailsContextProvider>
         </ExecutionContext.Provider>
       </QueryClientProvider>,
     );
 
   it('renders empty content when there are no nodes', async () => {
+    const filterState = {
+      filters: [],
+      appliedFilters: [],
+    };
     const { queryByText, queryByTestId } = renderTable({
       initialNodes: [],
       nodeExecutionsById: {},
+      filterState,
     });
 
     await waitFor(() => queryByText(noExecutionsFoundString));
@@ -159,10 +162,14 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
   it('renders NodeExecutionRows with initialNodes when no filteredNodes were provided', async () => {
     const phases = [NodeExecutionPhase.FAILED, NodeExecutionPhase.SUCCEEDED];
     const nodeExecutionsById = mockExecutionsById(2, phases);
-
+    const filterState = {
+      filters: [],
+      appliedFilters: [],
+    };
     const { queryAllByTestId } = renderTable({
       initialNodes,
       nodeExecutionsById,
+      filterState,
     });
 
     await waitFor(() => {
@@ -184,6 +191,10 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const phases = [NodeExecutionPhase.FAILED, NodeExecutionPhase.SUCCEEDED];
     const nodeExecutionsById = mockExecutionsById(2, phases);
     const filteredNodeExecutions = nodeExecutionsById['n1'];
+    const filterState = {
+      filters: [],
+      appliedFilters: [],
+    };
     listNodeExecutions.mockImplementation(() => {
       return Promise.resolve({
         entities: filteredNodeExecutions,
@@ -193,6 +204,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const { queryAllByTestId } = renderTable({
       initialNodes,
       nodeExecutionsById,
+      filterState,
     });
 
     await waitFor(() =>
@@ -222,11 +234,10 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const appliedFilters = [
       { key: 'phase', operation: 'value_in', value: ['FAILED'] },
     ];
-    mockUseNodeExecutionFiltersState.mockReturnValue({
+    const filterState = {
       filters: [],
       appliedFilters,
-    });
-
+    };
     const phases = [NodeExecutionPhase.FAILED, NodeExecutionPhase.SUCCEEDED];
     const nodeExecutionsById = mockExecutionsById(2, phases);
     const filteredNodeExecutions = [nodeExecutionsById['n1']];
@@ -239,6 +250,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const { queryAllByTestId, debug, container } = renderTable({
       initialNodes,
       nodeExecutionsById,
+      filterState,
     });
 
     await waitFor(() =>
@@ -263,7 +275,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     expect(ids).toHaveLength(filteredNodeExecutions.length);
     const renderedPhases = queryAllByTestId('node-execution-col-phase');
     expect(renderedPhases).toHaveLength(filteredNodeExecutions.length);
-    debug(container)
+    debug(container);
 
     for (const i in filteredNodeExecutions) {
       expect(ids[i]).toHaveTextContent(filteredNodeExecutions[i].id?.nodeId);
@@ -276,13 +288,14 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const appliedFilters = [
       { key: 'phase', operation: 'value_in', value: ['FAILED', 'SUCCEEDED'] },
     ];
-    mockUseNodeExecutionFiltersState.mockReturnValue({
+    const filterState = {
       filters: [],
       appliedFilters,
-    });
+    };
 
     const nodeExecutionsById = mockExecutionsById(2, phases);
-    const filteredNodeExecutions: NodeExecution[] = Object.values(nodeExecutionsById);
+    const filteredNodeExecutions: NodeExecution[] =
+      Object.values(nodeExecutionsById);
     listNodeExecutions.mockImplementation(() => {
       return Promise.resolve({
         entities: filteredNodeExecutions,
@@ -292,6 +305,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     const { queryAllByTestId } = renderTable({
       initialNodes,
       nodeExecutionsById,
+      filterState,
     });
 
     await waitFor(() =>