diff --git a/Jenkinsfile b/Jenkinsfile index b416381..4844afd 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -38,6 +38,12 @@ pipeline { } } + stage('test') { + steps { + sh 'npm run test' + } + } + stage('build') { steps { sh 'npm run build' diff --git a/__mocks__/app-context-mock.tsx b/__mocks__/app-context-mock.tsx new file mode 100644 index 0000000..4ad6f0d --- /dev/null +++ b/__mocks__/app-context-mock.tsx @@ -0,0 +1,18 @@ +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) => ( + + + + {children} + + + +)); diff --git a/__mocks__/brojs-cli-mock.ts b/__mocks__/brojs-cli-mock.ts new file mode 100644 index 0000000..c294243 --- /dev/null +++ b/__mocks__/brojs-cli-mock.ts @@ -0,0 +1,18 @@ +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'; + } + }), +})); diff --git a/__mocks__/react-i18next.ts b/__mocks__/react-i18next.ts index 1dc4854..e0f4893 100644 --- a/__mocks__/react-i18next.ts +++ b/__mocks__/react-i18next.ts @@ -1,9 +1,13 @@ import localeRu from '../locales/ru.json'; module.exports = { - useTranslation: (_, { keyPrefix }) => { + useTranslation: (_, options) => { + const { keyPrefix } = options ?? {}; return { - t: (key: string) => localeRu[`${keyPrefix}.${key}`], + t: keyPrefix ? (key: string) => localeRu[`${keyPrefix}.${key}`] : undefined, + i18n: { + language: 'ru' + } }; } }; diff --git a/__mocks__/react-yandex-maps-mock.tsx b/__mocks__/react-yandex-maps-mock.tsx new file mode 100644 index 0000000..1499aa7 --- /dev/null +++ b/__mocks__/react-yandex-maps-mock.tsx @@ -0,0 +1,11 @@ +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(() => <>), +})); diff --git a/__mocks__/server/handlers.ts b/__mocks__/server/handlers.ts new file mode 100644 index 0000000..dd3a0dd --- /dev/null +++ b/__mocks__/server/handlers.ts @@ -0,0 +1,20 @@ +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 + }); + }) +]; \ No newline at end of file diff --git a/__mocks__/server/server.ts b/__mocks__/server/server.ts new file mode 100644 index 0000000..38b79ec --- /dev/null +++ b/__mocks__/server/server.ts @@ -0,0 +1,5 @@ +import { setupServer } from 'msw/node'; + +import { handlers } from './handlers'; + +export const server = setupServer(...handlers); \ No newline at end of file diff --git a/__mocks__/style-mock.ts b/__mocks__/style-mock.ts new file mode 100644 index 0000000..f053ebf --- /dev/null +++ b/__mocks__/style-mock.ts @@ -0,0 +1 @@ +module.exports = {}; diff --git a/jest-preset-it/jest-preset.ts b/jest-preset-it/jest-preset.ts index 53e9cb0..67a91bc 100644 --- a/jest-preset-it/jest-preset.ts +++ b/jest-preset-it/jest-preset.ts @@ -1,4 +1,5 @@ module.exports = { + preset: 'ts-jest', transform: { '^.+\\.tsx?$': 'babel-jest', }, @@ -8,7 +9,8 @@ module.exports = { collectCoverage: true, clearMocks: true, moduleNameMapper: { - '\\.(svg|webp)$': '/__mocks__/file', + '\\.(svg|webp)$': '/__mocks__/file-mock', + '\\.(css|scss)$': '/__mocks__/style-mock', 'react-i18next': '/__mocks__/react-i18next', }, testEnvironmentOptions: { @@ -16,4 +18,5 @@ module.exports = { }, testEnvironment: 'jest-fixed-jsdom', testPathIgnorePatterns: ['/node_modules/', '/e2e'], + setupFilesAfterEnv: ['/jest-preset-it/jest.setup.js', '/__mocks__/brojs-cli-mock.ts', '/__mocks__/lottiefiles-mock.tsx'], }; diff --git a/jest-preset-it/jest.setup.js b/jest-preset-it/jest.setup.js new file mode 100644 index 0000000..438e4d4 --- /dev/null +++ b/jest-preset-it/jest.setup.js @@ -0,0 +1,5 @@ +// 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__ = ''; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 40a0140..3e160a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,8 +51,10 @@ "@playwright/test": "^1.50.1", "@stylistic/eslint-plugin": "^2.10.1", "@testing-library/jest-dom": "^6.6.3", + "@types/jest": "^29.5.14", "@types/node": "^22.13.1", "@types/react-dom": "^18.3.1", + "@types/testing-library__jest-dom": "^5.14.9", "eslint": "^9.14.0", "eslint-plugin-import": "^2.31.0", "eslint-plugin-react": "^7.37.2", @@ -4050,6 +4052,52 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/@types/jest": { + "version": "29.5.14", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.14.tgz", + "integrity": "sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "expect": "^29.0.0", + "pretty-format": "^29.0.0" + } + }, + "node_modules/@types/jest/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@types/jest/node_modules/pretty-format": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", + "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jest/schemas": "^29.6.3", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/jsdom": { "version": "20.0.1", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", @@ -4138,6 +4186,16 @@ "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz", "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==" }, + "node_modules/@types/testing-library__jest-dom": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", + "integrity": "sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/jest": "*" + } + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", diff --git a/package.json b/package.json index ac083cd..ed10c91 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,10 @@ "@playwright/test": "^1.50.1", "@stylistic/eslint-plugin": "^2.10.1", "@testing-library/jest-dom": "^6.6.3", + "@types/jest": "^29.5.14", "@types/node": "^22.13.1", "@types/react-dom": "^18.3.1", + "@types/testing-library__jest-dom": "^5.14.9", "eslint": "^9.14.0", "eslint-plugin-import": "^2.31.0", "eslint-plugin-react": "^7.37.2", diff --git a/src/components/landing/BenefitsSection/BenefitsSection.tsx b/src/components/landing/BenefitsSection/BenefitsSection.tsx index d03b322..e45766a 100644 --- a/src/components/landing/BenefitsSection/BenefitsSection.tsx +++ b/src/components/landing/BenefitsSection/BenefitsSection.tsx @@ -9,12 +9,12 @@ import { BenefitsSectionProps } from './types'; import { iconsMap } from './helper'; export const BenefitsSection: FC = ({ - data: { heading, description, list } = {}, + data: { heading, description, list } = {}, ...props }) => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); return ( - + {t(heading)} {t(description)} diff --git a/src/components/landing/Footer/Copyright/Copyright.tsx b/src/components/landing/Footer/Copyright/Copyright.tsx index 95acf2d..2271297 100644 --- a/src/components/landing/Footer/Copyright/Copyright.tsx +++ b/src/components/landing/Footer/Copyright/Copyright.tsx @@ -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 {t('dry-wash.landing.footer.copyright', { currentYear })}; + return {t('copyright', { currentYear })}; }; diff --git a/src/components/landing/Footer/Footer.tsx b/src/components/landing/Footer/Footer.tsx index f483994..6e881f7 100644 --- a/src/components/landing/Footer/Footer.tsx +++ b/src/components/landing/Footer/Footer.tsx @@ -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 ( - + diff --git a/src/components/landing/HeroSection/HeroSection.tsx b/src/components/landing/HeroSection/HeroSection.tsx index 0a90622..b70f81f 100644 --- a/src/components/landing/HeroSection/HeroSection.tsx +++ b/src/components/landing/HeroSection/HeroSection.tsx @@ -10,11 +10,18 @@ import { HeroSectionProps } from './types'; export const HeroSection: FC = ({ data: { headline, description, video } = {}, flexShrink, + ...props }) => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); return ( - + { - const { t } = useTranslation(); + const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); - return {t('~:dry-wash.landing.site-logo')}; + return {t('site-logo')}; }; // todo: replace Image by SVG React component diff --git a/src/components/landing/SocialProofSection/SocialProofSection.tsx b/src/components/landing/SocialProofSection/SocialProofSection.tsx index 798ed67..c0306d3 100644 --- a/src/components/landing/SocialProofSection/SocialProofSection.tsx +++ b/src/components/landing/SocialProofSection/SocialProofSection.tsx @@ -9,11 +9,12 @@ import { SocialProofSectionProps } from './types'; export const SocialProofSection: FC = ({ data: { heading } = {}, + ...props }) => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' }); return ( - + {t(heading)} diff --git a/src/components/order-form/form/order-form.tsx b/src/components/order-form/form/order-form.tsx index 988cbbb..f024275 100644 --- a/src/components/order-form/form/order-form.tsx +++ b/src/components/order-form/form/order-form.tsx @@ -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 ( - + = ({ location, startWashTime, endWashTime, + ...props }) => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.order-view.details', @@ -50,7 +51,7 @@ export const OrderDetails: FC = ({ }); return ( - + +
+
+
+
+
+
+
+

+ Преимущества экологичной автомойки +

+

+ Откройте для себя преимущества наших услуг по химчистке автомобилей +

+
+
    +
  • + + + + + Экологически безопасные продукты +
    • +
  • + + + + + Быстрое и эффективное обслуживание +
    • +
  • + + + + + Удобный мобильный доступ +
    • +
  • + + + + + Надежный и заслуживающий доверия +
    • +
+
+ + Сделать заказ + +
+
+
+

+ Нас выбирают +

+
+
+ + + + +
+
+
+
+ + + + + Недавно воспользовалась услугами сухой мойки автомобилей и осталась крайне удовлетворена. Процесс был проведён профессионально: сотрудники использовали качественные средства, которые не повредили лакокрасочное покрытие. Особенно впечатлила возможность мыть машину без воды, что не только экономит ресурсы, но и бережет окружающую среду. Рекомендую всем, кто заботится о своём автомобиле и экологии! + +
+
+ + + +
+
+
+ + Сделать заказ + +
+
+
+ +
+
+