498-refactor: Widget about video (#538)

* refactor: 498 - change styles to modules

* refactor: 498 - add semantic tags

* refactor: 498 - remove unnecessary classes and replace colors

* refactor: 498 - move tests to the ui folder

* refactor: 498 - update tests

* refactor: 498 - move data to a separate file

* refactor: 498 - add changes after review

* refactor: 498 - add changes after review

dev-data/about-video.data.ts

@@ -0,0 +1,4 @@
+export const videoTitleLocalized = {
+  en: { title: 'RS School video' },
+  ru: { title: 'Видео RS School' },
+};

dev-data/index.ts

@@ -1,7 +1,12 @@
 export type { AngularAwsPath, CoursesPath, DataMap, JSPath } from './courses-data.types';
 export { COURSE_TITLES } from './courseTitles.data';
 export { type CourseNames, contentMap } from './training-program.data';
-export { type CourseNamesChannels, DISCORD_LINKS, RS_DOCS_COMMUNICATION_LINK, RS_DOCS_TELEGRAM_CHATS_LINK } from './communication.data';
+export {
+  type CourseNamesChannels,
+  DISCORD_LINKS,
+  RS_DOCS_COMMUNICATION_LINK,
+  RS_DOCS_TELEGRAM_CHATS_LINK,
+} from './communication.data';
 export { angular } from './angular.data';
 export { angularPath } from './angular-path.data';
 export { awsDev } from './awsDev.data';
@@ -21,3 +26,4 @@ export { nodejs } from './nodejs.data';
 export { preSchoolEn, preSchoolRu } from './preSchool.data';
 export { reactEn } from './react-en.data';
 export { reactRu } from './react-ru.data';
+export { videoTitleLocalized } from './about-video.data';

src/shared/constants.ts

@@ -2,3 +2,4 @@ export const TABLET_W = import.meta.env.VITE_TABLET;
 export const MOBILE_W = import.meta.env.VITE_MOBILE;
 export const DESKTOP_W = 1280;
 export const IS_DEV = import.meta.env.DEV;
+export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';

src/widgets/about-video/ui/about-video.module.scss

@@ -0,0 +1,50 @@
+.video-wrapper {
+  padding: 24px 67px 0;
+
+  .video-container {
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    max-height: 600px;
+    padding-top: 56.25%;
+
+    .video-frame {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      border: 0;
+    }
+
+    .video-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      height: 100%;
+
+      font-size: 24px;
+      color: $color-white;
+
+      background: $color-gray-400;
+    }
+
+    @include media-laptop-medium {
+      max-height: 410px;
+    }
+  }
+
+  @include media-tablet-large {
+    padding: 24px 0 0;
+  }
+}

src/widgets/about-video/ui/about-video.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { AboutVideo } from './about-video';
+import { RS_INTRO_URL } from '@/shared/constants';
+import { videoTitleLocalized } from 'data';
+
+describe('AboutVideo component', () => {
+  it('renders without crashing with default title', () => {
+    render(<AboutVideo />);
+    const aboutVideo = screen.getByTestId('about-video');
+    const title = screen.getByTestId('widget-title');
+
+    expect(aboutVideo).toBeVisible();
+    expect(title).toBeVisible();
+    expect(title).toHaveTextContent(videoTitleLocalized['en'].title);
+  });
+
+  it('displays the RU title correctly', () => {
+    render(<AboutVideo lang="ru" />);
+    const title = screen.getByTestId('widget-title');
+
+    expect(title).toHaveTextContent(videoTitleLocalized['ru'].title);
+  });
+
+  it('renders the placeholder in development mode', () => {
+    vi.stubEnv('DEV', true);
+    render(<AboutVideo />);
+    const placeholder = screen.getByText('Video Placeholder');
+
+    expect(placeholder).toBeVisible();
+  });
+
+  it('renders the YouTube embed in production mode', () => {
+    vi.stubEnv('DEV', false);
+    render(<AboutVideo />);
+    const video = screen.getByTitle('Introduction to The Rolling Scopes School Online Courses');
+
+    expect(video).toHaveAttribute('src', RS_INTRO_URL);
+  });
+});

src/widgets/about-video/ui/about-video.tsx

@@ -1,41 +1,42 @@
+import classNames from 'classnames/bind';
+import { RS_INTRO_URL } from '@/shared/constants';
 import { WidgetTitle } from '@/shared/ui/widget-title';
+import { videoTitleLocalized } from 'data';
 
-import './about-video.scss';
+import styles from './about-video.module.scss';
 
-type AboutVideoProps = { lang?: 'en' | 'ru' };
+const cx = classNames.bind(styles);
 
-const localizedContent = {
-  en: { title: 'RS School video' },
-  ru: { title: 'Видео RS School' },
-};
+type AboutVideoProps = { lang?: 'en' | 'ru' };
 
 export const AboutVideo = ({ lang = 'en' }: AboutVideoProps) => {
   // Needed to prevent flakiness in screenshot tests
   const isRunningInDev = import.meta.env.DEV;
 
   return (
-    <div className="about-video container">
-      <div className="about-video content">
-        <WidgetTitle mods="lines">{localizedContent[lang].title}</WidgetTitle>
-        <div className="video-wrapper">
-          <div className="video-container">
+    <section className={cx('container')} data-testid="about-video">
+      <article className={cx('content')}>
+        <WidgetTitle mods="lines">{videoTitleLocalized[lang].title}</WidgetTitle>
+        <div className={cx('video-wrapper')}>
+          <div className={cx('video-container')}>
             {isRunningInDev
               ? (
-                  <div className="video-placeholder">Video Placeholder</div>
+                  <div className={cx('video-placeholder')}>Video Placeholder</div>
                 )
               : (
                   <iframe
+                    className={cx('video-frame')}
                     loading="lazy"
-                    title="RS School Intro"
-                    src="https://www.youtube.com/embed/n4unZLVpnaU"
+                    title="Introduction to The Rolling Scopes School Online Courses"
+                    src={RS_INTRO_URL}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowFullScreen
                   >
                   </iframe>
                 )}
           </div>
         </div>
-      </div>
-    </div>
+      </article>
+    </section>
   );
 };