From cfa225903d0e6140ea9ae6d1b80bca696cfeaa6d Mon Sep 17 00:00:00 2001
From: MielomankA <79061120+MielomankA@users.noreply.github.com>
Date: Fri, 20 Dec 2024 09:08:52 +0300
Subject: [PATCH] 551-refactor: Fsd widget merch (#670)
* refactor: 551 - change merch component
* refactor: 551 - change merch tests
* refactor: 551 - improve image render
* refactor: 551 - fix text render
* refactor: 551 - code review comments
* refactor: 551 - combine tests
* fix: 551 - change content and merch image
---
dev-data/index.ts | 1 +
dev-data/merch.data.ts | 7 +++++
src/shared/__tests__/constants.ts | 9 ++++++
src/widgets/merch/merch.test.tsx | 41 --------------------------
src/widgets/merch/ui/merch.module.scss | 10 +++----
src/widgets/merch/ui/merch.test.tsx | 35 ++++++++++++++++++++++
src/widgets/merch/ui/merch.tsx | 35 +++++++++++-----------
7 files changed, 74 insertions(+), 64 deletions(-)
create mode 100644 dev-data/merch.data.ts
delete mode 100644 src/widgets/merch/merch.test.tsx
create mode 100644 src/widgets/merch/ui/merch.test.tsx
diff --git a/dev-data/index.ts b/dev-data/index.ts
index b12e9fd0c..f5e1008e2 100644
--- a/dev-data/index.ts
+++ b/dev-data/index.ts
@@ -53,6 +53,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 52efbcaba..da1a0f033 100644
--- a/src/shared/__tests__/constants.ts
+++ b/src/shared/__tests__/constants.ts
@@ -143,3 +143,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}
+
+