feat: test landing page render (#85)
This commit is contained in:
RustamRu
parent
88242c5681
commit
bbc96a2f27
@ -9,12 +9,12 @@ import { BenefitsSectionProps } from './types';
|
||||
import { iconsMap } from './helper';
|
||||
|
||||
export const BenefitsSection: FC<BenefitsSectionProps> = ({
|
||||
data: { heading, description, list } = {},
|
||||
data: { heading, description, list } = {}, ...props
|
||||
}) => {
|
||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
<PageSection {...props}>
|
||||
<VStack w='full' spacing={2}>
|
||||
<Heading as='h2'>{t(heading)}</Heading>
|
||||
<Text>{t(description)}</Text>
|
||||
|
||||
@ -5,7 +5,9 @@ import { Text } from '@chakra-ui/react';
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
export const Copyright: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.landing.footer'
|
||||
});
|
||||
|
||||
return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
|
||||
return <Text color='whiteAlpha.500'>{t('copyright', { currentYear })}</Text>;
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@ import { SiteLogo, PageSection } from '../';
|
||||
|
||||
import { Copyright } from './Copyright';
|
||||
|
||||
export const Footer: FC = () => {
|
||||
export const Footer: FC = (props) => {
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.landing.footer.links',
|
||||
});
|
||||
@ -15,11 +15,17 @@ export const Footer: FC = () => {
|
||||
const listData = [
|
||||
{ to: '#', label: t('privacy-policy') },
|
||||
{ to: '#', label: t('service-terms') },
|
||||
{ to: '#', label: t('faq') },
|
||||
{ to: '#', label: t('faq') },
|
||||
];
|
||||
|
||||
return (
|
||||
<PageSection as='footer' py={5} bg='gray.700' color='white'>
|
||||
<PageSection
|
||||
as='footer'
|
||||
py={5}
|
||||
bg='gray.700'
|
||||
color='white'
|
||||
{...props}
|
||||
>
|
||||
<SiteLogo />
|
||||
<Copyright />
|
||||
<List spacing={2}>
|
||||
|
||||
@ -10,11 +10,18 @@ import { HeroSectionProps } from './types';
|
||||
export const HeroSection: FC<HeroSectionProps> = ({
|
||||
data: { headline, description, video } = {},
|
||||
flexShrink,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
||||
|
||||
return (
|
||||
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
|
||||
<Box
|
||||
flexShrink={flexShrink}
|
||||
as='header'
|
||||
pos='relative'
|
||||
zIndex={0}
|
||||
{...props}
|
||||
>
|
||||
<Box
|
||||
as='video'
|
||||
src={`${__webpack_public_path__}/remote-assets/${video}`}
|
||||
|
||||
@ -5,9 +5,9 @@ import { Image } from '@chakra-ui/react';
|
||||
import { LogoSvg } from '../../../assets/icons';
|
||||
|
||||
export const SiteLogo: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
||||
|
||||
return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
|
||||
return <Image src={LogoSvg} alt={t('site-logo')} w={40} />;
|
||||
};
|
||||
|
||||
// todo: replace Image by SVG React component
|
||||
|
||||
@ -9,11 +9,12 @@ import { SocialProofSectionProps } from './types';
|
||||
|
||||
export const SocialProofSection: FC<SocialProofSectionProps> = ({
|
||||
data: { heading } = {},
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
<PageSection {...props}>
|
||||
<Heading as='h2'>{t(heading)}</Heading>
|
||||
<ReviewsSlider />
|
||||
<HStack w='full' justify='flex-end'>
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export * from './i18n';
|
||||
export * from './i18n';
|
||||
export * from './landing';
|
||||
@ -74,7 +74,7 @@ exports[`Arm Page render 1`] = `
|
||||
<p
|
||||
class="chakra-text css-52ukzg"
|
||||
>
|
||||
09.02.2025
|
||||
15.02.2025
|
||||
</p>
|
||||
<button
|
||||
class="chakra-button css-ez23ye"
|
||||
@ -240,7 +240,7 @@ exports[`Arm Page render 2`] = `
|
||||
<p
|
||||
class="chakra-text css-52ukzg"
|
||||
>
|
||||
09.02.2025
|
||||
15.02.2025
|
||||
</p>
|
||||
<button
|
||||
class="chakra-button css-ez23ye"
|
||||
|
||||
472
src/pages/__tests__/__snapshots__/landing.test.tsx.snap
Normal file
472
src/pages/__tests__/__snapshots__/landing.test.tsx.snap
Normal file
@ -0,0 +1,472 @@
|
||||
// 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>
|
||||
`;
|
||||
22
src/pages/__tests__/landing.test.tsx
Normal file
22
src/pages/__tests__/landing.test.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@ -30,18 +30,19 @@ const Page: FC = () => {
|
||||
<HeroSection
|
||||
data={landingSuccessStub['body']['hero-section']}
|
||||
flexShrink={0}
|
||||
data-testid='hero-section'
|
||||
/>
|
||||
<VStack as='main' flexGrow={1}>
|
||||
{landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
|
||||
if (isBenefitsSectionData(type, data)) {
|
||||
return <BenefitsSection key={i} data={data} />;
|
||||
return <BenefitsSection key={i} data={data} data-testid='benefits-section' />;
|
||||
}
|
||||
if (isSocialProofSectionData(type, data)) {
|
||||
return <SocialProofSection key={i} data={data} />;
|
||||
return <SocialProofSection key={i} data={data} data-testid='social-proof-section' />;
|
||||
}
|
||||
})}
|
||||
</VStack>
|
||||
<Footer />
|
||||
<Footer data-testid='footer' />
|
||||
</VStack>
|
||||
</Container>
|
||||
</LandingThemeProvider>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user