Compare commits

..

No commits in common. "main" and "feature/order-form-upgrade" have entirely different histories.

68 changed files with 15987 additions and 18896 deletions

6
.gitignore vendored
View File

@ -131,9 +131,3 @@ dist
.pnp.* .pnp.*
.idea .idea
# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

6
Jenkinsfile vendored
View File

@ -38,12 +38,6 @@ pipeline {
} }
} }
stage('test') {
steps {
sh 'npm run test'
}
}
stage('build') { stage('build') {
steps { steps {
sh 'npm run build' sh 'npm run build'

View File

@ -1,18 +0,0 @@
import React, { PropsWithChildren } from 'react';
import { jest } from '@jest/globals';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import ErrorBoundary from '../src/components/ErrorBoundary';
import { store } from '../src/__data__/store';
export const AppContext = jest.fn(({ children }: PropsWithChildren) => (
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>{children}</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>
));

View File

@ -1,18 +0,0 @@
import { jest } from '@jest/globals';
jest.mock('@brojs/cli', () => ({
getConfigValue: jest.fn(() => '/api'),
getFeatures: jest.fn(() => ({
['order-view-status-polling']: { value: '3000' }
})),
getNavigationValue: jest.fn((navKey: string) => {
switch (navKey) {
case 'dry-wash.main':
return '/dry-wash';
case 'dry-wash.order.create':
return '/order';
case 'dry-wash.order.view':
return '/order/:orderId';
}
}),
}));

View File

@ -1,6 +0,0 @@
import { jest } from '@jest/globals';
import React from 'react';
jest.mock('@lottiefiles/react-lottie-player', () => ({
Player: jest.fn(() => <></>),
}));

View File

@ -1,13 +0,0 @@
import localeRu from '../locales/ru.json';
module.exports = {
useTranslation: (_, options) => {
const { keyPrefix } = options ?? {};
return {
t: keyPrefix ? (key: string) => localeRu[`${keyPrefix}.${key}`] : undefined,
i18n: {
language: 'ru'
}
};
}
};

View File

@ -1,11 +0,0 @@
import { jest } from '@jest/globals';
import React from 'react';
jest.mock('@pbe/react-yandex-maps', () => ({
YMaps: jest.fn(() => <></>),
Map: jest.fn(() => <></>),
Placemark: jest.fn(() => <></>),
GeolocationControl: jest.fn(() => <></>),
ZoomControl: jest.fn(() => <></>),
withYMaps: jest.fn(() => <></>),
}));

View File

@ -1,20 +0,0 @@
import { http, delay, HttpResponse } from 'msw';
import OrderPendingMock from '../../stubs/json/landing-order-view/id1-success-pending.json';
import OrderErrorMock from '../../stubs/json/landing-order-view/id1-error.json';
export const handlers = [
http.get('/api/order/:id', async ({ params }) => {
await delay();
const { id } = params;
if (id === 'id1') {
return HttpResponse.json(OrderPendingMock);
}
return new HttpResponse(null, {
status: 500,
statusText: OrderErrorMock.message
});
})
];

View File

@ -1,5 +0,0 @@
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);

View File

@ -1 +0,0 @@
module.exports = {};

View File

@ -19,7 +19,7 @@ module.exports = {
'dry-wash.arm': '/arm/*', 'dry-wash.arm': '/arm/*',
}, },
features: { features: {
'dry-wash': { 'dry-wash-pl': {
// add your features here in the format [featureName]: { value: string } // add your features here in the format [featureName]: { value: string }
'order-view-status-polling': { value: '3000' } 'order-view-status-polling': { value: '3000' }
}, },

View File

@ -1,26 +0,0 @@
import { test, expect } from '@playwright/test';
test.beforeEach('check server is up', async ({ page }) => {
try {
await page.goto('http://localhost:8099/dry-wash');
const makeOrderText = page.getByText('Сделать заказ', { exact: true });
await expect(makeOrderText).toBeVisible();
} catch (error) {
console.error('server not up', error);
test.skip();
}
});
test('login', async ({ page }) => {
await page.goto('http://localhost:8099/dry-wash/arm');
await page.getByRole('textbox', { name: 'Username or email' }).click();
await page
.getByRole('textbox', { name: 'Username or email' })
.fill('237x237');
await page.getByRole('textbox', { name: 'Password' }).click();
await page.getByRole('textbox', { name: 'Password' }).fill('');
await page.getByRole('button', { name: 'Sign In' }).click();
await page.getByRole('heading', { name: 'Заказы' }).click();
await page.getByRole('link', { name: 'Мастера' }).click();
await page.getByRole('link', { name: 'Заказы' }).click();
});

View File

@ -1,5 +1,4 @@
module.exports = { module.exports = {
preset: 'ts-jest',
transform: { transform: {
'^.+\\.tsx?$': 'babel-jest', '^.+\\.tsx?$': 'babel-jest',
}, },
@ -9,14 +8,10 @@ module.exports = {
collectCoverage: true, collectCoverage: true,
clearMocks: true, clearMocks: true,
moduleNameMapper: { moduleNameMapper: {
'\\.(svg|webp)$': '<rootDir>/__mocks__/file-mock', '\\.(svg|webp)$': '<rootDir>/__mocks__/file',
'\\.(css|scss)$': '<rootDir>/__mocks__/style-mock',
'react-i18next': '<rootDir>/__mocks__/react-i18next',
}, },
testEnvironmentOptions: { testEnvironmentOptions: {
customExportConditions: [''], customExportConditions: [''],
}, },
testEnvironment: 'jest-fixed-jsdom', testEnvironment: 'jest-fixed-jsdom',
testPathIgnorePatterns: ['/node_modules/', '<rootDir>/e2e'],
setupFilesAfterEnv: ['<rootDir>/jest-preset-it/jest.setup.js', '<rootDir>/__mocks__/brojs-cli-mock.ts', '<rootDir>/__mocks__/lottiefiles-mock.tsx'],
}; };

View File

@ -1,5 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-require-imports, no-undef
require('@testing-library/jest-dom');
// eslint-disable-next-line no-undef
global.__webpack_public_path__ = '';

View File

@ -25,16 +25,10 @@
"dry-wash.arm.master.table.header.phone": "Телефон", "dry-wash.arm.master.table.header.phone": "Телефон",
"dry-wash.arm.master.table.header.actions": "Действия", "dry-wash.arm.master.table.header.actions": "Действия",
"dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера", "dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера",
"dry-wash.arm.master.table.actionsMenu.toast.success": "Мастер удалён",
"dry-wash.arm.master.table.actionsMenu.toast.error.title": "Ошибка!",
"dry-wash.arm.master.table.actionsMenu.toast.error.description": "Не удалось удалить мастера. Попробуйте ещё раз.",
"dry-wash.arm.master.schedule.empty": "Свободен", "dry-wash.arm.master.schedule.empty": "Свободен",
"dry-wash.arm.master.editable.aria.cancel": "Отменить изменения", "dry-wash.arm.master.editable.aria.cancel": "Отменить изменения",
"dry-wash.arm.master.editable.aria.save": "Сохранить изменения", "dry-wash.arm.master.editable.aria.save": "Сохранить изменения",
"dry-wash.arm.master.editable.aria.edit": "Редактировать", "dry-wash.arm.master.editable.aria.edit": "Редактировать",
"dry-wash.arm.master.editable.toast.success": "Успешно!",
"dry-wash.arm.master.editable.toast.error.description": "Не удалось обновить данные",
"dry-wash.arm.master.editable.toast.error.title": "Ошибка!",
"dry-wash.arm.master.drawer.title": "Добавить нового мастера", "dry-wash.arm.master.drawer.title": "Добавить нового мастера",
"dry-wash.arm.master.drawer.inputName.label": "ФИО", "dry-wash.arm.master.drawer.inputName.label": "ФИО",
"dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО", "dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО",

30569
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,77 +1,72 @@
{ {
"name": "dry-wash", "name": "dry-wash",
"version": "0.8.0", "version": "0.5.0",
"description": "<a id=\"readme-top\"></a>", "description": "<a id=\"readme-top\"></a>",
"main": "./src/index.tsx", "main": "./src/index.tsx",
"scripts": { "scripts": {
"test": "jest -u", "test": "jest -u",
"start": "brojs server --port=8099 --with-open-browser", "start": "brojs server --port=8099 --with-open-browser",
"build": "npm run clean && brojs build --dev", "build": "npm run clean && brojs build --dev",
"build:prod": "npm run clean && brojs build", "build:prod": "npm run clean && brojs build",
"clean": "rimraf dist", "clean": "rimraf dist",
"eslint": "npx eslint .", "eslint": "npx eslint .",
"eslint:fix": "npx eslint . --fix", "eslint:fix": "npx eslint . --fix",
"preversion": "npm run eslint" "preversion": "npm run eslint"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@babel/core": "^7.26.7", "@brojs/cli": "^1.8.4",
"@babel/preset-env": "^7.26.7", "@babel/core": "^7.26.7",
"@babel/preset-react": "^7.26.3", "@babel/preset-env": "^7.26.7",
"@babel/preset-typescript": "^7.26.0", "@babel/preset-react": "^7.26.3",
"@brojs/cli": "^1.8.4", "@babel/preset-typescript": "^7.26.0",
"@chakra-ui/icons": "^2.2.4", "@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^2.10.5", "@chakra-ui/react": "^2.10.5",
"@emotion/react": "^11.4.1", "@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0", "@emotion/styled": "^11.3.0",
"@fontsource/open-sans": "^5.1.0", "@fontsource/open-sans": "^5.1.0",
"@lottiefiles/react-lottie-player": "^3.5.4", "@lottiefiles/react-lottie-player": "^3.5.4",
"@pbe/react-yandex-maps": "^1.2.5", "@pbe/react-yandex-maps": "^1.2.5",
"@reduxjs/toolkit": "^2.5.0", "@reduxjs/toolkit": "^2.5.0",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0", "@testing-library/react": "^16.2.0",
"@types/react": "^18.3.12", "@types/react": "^18.3.12",
"babel-jest": "^29.7.0", "babel-jest": "^29.7.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"express": "^4.21.1", "express": "^4.21.1",
"framer-motion": "^6.2.8", "framer-motion": "^6.2.8",
"i18next": "^23.16.4", "i18next": "^23.16.4",
"jest": "^29.7.0", "jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"jest-fixed-jsdom": "^0.0.9", "jest-fixed-jsdom": "^0.0.9",
"keycloak-js": "^23.0.7", "keycloak-js": "^23.0.7",
"msw": "^2.7.0", "msw": "^2.7.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-hook-form": "^7.53.2", "react-hook-form": "^7.53.2",
"react-i18next": "^15.1.1", "react-i18next": "^15.1.1",
"react-icons": "^5.3.0", "react-icons": "^5.3.0",
"react-phone-number-input": "^3.4.9", "react-phone-number-input": "^3.4.9",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-router-dom": "^6.27.0", "react-router-dom": "^6.27.0",
"ts-jest": "^29.2.5", "ts-jest": "^29.2.5",
"ts-node": "^10.9.2" "ts-node": "^10.9.2"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.14.0", "@eslint/js": "^9.14.0",
"@playwright/test": "^1.50.1", "@stylistic/eslint-plugin": "^2.10.1",
"@stylistic/eslint-plugin": "^2.10.1", "@types/react-dom": "^18.3.1",
"@testing-library/jest-dom": "^6.6.3", "eslint": "^9.14.0",
"@types/jest": "^29.5.14", "eslint-plugin-import": "^2.31.0",
"@types/node": "^22.13.1", "eslint-plugin-react": "^7.37.2",
"@types/react-dom": "^18.3.1", "globals": "^15.11.0",
"@types/testing-library__jest-dom": "^5.14.9", "prettier": "3.3.3",
"eslint": "^9.14.0", "typescript": "^5.7.3",
"eslint-plugin-import": "^2.31.0", "typescript-eslint": "^8.12.2"
"eslint-plugin-react": "^7.37.2", },
"globals": "^15.11.0", "jest": {
"prettier": "3.3.3", "preset": "./jest-preset-it/jest-preset.ts"
"typescript": "^5.7.3", }
"typescript-eslint": "^8.12.2"
},
"jest": {
"preset": "./jest-preset-it/jest-preset.ts"
}
} }

View File

@ -1,79 +0,0 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});

View File

@ -1,12 +1,12 @@
import { getFeatures } from "@brojs/cli"; import { getFeatures } from "@brojs/cli";
const features = getFeatures('dry-wash'); const features = getFeatures('dry-wash-pl');
export const FEATURE = { export const FEATURE = {
orderViewStatusPolling: { orderViewStatusPolling: {
isOn: Boolean(features?.['order-view-status-polling']), isOn: Boolean(features['order-view-status-polling']),
getValue: () => { getValue: () => {
const interval = parseInt(features?.['order-view-status-polling']?.value); const interval = parseInt(features['order-view-status-polling'].value);
if (!Number.isNaN(interval)) { if (!Number.isNaN(interval)) {
return interval; return interval;
} }

View File

@ -1,53 +1,20 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { getConfigValue } from '@brojs/cli'; import { getConfigValue } from '@brojs/cli';
import dayjs from 'dayjs';
import { Master, OrderArm } from '../../models/api'; import { Master } from '../../models/api/master';
import { extractBodyFromResponse } from './utils'; import { extractBodyFromResponse } from './utils';
export type UpdateMasterPayload = Required<Pick<Master, 'id'>> &
Partial<Omit<Master, 'id'>>;
type UpdateOrderProps = Required<Pick<OrderArm, 'id'>> &
Partial<Pick<OrderArm, 'status' | 'notes'>> & {
master?: string;
};
export const api = createApi({ export const api = createApi({
reducerPath: 'api', reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseQuery: fetchBaseQuery({ baseUrl: getConfigValue('dry-wash.api') }),
baseUrl: new URL(getConfigValue('dry-wash.api'), location.origin).href, tagTypes: ['Masters'],
}),
tagTypes: ['Masters', 'Orders'],
endpoints: (builder) => ({ endpoints: (builder) => ({
getMasters: builder.query<Master[], void>({ getMasters: builder.query<Master[], void>({
query: () => ({ url: '/arm/masters' }), query: () => ({ url: '/arm/masters' }),
transformResponse: extractBodyFromResponse<Master[]>, transformResponse: extractBodyFromResponse<Master[]>,
providesTags: ['Masters'], providesTags: ['Masters'],
}), }),
updateOrders: builder.mutation<void, UpdateOrderProps>({
query: ({ id, status, notes, master }) => ({
url: `/order/${id}`,
method: 'PATCH',
body: { status, notes, master },
}),
invalidatesTags: ['Orders'],
}),
getOrders: builder.query<OrderArm[], { date: Date }>({
query: ({ date }) => {
const startDate = dayjs(date).startOf('day').toISOString();
const endDate = dayjs(date).endOf('day').toISOString();
return {
url: '/arm/orders',
method: 'POST',
body: { startDate, endDate },
};
},
transformResponse: extractBodyFromResponse<OrderArm[]>,
providesTags: ['Orders'],
}),
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({ addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
query: (master) => ({ query: (master) => ({
url: '/arm/masters', url: '/arm/masters',
@ -56,29 +23,5 @@ export const api = createApi({
}), }),
invalidatesTags: ['Masters'], invalidatesTags: ['Masters'],
}), }),
deleteMaster: builder.mutation<void, { id: string }>({
query: ({ id }) => ({
url: `/arm/masters/${id}`,
method: 'DELETE',
}),
invalidatesTags: ['Masters'],
}),
updateMaster: builder.mutation<void, UpdateMasterPayload>({
query: ({ id, name, phone }) => ({
url: `/arm/masters/${id}`,
method: 'PATCH',
body: { name, phone },
}),
invalidatesTags: ['Masters'],
}),
}), }),
}); });
export const {
useGetMastersQuery,
useAddMasterMutation,
useDeleteMasterMutation,
useUpdateMasterMutation,
useGetOrdersQuery,
useUpdateOrdersMutation,
} = api;

View File

@ -1,6 +1,6 @@
import { FetchBaseQueryError } from '@reduxjs/toolkit/query'; import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
import { BaseResponse } from '../../models/api'; import { BaseResponse } from "../../models/api";
export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => { export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
if (response.success) { if (response.success) {
@ -8,14 +8,8 @@ export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
} }
}; };
export const extractErrorMessageFromResponse = ({ export const extractErrorMessageFromResponse = ({ data }: FetchBaseQueryError) => {
data, if (typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
}: FetchBaseQueryError) => {
if (
typeof data === 'object' &&
'message' in data &&
typeof data.message === 'string'
) {
return data.message; return data.message;
} }
}; };

139
src/api/arm.ts Normal file
View File

@ -0,0 +1,139 @@
import { getConfigValue } from '@brojs/cli';
import dayjs from 'dayjs';
enum ArmEndpoints {
ORDERS = '/arm/orders',
MASTERS = '/arm/masters',
}
const armService = () => {
const endpoint = getConfigValue('dry-wash.api');
const fetchOrders = async ({ date }: { date: Date }) => {
const startDate = dayjs(date).startOf('day').toISOString();
const endDate = dayjs(date).endOf('day').toISOString();
const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ startDate, endDate }),
});
if (!response.ok) {
throw new Error(`Failed to fetch orders: ${response.status}`);
}
return await response.json();
};
const fetchMasters = async () => {
const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}`);
if (!response.ok) {
throw new Error(`Failed to fetch masters: ${response.status}`);
}
return await response.json();
};
const addMaster = async ({
name,
phone,
}: {
name: string;
phone: string;
}) => {
const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, phone }),
});
if (!response.ok) {
throw new Error(`Failed to fetch masters: ${response.status}`);
}
return await response.json();
};
const deleteMaster = async ({ id }: { id: string }) => {
const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error(`Failed to fetch masters: ${response.status}`);
}
return await response.json();
};
const updateOrders = async ({
id,
status,
notes,
masterId,
}: {
id: string;
status?: string;
notes?: string;
masterId?: string;
}) => {
const body = JSON.stringify({ status, notes, masterId });
const response = await fetch(`${endpoint}/order/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body,
});
if (!response.ok) {
throw new Error(`Failed to fetch update masters: ${response.status}`);
}
return await response.json();
};
const updateMaster = async ({
id,
name,
phone,
}: {
id: string;
name?: string;
phone?: string;
}) => {
const body = JSON.stringify({ name, phone });
const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body,
});
if (!response.ok) {
throw new Error(`Failed to fetch update masters: ${response.status}`);
}
return await response.json();
};
return {
fetchOrders,
fetchMasters,
addMaster,
deleteMaster,
updateMaster,
updateOrders,
};
};
export { armService, ArmEndpoints };

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { Box, Button, Text } from '@chakra-ui/react'; import { Box, Button, Text } from '@chakra-ui/react';
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons'; import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
import dayjs from 'dayjs';
interface DateNavigatorProps { interface DateNavigatorProps {
currentDate: Date; currentDate: Date;
@ -20,7 +19,7 @@ const DateNavigator = ({
<ArrowBackIcon /> <ArrowBackIcon />
</Button> </Button>
<Text mx='4' fontSize='lg' fontWeight='bold'> <Text mx='4' fontSize='lg' fontWeight='bold'>
{dayjs(currentDate).format('DD.MM.YYYY')} {currentDate.toLocaleDateString()}
</Text> </Text>
<Button onClick={onNextDate}> <Button onClick={onNextDate}>
<ArrowForwardIcon /> <ArrowForwardIcon />

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useState } from 'react';
import { import {
Editable, Editable,
EditableInput, EditableInput,
@ -9,51 +9,63 @@ import {
useEditableControls, useEditableControls,
ButtonGroup, ButtonGroup,
Stack, Stack,
useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'; import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useUpdateMasterMutation } from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
interface EditableWrapperProps { interface EditableWrapperProps {
value: string; value: string;
fieldName: 'phone' | 'name'; onSubmit: ({
id,
name,
phone,
}: {
id: string;
name?: string;
phone?: string;
}) => Promise<unknown>;
as: 'phone' | 'name';
id: string; id: string;
} }
const EditableWrapper = ({ value, fieldName, id }: EditableWrapperProps) => { const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => {
const [updateMaster, { isError, isSuccess, error }] =
useUpdateMasterMutation();
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.editable', keyPrefix: 'dry-wash.arm.master.editable',
}); });
const showToast = useShowToast(); const toast = useToast();
const [currentValue, setCurrentValue] = useState<string>(value); const [currentValue, setCurrentValue] = useState<string>(value);
const handleSubmit = async (newValue: string) => { const handleSubmit = async (newValue: string) => {
if (currentValue === newValue) return; if (currentValue === newValue) return;
await updateMaster({ id, [fieldName]: newValue }); try {
await onSubmit({ id, [as]: newValue });
setCurrentValue(newValue); setCurrentValue(newValue);
toast({
title: 'Успешно!',
description: 'Данные обновлены.',
status: 'success',
duration: 2000,
isClosable: true,
position: 'top-right',
});
} catch (error) {
toast({
title: 'Ошибка!',
description: 'Не удалось обновить данные.',
status: 'error',
duration: 2000,
isClosable: true,
position: 'top-right',
});
console.error('Ошибка при обновлении данных:', error);
}
}; };
useEffect(() => {
if (isSuccess) {
showToast(t('toast.success'), 'success');
}
}, [isSuccess]);
useEffect(() => {
if (isError) {
showToast(t('toast.error.title'), 'error', t('toast.error.description'));
console.error(t('toast.error.description'), error);
}
}, [isError, error]);
function EditableControls() { function EditableControls() {
const { const {
isEditing, isEditing,

View File

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

View File

@ -1,45 +0,0 @@
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();
});
});

View File

@ -1,28 +0,0 @@
// 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>
`;

View File

@ -1,16 +1,16 @@
import React, { useEffect } from 'react'; import React from 'react';
import { import {
Menu, Menu,
MenuButton, MenuButton,
MenuList, MenuList,
MenuItem, MenuItem,
IconButton, IconButton,
useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { EditIcon } from '@chakra-ui/icons'; import { EditIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDeleteMasterMutation } from '../../__data__/service/api'; import { armService } from '../../api/arm';
import useShowToast from '../../hooks/useShowToast';
interface MasterActionsMenu { interface MasterActionsMenu {
id: string; id: string;
@ -21,35 +21,38 @@ const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
keyPrefix: 'dry-wash.arm.master.table.actionsMenu', keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
}); });
const [deleteMaster, { isSuccess, isError, error, isLoading }] = const { deleteMaster } = armService();
useDeleteMasterMutation(); const toast = useToast();
const showToast = useShowToast();
const handleClickDelete = async () => { const handleClickDelete = async () => {
await deleteMaster({ id }); try {
}; await deleteMaster({ id });
toast({
useEffect(() => { title: 'Мастер удалён.',
if (isSuccess) { description: `Мастер с ID "${id}" успешно удалён.`,
showToast(t('toast.success'), 'success'); status: 'success',
} duration: 5000,
}, [isSuccess]); isClosable: true,
position: 'top-right',
useEffect(() => { });
if (isError) { } catch (error) {
showToast(t('toast.error.title'), 'error', t('toast.error.description')); toast({
title: 'Ошибка удаления мастера.',
description: 'Не удалось удалить мастера. Попробуйте ещё раз.',
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
console.error(error); console.error(error);
} }
}, [isError]); };
return ( return (
<Menu> <Menu>
<MenuButton icon={<EditIcon />} as={IconButton} variant='outline' /> <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
<MenuList> <MenuList>
<MenuItem onClick={handleClickDelete} isDisabled={isLoading}> <MenuItem onClick={handleClickDelete}>{t('delete')}</MenuItem>
{t('delete')}
</MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
); );

View File

@ -12,6 +12,7 @@ import {
DrawerFooter, DrawerFooter,
DrawerHeader, DrawerHeader,
DrawerOverlay, DrawerOverlay,
useToast,
InputGroup, InputGroup,
InputLeftElement, InputLeftElement,
FormErrorMessage, FormErrorMessage,
@ -19,9 +20,9 @@ import {
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PhoneIcon } from '@chakra-ui/icons'; import { PhoneIcon } from '@chakra-ui/icons';
import { useAddMasterMutation } from '../../__data__/service/api'; import { api } from '../../__data__/service/api';
import showToast from '../../helpers/showToast';
import { DrawerInputs } from '../../models/arm/form'; import { DrawerInputs } from '../../models/arm/form';
import useShowToast from '../../hooks/useShowToast';
interface MasterDrawerProps { interface MasterDrawerProps {
isOpen: boolean; isOpen: boolean;
@ -49,19 +50,28 @@ const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
const isEmptyFields = trimMaster.name === '' || trimMaster.phone === ''; const isEmptyFields = trimMaster.name === '' || trimMaster.phone === '';
if (isEmptyFields) { if (isEmptyFields) {
showToast(t('toast.error.base'), 'error', t('toast.error.empty-fields')); showToast({
toast,
title: t('toast.error.base'),
description: t('toast.error.empty-fields'),
status: 'error',
});
return; return;
} }
await addMaster(trimMaster); await addMaster(trimMaster);
}; };
const [addMaster, { error, isSuccess }] = useAddMasterMutation(); const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
const showToast = useShowToast(); const toast = useToast();
useEffect(() => { useEffect(() => {
if (isSuccess) { if (isSuccess) {
showToast(t('toast.create-master'), 'success'); showToast({
toast,
title: t('toast.create-master'),
status: 'success',
});
reset(); reset();
onClose(); onClose();
} }
@ -69,11 +79,12 @@ const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
useEffect(() => { useEffect(() => {
if (error) { if (error) {
showToast( showToast({
t('toast.error.create-master'), toast,
'error', title: t('toast.error.create-master'),
t('toast.error.create-master-details'), description: t('toast.error.create-master-details'),
); status: 'error',
});
console.error(error); console.error(error);
} }
}, [error]); }, [error]);

View File

@ -5,8 +5,10 @@ import { useTranslation } from 'react-i18next';
import MasterActionsMenu from '../MasterActionsMenu'; import MasterActionsMenu from '../MasterActionsMenu';
import { getTimeSlot } from '../../lib'; import { getTimeSlot } from '../../lib';
import EditableWrapper from '../Editable/Editable'; import EditableWrapper from '../Editable/Editable';
import { armService } from '../../api/arm';
const MasterItem = ({ name, phone, id, schedule }) => { const MasterItem = ({ name, phone, id, schedule }) => {
const { updateMaster } = armService();
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master', keyPrefix: 'dry-wash.arm.master',
}); });
@ -14,7 +16,12 @@ const MasterItem = ({ name, phone, id, schedule }) => {
return ( return (
<Tr> <Tr>
<Td> <Td>
<EditableWrapper id={id} fieldName={'name'} value={name} /> <EditableWrapper
id={id}
as={'name'}
value={name}
onSubmit={updateMaster}
/>
</Td> </Td>
<Td> <Td>
{schedule?.length > 0 ? ( {schedule?.length > 0 ? (
@ -30,7 +37,12 @@ const MasterItem = ({ name, phone, id, schedule }) => {
)} )}
</Td> </Td>
<Td> <Td>
<EditableWrapper id={id} fieldName={'phone'} value={phone} /> <EditableWrapper
id={id}
as={'phone'}
value={phone}
onSubmit={updateMaster}
/>
</Td> </Td>
<Td> <Td>
<MasterActionsMenu id={id} /> <MasterActionsMenu id={id} />

View File

@ -10,6 +10,7 @@ import {
Button, Button,
useDisclosure, useDisclosure,
Flex, Flex,
useToast,
Td, Td,
Text, Text,
Spinner, Spinner,
@ -18,8 +19,7 @@ import { useTranslation } from 'react-i18next';
import MasterItem from '../MasterItem'; import MasterItem from '../MasterItem';
import MasterDrawer from '../MasterDrawer'; import MasterDrawer from '../MasterDrawer';
import { useGetMastersQuery } from '../../__data__/service/api'; import { api } from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
const TABLE_HEADERS = [ const TABLE_HEADERS = [
'name' as const, 'name' as const,
@ -30,17 +30,26 @@ const TABLE_HEADERS = [
const Masters = () => { const Masters = () => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const showToast = useShowToast(); const toast = useToast();
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master', keyPrefix: 'dry-wash.arm.master',
}); });
const { data: masters, error, isLoading, isSuccess } = useGetMastersQuery(); const {
data: masters,
error,
isLoading,
isSuccess,
} = api.useGetMastersQuery();
useEffect(() => { useEffect(() => {
if (error) { if (error) {
showToast(t('error.title'), 'error'); toast({
title: t('error.title'),
status: 'error',
isClosable: true,
position: 'bottom-right',
});
} }
}, [error]); }, [error]);

View File

@ -4,8 +4,35 @@ import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getTimeSlot } from '../../lib'; import { getTimeSlot } from '../../lib';
import { useUpdateOrdersMutation } from '../../__data__/service/api'; import { Master } from '../../models/api/master';
import { OrderArm, Status, statuses } from '../../models/api'; import { armService } from '../../api/arm';
const statuses = [
'pending' as const,
'progress' as const,
'working' as const,
'canceled' as const,
'complete' as const,
];
type GetArrItemType<ArrType> =
ArrType extends Array<infer ItemType> ? ItemType : never;
export type OrderProps = {
carNumber?: string;
startWashTime?: string;
endWashTime?: string;
orderDate?: string;
status?: GetArrItemType<typeof statuses>;
phone?: string;
location?: string;
master: Master;
notes: '';
allMasters: Master[];
id: string;
};
type Status = (typeof statuses)[number];
const statusColors: Record<Status, string> = { const statusColors: Record<Status, string> = {
pending: 'yellow.100', pending: 'yellow.100',
@ -26,8 +53,9 @@ const OrderItem = ({
master, master,
allMasters, allMasters,
id, id,
}: OrderArm) => { }: OrderProps) => {
const [updateOrders] = useUpdateOrdersMutation(); const { updateOrders } = armService();
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.order', keyPrefix: 'dry-wash.arm.order',
}); });
@ -44,16 +72,16 @@ const OrderItem = ({
if (selectedMaster) { if (selectedMaster) {
setMaster(masterName); setMaster(masterName);
updateOrders({ id, master: selectedMaster.id }); updateOrders({ id, masterId: selectedMaster.id });
} else { } else {
console.error('Master not found'); console.error('Master not found');
} }
}; };
const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => { const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => {
const status = e.target.value as OrderArm['status']; const status = e.target.value;
updateOrders({ id, status }); updateOrders({ id, status });
setStatus(status); setStatus(e.target.value as OrderProps['status']);
}; };
return ( return (

View File

@ -10,18 +10,16 @@ import {
Spinner, Spinner,
Text, Text,
Td, Td,
useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import OrderItem from '../OrderItem'; import OrderItem from '../OrderItem';
import { OrderProps } from '../OrderItem/OrderItem';
import { armService } from '../../api/arm';
import DateNavigator from '../DateNavigator'; import DateNavigator from '../DateNavigator';
import { import { Master } from '../../models/api/master';
useGetMastersQuery,
useGetOrdersQuery,
} from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
import { OrderArm } from '../../models/api';
const TABLE_HEADERS = [ const TABLE_HEADERS = [
'carNumber' as const, 'carNumber' as const,
@ -36,40 +34,54 @@ const Orders = () => {
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.order', keyPrefix: 'dry-wash.arm.order',
}); });
const showToast = useShowToast();
const { fetchOrders } = armService();
const { fetchMasters } = armService();
const toast = useToast();
const [orders, setOrders] = useState<OrderProps[]>([]);
const [allMasters, setAllMasters] = useState<Master[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const {
data: orders,
isLoading: isOrdersLoading,
isSuccess: isOrdersSuccess,
isError: isOrdersError,
error: ordersError,
} = useGetOrdersQuery({ date: currentDate });
const {
data: masters,
isLoading: isMastersLoading,
isSuccess: isMastersSuccess,
isError: isMastersError,
error: mastersError,
} = useGetMastersQuery();
const isLoading = isOrdersLoading || isMastersLoading;
const isSuccess = isOrdersSuccess && isMastersSuccess;
const isError = isOrdersError || isMastersError;
useEffect(() => { useEffect(() => {
if (isError) { const loadData = async () => {
showToast(t('error.title'), 'error'); setLoading(true);
} setError(null);
}, [isError, ordersError, mastersError, t]);
try {
const [ordersData, mastersData] = await Promise.all([
fetchOrders({ date: currentDate }),
fetchMasters(),
]);
setOrders(ordersData.body);
setAllMasters(mastersData.body);
} catch (err) {
setError(err.message);
toast({
title: t('error.title'),
status: 'error',
duration: 5000,
isClosable: true,
position: 'bottom-right',
});
} finally {
setLoading(false);
}
};
loadData();
}, [currentDate, toast, t]);
return ( return (
<Box p='8'> <Box p='8'>
<Heading size='lg' mb='5'> <Heading size='lg' mb='5'>
{t('title')} {t('title')}
</Heading> </Heading>
<DateNavigator <DateNavigator
currentDate={currentDate} currentDate={currentDate}
onPreviousDate={() => onPreviousDate={() =>
@ -91,27 +103,28 @@ const Orders = () => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{isLoading && ( {loading && (
<Tr> <Tr>
<Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'> <Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
<Spinner size='lg' /> <Spinner size='lg' />
</Td> </Td>
</Tr> </Tr>
)} )}
{isSuccess && orders.length === 0 && ( {!loading && orders.length === 0 && !error && (
<Tr> <Tr>
<Td colSpan={TABLE_HEADERS.length}> <Td colSpan={TABLE_HEADERS.length}>
<Text>{t('table.empty')}</Text> <Text>{t('table.empty')}</Text>
</Td> </Td>
</Tr> </Tr>
)} )}
{isSuccess && {!loading &&
!error &&
orders.map((order, index) => ( orders.map((order, index) => (
<OrderItem <OrderItem
allMasters={masters} allMasters={allMasters}
key={index} key={index}
{...order} {...order}
status={order.status as OrderArm['status']} status={order.status as OrderProps['status']}
/> />
))} ))}
</Tbody> </Tbody>

View File

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

View File

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

View File

@ -9,12 +9,12 @@ import { BenefitsSectionProps } from './types';
import { iconsMap } from './helper'; import { iconsMap } from './helper';
export const BenefitsSection: FC<BenefitsSectionProps> = ({ export const BenefitsSection: FC<BenefitsSectionProps> = ({
data: { heading, description, list } = {}, ...props data: { heading, description, list } = {},
}) => { }) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return ( return (
<PageSection {...props}> <PageSection>
<VStack w='full' spacing={2}> <VStack w='full' spacing={2}>
<Heading as='h2'>{t(heading)}</Heading> <Heading as='h2'>{t(heading)}</Heading>
<Text>{t(description)}</Text> <Text>{t(description)}</Text>

View File

@ -5,9 +5,7 @@ import { Text } from '@chakra-ui/react';
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
export const Copyright: FC = () => { export const Copyright: FC = () => {
const { t } = useTranslation('~', { const { t } = useTranslation();
keyPrefix: 'dry-wash.landing.footer'
});
return <Text color='whiteAlpha.500'>{t('copyright', { currentYear })}</Text>; return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
}; };

View File

@ -7,7 +7,7 @@ import { SiteLogo, PageSection } from '../';
import { Copyright } from './Copyright'; import { Copyright } from './Copyright';
export const Footer: FC = (props) => { export const Footer: FC = () => {
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.landing.footer.links', keyPrefix: 'dry-wash.landing.footer.links',
}); });
@ -15,17 +15,11 @@ export const Footer: FC = (props) => {
const listData = [ const listData = [
{ to: '#', label: t('privacy-policy') }, { to: '#', label: t('privacy-policy') },
{ to: '#', label: t('service-terms') }, { to: '#', label: t('service-terms') },
{ to: '#', label: t('faq') }, { to: '#', label: t('faq') },
]; ];
return ( return (
<PageSection <PageSection as='footer' py={5} bg='gray.700' color='white'>
as='footer'
py={5}
bg='gray.700'
color='white'
{...props}
>
<SiteLogo /> <SiteLogo />
<Copyright /> <Copyright />
<List spacing={2}> <List spacing={2}>

View File

@ -10,18 +10,11 @@ import { HeroSectionProps } from './types';
export const HeroSection: FC<HeroSectionProps> = ({ export const HeroSection: FC<HeroSectionProps> = ({
data: { headline, description, video } = {}, data: { headline, description, video } = {},
flexShrink, flexShrink,
...props
}) => { }) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return ( return (
<Box <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
flexShrink={flexShrink}
as='header'
pos='relative'
zIndex={0}
{...props}
>
<Box <Box
as='video' as='video'
src={`${__webpack_public_path__}/remote-assets/${video}`} src={`${__webpack_public_path__}/remote-assets/${video}`}

View File

@ -5,9 +5,9 @@ import { Image } from '@chakra-ui/react';
import { LogoSvg } from '../../../assets/icons'; import { LogoSvg } from '../../../assets/icons';
export const SiteLogo: FC = () => { export const SiteLogo: FC = () => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); const { t } = useTranslation();
return <Image src={LogoSvg} alt={t('site-logo')} w={40} />; return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
}; };
// todo: replace Image by SVG React component // todo: replace Image by SVG React component

View File

@ -9,12 +9,11 @@ import { SocialProofSectionProps } from './types';
export const SocialProofSection: FC<SocialProofSectionProps> = ({ export const SocialProofSection: FC<SocialProofSectionProps> = ({
data: { heading } = {}, data: { heading } = {},
...props
}) => { }) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return ( return (
<PageSection {...props}> <PageSection>
<Heading as='h2'>{t(heading)}</Heading> <Heading as='h2'>{t(heading)}</Heading>
<ReviewsSlider /> <ReviewsSlider />
<HStack w='full' justify='flex-end'> <HStack w='full' justify='flex-end'>

View File

@ -19,7 +19,7 @@ import {
YMapsProvider, YMapsProvider,
} from './location'; } from './location';
export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => { export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
const { const {
handleSubmit, handleSubmit,
control, control,
@ -41,7 +41,7 @@ export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
]); ]);
return ( return (
<Box p={4} marginInline='auto' {...props}> <Box p={4} marginInline='auto'>
<VStack <VStack
as='form' as='form'
noValidate noValidate

View File

@ -41,7 +41,6 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
location, location,
startWashTime, startWashTime,
endWashTime, endWashTime,
...props
}) => { }) => {
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.order-view.details', keyPrefix: 'dry-wash.order-view.details',
@ -51,7 +50,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
}); });
return ( return (
<VStack p={4} alignItems='flex-start' gap={4} {...props}> <VStack p={4} alignItems='flex-start' gap={4}>
<HStack <HStack
width='full' width='full'
flexWrap='wrap' flexWrap='wrap'

21
src/helpers/showToast.ts Normal file
View File

@ -0,0 +1,21 @@
import { UseToastOptions } from '@chakra-ui/react';
interface ShowToast {
toast: (options: UseToastOptions) => void;
title: string;
description?: string;
status: 'info' | 'warning' | 'success' | 'error';
}
const showToast = ({ toast, title, description, status }: ShowToast) => {
toast({
title,
description,
status,
duration: 5000,
isClosable: true,
position: 'top-right',
});
};
export default showToast;

View File

@ -1,28 +0,0 @@
import { useToast } from '@chakra-ui/react';
import { useCallback } from 'react';
const useShowToast = () => {
const toast = useToast();
const showToast = useCallback(
(
title: string,
status: 'info' | 'warning' | 'success' | 'error',
description?: string,
) => {
toast({
title,
description,
status,
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
[toast],
);
return showToast;
};
export default useShowToast;

View File

@ -1,3 +1,2 @@
export * from './common'; export * from './common';
export * from './order'; export * from './order';
export * from './master';

View File

@ -1,49 +1,21 @@
/* eslint-disable @typescript-eslint/no-namespace */ /* eslint-disable @typescript-eslint/no-namespace */
import { Order } from '../landing'; import { Order } from "../landing";
import { ErrorMessage } from './common'; import { ErrorMessage } from "./common";
import { Master } from './master';
export namespace GetOrder { export namespace GetOrder {
export type Response = Order.View; export type Response = Order.View;
export type Params = { export type Params = {
orderId: Order.Id; orderId: Order.Id
}; };
export type Error = ErrorMessage; export type Error = ErrorMessage;
} }
export namespace CreateOrder { export namespace CreateOrder {
export type Response = { export type Response = {
id: Order.Id; id: Order.Id
}; };
export type Params = { export type Params = {
body: Order.Create; body: Order.Create
}; };
}
type GetArrItemType<ArrType> =
ArrType extends Array<infer ItemType> ? ItemType : never;
export const statuses = [
'pending' as const,
'progress' as const,
'working' as const,
'canceled' as const,
'complete' as const,
];
export type Status = (typeof statuses)[number];
export type OrderArm = {
carNumber?: string;
startWashTime?: string;
endWashTime?: string;
orderDate?: string;
status?: GetArrItemType<typeof statuses>;
phone?: string;
location?: string;
master: Master;
notes: '';
allMasters: Master[];
id: string;
}; };

View File

@ -1,2 +1 @@
export * from './i18n'; export * from './i18n';
export * from './landing';

View File

@ -1 +1 @@
export type { default as LandingSuccessStub } from './success'; export { default as LandingSuccessStub } from './success';

View File

@ -0,0 +1,325 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Arm Page render 1`] = `
<div>
<div
class="css-1yeiifd"
>
<div
class="css-1fp6kaj"
>
<h2
class="chakra-heading css-9q1d0h"
>
title
</h2>
<div
class="chakra-stack css-1oen434"
>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
<a
class="chakra-button css-uxt1e8"
href="/auth/login"
>
orders
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
<a
class="chakra-button css-uxt1e8"
href="/auth/login"
>
master
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
</div>
</div>
<div
class="css-sy55x5"
>
<div
class="css-hpgf8j"
>
<h2
class="chakra-heading css-r7q7qr"
>
title
</h2>
<div
class="css-1me9tx"
>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
fill="currentColor"
/>
</svg>
</button>
<p
class="chakra-text css-1bntq7d"
>
2/2/2025
</p>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
fill="currentColor"
/>
</svg>
</button>
</div>
<table
class="chakra-table css-0"
>
<thead
class="css-0"
>
<tr
class="css-0"
>
<th
class="css-0"
>
table.header.carNumber
</th>
<th
class="css-0"
>
table.header.orderDate
</th>
<th
class="css-0"
>
table.header.status
</th>
<th
class="css-0"
>
table.header.masters
</th>
<th
class="css-0"
>
table.header.telephone
</th>
<th
class="css-0"
>
table.header.location
</th>
</tr>
</thead>
<tbody
class="css-0"
>
<tr
class="css-0"
>
<td
class="css-12rlgei"
colspan="6"
>
<div
class="chakra-spinner css-1y7joxr"
>
<span
class="css-8b45rq"
>
Loading...
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`Arm Page render 2`] = `
<div>
<div
class="css-1yeiifd"
>
<div
class="css-1fp6kaj"
>
<h2
class="chakra-heading css-9q1d0h"
>
title
</h2>
<div
class="chakra-stack css-1oen434"
>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
<a
class="chakra-button css-uxt1e8"
href="/auth/login"
>
orders
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
<a
class="chakra-button css-uxt1e8"
href="/auth/login"
>
master
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-1upb9tn"
/>
</div>
</div>
<div
class="css-sy55x5"
>
<div
class="css-hpgf8j"
>
<h2
class="chakra-heading css-r7q7qr"
>
title
</h2>
<div
class="css-1me9tx"
>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
fill="currentColor"
/>
</svg>
</button>
<p
class="chakra-text css-1bntq7d"
>
2/2/2025
</p>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
fill="currentColor"
/>
</svg>
</button>
</div>
<table
class="chakra-table css-0"
>
<thead
class="css-0"
>
<tr
class="css-0"
>
<th
class="css-0"
>
table.header.carNumber
</th>
<th
class="css-0"
>
table.header.orderDate
</th>
<th
class="css-0"
>
table.header.status
</th>
<th
class="css-0"
>
table.header.masters
</th>
<th
class="css-0"
>
table.header.telephone
</th>
<th
class="css-0"
>
table.header.location
</th>
</tr>
</thead>
<tbody
class="css-0"
>
<tr
class="css-0"
>
<td
class="css-12rlgei"
colspan="6"
>
<div
class="chakra-spinner css-1y7joxr"
>
<span
class="css-8b45rq"
>
Loading...
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;

View File

@ -1,472 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Landing page renders page structure 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
>
<div
class="chakra-stack css-oo194l"
>
<header
class="css-18v4itn"
data-testid="hero-section"
>
<video
autoplay=""
class="css-ekis1p"
loop=""
poster="file"
src="/remote-assets/demo.mp4"
/>
<section
class="chakra-stack css-1thnzu5"
>
<div
class="css-gmuwbf"
>
<img
alt="Логотип компании «Dry Master»"
class="chakra-image css-1pkgess"
src="file"
/>
</div>
<div
class="chakra-stack css-o51fhk"
>
<h1
class="chakra-heading css-stv3c1"
>
Оживите свою поездку с помощью экологически чистого ухода!
</h1>
<p
class="chakra-text css-1wocpjt"
>
Ощутите максимальное удобство сухой мойки автомобилей, созданной для того, чтобы планета стала чище
</p>
</div>
<a
class="chakra-button css-y8aoxt"
href="/dry-wash/order"
>
Сделать заказ
</a>
</section>
</header>
<main
class="chakra-stack css-t04jrd"
>
<section
class="chakra-stack css-w9e24l"
data-testid="benefits-section"
>
<div
class="chakra-stack css-10k9nsp"
>
<h2
class="chakra-heading css-1dklj6k"
>
Преимущества экологичной автомойки
</h2>
<p
class="chakra-text css-0"
>
Откройте для себя преимущества наших услуг по химчистке автомобилей
</p>
</div>
<ul
class="css-1okvvnm"
role="list"
>
<li
class="css-vxcmzt"
>
<svg
class="chakra-icon css-cobjw9"
fill="currentColor"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M6.05 8.05a7.001 7.001 0 0 0-.02 9.88c1.47-3.4 4.09-6.24 7.36-7.93A15.952 15.952 0 0 0 8 19.32c2.6 1.23 5.8.78 7.95-1.37C19.43 14.47 20 4 20 4S9.53 4.57 6.05 8.05z"
/>
</svg>
Экологически безопасные продукты
</li>
<li
class="css-vxcmzt"
>
<svg
class="chakra-icon css-cobjw9"
fill="currentColor"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="m14.17 13.71 1.4-2.42c.09-.15.05-.34-.08-.45l-1.48-1.16c.03-.22.05-.45.05-.68s-.02-.46-.05-.69l1.48-1.16c.13-.11.17-.3.08-.45l-1.4-2.42c-.09-.15-.27-.21-.43-.15l-1.74.7c-.36-.28-.75-.51-1.18-.69l-.26-1.85a.364.364 0 0 0-.35-.29h-2.8c-.17 0-.32.13-.35.3L6.8 4.15c-.42.18-.82.41-1.18.69l-1.74-.7c-.16-.06-.34 0-.43.15l-1.4 2.42c-.09.15-.05.34.08.45l1.48 1.16c-.03.22-.05.45-.05.68s.02.46.05.69l-1.48 1.16c-.13.11-.17.3-.08.45l1.4 2.42c.09.15.27.21.43.15l1.74-.7c.36.28.75.51 1.18.69l.26 1.85c.03.16.18.29.35.29h2.8c.17 0 .32-.13.35-.3l.26-1.85c.42-.18.82-.41 1.18-.69l1.74.7c.16.06.34 0 .43-.15zM8.81 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM21.92 18.67l-.96-.74c.02-.14.04-.29.04-.44 0-.15-.01-.3-.04-.44l.95-.74c.08-.07.11-.19.05-.29l-.9-1.55c-.05-.1-.17-.13-.28-.1l-1.11.45c-.23-.18-.48-.33-.76-.44l-.17-1.18a.216.216 0 0 0-.21-.2h-1.79c-.11 0-.21.08-.22.19l-.17 1.18c-.27.12-.53.26-.76.44l-1.11-.45a.23.23 0 0 0-.28.1l-.9 1.55c-.05.1-.04.22.05.29l.95.74a3.145 3.145 0 0 0 0 .88l-.95.74c-.08.07-.11.19-.05.29l.9 1.55c.05.1.17.13.28.1l1.11-.45c.23.18.48.33.76.44l.17 1.18c.02.11.11.19.22.19h1.79c.11 0 .21-.08.22-.19l.17-1.18c.27-.12.53-.26.75-.44l1.12.45c.1.04.22 0 .28-.1l.9-1.55c.06-.09.03-.21-.05-.28zm-4.29.16a1.35 1.35 0 1 1 .001-2.701 1.35 1.35 0 0 1-.001 2.701z"
/>
</svg>
Быстрое и эффективное обслуживание
</li>
<li
class="css-vxcmzt"
>
<svg
class="chakra-icon css-cobjw9"
fill="currentColor"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"
/>
</svg>
Удобный мобильный доступ
</li>
<li
class="css-vxcmzt"
>
<svg
class="chakra-icon css-cobjw9"
fill="currentColor"
focusable="false"
height="1em"
role="presentation"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M16.48 10.41c-.39.39-1.04.39-1.43 0l-4.47-4.46-7.05 7.04-.66-.63a3 3 0 0 1 0-4.24l4.24-4.24a3 3 0 0 1 4.24 0L16.48 9c.39.39.39 1.02 0 1.41zm.7-2.12c.78.78.78 2.05 0 2.83-1.27 1.27-2.61.22-2.83 0l-3.76-3.76-5.57 5.57a.996.996 0 0 0 0 1.41c.39.39 1.02.39 1.42 0l4.62-4.62.71.71-4.62 4.62a.996.996 0 0 0 0 1.41c.39.39 1.02.39 1.42 0l4.62-4.62.71.71-4.62 4.62a.996.996 0 1 0 1.41 1.41l4.62-4.62.71.71-4.62 4.62a.996.996 0 1 0 1.41 1.41l8.32-8.34a3 3 0 0 0 0-4.24l-4.24-4.24a3.001 3.001 0 0 0-4.18-.06l4.47 4.47z"
/>
</svg>
Надежный и заслуживающий доверия
</li>
</ul>
<div
class="chakra-stack css-1ybfgv"
>
<a
class="chakra-button css-vda7qx"
href="/dry-wash/order"
>
Сделать заказ
</a>
</div>
</section>
<section
class="chakra-stack css-w9e24l"
data-testid="social-proof-section"
>
<h2
class="chakra-heading css-1dklj6k"
>
Нас выбирают
</h2>
<div
class="chakra-tabs css-wk0uhf"
>
<div
aria-orientation="horizontal"
class="chakra-tabs__tablist css-b6qpy9"
role="tablist"
>
<button
aria-controls="tabs-:r0:--tabpanel-0"
aria-disabled="false"
aria-selected="true"
class="chakra-tabs__tab css-57d70n"
data-index="0"
id="tabs-:r0:--tab-0"
role="tab"
tabindex="0"
type="button"
>
<p
class="chakra-text css-gyp8mm"
>
0
</p>
</button>
<button
aria-controls="tabs-:r0:--tabpanel-1"
aria-disabled="false"
aria-selected="false"
class="chakra-tabs__tab css-57d70n"
data-index="1"
id="tabs-:r0:--tab-1"
role="tab"
tabindex="-1"
type="button"
>
<p
class="chakra-text css-gyp8mm"
>
1
</p>
</button>
<button
aria-controls="tabs-:r0:--tabpanel-2"
aria-disabled="false"
aria-selected="false"
class="chakra-tabs__tab css-57d70n"
data-index="2"
id="tabs-:r0:--tab-2"
role="tab"
tabindex="-1"
type="button"
>
<p
class="chakra-text css-gyp8mm"
>
2
</p>
</button>
<button
aria-controls="tabs-:r0:--tabpanel-3"
aria-disabled="false"
aria-selected="false"
class="chakra-tabs__tab css-57d70n"
data-index="3"
id="tabs-:r0:--tab-3"
role="tab"
tabindex="-1"
type="button"
>
<p
class="chakra-text css-gyp8mm"
>
3
</p>
</button>
</div>
<div
class="chakra-tabs__tab-panels css-8atqhb"
>
<div
aria-labelledby="tabs-:r0:--tab-0"
class="chakra-tabs__tab-panel css-a5mhaz"
id="tabs-:r0:--tabpanel-0"
role="tabpanel"
tabindex="0"
>
<div
class="chakra-card css-wxdwo7"
>
<span
class="chakra-avatar css-3i6ll4"
>
<div
aria-label="Анна Смирнова"
class="chakra-avatar__initials css-1ebyn6"
role="img"
>
АС
</div>
</span>
<q
class="chakra-text css-w3tajv"
>
Недавно воспользовалась услугами сухой мойки автомобилей и осталась крайне удовлетворена. Процесс был проведён профессионально: сотрудники использовали качественные средства, которые не повредили лакокрасочное покрытие. Особенно впечатлила возможность мыть машину без воды, что не только экономит ресурсы, но и бережет окружающую среду. Рекомендую всем, кто заботится о своём автомобиле и экологии!
</q>
</div>
</div>
<div
aria-labelledby="tabs-:r0:--tab-1"
class="chakra-tabs__tab-panel css-a5mhaz"
hidden=""
id="tabs-:r0:--tabpanel-1"
role="tabpanel"
tabindex="0"
>
<div
class="chakra-card css-wxdwo7"
>
<span
class="chakra-avatar css-qvlgfo"
>
<div
aria-label="Дмитрий Петров"
class="chakra-avatar__initials css-1ebyn6"
role="img"
>
ДП
</div>
</span>
<q
class="chakra-text css-w3tajv"
>
Как же я рад, что нашел эту сухую мойку! Моя машина сияет, как новенькая! 🌟 Сначала был скептически настроен, думал, как же без воды можно отмыть всё это? Но результат превзошёл все ожидания! Ветеринар мойки профессионально подошёл к делу, и она теперь выглядит потрясающе. Если вы хотите, чтобы ваш автомобиль всегда выглядел на 100%, обязательно попробуйте!
</q>
</div>
</div>
<div
aria-labelledby="tabs-:r0:--tab-2"
class="chakra-tabs__tab-panel css-a5mhaz"
hidden=""
id="tabs-:r0:--tabpanel-2"
role="tabpanel"
tabindex="0"
>
<div
class="chakra-card css-wxdwo7"
>
<span
class="chakra-avatar css-1d83cyw"
>
<div
aria-label="Алексей Сидоров"
class="chakra-avatar__initials css-1ebyn6"
role="img"
>
АС
</div>
</span>
<q
class="chakra-text css-w3tajv"
>
Сухая мойка автомобилей - интересное решение, которое я опробовал недавно. В целом остался доволен качеством работы. Однако, не все загрязнения удалось удалить с первого раза, но сотрудник предложил дополнительные услуги, что меня устроило. Плюс, большое внимание уделили защите поверхности, что тоже немаловажно. Думаю, в следующий раз снова воспользуюсь этой услугой.
</q>
</div>
</div>
<div
aria-labelledby="tabs-:r0:--tab-3"
class="chakra-tabs__tab-panel css-a5mhaz"
hidden=""
id="tabs-:r0:--tabpanel-3"
role="tabpanel"
tabindex="0"
>
<div
class="chakra-card css-wxdwo7"
>
<span
class="chakra-avatar css-ct2cfw"
>
<div
aria-label="Екатерина Иванова"
class="chakra-avatar__initials css-1ebyn6"
role="img"
>
ЕИ
</div>
</span>
<q
class="chakra-text css-w3tajv"
>
К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой.
</q>
</div>
</div>
</div>
</div>
<div
class="chakra-stack css-1ybfgv"
>
<a
class="chakra-button css-vda7qx"
href="/dry-wash/order"
>
Сделать заказ
</a>
</div>
</section>
</main>
<footer
class="chakra-stack css-1fatox6"
data-testid="footer"
>
<img
alt="Логотип компании «Dry Master»"
class="chakra-image css-1pkgess"
src="file"
/>
<p
class="chakra-text css-znk605"
>
© {{currentYear}} DryMaster. Все права защищены
</p>
<ul
class="css-bhb3xr"
role="list"
>
<li
class="css-0"
>
<a
class="chakra-link css-spn4bz"
href="/"
>
Политика конфиденциальности
</a>
</li>
<li
class="css-0"
>
<a
class="chakra-link css-spn4bz"
href="/"
>
Условия обслуживания
</a>
</li>
<li
class="css-0"
>
<a
class="chakra-link css-spn4bz"
href="/"
>
FAQ
</a>
</li>
</ul>
</footer>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;

View File

@ -1,643 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Master Page render 1`] = `
<div>
<div
class="css-1yeiifd"
>
<div
class="css-13owfwq"
>
<h2
class="chakra-heading css-173d1bl"
>
Сухой мастер
</h2>
<div
class="chakra-stack css-1cggwyz"
>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
<a
class="chakra-button css-18yoix2"
href="/order"
>
Заказы
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
<a
class="chakra-button css-1kg18wp"
data-testid="master-button"
href="/master"
>
Мастера
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
</div>
</div>
<div
class="css-jiwy8d"
>
<div
class="css-1glkkdp"
>
<div
class="css-sd3fvu"
>
<h2
class="chakra-heading css-1jb3vzl"
>
Мастера
</h2>
<button
class="chakra-button css-h211ee"
type="button"
>
+
Добавить
</button>
</div>
<table
class="chakra-table css-5605sr"
>
<thead
class="css-0"
>
<tr
class="css-0"
>
<th
class="css-1szkfps"
>
Имя
</th>
<th
class="css-1szkfps"
>
Актуальная занятость
</th>
<th
class="css-1szkfps"
>
Телефон
</th>
<th
class="css-1szkfps"
>
Действия
</th>
</tr>
</thead>
<tbody
class="css-0"
>
<tr
class="css-0"
>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
Иван Иванов
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="Иван Иванов"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<p
class="chakra-text css-q9k0mw"
>
Свободен
</p>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
+7 900 123 45 67
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="+7 900 123 45 67"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<button
aria-controls="menu-list-:r2:"
aria-expanded="false"
aria-haspopup="menu"
class="chakra-button chakra-menu__menu-button css-13sr8jm"
id="menu-button-:r2:"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
<div
class="css-ktd6ms"
style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
>
<div
aria-orientation="vertical"
class="chakra-menu__menu-list css-s5t7bz"
id="menu-list-:r2:"
role="menu"
style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
tabindex="-1"
>
<button
aria-disabled="false"
class="chakra-menu__menuitem css-y7jzs3"
data-index="0"
id="menu-list-:r2:-menuitem-:r3:"
role="menuitem"
tabindex="-1"
type="button"
>
Удалить мастера
</button>
</div>
</div>
</td>
</tr>
<tr
class="css-0"
>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
Олег Макаров
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="Олег Макаров"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<p
class="chakra-text css-q9k0mw"
>
Свободен
</p>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
79001234567
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="79001234567"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<button
aria-controls="menu-list-:r5:"
aria-expanded="false"
aria-haspopup="menu"
class="chakra-button chakra-menu__menu-button css-13sr8jm"
id="menu-button-:r5:"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
<div
class="css-ktd6ms"
style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
>
<div
aria-orientation="vertical"
class="chakra-menu__menu-list css-s5t7bz"
id="menu-list-:r5:"
role="menu"
style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
tabindex="-1"
>
<button
aria-disabled="false"
class="chakra-menu__menuitem css-y7jzs3"
data-index="0"
id="menu-list-:r5:-menuitem-:r6:"
role="menuitem"
tabindex="-1"
type="button"
>
Удалить мастера
</button>
</div>
</div>
</td>
</tr>
<tr
class="css-0"
>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
Иван Галкин
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="Иван Галкин"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-stack css-1f0wxn3"
>
<span
class="chakra-badge css-1g1qw76"
/>
<span
class="chakra-badge css-1g1qw76"
/>
</div>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-editable css-vtl58r"
>
<div
class="chakra-stack css-c2wmld"
>
<span
class="chakra-editable__preview css-1gasyng"
>
+7 900 123 45 67
</span>
<input
class="chakra-editable__input chakra-input css-2lpiar"
hidden=""
value="+7 900 123 45 67"
/>
<div
class="css-1l4w6pd"
>
<button
aria-label="Edit"
class="chakra-button css-1pqvhxt"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<button
aria-controls="menu-list-:r8:"
aria-expanded="false"
aria-haspopup="menu"
class="chakra-button chakra-menu__menu-button css-13sr8jm"
id="menu-button-:r8:"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
/>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
/>
</g>
</svg>
</button>
<div
class="css-ktd6ms"
style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
>
<div
aria-orientation="vertical"
class="chakra-menu__menu-list css-s5t7bz"
id="menu-list-:r8:"
role="menu"
style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
tabindex="-1"
>
<button
aria-disabled="false"
class="chakra-menu__menuitem css-y7jzs3"
data-index="0"
id="menu-list-:r8:-menuitem-:r9:"
role="menuitem"
tabindex="-1"
type="button"
>
Удалить мастера
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;

View File

@ -1,666 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Create Order page renders page structure 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
>
<div
class="chakra-stack css-oo194l"
>
<h2
class="chakra-heading css-1c6lvb5"
data-testid="heading"
>
Заказать мойку
</h2>
<div
class="css-1cq1v9f"
data-testid="order-form"
>
<form
class="chakra-stack css-1dhetpf"
novalidate=""
>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="phone"
id="field-:r0:-label"
>
Номер телефона
<span
aria-hidden="true"
class="chakra-form__required-indicator css-1tfjd1n"
role="presentation"
>
*
</span>
</label>
<input
aria-required="true"
autocomplete="tel"
class="chakra-input css-moii5c"
id="field-:r0:"
name="phone"
required=""
type="tel"
value=""
/>
</div>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="carNumber"
id="field-:r1:-label"
>
Номер автомобиля
<span
aria-hidden="true"
class="chakra-form__required-indicator css-1tfjd1n"
role="presentation"
>
*
</span>
</label>
<input
aria-required="true"
class="chakra-input css-moii5c"
id="field-:r1:"
maxlength="12"
name="carNumber"
required=""
value=""
/>
</div>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="carColor"
id="field-:r2:-label"
>
Цвет автомобиля
</label>
<input
class="chakra-input css-moii5c"
id="field-:r2:"
list=":r3:"
name="carColor"
value=""
/>
<datalist
id=":r3:"
>
<option
label="white"
value="#ffffff"
>
white
</option>
<option
label="black"
value="#000000"
>
black
</option>
<option
label="silver"
value="#c0c0c0"
>
silver
</option>
<option
label="gray"
value="#808080"
>
gray
</option>
<option
label="beige-brown"
value="#796745"
>
beige-brown
</option>
<option
label="red"
value="#b90000"
>
red
</option>
<option
label="blue"
value="#003B62"
>
blue
</option>
<option
label="green"
value="#078d51"
>
green
</option>
</datalist>
</div>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="carBody"
id="field-:r4:-label"
>
Тип кузова автомобиля
<span
aria-hidden="true"
class="chakra-form__required-indicator css-1tfjd1n"
role="presentation"
>
*
</span>
</label>
<div
class="css-8atqhb"
>
<input
aria-readonly="true"
aria-required="true"
class="chakra-input css-moii5c"
id="field-:r4:"
name="carBody"
placeholder="Не указан"
readonly=""
required=""
value=""
/>
<div
class="chakra-popover__popper css-iy22zq"
style="visibility: hidden; position: absolute; inset: 0 auto auto 0;"
>
<section
aria-describedby="popover-body-:r8:"
class="chakra-popover__content css-1mvj5hv"
id="popover-content-:r8:"
role="dialog"
style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.95) translateZ(0);"
tabindex="-1"
>
<div
class="chakra-popover__body css-1uqsyei"
id="popover-body-:r8:"
>
<div
class="css-124gwxm"
role="radiogroup"
>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:r9:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="1"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Седан
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:ra:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="2"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Хэтчбек
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rb:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="3"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Кроссовер
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rc:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="4"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Внедорожник
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rd:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="5"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Универсал
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:re:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="6"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Купе
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rf:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="7"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Минивэн
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rg:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="8"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Пикап
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rh:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="9"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Лифтбек
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:ri:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="10"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Спорткар
</div>
</div>
</label>
</div>
<div
class="css-0"
>
<label
class="css-4g6ai3"
>
<input
aria-required="true"
hidden=""
id="radio-:rj:"
name="radio-:r5:"
required=""
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
type="radio"
value="99"
/>
<div
aria-hidden="true"
class="css-daiawq"
>
<div
class="css-dvxtzn"
>
<img
class="chakra-image css-wtpnzt"
src="file"
/>
Другой
</div>
</div>
</label>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="field-:rk:"
id="field-:rk:-label"
>
В какое время автомобиль доступен?
<span
aria-hidden="true"
class="chakra-form__required-indicator css-1tfjd1n"
role="presentation"
>
*
</span>
</label>
<div
class="css-17bf4de"
>
<div
class="css-brwuli"
>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<input
class="chakra-input css-moii5c"
id="field-:rl:"
max=""
name="availableDatetimeBegin"
type="datetime-local"
value=""
/>
</div>
</div>
<div
class="css-brwuli"
>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<input
class="chakra-input css-moii5c"
id="field-:rm:"
min=""
name="availableDatetimeEnd"
type="datetime-local"
value=""
/>
</div>
</div>
</div>
</div>
<div
class="chakra-form-control css-1kxonj9"
role="group"
>
<label
class="chakra-form__label css-g6pte"
for="carLocation"
id="field-:rn:-label"
>
Где находится автомобиль?
<span
aria-hidden="true"
class="chakra-form__required-indicator css-1tfjd1n"
role="presentation"
>
*
</span>
</label>
<div />
<div
class="chakra-form__helper-text css-186pyma"
id="field-:rn:-helptext"
>
Например, 55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500
</div>
</div>
<div />
<button
class="chakra-button css-13n15nk"
type="submit"
>
Отправить
</button>
</form>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;

View File

@ -1,235 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Order View page, initial load shows order details 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
>
<div
class="chakra-stack css-oo194l"
>
<h2
class="chakra-heading css-1c6lvb5"
data-testid="heading"
>
Ваш заказ
</h2>
<div
class="chakra-stack css-1n38vgh"
created="2025-01-19T14:04:02.985Z"
data-testid="order-details"
>
<div
class="chakra-stack css-1ofajmr"
>
<h2
class="chakra-heading css-1jb3vzl"
>
Заказ №{{number}}
</h2>
<span
class="css-6jfsiv"
>
В ожидании
</span>
</div>
<ul
class="css-1laduhn"
role="list"
>
<li
class="css-0"
>
Владелец
:
<span
class="chakra-text css-1qxum2s"
>
+79876543210
</span>
</li>
<li
class="css-0"
>
Автомобиль
:
<span
class="chakra-text css-1qxum2s"
>
А123АА16, Хэтчбек, #ffffff
</span>
</li>
<li
class="css-0"
>
Где
:
<span
class="chakra-text css-1qxum2s"
>
55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо
</span>
</li>
<li
class="css-0"
>
Когда
:
<span
class="chakra-text css-1qxum2s"
>
17:03 19.01.2025 - 17:03 19.01.2025
</span>
</li>
</ul>
<div
class="chakra-alert css-d7mf12"
data-status="info"
role="alert"
>
<span
class="chakra-alert__icon css-14ogjxt"
data-status="info"
>
<svg
class="chakra-icon css-qk6lof"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
fill="currentColor"
/>
</svg>
</span>
С вами свяжется оператор насчет оплаты по указанному номеру телефона
</div>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;
exports[`Order View page, initial load shows order details loading 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
>
<div
class="chakra-stack css-oo194l"
>
<h2
class="chakra-heading css-1c6lvb5"
data-testid="heading"
>
Ваш заказ
</h2>
<div
class="chakra-stack css-egjlgc"
data-testid="loader"
>
<div
class="chakra-spinner css-1j92705"
>
<span
class="css-8b45rq"
>
Loading...
</span>
</div>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;
exports[`Order View page, initial load shows order error 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
>
<div
class="chakra-stack css-oo194l"
>
<h2
class="chakra-heading css-1c6lvb5"
data-testid="heading"
>
Ваш заказ
</h2>
<div
class="chakra-alert css-g4o1ra"
data-status="error"
data-testid="error"
role="alert"
>
<span
class="chakra-alert__icon css-14ogjxt"
data-status="error"
>
<svg
class="chakra-icon css-qk6lof"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
fill="currentColor"
/>
</svg>
</span>
<div
class="css-0"
>
<div
class="chakra-alert__title css-tidvy5"
data-status="error"
>
Не удалось загрузить детали заказа
</div>
</div>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;

View File

@ -1,428 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`order page получение списка заказов 1`] = `
<div>
<div
class="css-1yeiifd"
>
<div
class="css-13owfwq"
>
<h2
class="chakra-heading css-173d1bl"
>
Сухой мастер
</h2>
<div
class="chakra-stack css-1cggwyz"
>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
<a
class="chakra-button css-1kg18wp"
href="/auth/login"
>
Заказы
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
<a
class="chakra-button css-1kg18wp"
data-testid="master-button"
href="/auth/login"
>
Мастера
</a>
<hr
aria-orientation="horizontal"
class="chakra-divider css-svjswr"
/>
</div>
</div>
<div
class="css-jiwy8d"
>
<div
class="css-1glkkdp"
>
<h2
class="chakra-heading css-1xer3cv"
>
Заказы
</h2>
<div
class="css-1u3smh"
>
<button
class="chakra-button css-ez23ye"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
fill="currentColor"
/>
</svg>
</button>
<p
class="chakra-text css-52ukzg"
>
16.02.2025
</p>
<button
class="chakra-button css-ez23ye"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
fill="currentColor"
/>
</svg>
</button>
</div>
<table
class="chakra-table css-5605sr"
>
<thead
class="css-0"
>
<tr
class="css-0"
>
<th
class="css-1szkfps"
>
Номер машины
</th>
<th
class="css-1szkfps"
>
Дата заказа
</th>
<th
class="css-1szkfps"
>
Статус
</th>
<th
class="css-1szkfps"
>
Мастер
</th>
<th
class="css-1szkfps"
>
Телефон
</th>
<th
class="css-1szkfps"
>
Расположение
</th>
</tr>
</thead>
<tbody
class="css-0"
>
<tr
class="css-0"
>
<td
class="css-zgoslk"
>
A123BC
</td>
<td
class="css-zgoslk"
>
24.11.2024
<br />
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-select__wrapper css-42b2qy"
>
<select
class="chakra-select css-11j19cx"
>
<option
value=""
>
Выберите статус
</option>
<option
value="pending"
>
В ожидании
</option>
<option
value="progress"
>
Выполняется
</option>
<option
value="working"
>
В работе
</option>
<option
value="canceled"
>
Отменено
</option>
<option
value="complete"
>
Завершено
</option>
</select>
<div
class="chakra-select__icon-wrapper css-iohxn1"
>
<svg
aria-hidden="true"
class="chakra-select__icon"
focusable="false"
role="presentation"
style="width: 1em; height: 1em; color: currentColor;"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
fill="currentColor"
/>
</svg>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-select__wrapper css-42b2qy"
>
<select
class="chakra-select css-161pkch"
>
<option
value=""
>
Выберите мастера
</option>
<option
value="Иван Иванов"
>
Иван Иванов
</option>
<option
value="Олег Макаров"
>
Олег Макаров
</option>
<option
value="Иван Галкин"
>
Иван Галкин
</option>
</select>
<div
class="chakra-select__icon-wrapper css-iohxn1"
>
<svg
aria-hidden="true"
class="chakra-select__icon"
focusable="false"
role="presentation"
style="width: 1em; height: 1em; color: currentColor;"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
fill="currentColor"
/>
</svg>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<a
class="chakra-link css-spn4bz"
href="tel:"
>
79001234563
</a>
</td>
<td
class="css-zgoslk"
>
Казань, ул. Баумана, 1
</td>
</tr>
<tr
class="css-0"
>
<td
class="css-zgoslk"
>
A245BC
</td>
<td
class="css-zgoslk"
>
24.11.2024
<br />
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-select__wrapper css-42b2qy"
>
<select
class="chakra-select css-lvra4l"
>
<option
value=""
>
Выберите статус
</option>
<option
value="pending"
>
В ожидании
</option>
<option
value="progress"
>
Выполняется
</option>
<option
value="working"
>
В работе
</option>
<option
value="canceled"
>
Отменено
</option>
<option
value="complete"
>
Завершено
</option>
</select>
<div
class="chakra-select__icon-wrapper css-iohxn1"
>
<svg
aria-hidden="true"
class="chakra-select__icon"
focusable="false"
role="presentation"
style="width: 1em; height: 1em; color: currentColor;"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
fill="currentColor"
/>
</svg>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<div
class="chakra-select__wrapper css-42b2qy"
>
<select
class="chakra-select css-161pkch"
>
<option
value=""
>
Выберите мастера
</option>
<option
value="Иван Иванов"
>
Иван Иванов
</option>
<option
value="Олег Макаров"
>
Олег Макаров
</option>
<option
value="Иван Галкин"
>
Иван Галкин
</option>
</select>
<div
class="chakra-select__icon-wrapper css-iohxn1"
>
<svg
aria-hidden="true"
class="chakra-select__icon"
focusable="false"
role="presentation"
style="width: 1em; height: 1em; color: currentColor;"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
fill="currentColor"
/>
</svg>
</div>
</div>
</td>
<td
class="css-zgoslk"
>
<a
class="chakra-link css-spn4bz"
href="tel:"
>
79001234567
</a>
</td>
<td
class="css-zgoslk"
>
Казань, ул. Баумана, 43
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<span
hidden=""
id="__chakra_env"
/>
</div>
`;

View File

@ -1,4 +1,4 @@
import * as React from 'react'; import React from 'react';
import { import {
describe, describe,
it, it,
@ -12,11 +12,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import { http, HttpResponse } from 'msw'; import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node'; import { setupServer } from 'msw/node';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import ErrorBoundary from '../../components/ErrorBoundary';
import { store } from '../../__data__/store';
import Page from '../arm'; import Page from '../arm';
const server = setupServer( const server = setupServer(
@ -91,6 +87,17 @@ const server = setupServer(
}), }),
); );
jest.mock('react-i18next', () => {
return {
useTranslation: () => {
return {
t: (key: never) => `${key}`,
i18n: {},
};
},
};
});
jest.mock('@brojs/cli', () => { jest.mock('@brojs/cli', () => {
return { return {
getNavigationValue: () => '/auth/login', getNavigationValue: () => '/auth/login',
@ -98,28 +105,24 @@ jest.mock('@brojs/cli', () => {
}; };
}); });
describe('order page', () => { describe('Arm Page', () => {
beforeAll(() => server.listen()); beforeAll(() => server.listen());
afterEach(() => server.resetHandlers()); afterEach(() => server.resetHandlers());
afterAll(() => server.close()); afterAll(() => server.close());
it('получение списка заказов ', async () => { it('render ', async () => {
server.events.on('request:start', ({ request }) => { server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url); console.log('Outgoing:', request.method, request.url);
}); });
const { container } = render( const { container } = render(
<Provider store={store}> <BrowserRouter>
<ChakraProvider theme={chakraTheme}> <Page mockUser={{ name: 'ilnaz' }} />
<ErrorBoundary> </BrowserRouter>,
<BrowserRouter>
<Page mockUser={{ name: 'ilnaz' }} />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>,
); );
expect(container).toMatchSnapshot();
await waitFor(() => screen.getByText('A123BC')); await waitFor(() => screen.getByText('A123BC'));
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();

View File

@ -1,22 +0,0 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { AppContext } from '../../../__mocks__/app-context-mock';
import Page from '../landing';
describe('Landing page', () => {
test('renders page structure', () => {
const { container } = render(
<AppContext>
<Page />
</AppContext>,
);
expect(container).toMatchSnapshot();
expect(screen.getByTestId('hero-section')).toBeInTheDocument();
expect(screen.getByTestId('benefits-section')).toBeInTheDocument();
expect(screen.getByTestId('social-proof-section')).toBeInTheDocument();
expect(screen.getByTestId('footer')).toBeInTheDocument();
});
});

View File

@ -1,98 +0,0 @@
import * as React from 'react';
import {
describe,
it,
expect,
jest,
beforeAll,
afterEach,
afterAll,
} from '@jest/globals';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import ErrorBoundary from '../../components/ErrorBoundary';
import { store } from '../../__data__/store';
import Page from '../arm';
const server = setupServer(
http.get('/api/arm/masters', () => {
return HttpResponse.json({
success: true,
body: [
{
id: '4545423234',
name: 'Иван Иванов',
phone: '+7 900 123 45 67',
},
{
name: 'Олег Макаров',
phone: '79001234567',
id: '23423442',
},
{
id: '345354234',
name: 'Иван Галкин',
schedule: [
{
id: 'order1',
startWashTime: '2024-11-24T10:30:00.000Z',
endWashTime: '2024-11-24T16:30:00.000Z',
},
{
id: 'order2',
startWashTime: '2024-11-24T11:30:00.000Z',
endWashTime: '2024-11-24T17:30:00.000Z',
},
],
phone: '+7 900 123 45 67',
},
],
});
}),
);
jest.mock('@brojs/cli', () => {
return {
getNavigationValue: (key: string) =>
// eslint-disable-next-line @typescript-eslint/no-require-imports
require('../../../bro.config').navigations[key],
getConfigValue: () => '/api',
};
});
describe('Master Page', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('render ', async () => {
server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url);
});
const { container } = render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Page mockUser={{ name: 'ilnaz' }} />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>,
);
const button = await waitFor(() => screen.getByTestId('master-button'));
fireEvent.click(button);
await waitFor(() => screen.getByText('Иван Иванов'));
expect(container).toMatchSnapshot();
});
});

View File

@ -1,20 +0,0 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { AppContext } from '../../../__mocks__/app-context-mock';
import Page from '../order-create';
describe('Create Order page', () => {
test('renders page structure', () => {
const { container } = render(
<AppContext>
<Page />
</AppContext>,
);
expect(container).toMatchSnapshot();
expect(screen.getByTestId('heading')).toBeInTheDocument();
expect(screen.getByTestId('order-form')).toBeInTheDocument();
});
});

View File

@ -1,77 +0,0 @@
import { render, screen, waitFor } from '@testing-library/react';
import React from 'react';
import { useParams } from 'react-router-dom';
import { AppContext } from '../../../__mocks__/app-context-mock';
import Page from '../order-view';
import { server } from '../../../__mocks__/server/server';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: jest.fn(),
}));
describe('Order View page, initial load', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test('shows order details loading', () => {
(useParams as jest.Mock).mockReturnValue({ orderId: 'id1' });
const { container } = render(
<AppContext>
<Page />
</AppContext>,
);
expect(screen.getByTestId('heading')).toBeInTheDocument();
expect(screen.getByTestId('loader')).toBeInTheDocument();
expect(screen.queryByTestId('order-details')).not.toBeInTheDocument();
expect(screen.queryByTestId('error')).not.toBeInTheDocument();
expect(container).toMatchSnapshot();
});
test('shows order details', async () => {
(useParams as jest.Mock).mockReturnValue({ orderId: 'id1' });
const { container } = render(
<AppContext>
<Page />
</AppContext>,
);
await waitFor(() => {
expect(screen.getByTestId('heading')).toBeInTheDocument();
expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
expect(screen.getByTestId('order-details')).toBeInTheDocument();
expect(screen.queryByTestId('error')).not.toBeInTheDocument();
});
expect(container).toMatchSnapshot();
});
test('shows order error', async () => {
(useParams as jest.Mock).mockReturnValue({ orderId: null });
const { container } = render(
<AppContext>
<Page />
</AppContext>,
);
await waitFor(() => {
expect(screen.getByTestId('heading')).toBeInTheDocument();
expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
expect(screen.queryByTestId('order-details')).not.toBeInTheDocument();
expect(screen.getByTestId('error')).toBeInTheDocument();
});
expect(container).toMatchSnapshot();
});
});
afterEach(() => {
jest.clearAllMocks();
});

