568-refactor: Widget trainers (#604)

* refactor: 568 - change section titles

* refactor: 568 - replace interface with type

* refactor: 568 - move constants to constants.ts

* refactor: 568 - change styles to modules

* refactor: 568 - remove unnecessary styles

* refactor: 568 - move test file to the ui folder

* refactor: 568 - update tests

* refactor: 568 - add style nesting

src/widgets/trainers/constants.ts

@@ -0,0 +1,4 @@
+export const trainersTitle = {
+  ru: 'Команда курса',
+  en: 'Course Team',
+} as const;

src/widgets/trainers/ui/trainers.module.scss

@@ -0,0 +1,14 @@
+.trainers-content {
+  display: flex;
+  flex-direction: column;
+
+  .trainers-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 32px;
+
+    @include media-tablet-large {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/widgets/trainers/ui/trainers.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { Trainers } from './trainers';
+import { MOCKED_ONE_TRAINER, MOCKED_SEVERAL_TRAINERS } from '@/shared/__tests__/constants';
+
+describe('Trainers component', () => {
+  const { name, role, bio, photo } = MOCKED_ONE_TRAINER[0];
+  const mockedTitle = {
+    ru: 'Команда курса',
+    en: 'Course Team',
+  };
+
+  it('renders without crashing', () => {
+    render(<Trainers trainers={MOCKED_ONE_TRAINER} />);
+    const trainers = screen.getByTestId('trainers');
+
+    expect(trainers).toBeVisible();
+  });
+
+  it('renders the content correctly with mocked props', () => {
+    render(<Trainers trainers={MOCKED_ONE_TRAINER} />);
+    const titleElement = screen.getByTestId('widget-title');
+    const trainerNameElement = screen.getByText(name);
+    const trainerTitleElement = screen.getByText(role);
+    const trainerDescriptionElement = screen.getByText(bio);
+    const trainerImageElement = screen.getByAltText(`${name} ${role}`);
+
+    expect(titleElement).toBeVisible();
+    expect(trainerNameElement).toBeVisible();
+    expect(trainerTitleElement).toBeVisible();
+    expect(trainerDescriptionElement).toBeVisible();
+    expect(trainerImageElement).toBeVisible();
+
+    expect(titleElement).toHaveTextContent(mockedTitle.en);
+    expect(trainerImageElement).toHaveAttribute('src', photo);
+  });
+
+  it('renders the title content correctly with lang ru prop', () => {
+    render(<Trainers trainers={MOCKED_ONE_TRAINER} lang="ru" />);
+    const titleElement = screen.getByTestId('widget-title');
+
+    expect(titleElement).toHaveTextContent(mockedTitle.ru);
+  });
+
+  it('renders all the trainers if passed several (8 in items)', () => {
+    render(<Trainers trainers={MOCKED_SEVERAL_TRAINERS} />);
+    const trainers = screen.getByTestId('trainers-list');
+
+    expect(trainers.childNodes).toHaveLength(8);
+  });
+});

src/widgets/trainers/ui/trainers.tsx

@@ -1,38 +1,27 @@
+import classNames from 'classnames/bind';
 import { Trainer, TrainerCard } from '@/entities/trainer';
 import { WidgetTitle } from '@/shared/ui/widget-title';
+import { trainersTitle } from '@/widgets/trainers/constants';
 
-import './trainers.scss';
+import styles from './trainers.module.scss';
 
-interface TrainersProps {
+const cx = classNames.bind(styles);
+
+type TrainersProps = {
   trainers: Trainer[];
   lang?: 'en' | 'ru';
-}
-
-const ONE_TRAINER = 'oneTrainer';
-const MULTIPLE_TRAINERS = 'multipleTrainers';
-
-const trainersTitle = {
-  ru: {
-    [ONE_TRAINER]: 'Преподаватель курса',
-    [MULTIPLE_TRAINERS]: 'Преподаватели курса',
-  },
-  en: {
-    [ONE_TRAINER]: 'Our trainer',
-    [MULTIPLE_TRAINERS]: 'Our mentors and trainers',
-  },
-} as const;
+};
 
 export const Trainers = ({ trainers, lang = 'en' }: TrainersProps) => {
-  const isMultipleTrainers = trainers.length > 1 ? MULTIPLE_TRAINERS : ONE_TRAINER;
-  const title = trainersTitle[lang][isMultipleTrainers];
+  const title = trainersTitle[lang];
 
   return (
-    <section className="trainers container">
-      <div className="trainers-content content">
+    <section className={cx('container')} data-testid="trainers">
+      <div className={cx('trainers-content', 'content')}>
         <WidgetTitle mods="lines">
           {title}
         </WidgetTitle>
-        <div className="trainers-list">
+        <div className={cx('trainers-list')} data-testid="trainers-list">
           {trainers.map(({ name, bio, photo, role }, index) => (
             <TrainerCard
               key={index}