Formatting fixes

Co-authored-by: minzo-kim <[email protected]>

Author: jasnoo

src/app/__tests__jn/Action.test.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
-import {render, screen, fireEvent} from '@testing-library/react'
-import user from '@testing-library/user-event'
-import  '@testing-library/jest-dom/extend-expect' // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
-import Action from '../components/Action'
-
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import Action from '../components/Action';
 
 // @ts-ignore
 Action.cleanTime = jest.fn().mockReturnValue();
@@ -16,7 +15,7 @@ describe('unit testing for Action.tsx', () => {
     index: 2,
     sliderIndex: 2,
     isCurrIndex: false,
-    routePath:"",
+    routePath: '',
     dispatch: jest.fn(),
     displayName: '3.0',
     componentName: 'App',
@@ -28,41 +27,38 @@ describe('unit testing for Action.tsx', () => {
     viewIndex: 2,
     handleOnkeyDown: jest.fn(),
   };
-  
+
   beforeEach(() => {
-    props.isCurrIndex = false
-    props.componentData = {actualDuration: 3.5}
+    props.isCurrIndex = false;
+    props.componentData = { actualDuration: 3.5 };
     props.dispatch.mockClear();
   });
 
-
   describe('When a component is shown on the page', () => {
-    test("Action snapshot should be shown as Snapshot: 3.0", () => {
-        render(<Action {...props} />);
-        expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument()
+    test('Action snapshot should be shown as Snapshot: 3.0', () => {
+      render(<Action {...props} />);
+      expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
     });
 
-    test("two buttons time and Jump when at current snapshot", () => {
+    test('two buttons time and Jump when at current snapshot', () => {
       render(<Action {...props} />);
-      expect(screen.getAllByRole('button')).toHaveLength(2)
-      expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50')
-      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Jump')
+      expect(screen.getAllByRole('button')).toHaveLength(2);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
+      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Jump');
     });
 
-    test("two buttons with time and Current when not at current snapshot", () => {
-      props.isCurrIndex = true
+    test('two buttons with time and Current when not at current snapshot', () => {
+      props.isCurrIndex = true;
       render(<Action {...props} />);
-      expect(screen.getAllByRole('button')).toHaveLength(2)
-      expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50')
-      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current')
-    });   
+      expect(screen.getAllByRole('button')).toHaveLength(2);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
+      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current');
+    });
 
     test("when there's no have no duration data", () => {
-        props.componentData = undefined
-        render(<Action {...props} />);
-        expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME')
+      props.componentData = undefined;
+      render(<Action {...props} />);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
     });
-
   });
-
 });

src/app/__tests__jn/ActionContainer.test.tsx

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-filename-extension */
-import React, {useEffect} from 'react'
-import {render, screen, fireEvent} from '@testing-library/react'
-import  '@testing-library/jest-dom/extend-expect'
-import ActionContainer from '../containers/ActionContainer'
+import React, { useEffect } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ActionContainer from '../containers/ActionContainer';
 import { useStoreContext } from '../store';
 
-
-
 const state = {
   tabs: {
     87: {
@@ -108,58 +106,44 @@ const state = {
 };
 
 const dispatch = jest.fn();
-const resetSlider = jest.fn()
-jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn())
+const resetSlider = jest.fn();
+jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
 jest.mock('../store');
 useStoreContext.mockImplementation(() => [state, dispatch]);
 
 const MockRouteDescription = jest.fn();
 jest.mock('../components/RouteDescription', () => () => {
   MockRouteDescription();
-  return (
-  <div>
-    MockRouteDescription
-   </div> 
-    );
+  return <div>MockRouteDescription</div>;
 });
 
 const MockSwitchApp = jest.fn();
 jest.mock('../components/SwitchApp', () => () => {
   MockSwitchApp();
-  return (
-  <div>
-    MockSwitchApp
-   </div> 
-    );
+  return <div>MockSwitchApp</div>;
 });
 
-
-
 describe('unit testing for ActionContainer', () => {
-  
   beforeEach(() => {
     useStoreContext.mockClear();
     dispatch.mockClear();
-    render(<ActionContainer actionView={true}/>);
+    render(<ActionContainer actionView={true} />);
   });
 
-  test("Expect top arrow to be rendered", () => {
-      expect(screen.getByRole('complementary')).toBeInTheDocument()
-
-    });
-
-    test("Expect RouteDescription to be rendered", () => {
-      expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2)
-
-    });
+  test('Expect top arrow to be rendered', () => {
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+  });
 
-    test("Expect SwitchApp to be rendered", () => {
-      expect(screen.getByText('MockSwitchApp')).toBeInTheDocument()
-    });
+  test('Expect RouteDescription to be rendered', () => {
+    expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
+  });
 
-    test("Click works on clear button", async () => {
-      fireEvent.click(screen.getAllByRole('button')[0])
-      await expect(dispatch).toHaveBeenCalledTimes(1)
-    });
+  test('Expect SwitchApp to be rendered', () => {
+    expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
+  });
 
+  test('Click works on clear button', async () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    await expect(dispatch).toHaveBeenCalledTimes(1);
+  });
 });

src/app/__tests__jn/ButtonContainer.test.tsx

@@ -1,68 +1,60 @@
-import React from 'react'
-import {render, screen, fireEvent} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import  '@testing-library/jest-dom/extend-expect' // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 import ButtonsContainer from '../containers/ButtonsContainer';
 import { useStoreContext } from '../store';
 
-
-jest.mock('../store'); 
+jest.mock('../store');
 
 describe('Unit testing for ButtonContainer', () => {
-
-    beforeEach
+  beforeEach;
 
   const state = {
-  tabs: {
-    87: {
-      snapshots: [1, 2, 3, 4],
-      sliderIndex: 0,
-      viewIndex: -1,
-      mode: {
-        paused: false,
-        locked: false,
-        persist: false,
+    tabs: {
+      87: {
+        snapshots: [1, 2, 3, 4],
+        sliderIndex: 0,
+        viewIndex: -1,
+        mode: {
+          paused: false,
+          locked: false,
+          persist: false,
+        },
       },
     },
-  },
-  currentTab: 87,
-};
-
+    currentTab: 87,
+  };
 
+  const currentTab = state.tabs[state.currentTab];
+  const dispatch = jest.fn();
 
+  useStoreContext.mockImplementation(() => [state, dispatch]);
 
-    const currentTab = state.tabs[state.currentTab];
-    const dispatch = jest.fn();
-   
-    useStoreContext.mockImplementation(() => [state, dispatch]);
-
-    beforeEach(() => {
-        dispatch.mockClear();
-        useStoreContext.mockClear();
-        currentTab.mode = {
-        paused: false,
-        persist: false,
-        };
-    });
-
-    test('should have 5 buttons ', () => {
-        render(<ButtonsContainer/>)
-        expect(screen.getAllByRole('button')).toHaveLength(5)
-        expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock')
-        expect(screen.getAllByRole('button')[1]).toHaveTextContent('Split')
-        expect(screen.getAllByRole('button')[2]).toHaveTextContent('Download')
-        expect(screen.getAllByRole('button')[3]).toHaveTextContent('Upload')
-        expect(screen.getAllByRole('button')[4]).toHaveTextContent('How to use')
-    });
+  beforeEach(() => {
+    dispatch.mockClear();
+    useStoreContext.mockClear();
+    currentTab.mode = {
+      paused: false,
+      persist: false,
+    };
+  });
 
+  test('should have 5 buttons ', () => {
+    render(<ButtonsContainer />);
+    expect(screen.getAllByRole('button')).toHaveLength(5);
+    expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock');
+    expect(screen.getAllByRole('button')[1]).toHaveTextContent('Split');
+    expect(screen.getAllByRole('button')[2]).toHaveTextContent('Download');
+    expect(screen.getAllByRole('button')[3]).toHaveTextContent('Upload');
+    expect(screen.getAllByRole('button')[4]).toHaveTextContent('How to use');
+  });
 
   describe('When view is unlock', () => {
-
     test('Button should show as unlocked', () => {
-        state.tabs['87'].mode.paused = true
-        render(<ButtonsContainer />)
-        expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlock')
+      state.tabs['87'].mode.paused = true;
+      render(<ButtonsContainer />);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlock');
     });
-
   });
-});
+});