feat: test order create page render (#85)
This commit is contained in:
RustamRu
parent
bbc96a2f27
commit
f07f7aeba5
@ -19,7 +19,7 @@ import {
|
||||
YMapsProvider,
|
||||
} from './location';
|
||||
|
||||
export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
|
||||
export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
@ -41,7 +41,7 @@ export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
|
||||
]);
|
||||
|
||||
return (
|
||||
<Box p={4} marginInline='auto'>
|
||||
<Box p={4} marginInline='auto' {...props}>
|
||||
<VStack
|
||||
as='form'
|
||||
noValidate
|
||||
|
||||
666
src/pages/__tests__/__snapshots__/order-create.test.tsx.snap
Normal file
666
src/pages/__tests__/__snapshots__/order-create.test.tsx.snap
Normal 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>
|
||||
`;
|
||||
20
src/pages/__tests__/order-create.test.tsx
Normal file
20
src/pages/__tests__/order-create.test.tsx
Normal 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();
|
||||
});
|
||||
});
|
||||
@ -38,12 +38,13 @@ const Page: FC = () => {
|
||||
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
||||
{createOrderMutation.isUninitialized ? (
|
||||
<>
|
||||
<Heading textAlign='center' mt={4}>
|
||||
<Heading textAlign='center' mt={4} data-testid='heading'>
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<OrderForm
|
||||
onSubmit={onOrderFormSubmit}
|
||||
loading={createOrderMutation.isLoading}
|
||||
data-testid='order-form'
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user