chore: increase code coverage

Author: abolkog

src/components/About/About.test.tsx

@@ -1,7 +1,8 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 import { LIBRARIES } from 'helpers/const';
 import About from 'components/About';
 import { AppContext } from 'context/AppContext';
+import { AppActions } from 'context/Reducer';
 
 describe('<About />', () => {
   const state = {
@@ -23,4 +24,11 @@ describe('<About />', () => {
     const listElement = screen.getByTestId('about-libraries-list');
     expect(listElement.children.length).toEqual(LIBRARIES.length);
   });
+
+  it('closes the modal', () => {
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: AppActions.HIDE_ABOUT_MODAL,
+    });
+  });
 });

src/components/Layout/ActionBar.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import ActionBar from './ActionBar';
+import { AppContext } from 'context/AppContext';
+import { AppActions } from 'context/Reducer';
+
+describe('<ActionBar />', () => {
+  const dispatch = jest.fn();
+  const state = {
+    code: 'console.log("hello")',
+    loading: false,
+    result: [],
+    error: '',
+    sidebarOpen: false,
+    historyOpen: false,
+    aboutModalOpen: false,
+    shareUrl: '',
+    codeSample: '',
+    codeSampleName: '',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function renderComponent(customState = {}) {
+    render(
+      <AppContext.Provider
+        value={{ state: { ...state, ...customState }, dispatch }}
+      >
+        <ActionBar />
+      </AppContext.Provider>,
+    );
+  }
+
+  it('renders all main action buttons', () => {
+    renderComponent();
+    expect(screen.getByText('Run Code')).toBeInTheDocument();
+    expect(screen.getByText('Clear Console')).toBeInTheDocument();
+    expect(screen.getByText('History')).toBeInTheDocument();
+    expect(screen.getByText('Code Samples')).toBeInTheDocument();
+    expect(screen.getByText('Share Code')).toBeInTheDocument();
+    expect(screen.getByText('About JS Playground')).toBeInTheDocument();
+  });
+
+  it('calls runCode when "Run Code" is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('Run Code'));
+    expect(dispatch).toHaveBeenCalledWith({
+      type: AppActions.CODE_RUNNING,
+    });
+  });
+
+  it('dispatches CLEAR_RESULT when "Clear Console" is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('Clear Console'));
+    expect(dispatch).toHaveBeenCalledWith({ type: AppActions.CLEAR_RESULT });
+  });
+
+  it('dispatches SHOW_HISTORY when "History" is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('History'));
+    expect(dispatch).toHaveBeenCalledWith({ type: AppActions.SHOW_HISTORY });
+  });
+
+  it('dispatches SET_SHARE_URL when "Share Code" is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('Share Code'));
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ type: AppActions.SET_SHARE_URL }),
+    );
+
+    const call = dispatch.mock.calls.find(
+      ([arg]) => arg.type === AppActions.SET_SHARE_URL,
+    );
+    expect(call[0].payload).toContain('code=');
+  });
+
+  it('dispatches SHOW_ABOUT_MODAL when "About JS Playground" is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByText('About JS Playground'));
+    expect(dispatch).toHaveBeenCalledWith({
+      type: AppActions.SHOW_ABOUT_MODAL,
+    });
+  });
+});

