feat: test order create page render (#85)

This commit is contained in:
RustamRu 2025-02-15 19:47:02 +03:00
parent bbc96a2f27
commit f07f7aeba5
4 changed files with 690 additions and 3 deletions

View File

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

View File

@ -0,0 +1,666 @@
// 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

@ -0,0 +1,20 @@
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

@ -38,12 +38,13 @@ 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}> <Heading textAlign='center' mt={4} data-testid='heading'>
{t('title')} {t('title')}
</Heading> </Heading>
<OrderForm <OrderForm
onSubmit={onOrderFormSubmit} onSubmit={onOrderFormSubmit}
loading={createOrderMutation.isLoading} loading={createOrderMutation.isLoading}
data-testid='order-form'
/> />
</> </>
) : ( ) : (