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

@@ -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';

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',
+};

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',
+};

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;
   }
 }

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(<Merch />);
+  });
+
+  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);
+  });
+});

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 = () => (
-  <div id="merch" className={cx('container')}>
+  <section id="merch" className={cx('container')}>
     <div className={cx('content', 'merch', 'column-2')}>
-      <div className={cx('info')}>
-        <SectionLabel>merch</SectionLabel>
-        <WidgetTitle mods="asterisk">RS merch</WidgetTitle>
-        <Paragraph fontSize="large">Are you an RS sloth fan and looking for RS merch?</Paragraph>
-        <Paragraph>
-          The wait is almost over as we&apos;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.
-        </Paragraph>
-        <LinkCustom href={LINKS.MERCH} variant="primary" external>
-          Discover merch assets
-        </LinkCustom>
-      </div>
-      <Image className={cx('right', 'picture')} src={image} alt="speakers-wanted" />
+      <article className={cx('info')}>
+        <SectionLabel>{merchData.label}</SectionLabel>
+        <WidgetTitle mods="asterisk">{merchData.title}</WidgetTitle>
+        <Paragraph fontSize="large">{merchData.mainParagraph}</Paragraph>
+        <Paragraph>{merchData.description}</Paragraph>
+        <LinkCustom href={LINKS.MERCH} variant="primary" external>{merchData.linkTitle}</LinkCustom>
+      </article>
+      <Image
+        className={cx('image')}
+        src={rsSchoolMerchImage}
+        alt="A collage of photos with branded T-shirts, cups, and stickers featuring the RSSchool logo"
+        data-testid="collage-with-merch"
+      />
     </div>
-  </div>
+  </section>
 );