550-refactor: Widget mentors wanted

src/app/const/index.ts

@@ -11,6 +11,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/pages/angular.tsx

@@ -4,7 +4,7 @@ import { Breadcrumbs } from '@/widgets/breadcrumbs';
 import { Certification } from '@/widgets/certification';
 import { Communication } from '@/widgets/communication';
 import { HeroCourse } from '@/widgets/hero-course';
-import { MentorsWanted } from '@/widgets/mentors-wanted';
+import { MentorsWantedCourse } from '@/widgets/mentors-wanted-course';
 import { Required } from '@/widgets/required';
 import { StudyPath } from '@/widgets/study-path';
 import { Trainers } from '@/widgets/trainers';
@@ -25,7 +25,7 @@ export const Angular = () => {
       <Communication courseName={COURSE_NAME} />
       <StudyPath path={COURSE_NAME} />
       <Required courseName={COURSE_NAME} marked1 />
-      <MentorsWanted />
+      <MentorsWantedCourse />
       <Trainers trainers={angular} />
     </>
   );

src/widgets/mentors-wanted-course/index.ts

@@ -0,0 +1 @@
+export { MentorsWantedCourse } from './ui/mentors-wanted-course';

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

@@ -0,0 +1,30 @@
+.mentors-wanted {
+  background-color: $color-yellow-50;
+}
+
+.mentors-wanted-content {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+
+  @include media-tablet {
+    flex-direction: column;
+    gap: 40px;
+  }
+}
+
+.content-left {
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
+
+  @include media-tablet {
+    max-width: 100%;
+  }
+}
+
+.sloth-mascot {
+  align-self: center;
+  max-width: 290px;
+  object-fit: contain;
+}

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

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MentorsWantedCourse } from './mentors-wanted-course';
+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(<MentorsWantedCourse />);
+  });
+
+  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 → src/widgets/mentors-wanted-course/ui/mentors-wanted-course.tsx

@@ -1,39 +1,39 @@
-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';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
-import styles from './mentors-wanted.module.scss';
+import styles from './mentors-wanted-course.module.scss';
 
 const cx = classNamesBind.bind(styles);
 
-export const MentorsWanted = () => {
+export const MentorsWantedCourse = () => {
   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>
   );