dry_wash_inc/dry-wash-pl
dry_wash_inc/dry-wash-pl
3
1
Fork 0
Code Issues 17 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/order'

Browse Source
This commit is contained in:
RustamRu 2025-03-12 17:12:39 +03:00
commit 0b9d8c9fb6
25 changed files with 718 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
__mocks__/brojs-cli-mock.ts
View File

@ -3,7 +3,9 @@ import { jest } from '@jest/globals';
jest.mock('@brojs/cli', () => ({
getConfigValue: jest.fn(() => '/api'),
getFeatures: jest.fn(() => ({
['order-view-status-polling']: { value: '3000' }
['order-view-status-polling']: { value: '3000' },
['car-img-upload']: { value: 'true' },
['order-cost']: { value: '1000' },
})),
getNavigationValue: jest.fn((navKey: string) => {
switch (navKey) {

2
jest-preset-it/jest-preset.ts
View File

@ -5,7 +5,7 @@ module.exports = {
},
coverageProvider: 'v8',
coverageDirectory: 'coverage',
collectCoverageFrom: ['**/src/**/*.{ts,tsx}', '!**/src/app.tsx'],
collectCoverageFrom: ['**/src/**/*.{ts,tsx}', '!**/src/app.tsx', '!**/src/**/types.ts', '!**/src/**/*.d.ts', '!**/src/models/**/*'],
collectCoverage: true,
clearMocks: true,
moduleNameMapper: {

3
locales/en.json
View File

@ -67,6 +67,9 @@
"dry-wash.order-view.upload-car-image.file-input.button": "Upload",
"dry-wash.order-view.upload-car-image-query.success.title": "The car image is successfully uploaded",
"dry-wash.order-view.upload-car-image-query.error.title": "Failed to upload the car image",
"dry-wash.order-view.price-car.title": "The level of car contamination:",
"dry-wash.order-view.price-car.description": "The cost of washing:",
"dry-wash.order-view.price-car.error": "Failed to determine the level of car contamination",
"dry-wash.arm.master.add": "Add",
"dry-wash.arm.order.title": "Orders",
"dry-wash.arm.order.table.empty": "Table empty",

3
locales/ru.json
View File

@ -122,6 +122,9 @@
"dry-wash.order-view.upload-car-image.file-input.button": "Загрузить",
"dry-wash.order-view.upload-car-image-query.success.title": "Изображение автомобиля успешно загружено",
"dry-wash.order-view.upload-car-image-query.error.title": "Не удалось загрузить изображение автомобиля",
"dry-wash.order-view.price-car.title": "Уровень загрязнения машины:",
"dry-wash.order-view.price-car.description": "Стоимость мойки:",
"dry-wash.order-view.price-car.error": "Не удалось определить уровень загрязнения машины",
"dry-wash.notFound.title": "Страница не найдена",
"dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
"dry-wash.notFound.button.back": "Вернуться на главную",

50
src/components/PriceCar/PriceCar.tsx
View File

@ -1,8 +1,11 @@
import { Box, Image, Progress, Text } from '@chakra-ui/react';
import { Box, Image, Progress, Text, VStack } from '@chakra-ui/react';
import React from 'react';
import { getFeatures } from '@brojs/cli';
import { useTranslation } from 'react-i18next';
const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл
import { formatPrice, getProgressColor } from './helper';
const PRICE_INCREASE_PERCENT_PER_RATING = 10;
export const PriceCar = ({ image, rating, description }) => {
const BASE_WASH_PRICE: number = Number(
@ -15,33 +18,56 @@ export const PriceCar = ({ image, rating, description }) => {
return BASE_WASH_PRICE + priceIncrease;
};
const { i18n, t } = useTranslation('~', {
keyPrefix: 'dry-wash.order-view.price-car',
});
const washPrice = calculateWashPrice(rating);
const formattedPrice = formatPrice(washPrice, i18n.language);
const progressValue = (rating / 10) * 100;
return (
<Box
alignItems='center'
gap={5}
width='100%'
display='flex'
flexDirection='column'
justifyContent='center'
alignItems='flex-start'
flexWrap='wrap'
>
<Image
maxWidth='600px'
width='100%'
objectFit='contain'
borderRadius='md'
src={image}
alt='Car Image'
alt=''
/>
{rating ? (
<Box width='100%' maxW='600px'>
<Text>Рейтинг загрязнения машины:</Text>
<Progress value={progressValue} size='sm' colorScheme='red' mt={2} />
<Text mt={2}>Стоимость мойки: {washPrice.toFixed(2)} руб.</Text>
<Box flex='1 1 40%'>
{!Number.isNaN(progressValue) ? (
<VStack alignItems='stretch'>
<Box>
<Text>{t('title')}</Text>
<Progress
value={progressValue}
size='sm'
sx={{
'& > div': {
backgroundColor: getProgressColor(progressValue),
},
}}
mt={2}
/>
<Text mt={2}>
{t('description')} <b>{formattedPrice}</b>
</Text>
</Box>
<Text fontStyle='italic'>{description}</Text>
</VStack>
) : (
<Text>Не удалость определить уровень загрязнения машины</Text>
<Text>{t('error')}</Text>
)}
<Text>{description}</Text>
</Box>
</Box>
);
};

15
src/components/PriceCar/helper.ts Normal file
View File

@ -0,0 +1,15 @@
export const formatPrice = (price: number, locale = 'ru-RU', currency = 'RUB') => {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency,
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(price);
};
export const getProgressColor = (value: number) => {
const normalizedValue = value / 100;
const hue = 120 - normalizedValue * 120;
return `hsl(${hue}, 100%, 50%)`;
};

4
src/components/order-form/form/car-body/car-body-select.tsx
View File

@ -40,12 +40,14 @@ export const CarBodySelect = forwardRef<HTMLInputElement, CarBodySelectProps>(
});
return (
<Box width='100%'>
<Box width='100%' pos='relative'>
<Popover
isOpen={isOpen}
autoFocus={false}
placement='bottom-start'
matchWidth
gutter={2}
strategy="fixed"
>
<PopoverAnchor>
<Input

1
src/components/order-form/form/car-body/index.ts
View File

@ -1 +1,2 @@
export { CarBodySelect } from './car-body-select';
export { carBodySelectOptions } from './helper';

75
src/components/order-form/form/car-color/car-color-select.test.tsx Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { CarColorSelect } from './car-color-select';
// Mock the translation hook
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
// Return the last part of the key as that's what component is using
const keyParts = key.split('.');
return keyParts[keyParts.length - 1];
},
}),
}));
describe('CarColorSelect', () => {
it('renders color options correctly', () => {
const onChange = jest.fn();
render(<CarColorSelect onChange={onChange} />);
// Check if color buttons are rendered
const colorButtons = screen.getAllByRole('button');
expect(colorButtons.length).toBeGreaterThan(0);
});
it('handles color selection', () => {
const onChange = jest.fn();
render(<CarColorSelect onChange={onChange} />);
// Click the first color button
const colorButtons = screen.getAllByRole('button');
fireEvent.click(colorButtons[0]);
expect(onChange).toHaveBeenCalled();
});
it('handles custom color selection', () => {
const onChange = jest.fn();
render(<CarColorSelect onChange={onChange} />);
// Find and click the custom color button
const customButton = screen.getByText('custom');
fireEvent.click(customButton);
// Check if custom color input appears
const customInput = screen.getByPlaceholderText('placeholder');
expect(customInput).toBeInTheDocument();
// Test custom color input
fireEvent.change(customInput, { target: { value: '#FF0000' } });
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
target: { value: '#FF0000' },
}));
});
it('shows selected color label when color is selected', () => {
const onChange = jest.fn();
render(<CarColorSelect value="black" onChange={onChange} />);
// Since the color label might not be immediately visible,
// we'll verify the component renders without crashing
const buttons = screen.getAllByRole('button');
expect(buttons.length).toBeGreaterThan(0);
});
it('handles invalid state', () => {
render(<CarColorSelect isInvalid={true} />);
// Since the component doesn't show explicit invalid state UI,
// we'll verify that the component renders without crashing
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
});
});

151
src/components/order-form/form/car-color/car-color-select.tsx
View File

@ -1,14 +1,10 @@
import React, { forwardRef, useState } from 'react';
import {
Input,
Box,
Stack,
Text,
Flex,
} from '@chakra-ui/react';
import { Input, Box, Stack, Text, Flex } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { CAR_COLORS } from './helper';
import { Car } from '../../../../models';
import { carColorSelectOptions } from './helper';
interface CarColorSelectProps {
value?: string;
@ -18,11 +14,11 @@ interface CarColorSelectProps {
}
export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
function CarColorSelect(props) {
function CarColorSelect(props, ref) {
const [customColor, setCustomColor] = useState('');
const [isCustom, setIsCustom] = useState(false);
const handleColorChange = (value: string) => {
const handleColorChange = (value: Car.Color | string) => {
if (value === 'custom') {
setIsCustom(true);
return;
@ -33,7 +29,9 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
} as React.ChangeEvent<HTMLInputElement>);
};
const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleCustomColorChange = (
e: React.ChangeEvent<HTMLInputElement>,
) => {
const value = e.target.value;
setCustomColor(value);
props.onChange?.({
@ -48,47 +46,57 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
const currentValue = isCustom ? 'custom' : props.value;
return (
<Stack spacing={4} width="100%">
<Flex gap={3} wrap="nowrap" overflowX="auto" pb={2}>
{CAR_COLORS.map(({ name, code }) => (
<Stack spacing={4} width='100%' ref={ref}>
<Flex gap={2} wrap='wrap' pb={2}>
{carColorSelectOptions.map(({ value, labelTKey, code }) => (
<Box
key={name}
key={value}
flexShrink={0}
as="button"
type="button"
onClick={() => handleColorChange(name)}
as='button'
type='button'
onClick={() => handleColorChange(value)}
>
<Flex
align="center"
align='center'
gap={2}
p={2}
borderRadius="full"
borderWidth="2px"
borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
bg={currentValue === name ? 'primary.50' : 'white'}
p={1}
borderRadius='full'
borderWidth='2px'
borderColor='gray.200'
bg='white'
_hover={{
borderColor: 'primary.500',
bg: currentValue === name ? 'primary.50' : 'gray.50'
bg: 'gray.50',
}}
minW={currentValue === name ? '120px' : 'auto'}
h="48px"
justify="center"
transition="all 0.2s"
justify='center'
transition='all 0.2s'
{...(currentValue === value && {
borderColor: 'primary.500',
bg: 'primary.50',
paddingInlineEnd: 3,
_hover: {
bg: 'primary.50',
},
})}
>
<Flex align="center" gap={2}>
<Flex align='center' gap={2}>
<Box
w="32px"
h="32px"
borderRadius="full"
w='32px'
h='32px'
borderRadius='full'
bg={code}
border="1px"
borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
transition="all 0.2s"
boxShadow={currentValue === name ? 'sm' : 'none'}
border='1px'
borderColor='gray.200'
transition='all 0.2s'
boxShadow='none'
{...(currentValue === value && {
borderColor: 'primary.500',
boxShadow: 'sm',
})}
/>
{currentValue === name && (
<Text fontSize="xs" color="primary.700" fontWeight="medium">
{t(`colors.${name}`)}
{currentValue === value && (
<Text fontSize='xs' color='primary.700' fontWeight='medium'>
{t(`colors.${labelTKey}`)}
</Text>
)}
</Flex>
@ -97,58 +105,65 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
))}
<Box
flexShrink={0}
as="button"
type="button"
as='button'
type='button'
onClick={() => handleColorChange('custom')}
>
<Flex
align="center"
align='center'
gap={2}
p={2}
borderRadius="full"
borderWidth="2px"
borderColor={isCustom ? 'primary.500' : 'gray.200'}
bg={isCustom ? 'primary.50' : 'white'}
p={1}
paddingInlineEnd={3}
borderRadius='full'
borderWidth='2px'
borderColor='gray.200'
bg='white'
_hover={{
borderColor: 'primary.500',
bg: isCustom ? 'primary.50' : 'gray.50'
bg: 'gray.50',
}}
minW={isCustom ? '200px' : 'auto'}
h="48px"
justify="center"
transition="all 0.2s"
justify='center'
transition='all 0.2s'
{...(isCustom && {
borderColor: 'primary.500',
paddingInlineStart: 3,
bg: 'primary.50',
_hover: {
bg: 'primary.50',
},
})}
>
{isCustom ? (
<Flex gap={2} align="center">
<Text fontSize="xs" color="primary.700" fontWeight="medium">
<Flex gap={2} align='center'>
<Text fontSize='xs' color='primary.700' fontWeight='medium'>
{t('custom-label')}
</Text>
<Input
size="sm"
width="120px"
size='sm'
width='120px'
value={customColor}
onChange={handleCustomColorChange}
placeholder={t('placeholder')}
onClick={(e) => e.stopPropagation()}
borderColor="primary.200"
borderColor='primary.200'
_focus={{
borderColor: 'primary.500',
boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)'
boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)',
}}
/>
</Flex>
) : (
<Flex align="center" gap={2}>
<Flex align='center' gap={2}>
<Box
w="32px"
h="32px"
borderRadius="full"
bg="gray.100"
border="1px"
borderColor="gray.200"
transition="all 0.2s"
w='32px'
h='32px'
borderRadius='full'
bg='gray.100'
border='1px'
borderColor='gray.200'
transition='all 0.2s'
/>
<Text fontSize="xs" color="gray.500">
<Text fontSize='xs' color='gray.500'>
{t('custom')}
</Text>
</Flex>

30
src/components/order-form/form/car-color/helper.ts
View File

@ -1,34 +1,44 @@
export const CAR_COLORS = [
import { Car } from "../../../../models";
export const carColorSelectOptions: { value: Car.Color | string; labelTKey: 'white' | 'black' | 'silver' | 'gray' | 'beige-brown' | 'red' | 'blue' | 'green'; code: string }[] = [
{
name: 'white',
value: Car.Color.WHITE,
labelTKey: 'white',
code: '#ffffff'
},
{
name: 'black',
value: Car.Color.BLACK,
labelTKey: 'black',
code: '#000000'
},
{
name: 'silver',
value: Car.Color.SILVER,
labelTKey: 'silver',
code: '#c0c0c0'
},
{
name: 'gray',
value: Car.Color.GRAY,
labelTKey: 'gray',
code: '#808080'
},
{
name: 'beige-brown',
value: Car.Color.BEIGE_BROWN,
labelTKey: 'beige-brown',
code: '#796745'
},
{
name: 'red',
value: Car.Color.RED,
labelTKey: 'red',
code: '#b90000'
},
{
name: 'blue',
value: Car.Color.BLUE,
labelTKey: 'blue',
code: '#003B62'
},
{
name: 'green',
value: Car.Color.GREEN,
labelTKey: 'green',
code: '#078d51'
},
] as const satisfies { name: string; code: string }[];
];

1
src/components/order-form/form/car-color/index.ts
View File

@ -1 +1,2 @@
export { CarColorSelect } from './car-color-select';
export { carColorSelectOptions } from './helper';

2
src/components/order-form/form/index.ts
View File

@ -1,2 +1,4 @@
export type { OrderFormValues, OrderFormProps } from './types';
export { OrderForm } from './order-form';
export { carBodySelectOptions } from './car-body';
export { carColorSelectOptions } from './car-color';

23
src/components/order-form/form/location/location-input/location-input.tsx
View File

@ -1,4 +1,4 @@
import React, { forwardRef, memo, useEffect, useState } from 'react';
import React, { ForwardedRef, forwardRef, memo, useEffect, useState } from 'react';
import {
Input,
Box,
@ -24,12 +24,8 @@ import {
} from './helper';
import { LocationInputProps } from './types';
export const LocationInput = memo(
withYMaps(
forwardRef<HTMLInputElement, LocationInputProps>(function LocationInput(
{ ymaps, value, onChange, ...props },
ref,
) {
export const BaseLocationInput = withYMaps(
({ ymaps, value = '', onChange, inputRef, ...props }: LocationInputProps & { inputRef: ForwardedRef<HTMLInputElement> }) => {
const [inputValue, setInputValue] = useState<string>('');
useEffect(() => {
@ -109,9 +105,9 @@ export const LocationInput = memo(
<PopoverAnchor>
<Input
{...props}
ref={ref}
ref={inputRef}
onBlur={onBlur}
value={inputValue ?? value}
value={inputValue || value}
onChange={onInputChange}
onFocus={onFocus}
placeholder={t('placeholder')}
@ -142,11 +138,16 @@ export const LocationInput = memo(
</Popover>
</Box>
);
}),
},
true,
['suggest', 'geocode'],
),
);
export const LocationInput = memo(forwardRef<HTMLInputElement, LocationInputProps>(
function LocationInput(props, ref) {
return <BaseLocationInput {...props} inputRef={ref} />;
},
));
// todo: i18n
// todo: replace console.error with toast

14
src/components/order-form/form/location/map/map.tsx
View File

@ -31,8 +31,22 @@ export const MapComponent: FC<{
}
}, [selectedLocation]);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return (
<Map
key={windowWidth}
state={{
center: mapCenter,
zoom:

27
src/components/order-view/details/order-details.tsx
View File

@ -10,12 +10,17 @@ import {
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import localizedFormat from "dayjs/plugin/localizedFormat";
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);
import 'dayjs/locale/ru';
import 'dayjs/locale/en';
import { Order } from '../../../models/landing';
import { formatDatetime } from '../../../lib';
import { carBodySelectOptions } from '../../order-form/form/car-body/helper';
import {
carBodySelectOptions,
carColorSelectOptions,
} from '../../order-form';
import { OrderStatus } from './status';
@ -43,26 +48,32 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
location,
startWashTime,
endWashTime,
created
created,
}) => {
const { t } = useTranslation('~', {
const { t, i18n } = useTranslation('~', {
keyPrefix: 'dry-wash.order-view.details',
});
dayjs.locale(i18n.language);
const { t: tCarBody } = useTranslation('~', {
keyPrefix: 'dry-wash.order-create.car-body-select.options',
});
const { t: tCarColor } = useTranslation('~', {
keyPrefix: 'dry-wash.order-create.car-color-select.colors',
});
const carColorTKey = carColorSelectOptions.find(({ value }) => value === carColor)?.labelTKey;
return (
<>
<Heading as='h2' size='lg' marginInline='auto'>
{t('title', { number: orderNumber })}
</Heading>
<HStack
width='full'
flexWrap='wrap'
justifyContent='space-between'
gap={2}
>
<Heading as='h2' size='lg'>
{t('title', { number: orderNumber })} ({dayjs(created).format('LLLL')})
</Heading>
<Text>{dayjs(created).format('LLL')}</Text>
<OrderStatus value={status} />
</HStack>
<UnorderedList styleType='none'>
@ -78,7 +89,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
tCarBody(
`${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
),
carColor,
carColorTKey ? tCarColor(carColorTKey) : carColor,
]
.filter((v) => v)
.join(', '),

11
src/models/landing/car.ts
View File

@ -1,6 +1,15 @@
export type RegistrationNumber = string; // А012ВЕ16
export type Color = string; // #000000
export const enum Color {
WHITE,
BLACK,
SILVER,
GRAY,
BEIGE_BROWN,
RED,
BLUE,
GREEN,
}
export const enum BodyStyle {
UNKNOWN = 0,

4
src/models/landing/order.ts
View File

@ -18,7 +18,7 @@ export type Create = {
car: {
number: Car.RegistrationNumber;
body: Car.BodyStyle;
color: Car.Color;
color: Car.Color | string;
};
washing: {
location: Washing.Location;
@ -33,7 +33,7 @@ export type View = {
phone: Customer.PhoneNumber;
carNumber: Car.RegistrationNumber;
carBody: Car.BodyStyle;
carColor?: Car.Color;
carColor?: Car.Color | string;
location: Washing.Location;
startWashTime: Washing.AvailableBeginDateTime;
endWashTime: Washing.AvailableEndDateTime;

6
src/pages/__tests__/__snapshots__/masters.test.tsx.snap
View File

@ -36,12 +36,6 @@ exports[`Master Page should display master list and show details when master but
>
Мастера
</a>
<a
class="chakra-button css-19byqlw"
href="/map"
>
Карта заказов
</a>
</div>
</div>
</header>

24
src/pages/__tests__/__snapshots__/order-create.test.tsx.snap
View File

@ -94,14 +94,14 @@ exports[`Create Order page renders page structure 1`] = `
class="chakra-stack css-uv9e93"
>
<div
class="css-dbqfkc"
class="css-ed0q6j"
>
<button
class="css-6su6fj"
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -117,7 +117,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -133,7 +133,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -149,7 +149,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -165,7 +165,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -181,7 +181,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -197,7 +197,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -213,7 +213,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-11g98ql"
>
<div
class="css-1k9efnl"
@ -229,7 +229,7 @@ exports[`Create Order page renders page structure 1`] = `
type="button"
>
<div
class="css-1nsxgdr"
class="css-bf4qsc"
>
<div
class="css-1k9efnl"
@ -267,7 +267,7 @@ exports[`Create Order page renders page structure 1`] = `
</span>
</label>
<div
class="css-8atqhb"
class="css-1kxonj9"
>
<input
aria-readonly="true"
@ -282,7 +282,7 @@ exports[`Create Order page renders page structure 1`] = `
/>
<div
class="chakra-popover__popper css-iy22zq"
style="visibility: hidden; position: absolute; inset: 0 auto auto 0;"
style="visibility: hidden; position: fixed; inset: 0 auto auto 0;"
>
<section
aria-describedby="popover-body-:r7:"

119
src/pages/__tests__/__snapshots__/order-view.test.tsx.snap
View File

File diff suppressed because one or more lines are too long

122
src/pages/__tests__/__snapshots__/ordersList.test.tsx.snap
View File

@ -36,12 +36,6 @@ exports[`Страница заказов должна корректно ото
>
Мастера
</a>
<a
class="chakra-button css-g11sl9"
href="/auth/login"
>
Карта заказов
</a>
</div>
</div>
</header>
@ -77,7 +71,7 @@ exports[`Страница заказов должна корректно ото
<p
class="chakra-text css-52ukzg"
>
09.03.2025
12.03.2025
</p>
<button
class="chakra-button css-ez23ye"
@ -270,9 +264,13 @@ exports[`Страница заказов должна корректно ото
<td
class="css-zgoslk"
>
<a
<button
aria-controls="popover-content-:r1:"
aria-expanded="false"
aria-haspopup="dialog"
class="chakra-button css-ez23ye"
href="/auth/login/arm//auth/login?lat=55.78&lon=49.12&currentDate=Sun Mar 09 2025 11:23:09 GMT+0300 (Moscow Standard Time)"
id="popover-trigger-:r1:"
type="button"
>
<svg
class="chakra-icon css-onkibi"
@ -292,7 +290,54 @@ exports[`Страница заказов должна корректно ото
/>
</g>
</svg>
</a>
</button>
<div
class="chakra-popover__popper css-iy22zq"
style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
>
<section
aria-describedby="popover-body-:r1:"
class="chakra-popover__content css-sjj62m"
id="popover-content-:r1:"
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__arrow-positioner css-0"
data-popper-arrow=""
style="position: absolute;"
>
<div
class="chakra-popover__arrow css-0"
data-popper-arrow-inner=""
/>
</div>
<button
aria-label="Close"
class="chakra-popover__close-btn css-1o8qips"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
fill="currentColor"
/>
</svg>
</button>
<div
class="chakra-popover__body css-45vz3u"
id="popover-body-:r1:"
>
Казань, ул. Баумана, 1
</div>
</section>
</div>
</td>
</tr>
<tr
@ -426,9 +471,13 @@ exports[`Страница заказов должна корректно ото
<td
class="css-zgoslk"
>
<a
<button
aria-controls="popover-content-:r3:"
aria-expanded="false"
aria-haspopup="dialog"
class="chakra-button css-ez23ye"
href="/auth/login/arm//auth/login?lat=55.78&lon=49.12&currentDate=Sun Mar 09 2025 11:23:09 GMT+0300 (Moscow Standard Time)"
id="popover-trigger-:r3:"
type="button"
>
<svg
class="chakra-icon css-onkibi"
@ -448,7 +497,54 @@ exports[`Страница заказов должна корректно ото
/>
</g>
</svg>
</a>
</button>
<div
class="chakra-popover__popper css-iy22zq"
style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
>
<section
aria-describedby="popover-body-:r3:"
class="chakra-popover__content css-sjj62m"
id="popover-content-:r3:"
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__arrow-positioner css-0"
data-popper-arrow=""
style="position: absolute;"
>
<div
class="chakra-popover__arrow css-0"
data-popper-arrow-inner=""
/>
</div>
<button
aria-label="Close"
class="chakra-popover__close-btn css-1o8qips"
type="button"
>
<svg
aria-hidden="true"
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
fill="currentColor"
/>
</svg>
</button>
<div
class="chakra-popover__body css-45vz3u"
id="popover-body-:r3:"
>
Казань, ул. Баумана, 43
</div>
</section>
</div>
</td>
</tr>
</tbody>

63
src/pages/__tests__/notFound.test.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider } from '@chakra-ui/react';
import NotFound from '../notFound/notFound';
// Mock the translation hook
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations = {
'notFound.title': 'Page Not Found',
'notFound.description': 'The page you are looking for does not exist',
'notFound.button.back': 'Back to Home'
};
return translations[key] || key;
}
})
}));
// Mock the Lottie Player component
jest.mock('@lottiefiles/react-lottie-player', () => ({
Player: () => <div data-testid="lottie-animation">Animation Mock</div>
}));
describe('NotFound Component', () => {
const renderNotFound = () => {
return render(
<ChakraProvider>
<BrowserRouter>
<NotFound />
</BrowserRouter>
</ChakraProvider>
);
};
it('renders without crashing', () => {
renderNotFound();
});
it('displays the correct content', () => {
renderNotFound();
// Check if title is present
expect(screen.getByText('Page Not Found')).toBeInTheDocument();
// Check if description is present
expect(screen.getByText('The page you are looking for does not exist')).toBeInTheDocument();
// Check if back button is present
expect(screen.getByText('Back to Home')).toBeInTheDocument();
// Check if Lottie animation is rendered
expect(screen.getByTestId('lottie-animation')).toBeInTheDocument();
});
it('contains a link to the dry-wash page', () => {
renderNotFound();
const backButton = screen.getByText('Back to Home');
expect(backButton.closest('a')).toHaveAttribute('href', '/dry-wash');
});
});

2
stubs/json/landing-order-view/id1-success-pending.json
View File

@ -4,7 +4,7 @@
"phone": "+79876543210",
"carNumber": "А123АА16",
"carBody": 2,
"carColor": "#ffffff",
"carColor": 5,
"startWashTime": "2025-01-19T14:03:00.000Z",
"endWashTime": "2025-01-19T14:03:00.000Z",
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",

2
stubs/json/landing-order-view/id1-success-working.json
View File

@ -4,7 +4,7 @@
"phone": "+79876543210",
"carNumber": "А123АА16",
"carBody": 2,
"carColor": "#ffffff",
"carColor": "мокрый асфальт",
"startWashTime": "2025-01-19T14:03:00.000Z",
"endWashTime": "2025-01-19T14:03:00.000Z",
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",