chore(storage-browser): Update control unit tests to be more isolated (#6194)

Author: cshfang

packages/react-storage/src/components/StorageBrowser/controls/__tests__/ActionCancelControl.spec.tsx

@@ -1,45 +1,34 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionCancelControl } from '../ActionCancelControl';
-import * as useActionCancelModule from '../hooks/useActionCancel';
+import { useActionCancel } from '../hooks/useActionCancel';
+import { useResolvedComposable } from '../hooks/useResolvedComposable';
+
+jest.mock('../hooks/useActionCancel');
+jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/ActionCancel', () => ({
+  ActionCancel: () => <div data-testid="action-cancel" />,
+}));
 
 describe('ActionCancelControl', () => {
-  const useActionCancelSpy = jest.spyOn(
-    useActionCancelModule,
-    'useActionCancel'
-  );
+  const mockUseActionCancel = jest.mocked(useActionCancel);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 
-  beforeEach(() => {
-    useActionCancelSpy.mockClear();
+  beforeAll(() => {
+    mockUseResolvedComposable.mockImplementation(
+      (component) => component as () => React.JSX.Element
+    );
   });
 
-  it('renders', () => {
-    useActionCancelSpy.mockReturnValue({
-      isDisabled: false,
-      onCancel: jest.fn(),
-      label: 'Cancel',
-    });
-    render(<ActionCancelControl />);
-
-    const button = screen.getByRole('button', {
-      name: 'Cancel',
-    });
-
-    expect(button).toBeInTheDocument();
+  afterEach(() => {
+    mockUseActionCancel.mockClear();
   });
 
-  it('disables button', () => {
-    useActionCancelSpy.mockReturnValue({
-      isDisabled: true,
-      onCancel: jest.fn(),
-      label: 'Cancel',
-    });
+  it('renders', () => {
     render(<ActionCancelControl />);
 
-    const button = screen.getByRole('button', {
-      name: 'Cancel',
-    });
+    const actionCancel = screen.getByTestId('action-cancel');
 
-    expect(button).toBeDisabled();
+    expect(actionCancel).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/ActionDestinationControl.spec.tsx

@@ -27,8 +27,8 @@ describe('ActionDestinationControl', () => {
   it('renders', () => {
     render(<ActionDestinationControl />);
 
-    const ActionDestination = screen.getByTestId('action-destination');
+    const actionDestination = screen.getByTestId('action-destination');
 
-    expect(ActionDestination).toBeInTheDocument();
+    expect(actionDestination).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/ActionExitControl.spec.tsx

@@ -1,38 +1,34 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionExitControl } from '../ActionExitControl';
-import * as UseActionExitModule from '../hooks/useActionExit';
+import { useActionExit } from '../hooks/useActionExit';
+import { useResolvedComposable } from '../hooks/useResolvedComposable';
+
+jest.mock('../hooks/useActionExit');
+jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/ActionExit', () => ({
+  ActionExit: () => <div data-testid="action-exit" />,
+}));
 
 describe('ActionExitControl', () => {
-  const useActionExitSpy = jest.spyOn(UseActionExitModule, 'useActionExit');
+  const mockUseActionExit = jest.mocked(useActionExit);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 
-  beforeEach(() => {
-    useActionExitSpy.mockClear();
+  beforeAll(() => {
+    mockUseResolvedComposable.mockImplementation(
+      (component) => component as () => React.JSX.Element
+    );
   });
 
-  it('renders', () => {
-    useActionExitSpy.mockReturnValue({
-      isDisabled: false,
-      onExit: jest.fn(),
-      label: 'Exit',
-    });
-    render(<ActionExitControl />);
-
-    const button = screen.getByRole('button', { name: 'Exit' });
-
-    expect(button).toBeInTheDocument();
+  afterEach(() => {
+    mockUseActionExit.mockClear();
   });
 
-  it('disables button', () => {
-    useActionExitSpy.mockReturnValue({
-      isDisabled: true,
-      onExit: jest.fn(),
-      label: 'Exit',
-    });
+  it('renders', () => {
     render(<ActionExitControl />);
 
-    const button = screen.getByRole('button', { name: 'Exit' });
+    const actionExit = screen.getByTestId('action-exit');
 
-    expect(button).toBeDisabled();
+    expect(actionExit).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/ActionStartControl.spec.tsx

@@ -1,60 +1,34 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionStartControl } from '../ActionStartControl';
-import * as useActionStartModule from '../hooks/useActionStart';
+import { useActionStart } from '../hooks/useActionStart';
+import { useResolvedComposable } from '../hooks/useResolvedComposable';
 
-describe('ActionStartControl', () => {
-  const useActionStartSpy = jest.spyOn(useActionStartModule, 'useActionStart');
-
-  beforeEach(() => {
-    useActionStartSpy.mockClear();
-  });
-
-  it('renders', () => {
-    useActionStartSpy.mockReturnValue({
-      isDisabled: false,
-      onStart: jest.fn(),
-      label: 'Start',
-    });
-    render(<ActionStartControl />);
+jest.mock('../hooks/useActionStart');
+jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/ActionStart', () => ({
+  ActionStart: () => <div data-testid="action-start" />,
+}));
 
-    const button = screen.getByRole('button', {
-      name: 'Start',
-    });
+describe('ActionStartControl', () => {
+  const mockUseActionStart = jest.mocked(useActionStart);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 
-    expect(button).toBeInTheDocument();
+  beforeAll(() => {
+    mockUseResolvedComposable.mockImplementation(
+      (component) => component as () => React.JSX.Element
+    );
   });
 
-  it('renders with custom label', () => {
-    useActionStartSpy.mockReturnValue({
-      isDisabled: false,
-      onStart: jest.fn(),
-      label: 'Custom Label',
-    });
-    render(<ActionStartControl />);
-
-    const button = screen.getByRole('button', {
-      name: 'Custom Label',
-    });
-
-    expect(button).toBeInTheDocument();
+  afterEach(() => {
+    mockUseActionStart.mockClear();
   });
 
-  it('calls onStart when button is clicked', () => {
-    const mockOnStart = jest.fn();
-    useActionStartSpy.mockReturnValue({
-      isDisabled: false,
-      onStart: mockOnStart,
-      label: 'Start',
-    });
+  it('renders', () => {
     render(<ActionStartControl />);
 
-    const button = screen.getByRole('button', {
-      name: 'Start',
-    });
-
-    button.click();
+    const actionStart = screen.getByTestId('action-start');
 
-    expect(mockOnStart).toHaveBeenCalled();
+    expect(actionStart).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/ActionsListControl.spec.tsx

@@ -27,8 +27,8 @@ describe('ActionsListControl', () => {
   it('renders', () => {
     render(<ActionsListControl />);
 
-    const ActionsList = screen.getByTestId('actions-list');
+    const actionsList = screen.getByTestId('actions-list');
 
-    expect(ActionsList).toBeInTheDocument();
+    expect(actionsList).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/AddFilesControl.spec.tsx

@@ -11,7 +11,6 @@ jest.mock('../../composables/AddFiles', () => ({
 }));
 
 describe('AddFilesControl', () => {
-  // assert mocks
   const mockUseAddFiles = jest.mocked(useAddFiles);
   const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 

packages/react-storage/src/components/StorageBrowser/controls/__tests__/AddFolderControl.spec.tsx

@@ -11,7 +11,6 @@ jest.mock('../../composables/AddFolder', () => ({
 }));
 
 describe('AddFolderControl', () => {
-  // assert mocks
   const mockUseAddFolder = jest.mocked(useAddFolder);
   const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 

packages/react-storage/src/components/StorageBrowser/controls/__tests__/DataRefreshControl.spec.tsx

@@ -1,57 +1,34 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { DataRefreshControl } from '../DataRefreshControl';
+import { useDataRefresh } from '../hooks/useDataRefresh';
+import { useResolvedComposable } from '../hooks/useResolvedComposable';
 
-import * as useDataRefreshModule from '../hooks/useDataRefresh';
+jest.mock('../hooks/useDataRefresh');
+jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/DataRefresh', () => ({
+  DataRefresh: () => <div data-testid="data-refresh" />,
+}));
 
 describe('DataRefreshControl', () => {
-  const useDataRefreshSpy = jest.spyOn(useDataRefreshModule, 'useDataRefresh');
+  const mockUseDataRefresh = jest.mocked(useDataRefresh);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 
-  afterEach(() => {
-    useDataRefreshSpy.mockReset();
+  beforeAll(() => {
+    mockUseResolvedComposable.mockImplementation(
+      (component) => component as () => React.JSX.Element
+    );
   });
 
-  it('renders with button enabled', () => {
-    const onRefreshMock = jest.fn();
-    useDataRefreshSpy.mockReturnValue({
-      isDisabled: false,
-      onRefresh: onRefreshMock,
-    });
-
-    render(<DataRefreshControl />);
-
-    const button = screen.getByRole('button', {
-      name: 'Refresh data',
-    });
-
-    const icon = button.querySelector('svg');
-
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveAttribute('disabled');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('aria-hidden', 'true');
-
-    fireEvent.click(button);
-    expect(onRefreshMock).toHaveBeenCalled();
+  afterEach(() => {
+    mockUseDataRefresh.mockClear();
   });
 
-  it('renders with button disabled', () => {
-    useDataRefreshSpy.mockReturnValue({
-      isDisabled: true,
-      onRefresh: jest.fn(),
-    });
-
+  it('renders', () => {
     render(<DataRefreshControl />);
 
-    const button = screen.getByRole('button', {
-      name: 'Refresh data',
-    });
-
-    const icon = button.querySelector('svg');
+    const dataRefresh = screen.getByTestId('data-refresh');
 
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('disabled');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('aria-hidden', 'true');
+    expect(dataRefresh).toBeInTheDocument();
   });
 });