diff --git a/dev-data/index.ts b/dev-data/index.ts
index 8e3fb3bcd..2a27cbc48 100644
--- a/dev-data/index.ts
+++ b/dev-data/index.ts
@@ -52,6 +52,7 @@ export { mentorsActivityData } from './mentors-activity.data';
export { mentorsRegisterData } from './mentors-register.data';
export { mentorsWantedData } from './mentors-wanted.data';
export { mentorshipCourses, mentorshipCoursesDefault } from './mentorship.data';
+export { merchData } from './merch.data';
export { nodejs } from './nodejs.data';
export { picturesSocialMediaLinks } from './pictures.data';
export { preSchoolEn, preSchoolRu } from './preSchool.data';
diff --git a/dev-data/merch.data.ts b/dev-data/merch.data.ts
new file mode 100644
index 000000000..4210a1f6e
--- /dev/null
+++ b/dev-data/merch.data.ts
@@ -0,0 +1,7 @@
+export const merchData = {
+ label: 'merch',
+ title: 'RS merch',
+ mainParagraph: 'Are you an RS sloth fan and looking for RS merch?',
+ description: 'The wait is almost over as we are gearing up for the catalog of free web and print assets where you will find all merch collections and can print your own Rolling Scopes stickers, t-shirts etc.',
+ linkTitle: 'Discover merch assets',
+};
diff --git a/src/shared/__tests__/constants.ts b/src/shared/__tests__/constants.ts
index 1bee4fa0a..d927f5a8b 100644
--- a/src/shared/__tests__/constants.ts
+++ b/src/shared/__tests__/constants.ts
@@ -137,3 +137,12 @@ export const mockedCourses: Course[] = [
},
},
];
+
+export const MOCKED_MERCH_DATA = {
+ title: 'RS merch',
+ subtitle: 'Are you an RS sloth fan and looking for RS merch?',
+ paragraph: 'The wait is almost over',
+ buttonText: 'Discover merch assets',
+ buttonLink: 'https://sloths.rs.school/',
+ imageAltText: 'A collage of photos with branded T-shirts, cups, and stickers featuring the RSSchool logo',
+};
diff --git a/src/widgets/merch/merch.test.tsx b/src/widgets/merch/merch.test.tsx
deleted file mode 100644
index 721911fcd..000000000
--- a/src/widgets/merch/merch.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { Merch } from './ui/merch';
-import { renderWithRouter } from '@/shared/__tests__/utils';
-
-describe('Merch', () => {
- beforeEach(() => {
- renderWithRouter();
- });
-
- it('renders the title correctly', () => {
- const titleElement = screen.getByText('RS merch');
-
- expect(titleElement).toBeVisible();
- });
-
- it('renders the subtitle correctly', () => {
- const subtitleElement = screen.getByText('Are you an RS sloth fan and looking for RS merch?');
-
- expect(subtitleElement).toBeVisible();
- });
-
- it('renders the paragraph correctly', () => {
- const paragraphText = screen.getByText(/The wait is almost over/i);
-
- expect(paragraphText).toBeVisible();
- });
-
- it('renders the merch "Discover merch assets" button with correct href', () => {
- const buttonElement = screen.getByRole('link', { name: /Discover merch assets/i });
-
- expect(buttonElement).toBeVisible();
- expect(buttonElement).toHaveAttribute('href', 'https://sloths.rs.school/');
- });
-
- it('renders the image with alt text', () => {
- const imageElement = screen.getByAltText('speakers-wanted');
-
- expect(imageElement).toBeVisible();
- });
-});
diff --git a/src/widgets/merch/ui/merch.module.scss b/src/widgets/merch/ui/merch.module.scss
index e47f30003..643a4bf62 100644
--- a/src/widgets/merch/ui/merch.module.scss
+++ b/src/widgets/merch/ui/merch.module.scss
@@ -3,22 +3,20 @@
.info {
width: 600px;
- text-align: left;
@include media-laptop {
width: 100%;
}
}
- .picture {
+ .image {
width: 680px;
height: 700px;
- margin: 0 auto;
+ object-fit: cover;
@include media-laptop {
- width: 680px;
+ width: auto;
height: 618px;
- margin-top: 24px;
}
@include media-tablet {
@@ -28,6 +26,6 @@
}
@include media-laptop {
- flex-direction: column;
+ gap: 74px;
}
}
diff --git a/src/widgets/merch/ui/merch.test.tsx b/src/widgets/merch/ui/merch.test.tsx
new file mode 100644
index 000000000..edbdb611d
--- /dev/null
+++ b/src/widgets/merch/ui/merch.test.tsx
@@ -0,0 +1,35 @@
+import { screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { Merch } from './merch';
+import { MOCKED_MERCH_DATA } from '@/shared/__tests__/constants';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+
+describe('Merch', () => {
+ beforeEach(() => {
+ renderWithRouter();
+ });
+
+ it('renders the content correctly', () => {
+ const titleElement = screen.getByText(MOCKED_MERCH_DATA.title);
+ const subtitleElement = screen.getByText(MOCKED_MERCH_DATA.subtitle);
+ const paragraphText = screen.getByText(new RegExp(MOCKED_MERCH_DATA.paragraph, 'i'));
+
+ expect(titleElement).toBeVisible();
+ expect(subtitleElement).toBeVisible();
+ expect(paragraphText).toBeVisible();
+ });
+
+ it('renders the merch "Discover merch assets" button with correct href', () => {
+ const buttonElement = screen.getByRole('link', { name: new RegExp(MOCKED_MERCH_DATA.buttonText, 'i') });
+
+ expect(buttonElement).toBeVisible();
+ expect(buttonElement).toHaveAttribute('href', MOCKED_MERCH_DATA.buttonLink);
+ });
+
+ it('renders the image with alt text', () => {
+ const imageElement = screen.getByTestId('collage-with-merch');
+
+ expect(imageElement).toBeVisible();
+ expect(imageElement).toHaveAttribute('alt', MOCKED_MERCH_DATA.imageAltText);
+ });
+});
diff --git a/src/widgets/merch/ui/merch.tsx b/src/widgets/merch/ui/merch.tsx
index 4651edeff..5ccdcfaee 100644
--- a/src/widgets/merch/ui/merch.tsx
+++ b/src/widgets/merch/ui/merch.tsx
@@ -1,34 +1,35 @@
import classNames from 'classnames/bind';
import Image from 'next/image';
import { LINKS } from '@/core/const';
-import image from '@/shared/assets/merch.webp';
+import rsSchoolMerchImage from '@/shared/assets/merch.webp';
import { LinkCustom } from '@/shared/ui/link-custom';
import { Paragraph } from '@/shared/ui/paragraph';
import { SectionLabel } from '@/shared/ui/section-label';
import { WidgetTitle } from '@/shared/ui/widget-title';
+import { merchData } from 'data';
+
import styles from './merch.module.scss';
const cx = classNames.bind(styles);
export const Merch = () => (
-
+
-
-
merch
-
RS merch
-
Are you an RS sloth fan and looking for RS merch?
-
- The wait is almost over as we're gearing up for the catalog of free web and print
- assets where you will find all merch collections and can print your own Rolling Scopes
- t-shirts, stickers etc.
-
-
- Discover merch assets
-
-
-
+
+ {merchData.label}
+ {merchData.title}
+ {merchData.mainParagraph}
+ {merchData.description}
+ {merchData.linkTitle}
+
+
-
+
);