src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import Spinner from './Spinner';
+
+describe('Spinner Component', () => {
+  it('renders the svg element', () => {
+    const { container } = render(<Spinner />);
+    const spinner = container.querySelector('svg.text-gray-300.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+});

src/context/AppContext.tsx

@@ -1,5 +1,6 @@
 import { createContext, useMemo, useReducer } from 'react';
-import { getLocalStorage, STORAGE } from 'services/storage';
+import { getLocalStorage } from 'services/storage';
+import { STORAGE } from 'helpers/const';
 import { reducer } from 'context/Reducer';
 
 const initialState: AppState = {

src/context/Reducer.test.ts

@@ -73,4 +73,67 @@ describe('Reducer tests', () => {
     });
     expect(state).toEqual(INITIAL_STATE);
   });
+
+  describe('show and hide about modal', () => {
+    it('update sidebar value when show about modal is dispatched', () => {
+      const state = reducer(INITIAL_STATE, {
+        type: AppActions.SHOW_ABOUT_MODAL,
+      });
+      expect(state.sidebarOpen).toEqual(false);
+      expect(state.aboutModalOpen).toEqual(true);
+    });
+
+    it('update sidebar value when hide about modal is dispatched', () => {
+      const state = reducer(INITIAL_STATE, {
+        type: AppActions.HIDE_ABOUT_MODAL,
+      });
+      expect(state.sidebarOpen).toEqual(false);
+      expect(state.aboutModalOpen).toEqual(false);
+    });
+  });
+
+  describe('show and hide history', () => {
+    it('update sidebar value when show history is dispatched', () => {
+      const state = reducer(INITIAL_STATE, {
+        type: AppActions.SHOW_HISTORY,
+      });
+      expect(state.sidebarOpen).toEqual(false);
+      expect(state.historyOpen).toEqual(true);
+    });
+
+    it('update sidebar value when hide history is dispatched', () => {
+      const state = reducer(INITIAL_STATE, {
+        type: AppActions.HIDE_HISTORY,
+      });
+      expect(state.sidebarOpen).toEqual(false);
+      expect(state.historyOpen).toEqual(false);
+    });
+  });
+
+  describe('toggle sidebar', () => {
+    it('toggle sidebar open when toggle sidebar is dispatched', () => {
+      const state = reducer(INITIAL_STATE, {
+        type: AppActions.SHOW_SIDEBAR,
+      });
+      expect(state.sidebarOpen).toEqual(true);
+    });
+
+    it('toggle sidebar close when toggle sidebar is dispatched again', () => {
+      const initialState = { ...INITIAL_STATE, sidebarOpen: true };
+      const state = reducer(initialState, {
+        type: AppActions.HIDE_SIDEBAR,
+      });
+      expect(state.sidebarOpen).toEqual(false);
+    });
+  });
+
+  it('update shareUrl when set share url is dispatched', () => {
+    const payload = 'share-url';
+
+    const state = reducer(INITIAL_STATE, {
+      type: AppActions.SET_SHARE_URL,
+      payload,
+    });
+    expect(state.shareUrl).toEqual(payload);
+  });
 });

src/context/Reducer.ts

@@ -1,4 +1,5 @@
-import { saveToHistory, setLocalStorage, STORAGE } from 'services/storage';
+import { saveToHistory, setLocalStorage } from 'services/storage';
+import { STORAGE } from 'helpers/const';
 
 export const AppActions = {
   UPDATE_CODE: 'UPDATE_CODE',

src/helpers/const.ts

@@ -102,3 +102,10 @@ console.log(calculate({ operation: '*', operand1: 4, operand2: 6 }));   // Outpu
 ];
 
 export const MAX_SHARE_CODE_LENGTH = 2000;
+
+export const MAX_HISTORY_SIZE = 20;
+
+export const STORAGE = {
+  CODE: '@abolkog/jscode',
+  HISTORY: 'abolkog/jscode-history',
+};

src/hooks/useCodeRunner.test.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { renderHook, act } from '@testing-library/react';
+import useCodeRunner from './useCodeRunner';
+import { AppActions } from 'context/Reducer';
+import { AppContext } from 'context/AppContext';
+
+describe('useCodeRunner', () => {
+  const state = {} as AppState;
+  let dispatch: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    dispatch = jest.fn();
+  });
+
+  const createWrapper = ({ children }: { children: ReactNode }) => (
+    <AppContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AppContext.Provider>
+  );
+
+  it('should dispatch CODE_RUNNING and CODE_RUN_SUCCESS on valid code', async () => {
+    const { result } = renderHook(() => useCodeRunner(), {
+      wrapper: createWrapper,
+    });
+
+    const code = 'const a = 2 + 2; a;';
+
+    await act(async () => {
+      await result.current.runCode(code);
+    });
+
+    expect(dispatch).toHaveBeenNthCalledWith(1, {
+      type: AppActions.CODE_RUNNING,
+    });
+
+    expect(dispatch).toHaveBeenNthCalledWith(2, {
+      type: AppActions.CODE_RUN_SUCCESS,
+      payload: 4,
+    });
+  });
+
+  it('should dispatch CODE_RUN_ERROR on invalid code', async () => {
+    const { result } = renderHook(() => useCodeRunner(), {
+      wrapper: createWrapper,
+    });
+
+    const code = 'throw new Error("Invalid code dude");';
+
+    await act(async () => {
+      await result.current.runCode(code);
+    });
+
+    expect(dispatch).toHaveBeenCalledWith({ type: AppActions.CODE_RUNNING });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: AppActions.CODE_RUN_ERROR,
+      payload: 'Invalid code dude',
+    });
+  });
+});

