550-refactor: Widget mentors wanted

src/app/const/index.ts

@@ -8,6 +8,7 @@ export const LINKS = {
   BECOME_MENTOR: 'https://app.rs.school/registry/mentor',
   MERCH: 'https://sloths.rs.school/',
   DONATE: 'https://opencollective.com/rsschool',
+  ANGULAR_MENTORING: 'https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring',
 };
 
 export const ROUTES = {

src/widgets/mentors-wanted/ui/mentors-wanted.module.scss

@@ -1,58 +1,30 @@
 .mentors-wanted {
-  display: flex;
-  gap: 20px;
   background-color: $color-yellow-50;
+}
 
-  .content-left {
-    display: flex;
+.mentors-wanted-content {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+
+  @include media-tablet {
     flex-direction: column;
     gap: 40px;
-
-    max-width: 43%;
-
-    text-align: left;
-  }
-
-  .content {
-    display: flex;
-    align-items: start;
-    justify-content: space-between;
-    padding: 80px 120px;
-
-    p {
-      max-width: 825px;
-      font-size: 18px;
-      line-height: 28px;
-    }
-  }
-
-  .picture {
-    align-self: center;
-    max-width: 290px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
   }
+}
 
-  @include media-laptop {
-    .content {
-      padding: 80px 40px;
-    }
-  }
+.content-left {
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
 
   @include media-tablet {
-    .content {
-      flex-direction: column;
-      gap: 40px;
-      align-items: start;
-      padding: 40px 16px;
-    }
-
-    .content-left {
-      max-width: 100%;
-    }
+    max-width: 100%;
   }
 }
+
+.sloth-mascot {
+  align-self: center;
+  max-width: 290px;
+  object-fit: contain;
+}

src/widgets/mentors-wanted/ui/mentors-wanted.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MentorsWanted } from './mentors-wanted';
+import { LINKS } from '@/app/const';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
+
+const mockedData = {
+  title: 'Mentors Wanted!',
+  paragraph: /If you are interested in mentoring our students/i,
+  link: LINKS.ANGULAR_MENTORING,
+  image: mentorImg,
+  alt: 'Sloth - mascot dresses as a detective',
+};
+
+describe('MentorsWanted component', () => {
+  beforeEach(() => {
+    renderWithRouter(<MentorsWanted />);
+  });
+
+  it('renders without crashing', () => {
+    const mentorsWanted = screen.getByTestId('mentors-wanted');
+
+    expect(mentorsWanted).toBeVisible();
+  });
+
+  it('renders the component content correctly', () => {
+    const title = screen.getByTestId('widget-title');
+    const paragraph = screen.getByTestId('paragraph');
+    const link = screen.getByTestId('link-custom');
+    const slothImage = screen.getByTestId('sloth-mascot');
+
+    expect(title).toBeVisible();
+    expect(paragraph).toBeVisible();
+    expect(link).toBeVisible();
+    expect(slothImage).toBeVisible();
+
+    expect(title).toHaveTextContent(mockedData.title);
+    expect(paragraph).toHaveTextContent(mockedData.paragraph);
+
+    expect(link).toHaveAttribute('href', mockedData.link);
+    expect(slothImage).toHaveAttribute('src', mockedData.image);
+    expect(slothImage).toHaveAttribute('alt', mockedData.alt);
+  });
+});

src/widgets/mentors-wanted/ui/mentors-wanted.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
+import { LINKS } from '@/app/const';
 import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
 import { Image } from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
@@ -12,28 +12,28 @@ const cx = classNamesBind.bind(styles);
 
 export const MentorsWanted = () => {
   return (
-    <section className={cx('mentors-wanted', 'container')}>
-      <article className={classNames('content', cx('content'))}>
+    <section className={cx('mentors-wanted', 'container')} data-testid="mentors-wanted">
+      <article className={cx('mentors-wanted-content', 'content')}>
         <div className={cx('content-left')}>
           <WidgetTitle id="mentors-wanted" mods="lines">
             Mentors Wanted!
           </WidgetTitle>
           <Paragraph>
             If&nbsp;you are interested in mentoring our students, please go through the
             {' '}
-            <LinkCustom
-              href="https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring"
-              external
-            >
+            <LinkCustom href={LINKS.ANGULAR_MENTORING} external data-testid="link-custom">
               Mentoring Documentation
             </LinkCustom>
             {' '}
             for&nbsp;the Angular Course.
           </Paragraph>
         </div>
-        <div className={cx('picture')}>
-          <Image src={mentorImg} alt="Sloth - mascot dresses as a detective" />
-        </div>
+        <Image
+          className={cx('sloth-mascot')}
+          src={mentorImg}
+          alt="Sloth - mascot dresses as a detective"
+          data-testid="sloth-mascot"
+        />
       </article>
     </section>
   );