View File

@ -1,67 +0,0 @@
import * as React from 'react';
import {
describe,
it,
jest,
beforeAll,
afterEach,
afterAll,
} from '@jest/globals';
import { render, screen, waitFor } from '@testing-library/react';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import ErrorBoundary from '../../components/ErrorBoundary';
import { store } from '../../__data__/store';
import Page from '../arm';
const server = setupServer(
http.post('/api/arm/orders', () => {
return HttpResponse.json({
success: true,
body: [],
});
}),
http.get('/api/arm/masters', () => {
return HttpResponse.json({
success: true,
body: [],
});
}),
);
jest.mock('@brojs/cli', () => {
return {
getNavigationValue: () => '/auth/login',
getConfigValue: () => '/api',
};
});
describe('order page', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('получение пустого списка', async () => {
server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url);
});
render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Page mockUser={{ name: 'ilnaz' }} />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>,
);
await waitFor(() => screen.getByText('Список пуст'));
});
});

View File

@ -1,64 +0,0 @@
import * as React from 'react';
import {
describe,
it,
jest,
beforeAll,
afterEach,
afterAll,
expect,
} from '@jest/globals';
import { render, screen, waitFor } from '@testing-library/react';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import ErrorBoundary from '../../components/ErrorBoundary';
import { store } from '../../__data__/store';
import Page from '../arm';
import { PageSpinner } from '../../components';
const server = setupServer(
http.get('/api/arm/orders', () => {
return HttpResponse.json({}, { status: 500 });
}),
);
jest.mock('@brojs/cli', () => {
return {
getNavigationValue: () => '/auth/login',
getConfigValue: () => '/api',
};
});
describe('order page', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('обработка ошибки при загрузке данных', async () => {
render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Page mockUser={{ name: 'ilnaz' }} />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>,
);
await waitFor(() => screen.getByText('Ошибка при загрузке данных'));
});
});
describe('Routers', () => {
it('отображает PageSpinner ', async () => {
render(<PageSpinner />);
expect(await screen.findByTestId('spinner')).toBeTruthy();
});
});