src/services/storage.test.ts

@@ -1,7 +1,28 @@
+import { compress } from 'lz-string';
+import { STORAGE } from 'helpers/const';
 import * as StorageService from 'services/storage';
 
+jest.mock('../helpers/const', () => {
+  const actual = jest.requireActual('../helpers/const');
+  return {
+    ...actual,
+    MAX_HISTORY_SIZE: 2,
+  };
+});
+
 describe('Storage tests', () => {
   const setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
+  const today = '2025-05-26';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(today));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
   it('Save value to locale storage', () => {
     StorageService.setLocalStorage('mock', 'value');
@@ -26,4 +47,69 @@ describe('Storage tests', () => {
     StorageService.clearLocalStorage('value');
     expect(removeItemSpy).toHaveBeenCalledWith('value');
   });
+
+  describe('getHistory', () => {
+    const mockCode = 'console.log(1)';
+    beforeEach(jest.clearAllMocks);
+
+    it('return empty array when no history found', () => {
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValueOnce(null);
+      const result = StorageService.getHistory();
+      expect(result).toEqual([]);
+    });
+
+    it('return history result', () => {
+      const mockHistory = [
+        { code: 'test', date: today },
+        { code: 'test2', date: today },
+      ];
+      jest
+        .spyOn(Storage.prototype, 'getItem')
+        .mockReturnValueOnce(JSON.stringify(mockHistory));
+      const result = StorageService.getHistory();
+      expect(result.length).toEqual(mockHistory.length);
+    });
+
+    it('save code to history', () => {
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValueOnce(null);
+
+      StorageService.saveToHistory(mockCode);
+      expect(setItemSpy).toHaveBeenCalledWith(
+        STORAGE.HISTORY,
+        JSON.stringify([{ code: compress(mockCode), date: today }]),
+      );
+    });
+
+    it('remove oldest item in history if max reached', () => {
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValueOnce(
+        JSON.stringify([
+          { code: compress('console.log(2)'), date: today },
+          { code: compress('console.log(3)'), date: today },
+          { code: compress('console.log(4)'), date: today },
+        ]),
+      );
+
+      StorageService.saveToHistory(mockCode);
+      expect(setItemSpy).toHaveBeenCalledWith(
+        STORAGE.HISTORY,
+        JSON.stringify([
+          { code: compress('console.log(3)'), date: today },
+          { code: compress('console.log(4)'), date: today },
+          { code: compress(mockCode), date: today },
+        ]),
+      );
+    });
+
+    it('does not save code to history if it already exist', () => {
+      const mockCode = 'console.log(1)';
+      jest
+        .spyOn(Storage.prototype, 'getItem')
+        .mockReturnValueOnce(
+          JSON.stringify([{ code: compress(mockCode), date: today }]),
+        );
+
+      StorageService.saveToHistory(mockCode);
+      expect(setItemSpy).not.toHaveBeenCalled();
+    });
+  });
 });

src/services/storage.ts

@@ -1,11 +1,5 @@
 import { compress, decompress } from 'lz-string';
-
-const MAX_HISTORY_SIZE = 20;
-
-export const STORAGE = {
-  CODE: '@abolkog/jscode',
-  HISTORY: 'abolkog/jscode-history',
-};
+import { MAX_HISTORY_SIZE, STORAGE } from 'helpers/const';
 
 export const getLocalStorage = (key: string, defaultValue = '') => {
   return localStorage.getItem(key) || defaultValue;