AppError test

pages/_app.tsx

@@ -9,7 +9,7 @@ import { Chakra } from 'lib/Chakra';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import theme from 'theme';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/_error.tsx

@@ -27,7 +27,7 @@ import * as cookies from 'lib/cookies';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import type { Props as ServerSidePropsCommon } from 'lib/next/getServerSideProps';
 import { getServerSideProps as getServerSidePropsCommon } from 'lib/next/getServerSideProps';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import Page from 'ui/shared/Page/Page';
 
 type Props = ServerSidePropsCommon & {

ui/shared/AppError/AppError.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import RenderWithChakra from 'playwright/RenderWithChakra';
+
+import AppError from './AppError';
+
+test.use({ viewport: { width: 900, height: 400 } });
+
+test('status code 404', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <AppError statusCode={ 404 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('status code 500', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <AppError statusCode={ 500 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/shared/Page/Page.tsx

@@ -10,7 +10,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useScrollDirection from 'lib/hooks/useScrollDirection';
 import { SocketProvider } from 'lib/socket/context';
 import ScrollDirectionContext from 'ui/ScrollDirectionContext';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';