869-refactor: Update angular mark

dev-data/about-course.data.tsx

@@ -98,8 +98,8 @@ const listData = {
 const angularNodejsAwsFundamentals: (course: string) => AboutCourseInfo[] = () => [
   {
     id: 1,
-    title: 'For JS/FE graduates',
-    info: 'This course is exclusively available for students who have successfully completed JS/FE Stage 2. The RS School continues working by the principle of "Pay it forward". Members of our community share their knowledge and check students\' tasks for free. And we hope that our students will continue this work as our mentors in the future.',
+    title: 'For RS School alumni',
+    info: 'This course is exclusively available for students who have successfully completed any RS School course. The RS School continues working by the principle of "Pay it forward". Members of our community share their knowledge and check students\' tasks for free. And we hope that our students will continue this work as our mentors in the future.',
     icon: personIcon,
   },
   {

dev-data/courses.data.ts

@@ -7,7 +7,7 @@ import javascriptBlack from '@/shared/assets/icons/javascript-black.svg';
 import javascript from '@/shared/assets/icons/javascript.svg';
 import nodejs from '@/shared/assets/icons/node-js.svg';
 import react from '@/shared/assets/icons/react.svg';
-import { COURSE_LINKS, ROUTES, TO_BE_DETERMINED } from '@/shared/constants';
+import { COURSE_LINKS, ROUTES, RS_GRADUATED_ONLY, TO_BE_DETERMINED } from '@/shared/constants';
 import { COURSE_TITLES } from 'data';
 
 export const courses: Course[] = [
@@ -105,13 +105,13 @@ export const courses: Course[] = [
   {
     id: '5',
     title: COURSE_TITLES.ANGULAR,
-    subTitle: `Only for JS/FE Stage 2 graduates`,
+    subTitle: RS_GRADUATED_ONLY,
     descriptionUrl: COURSE_LINKS.ANGULAR,
     iconSrc: angular,
     iconSmall: angular,
     iconFooter: angular,
     secondaryIcon: angular,
-    startDate: 'Only for JS/FE Stage 2 graduates',
+    startDate: TO_BE_DETERMINED,
     registrationEndDate: TO_BE_DETERMINED,
     language: 'en',
     mode: 'online',

dev-data/training-program.data.tsx

@@ -117,8 +117,8 @@ export const contentMap: ContentMap = {
     content: [
       <Paragraph key="angular 01">
         This course is designed for individuals with a solid foundation in JavaScript, TypeScript,
-        and front-end development. The course is exclusively available for graduates who have
-        successfully completed JS/FE Stage 2.
+        and front-end development. The course is available for students who have successfully
+        completed any RS School course.
       </Paragraph>,
       <Paragraph key="angular 02">
         The course lasts 11 weeks, requiring approximately 20-40 hours of study per week.

src/entities/course/ui/course-card/course-card.test.tsx

@@ -1,56 +1,41 @@
 import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { CourseCard, type CourseCardProps } from './course-card';
-import { MOCKED_IMAGE_PATH } from '@/shared/__tests__/constants';
+import { CourseCard } from './course-card';
+import { mockedCourses } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
-import { dayJS } from '@/shared/helpers/day-js';
 import { COURSE_TITLES } from 'data';
 
 describe('CourseCard', () => {
-  const mockProps: CourseCardProps = {
-    title: COURSE_TITLES.REACT,
-    iconSrc: MOCKED_IMAGE_PATH,
-    startDate: dayJS().toISOString(),
-    registrationEndDate: dayJS().add(1, 'd').toISOString(),
-    mode: 'online',
-    language: 'en',
-    detailsUrl: 'http://example.com/course',
-    backgroundStyle: {
-      backgroundColor: '#ffffff',
-      accentColor: '#ff0000',
-    },
-    personalMentoringStartDate: null,
-    personalMentoringEndDate: null,
-  };
-
-  let card: HTMLElement;
-
-  beforeEach(() => {
-    renderWithRouter(<CourseCard {...mockProps} />);
-    card = screen.getByTestId('course-card');
-  });
+  describe.each(mockedCourses)('Testing course card $title', (course) => {
+    let card: HTMLElement;
 
-  it('renders the course card correctly', () => {
-    expect(card).toBeInTheDocument();
-  });
+    beforeEach(() => {
+      renderWithRouter(<CourseCard {...course} />);
+      card = screen.getByTestId('course-card');
+    });
 
-  it('renders the course card content correctly', () => {
-    const language = mockProps.language === 'ru' ? 'Russian' : 'English';
+    it('renders the course card correctly', () => {
+      expect(card).toBeInTheDocument();
+    });
 
-    expect(screen.getByText(mockProps.title)).toBeVisible();
-    expect(screen.getByText(`${mockProps.startDate}`)).toBeVisible();
-    expect(screen.getByText(language)).toBeVisible();
-    expect(screen.getByRole('link')).toHaveAttribute('href', mockProps.detailsUrl);
-  });
+    it('renders the course card content correctly', () => {
+      const language = course.language === 'ru' ? 'Russian' : 'English';
+      const title = `${course.title}${course.title === COURSE_TITLES.ANGULAR ? ` (${course.subTitle})` : ''}`;
+
+      expect(screen.getByText(title)).toBeVisible();
+      expect(screen.getByText(language)).toBeVisible();
+      expect(screen.getByRole('link')).toHaveAttribute('href', course.detailsUrl);
+    });
 
-  it('renders the course card colors correctly', () => {
-    const cardHeader = screen.getByTestId('card-header');
+    it('renders the course card colors correctly', () => {
+      const cardHeader = screen.getByTestId('card-header');
 
-    expect(cardHeader).toHaveClass('card-header');
-    expect(cardHeader).toHaveStyle({
-      'backgroundColor': mockProps.backgroundStyle.backgroundColor,
-      '--accent-bg-color': mockProps.backgroundStyle.accentColor,
+      expect(cardHeader).toHaveClass('card-header');
+      expect(cardHeader).toHaveStyle({
+        'backgroundColor': course.backgroundStyle.backgroundColor,
+        '--accent-bg-color': course.backgroundStyle.accentColor,
+      });
     });
   });
 });

src/entities/course/ui/course-card/course-card.tsx

@@ -8,6 +8,7 @@ import { DateSimple } from '@/shared/ui/date-simple';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { ShortInfoPanel } from '@/shared/ui/short-info-panel';
 import { Subtitle } from '@/shared/ui/subtitle';
+import { COURSE_TITLES } from 'data';
 
 import styles from './course-card.module.scss';
 
@@ -16,6 +17,7 @@ export const cx = classNames.bind(styles);
 export type CourseCardProps = Pick<
   Course,
   | 'title'
+  | 'subTitle'
   | 'iconSrc'
   | 'startDate'
   | 'detailsUrl'
@@ -25,13 +27,15 @@ export type CourseCardProps = Pick<
   | 'registrationEndDate'
   | 'personalMentoringStartDate'
   | 'personalMentoringEndDate'
-> & Pick<HTMLProps<HTMLDivElement>, 'className'> & {
+> &
+Pick<HTMLProps<HTMLDivElement>, 'className'> & {
   size?: 'sm' | 'md';
   showMentoringStartDate?: boolean;
 };
 
 export const CourseCard = ({
   title,
+  subTitle,
   iconSrc,
   startDate,
   registrationEndDate,
@@ -49,6 +53,7 @@ export const CourseCard = ({
   const dateLabel = size === 'sm' ? LABELS.START_DATE_SHORT : LABELS.START_DATE;
   const fontSize = size === 'md' ? 'large' : 'small';
 
+  const mark = title === COURSE_TITLES.ANGULAR && !showMentoringStartDate ? ` (${subTitle})` : '';
   const classes = {
     [`size-${size}`]: true,
     [className]: true,
@@ -63,7 +68,9 @@ export const CourseCard = ({
     <article className={cx('course-card', classes)} data-testid="course-card">
       <div className={cx('card-header')} style={cardStyle} data-testid="card-header">
         <Image src={iconSrc} alt={title} />
-        <Subtitle className={cx('course-title')} fontSize={fontSize}>{title}</Subtitle>
+        <Subtitle className={cx('course-title')} fontSize={fontSize}>
+          {`${title}${mark}`}
+        </Subtitle>
       </div>
       <div className={cx('course-info')}>
         {!showMentoringStartDate && (
@@ -83,11 +90,7 @@ export const CourseCard = ({
               endDate={personalMentoringStartDate ? personalMentoringEndDate : null}
               labelSeparator={LABELS.MENTOR_ACTIVITIES_SEPARATOR}
             />
-            <ShortInfoPanel
-              startDate={null}
-              registrationEndDate={null}
-              language={language}
-            />
+            <ShortInfoPanel startDate={null} registrationEndDate={null} language={language} />
           </div>
         )}
         <LinkCustom

src/shared/constants.ts

@@ -4,6 +4,7 @@ export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';
 export const RS_FOUNDATION_YEAR = '2013';
 export const RS_EMAIL = '[email protected]';
 export const TO_BE_DETERMINED = 'TBD';
+export const RS_GRADUATED_ONLY = 'Alumni only';
 export const REGISTRATION_WILL_OPEN_SOON = 'Registration will open soon!';
 export const REGISTRATION_WILL_OPEN_SOON_RU = 'Регистрация откроется скоро!';
 export const UNKNOWN_API_ERROR = 'Unknown error, API request failed.';

src/widgets/courses/ui/courses.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 
 import { Courses } from './courses';
 import { mockedCourses } from '@/shared/__tests__/constants';
+import { COURSE_TITLES } from 'data';
 
 const widgetTitle = 'All courses';
 
@@ -24,7 +25,11 @@ describe('Courses (other courses) component', () => {
     courseCards.forEach((card) => expect(card).toBeVisible());
 
     courseTitles.forEach((title) => {
-      const course = mockedCourses.find((c) => c.title === title.textContent);
+      const course = mockedCourses.find((c) => {
+        const mark = c.title === COURSE_TITLES.ANGULAR ? ` (${c.subTitle})` : '';
+
+        return `${c.title}${mark}` === title.textContent;
+      });
 
       expect(course).toBeDefined();
     });

src/widgets/training-program/ui/training-program.test.tsx

@@ -9,7 +9,7 @@ import { TrainingProgram } from '@/widgets/training-program';
 import { COURSE_TITLES } from 'data';
 
 const mockedParagraphsAngular = [
-  'This course is designed for individuals with a solid foundation in JavaScript, TypeScript, and front-end development. The course is exclusively available for graduates who have successfully completed JS/FE Stage 2.',
+  'This course is designed for individuals with a solid foundation in JavaScript, TypeScript, and front-end development. The course is available for students who have successfully completed any RS School course.',
   'The course lasts 11 weeks, requiring approximately 20-40 hours of study per week.',
   'All webinars are recorded and available on our',
   '. Theoretical materials are provided as recorded lectures from previous courses.',