View File

@ -30,19 +30,18 @@ const Page: FC = () => {
<HeroSection <HeroSection
data={landingSuccessStub['body']['hero-section']} data={landingSuccessStub['body']['hero-section']}
flexShrink={0} flexShrink={0}
data-testid='hero-section'
/> />
<VStack as='main' flexGrow={1}> <VStack as='main' flexGrow={1}>
{landingSuccessStub.body.sections.map(({ type, ...data }, i) => { {landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
if (isBenefitsSectionData(type, data)) { if (isBenefitsSectionData(type, data)) {
return <BenefitsSection key={i} data={data} data-testid='benefits-section' />; return <BenefitsSection key={i} data={data} />;
} }
if (isSocialProofSectionData(type, data)) { if (isSocialProofSectionData(type, data)) {
return <SocialProofSection key={i} data={data} data-testid='social-proof-section' />; return <SocialProofSection key={i} data={data} />;
} }
})} })}
</VStack> </VStack>
<Footer data-testid='footer' /> <Footer />
</VStack> </VStack>
</Container> </Container>
</LandingThemeProvider> </LandingThemeProvider>

View File

@ -38,13 +38,12 @@ const Page: FC = () => {
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}> <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
{createOrderMutation.isUninitialized ? ( {createOrderMutation.isUninitialized ? (
<> <>
<Heading textAlign='center' mt={4} data-testid='heading'> <Heading textAlign='center' mt={4}>
{t('title')} {t('title')}
</Heading> </Heading>
<OrderForm <OrderForm
onSubmit={onOrderFormSubmit} onSubmit={onOrderFormSubmit}
loading={createOrderMutation.isLoading} loading={createOrderMutation.isLoading}
data-testid='order-form'
/> />
</> </>
) : ( ) : (

View File

@ -58,11 +58,11 @@ const Page: FC = () => {
centerContent centerContent
> >
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}> <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
<Heading textAlign='center' mt={4} data-testid='heading'> <Heading textAlign='center' mt={4}>
{t('title')} {t('title')}
</Heading> </Heading>
{isLoading ? ( {isLoading ? (
<HStack width='full' justifyContent='center' data-testid='loader'> <HStack width='full' justifyContent='center'>
<Spinner size='lg' /> <Spinner size='lg' />
</HStack> </HStack>
) : ( ) : (
@ -80,13 +80,12 @@ const Page: FC = () => {
startWashTime={order.startWashTime} startWashTime={order.startWashTime}
endWashTime={order.endWashTime} endWashTime={order.endWashTime}
created={order.created} created={order.created}
data-testid='order-details'
/> />
)} )}
</> </>
<> <>
{isError && ( {isError && (
<Alert status='error' alignItems='flex-start' data-testid='error'> <Alert status='error' alignItems='flex-start'>
<AlertIcon /> <AlertIcon />
<Box> <Box>
<AlertTitle> <AlertTitle>

View File

@ -53,7 +53,7 @@ router.delete('/arm/masters/:id', (req, res) => {
); );
}); });
router.patch('/order/:id', (req, res) => { router.patch('/orders/:id', (req, res) => {
res res
.status(/error/.test(STUBS.orders) ? 500 : 200) .status(/error/.test(STUBS.orders) ? 500 : 200)
.send( .send(