feat: add test for orders

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -28,27 +28,28 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    console.error('4545');
     this.setState({ error, errorInfo });
   }
 
   render() {
     const { hasError } = this.state;
-    //TODO: добавить анимацию после залива 404 страницы
-    //TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
+
     if (hasError) {
       return (
-        <Center minH='100vh'>
+        <Center minH='100vh' data-testid='error-boundary'>
           <VStack spacing={4} textAlign='center'>
-            <Heading as='h1' size='2xl'>
+            <Heading as='h1' size='2xl' data-testid='error-title'>
               {i18next.t('~:dry-wash.errorBoundary.title')}
             </Heading>
-            <Text fontSize='lg'>
+            <Text fontSize='lg' data-testid='error-description'>
               {i18next.t('~:dry-wash.errorBoundary.description')}
             </Text>
             <Button
               colorScheme='teal'
               size='lg'
               variant='outline'
+              data-testid='error-reload-button'
               onClick={() => window.location.reload()}
             >
               {i18next.t('~:dry-wash.errorBoundary.button.reload')}

src/components/ErrorBoundary/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { describe, expect, it, jest } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { useEffect } from 'react';
+
+import ErrorBoundary from '../ErrorBoundary';
+import { store } from '../../../__data__/store';
+
+const ProblematicComponent = () => {
+  useEffect(() => {
+    throw new Error('Test Error');
+  }, []);
+
+  return <div>Этот текст не должен появиться</div>;
+};
+jest.mock('@brojs/cli', () => {
+  return {
+    getNavigationValue: () => '/auth/login',
+    getConfigValue: () => '/api',
+  };
+});
+
+describe('ErrorBoundary', () => {
+  it('должен отобразить запасной UI при ошибке', async () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ErrorBoundary>
+          <BrowserRouter>
+            <ProblematicComponent />
+          </BrowserRouter>
+        </ErrorBoundary>
+      </Provider>,
+    );
+
+    const button = await waitFor(() =>
+      screen.getByTestId('error-reload-button'),
+    );
+
+    expect(button).not.toBeNull();
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/ErrorBoundary/__tests__/__snapshots__/ErrorBoundary.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorBoundary должен отобразить запасной UI при ошибке 1`] = `
+<div>
+  <div
+    class="css-1o0ed15"
+    data-testid="error-boundary"
+  >
+    <div
+      class="chakra-stack css-zefqyp"
+    >
+      <h1
+        class="chakra-heading css-0"
+        data-testid="error-title"
+      />
+      <p
+        class="chakra-text css-1ezsviu"
+        data-testid="error-description"
+      />
+      <button
+        class="chakra-button css-4xx2wk"
+        data-testid="error-reload-button"
+        type="button"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/Orders/Orders.tsx

@@ -15,13 +15,13 @@ import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 
 import OrderItem from '../OrderItem';
-import { OrderProps } from '../OrderItem/OrderItem';
 import DateNavigator from '../DateNavigator';
 import {
   useGetMastersQuery,
   useGetOrdersQuery,
 } from '../../__data__/service/api';
 import useShowToast from '../../hooks/useShowToast';
+import { OrderArm } from '../../models/api';
 
 const TABLE_HEADERS = [
   'carNumber' as const,
@@ -70,7 +70,6 @@ const Orders = () => {
       <Heading size='lg' mb='5'>
         {t('title')}
       </Heading>
-
       <DateNavigator
         currentDate={currentDate}
         onPreviousDate={() =>
@@ -112,7 +111,7 @@ const Orders = () => {
                 allMasters={masters}
                 key={index}
                 {...order}
-                status={order.status as OrderProps['status']}
+                status={order.status as OrderArm['status']}
               />
             ))}
         </Tbody>

src/components/PageSpinner/PageSpinner.tsx

@@ -5,6 +5,7 @@ export const PageSpinner: FC = () => {
   return (
     <Flex w='full' h='100vh' justifyContent='center' alignItems='center'>
       <Spinner
+        data-testid='spinner'
         thickness='5px'
         speed='0.65s'
         emptyColor='gray.200'

src/components/Sidebar/Sidebar.tsx

@@ -47,6 +47,7 @@ const Sidebar = () => {
             w='100%'
             colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
             variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
+            data-testid='master-button'
           >
             {t('master')}
           </Button>