INTO-CPS-Association/DTaaS

View on GitHub
client/test/preview/integration/route/digitaltwins/editor/SidebarDialog.test.tsx

Summary

Maintainability
A
35 mins
Test Coverage
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import SidebarDialog from 'preview/route/digitaltwins/editor/SidebarDialog';
import fileSlice from 'preview/store/file.slice';
import * as React from 'react';
import { act } from 'react';
import { Provider } from 'react-redux';

const store = configureStore({
  reducer: combineReducers({
    files: fileSlice,
  }),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

describe('SidebarDialog', () => {
  const setNewFileName = jest.fn();
  const setIsFileNameDialogOpen = jest.fn();
  const setErrorMessage = jest.fn();

  beforeEach(() => {
    act(() => {
      render(
        <Provider store={store}>
          <SidebarDialog
            isOpen={true}
            newFileName={'newFileName'}
            setNewFileName={setNewFileName}
            setIsFileNameDialogOpen={setIsFileNameDialogOpen}
            errorMessage={'errorMessage'}
            setErrorMessage={setErrorMessage}
            files={[]}
            dispatch={store.dispatch}
          />
        </Provider>,
      );
    });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('should handle click on cancel button', () => {
    const cancelButton = screen.getByText('Cancel');

    act(() => {
      cancelButton.click();
    });

    expect(setIsFileNameDialogOpen).toHaveBeenCalledTimes(1);
    expect(setNewFileName).toHaveBeenCalledTimes(1);
    expect(setErrorMessage).toHaveBeenCalledTimes(1);
  });

  it('should handle click on add button', () => {
    const addButton = screen.getByText('Add');

    act(() => {
      addButton.click();
    });

    expect(setErrorMessage).toHaveBeenCalledTimes(1);
  });

  it('should handle change in file name', () => {
    const textField = screen.getByRole('textbox');

    act(() => {
      fireEvent.change(textField, {
        target: { value: 'modifiedFileName' },
      });
    });

    waitFor(() => {
      expect(textField).toHaveValue('modifiedFileName');
    });

    expect(setNewFileName).toHaveBeenCalledTimes(1);
  });
});