From df87c9469dd6638e046731ab65635c34066d716e Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Wed, 4 Dec 2024 14:19:56 +0100 Subject: [PATCH 1/6] fix: 614 - pre school subtitle --- dev-data/about-course.data.tsx | 2 +- src/app/courses/javascript-preschool-ru/page.tsx | 2 +- src/views/javascript-preschool-ru.tsx | 2 +- src/widgets/about-course/ui/about-course/about-course.test.tsx | 2 +- src/widgets/about-course/ui/about-course/about-course.tsx | 2 +- src/widgets/hero-course/ui/hero-course.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dev-data/about-course.data.tsx b/dev-data/about-course.data.tsx index 1bdabfbd6..3ff4d690e 100644 --- a/dev-data/about-course.data.tsx +++ b/dev-data/about-course.data.tsx @@ -25,7 +25,7 @@ export const introLocalizedContent = { linkLabel: 'Cтать студентом', paragraph: '', }, - 'pre-school-ru': { + 'Pre-school RU': { title: 'JS/Frontend-разработка. Подготовительный этап', linkLabel: 'Стать студентом', paragraph: diff --git a/src/app/courses/javascript-preschool-ru/page.tsx b/src/app/courses/javascript-preschool-ru/page.tsx index 15fa0667a..5d39726d7 100644 --- a/src/app/courses/javascript-preschool-ru/page.tsx +++ b/src/app/courses/javascript-preschool-ru/page.tsx @@ -14,6 +14,6 @@ export default async function JsPreRoute() { const course = await selectCourse(courseName); return ( - <JavaScriptPreSchoolRu lang="ru" type="pre-school-ru" course={course} courseName={courseName} /> + <JavaScriptPreSchoolRu lang="ru" type="Pre-school RU" course={course} courseName={courseName} /> ); } diff --git a/src/views/javascript-preschool-ru.tsx b/src/views/javascript-preschool-ru.tsx index 8dd65edf4..335cb0d87 100644 --- a/src/views/javascript-preschool-ru.tsx +++ b/src/views/javascript-preschool-ru.tsx @@ -13,7 +13,7 @@ import { CourseNames, preSchoolRu } from 'data'; type JavaScriptPreSchoolRuProps = { course: Course; lang: 'ru' | 'en'; - type?: 'pre-school-ru'; + type?: 'Pre-school RU'; courseName: CourseNames['JS_PRESCHOOL_RU']; }; diff --git a/src/widgets/about-course/ui/about-course/about-course.test.tsx b/src/widgets/about-course/ui/about-course/about-course.test.tsx index ad97ec660..663cb7eb8 100644 --- a/src/widgets/about-course/ui/about-course/about-course.test.tsx +++ b/src/widgets/about-course/ui/about-course/about-course.test.tsx @@ -79,7 +79,7 @@ describe('AboutCourse component', () => { <AboutCourse course={mockedPreSchoolCourse} courseName="JS / Front-end Pre-school RU" - type="pre-school-ru" + type="Pre-school RU" />, ); diff --git a/src/widgets/about-course/ui/about-course/about-course.tsx b/src/widgets/about-course/ui/about-course/about-course.tsx index 04d2f5671..5ffa2d519 100644 --- a/src/widgets/about-course/ui/about-course/about-course.tsx +++ b/src/widgets/about-course/ui/about-course/about-course.tsx @@ -12,7 +12,7 @@ export const cx = classNames.bind(styles); type AboutCourseProps = { courseName: CourseNamesKeys; - type?: 'ru' | 'en' | 'pre-school-ru'; + type?: 'ru' | 'en' | 'Pre-school RU'; course: Course; }; diff --git a/src/widgets/hero-course/ui/hero-course.tsx b/src/widgets/hero-course/ui/hero-course.tsx index b89114cf1..1272938e5 100644 --- a/src/widgets/hero-course/ui/hero-course.tsx +++ b/src/widgets/hero-course/ui/hero-course.tsx @@ -16,7 +16,7 @@ const cx = classNames.bind(styles); type HeroCourseProps = { course: Course; lang?: 'ru' | 'en'; - type?: 'pre-school-ru'; + type?: 'Pre-school RU'; }; export const HeroCourse = ({ lang = 'en', type, course }: HeroCourseProps) => { From dddca02ee6ea7d27948a6fea7ea44031bfb96849 Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Thu, 5 Dec 2024 16:24:19 +0100 Subject: [PATCH 2/6] refactor: 614 - update course intro --- dev-data/about-course.data.tsx | 45 +++++++++++-------- dev-data/courses.data.ts | 9 ++++ .../courses/javascript-preschool-ru/page.tsx | 4 +- src/entities/course/types.ts | 1 + src/shared/__tests__/constants.ts | 6 +++ src/shared/helpers/getActualData.test.ts | 3 ++ src/views/javascript-preschool-ru.tsx | 12 ++--- src/views/javascript-ru.tsx | 2 +- .../ui/about-course/about-course.test.tsx | 7 +-- .../ui/about-course/about-course.tsx | 11 +++-- .../hero-course/ui/hero-course.test.tsx | 1 + src/widgets/hero-course/ui/hero-course.tsx | 18 +++++--- .../ui/training-program.test.tsx | 2 + 13 files changed, 74 insertions(+), 47 deletions(-) diff --git a/dev-data/about-course.data.tsx b/dev-data/about-course.data.tsx index 3ff4d690e..a29d25b21 100644 --- a/dev-data/about-course.data.tsx +++ b/dev-data/about-course.data.tsx @@ -14,23 +14,33 @@ type ContentMap = { [key in CourseNamesChannels]: AboutCourseInfo[]; }; +const enIntro = { + title: 'About the course', + linkLabel: 'Become a student', + paragraph: null, +}; +const ruIntro = { + title: 'О курсе', + linkLabel: 'Cтать студентом', + paragraph: null, +}; +const preSchoolIntro = { + title: 'JS/Frontend-разработка. Подготовительный этап', + linkLabel: 'Стать студентом', + paragraph: + 'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».', +}; + export const introLocalizedContent = { - en: { - title: 'About the course', - linkLabel: 'Become a student', - paragraph: '', - }, - ru: { - title: 'О курсе', - linkLabel: 'Cтать студентом', - paragraph: '', - }, - 'Pre-school RU': { - title: 'JS/Frontend-разработка. Подготовительный этап', - linkLabel: 'Стать студентом', - paragraph: - 'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».', - }, + [COURSE_TITLES.JS_PRESCHOOL_RU]: preSchoolIntro, + [COURSE_TITLES.JS_EN]: enIntro, + [COURSE_TITLES.JS_RU]: ruIntro, + [COURSE_TITLES.REACT]: enIntro, + [COURSE_TITLES.ANGULAR]: enIntro, + [COURSE_TITLES.NODE]: enIntro, + [COURSE_TITLES.AWS_FUNDAMENTALS]: enIntro, + [COURSE_TITLES.AWS_CLOUD_DEVELOPER]: enIntro, + [COURSE_TITLES.AWS_DEVOPS]: enIntro, }; const listData = { @@ -217,8 +227,7 @@ const reactEn: AboutCourseInfo[] = javaScriptEN().map((item) => { ...item, info: ( <p> - Throughout the course, we mostly use - {' '} + Throughout the course, we mostly use{' '} <LinkCustom href={DISCORD_LINKS[COURSE_TITLES.REACT]} external> Discord chat </LinkCustom> diff --git a/dev-data/courses.data.ts b/dev-data/courses.data.ts index c8dbc4782..497ebeeb7 100644 --- a/dev-data/courses.data.ts +++ b/dev-data/courses.data.ts @@ -24,6 +24,7 @@ export const courses: Course[] = [ { id: '1', title: COURSE_TITLES.JS_PRESCHOOL_RU, + subTitle: 'Pre-school RU', alias: COURSE_ALIASES.JS_PRESCHOOL_RU, altTitle: 'JavaScript / Front-end', iconSrc: javascript, @@ -43,6 +44,7 @@ export const courses: Course[] = [ { id: '2', title: COURSE_TITLES.JS_EN, + subTitle: null, alias: COURSE_ALIASES.JS_EN, altTitle: 'JavaScript / Front-end', iconSrc: javascript, @@ -62,6 +64,7 @@ export const courses: Course[] = [ { id: '3', title: COURSE_TITLES.JS_RU, + subTitle: null, alias: COURSE_ALIASES.JS_RU, altTitle: 'JavaScript / Front-end', iconSrc: javascript, @@ -81,6 +84,7 @@ export const courses: Course[] = [ { id: '4', title: COURSE_TITLES.REACT, + subTitle: null, alias: COURSE_ALIASES.REACT, iconSrc: react, iconSmall: reactSmall, @@ -99,6 +103,7 @@ export const courses: Course[] = [ { id: '5', title: COURSE_TITLES.ANGULAR, + subTitle: null, alias: COURSE_ALIASES.ANGULAR, iconSrc: angular, iconSmall: angularSmall, @@ -117,6 +122,7 @@ export const courses: Course[] = [ { id: '6', title: COURSE_TITLES.NODE, + subTitle: null, alias: COURSE_ALIASES.NODE, iconSrc: nodejs, iconSmall: nodejsSmall, @@ -135,6 +141,7 @@ export const courses: Course[] = [ { id: '7', title: COURSE_TITLES.AWS_FUNDAMENTALS, + subTitle: null, alias: COURSE_ALIASES.AWS_FUNDAMENTALS, iconSrc: aws, iconSmall: awsFundSmall, @@ -154,6 +161,7 @@ export const courses: Course[] = [ { id: '8', title: COURSE_TITLES.AWS_CLOUD_DEVELOPER, + subTitle: null, alias: COURSE_ALIASES.AWS_CLOUD_DEVELOPER, iconSrc: aws, iconSmall: awsDevSmall, @@ -172,6 +180,7 @@ export const courses: Course[] = [ { id: '9', title: COURSE_TITLES.AWS_DEVOPS, + subTitle: null, alias: COURSE_ALIASES.AWS_DEVOPS, iconSrc: aws, iconSmall: awsDevSmall, diff --git a/src/app/courses/javascript-preschool-ru/page.tsx b/src/app/courses/javascript-preschool-ru/page.tsx index 5d39726d7..43822401b 100644 --- a/src/app/courses/javascript-preschool-ru/page.tsx +++ b/src/app/courses/javascript-preschool-ru/page.tsx @@ -13,7 +13,5 @@ export async function generateMetadata(): Promise<Metadata> { export default async function JsPreRoute() { const course = await selectCourse(courseName); - return ( - <JavaScriptPreSchoolRu lang="ru" type="Pre-school RU" course={course} courseName={courseName} /> - ); + return <JavaScriptPreSchoolRu lang="ru" course={course} courseName={courseName} />; } diff --git a/src/entities/course/types.ts b/src/entities/course/types.ts index 837b10a4f..88f9bad69 100644 --- a/src/entities/course/types.ts +++ b/src/entities/course/types.ts @@ -25,6 +25,7 @@ export type ApiCoursesResponse = Readonly<{ export type Course = { id: string; title: CourseNamesKeys; + subTitle: string | null; alias: CourseAliasValues; altTitle?: string; iconSrc: StaticImageData; diff --git a/src/shared/__tests__/constants.ts b/src/shared/__tests__/constants.ts index 1bee4fa0a..52efbcaba 100644 --- a/src/shared/__tests__/constants.ts +++ b/src/shared/__tests__/constants.ts @@ -25,6 +25,7 @@ export const mockedCourses: Course[] = [ { id: '1', title: COURSE_TITLES.JS_PRESCHOOL_RU, + subTitle: 'Pre-school RU', alias: COURSE_ALIASES.JS_PRESCHOOL_RU, startDate: 'Jun 24, 2024', registrationEndDate: 'Jun 24, 2024', @@ -44,6 +45,7 @@ export const mockedCourses: Course[] = [ { id: '2', title: COURSE_TITLES.JS_EN, + subTitle: null, alias: COURSE_ALIASES.JS_EN, startDate: 'Oct, 2024', registrationEndDate: 'Jun 24, 2025', @@ -63,6 +65,7 @@ export const mockedCourses: Course[] = [ { id: '3', title: COURSE_TITLES.JS_RU, + subTitle: null, alias: COURSE_ALIASES.JS_RU, startDate: 'Oct, 2024', registrationEndDate: 'Jun 24, 2025', @@ -82,6 +85,7 @@ export const mockedCourses: Course[] = [ { id: '4', title: COURSE_TITLES.REACT, + subTitle: null, alias: COURSE_ALIASES.REACT, startDate: 'Jul 1, 2024', registrationEndDate: 'Jun 24, 2024', @@ -101,6 +105,7 @@ export const mockedCourses: Course[] = [ { id: '5', title: COURSE_TITLES.ANGULAR, + subTitle: null, alias: COURSE_ALIASES.ANGULAR, startDate: 'Jul 1, 2024', registrationEndDate: 'Jun 24, 2025', @@ -120,6 +125,7 @@ export const mockedCourses: Course[] = [ { id: '6', title: COURSE_TITLES.AWS_FUNDAMENTALS, + subTitle: null, alias: COURSE_ALIASES.AWS_FUNDAMENTALS, startDate: 'Jul 1, 2024', registrationEndDate: 'Jun 24, 2025', diff --git a/src/shared/helpers/getActualData.test.ts b/src/shared/helpers/getActualData.test.ts index 5a57a4916..56d51905f 100644 --- a/src/shared/helpers/getActualData.test.ts +++ b/src/shared/helpers/getActualData.test.ts @@ -20,6 +20,7 @@ const coursesMock: Course[] = [ id: '1', title: COURSE_TITLES.REACT, alias: COURSE_ALIASES.REACT, + subTitle: null, altTitle: 'altTitle', iconSrc: { src: 'icon', @@ -50,6 +51,7 @@ const coursesMock: Course[] = [ { id: '2', title: COURSE_TITLES.REACT, + subTitle: null, alias: COURSE_ALIASES.REACT, altTitle: 'altTitle', iconSrc: { @@ -81,6 +83,7 @@ const coursesMock: Course[] = [ { id: '3', title: COURSE_TITLES.REACT, + subTitle: null, alias: COURSE_ALIASES.REACT, altTitle: 'altTitle', iconSrc: { diff --git a/src/views/javascript-preschool-ru.tsx b/src/views/javascript-preschool-ru.tsx index 335cb0d87..e461ff07b 100644 --- a/src/views/javascript-preschool-ru.tsx +++ b/src/views/javascript-preschool-ru.tsx @@ -13,21 +13,15 @@ import { CourseNames, preSchoolRu } from 'data'; type JavaScriptPreSchoolRuProps = { course: Course; lang: 'ru' | 'en'; - type?: 'Pre-school RU'; courseName: CourseNames['JS_PRESCHOOL_RU']; }; -export const JavaScriptPreSchoolRu = ({ - lang, - type, - course, - courseName, -}: JavaScriptPreSchoolRuProps) => { +export const JavaScriptPreSchoolRu = ({ lang, course, courseName }: JavaScriptPreSchoolRuProps) => { return ( <> - <HeroCourse type={type} lang={lang} course={course} /> + <HeroCourse lang={lang} course={course} /> <Breadcrumbs /> - <AboutCourse courseName={courseName} type={type} course={course} /> + <AboutCourse courseName={courseName} course={course} /> <TrainingProgram courseName={courseName} lang={lang} course={course} /> <Required courseName={courseName} /> <Certification courseName={courseName} /> diff --git a/src/views/javascript-ru.tsx b/src/views/javascript-ru.tsx index 429962f6b..6d3981e40 100644 --- a/src/views/javascript-ru.tsx +++ b/src/views/javascript-ru.tsx @@ -25,7 +25,7 @@ export const JavaScriptRu = ({ lang, course, courseName }: JavaScriptRuProps) => <HeroCourse course={course} lang={lang} /> <Breadcrumbs /> <TrainingProgram course={course} courseName={courseName} lang={lang} /> - <AboutCourse course={course} courseName={courseName} type={lang} /> + <AboutCourse course={course} courseName={courseName} /> <Certification courseName={courseName} /> <Communication courseName={courseName} lang={lang} /> <AboutVideo lang={lang} /> diff --git a/src/widgets/about-course/ui/about-course/about-course.test.tsx b/src/widgets/about-course/ui/about-course/about-course.test.tsx index 663cb7eb8..813b2699f 100644 --- a/src/widgets/about-course/ui/about-course/about-course.test.tsx +++ b/src/widgets/about-course/ui/about-course/about-course.test.tsx @@ -18,6 +18,7 @@ const mockedReactCourse: Course = { iconSmall: MOCKED_IMAGE_PATH, iconSrc: MOCKED_IMAGE_PATH, title: COURSE_TITLES.REACT, + subTitle: null, alias: COURSE_ALIASES.REACT, language: ['en'], mode: 'online', @@ -76,11 +77,7 @@ describe('AboutCourse component', () => { describe('render "Paragraph" with "js / front-end pre-school ru" props', () => { it("renders 'Paragraph' and its' content", async () => { renderWithRouter( - <AboutCourse - course={mockedPreSchoolCourse} - courseName="JS / Front-end Pre-school RU" - type="Pre-school RU" - />, + <AboutCourse course={mockedPreSchoolCourse} courseName="JS / Front-end Pre-school RU" />, ); const paragraph = await screen.findByText(/Подготовительный этап поможет тем/i); diff --git a/src/widgets/about-course/ui/about-course/about-course.tsx b/src/widgets/about-course/ui/about-course/about-course.tsx index 5ffa2d519..a16862251 100644 --- a/src/widgets/about-course/ui/about-course/about-course.tsx +++ b/src/widgets/about-course/ui/about-course/about-course.tsx @@ -12,23 +12,22 @@ export const cx = classNames.bind(styles); type AboutCourseProps = { courseName: CourseNamesKeys; - type?: 'ru' | 'en' | 'Pre-school RU'; course: Course; }; -export const AboutCourse = ({ course, courseName, type = 'en' }: AboutCourseProps) => { +export const AboutCourse = ({ course, courseName }: AboutCourseProps) => { const courseInfoList = contentMapAbout[courseName]; return ( <section className={cx('container')}> <div className={cx('about-course', 'content')}> - <WidgetTitle>{introLocalizedContent[type].title}</WidgetTitle> - {introLocalizedContent[type]?.paragraph && ( - <Paragraph>{introLocalizedContent[type].paragraph}</Paragraph> + <WidgetTitle>{introLocalizedContent[courseName].title}</WidgetTitle> + {introLocalizedContent[courseName]?.paragraph && ( + <Paragraph>{introLocalizedContent[courseName].paragraph}</Paragraph> )} <AboutCourseGrid items={courseInfoList} /> <LinkCustom href={course.enroll} variant="primary" external> - {introLocalizedContent[type]?.linkLabel} + {introLocalizedContent[courseName]?.linkLabel} </LinkCustom> </div> </section> diff --git a/src/widgets/hero-course/ui/hero-course.test.tsx b/src/widgets/hero-course/ui/hero-course.test.tsx index c292a9d49..53f24c2cc 100644 --- a/src/widgets/hero-course/ui/hero-course.test.tsx +++ b/src/widgets/hero-course/ui/hero-course.test.tsx @@ -11,6 +11,7 @@ import { COURSE_TITLES } from 'data'; const mockedCourse: Course = { id: '6', title: COURSE_TITLES.NODE, + subTitle: null, alias: COURSE_ALIASES.NODE, iconSrc: MOCKED_IMAGE_PATH, iconSmall: MOCKED_IMAGE_PATH, diff --git a/src/widgets/hero-course/ui/hero-course.tsx b/src/widgets/hero-course/ui/hero-course.tsx index 1272938e5..4b325959b 100644 --- a/src/widgets/hero-course/ui/hero-course.tsx +++ b/src/widgets/hero-course/ui/hero-course.tsx @@ -16,12 +16,20 @@ const cx = classNames.bind(styles); type HeroCourseProps = { course: Course; lang?: 'ru' | 'en'; - type?: 'Pre-school RU'; }; -export const HeroCourse = ({ lang = 'en', type, course }: HeroCourseProps) => { - const { title, altTitle, language, mode, enroll, secondaryIcon, startDate, registrationEndDate } = - course; +export const HeroCourse = ({ lang = 'en', course }: HeroCourseProps) => { + const { + title, + subTitle, + altTitle, + language, + mode, + enroll, + secondaryIcon, + startDate, + registrationEndDate, + } = course; const status = getCourseStatus(startDate, dayJS(registrationEndDate).diff(startDate, 'd')); return ( @@ -31,7 +39,7 @@ export const HeroCourse = ({ lang = 'en', type, course }: HeroCourseProps) => { <article> <SectionLabel data-testid="course-label">{status}</SectionLabel> <MainTitle size="small">{`${altTitle || title} Course`}</MainTitle> - {type && <p className={cx('hero-subtitle')}>{type}</p>} + {subTitle && <p className={cx('hero-subtitle')}>{subTitle}</p>} <DateLang startDate={startDate} registrationEndDate={registrationEndDate} diff --git a/src/widgets/training-program/ui/training-program.test.tsx b/src/widgets/training-program/ui/training-program.test.tsx index cb69a3a05..41b5816eb 100644 --- a/src/widgets/training-program/ui/training-program.test.tsx +++ b/src/widgets/training-program/ui/training-program.test.tsx @@ -11,6 +11,7 @@ import { COURSE_TITLES } from 'data'; const mockedCourseAngular: Course = { id: '1', title: COURSE_TITLES.ANGULAR, + subTitle: null, alias: COURSE_ALIASES.ANGULAR, startDate: '16 Oct, 2023', registrationEndDate: '16 Oct, 2024', @@ -37,6 +38,7 @@ const mockedCourseAws: Course = { startDate: '', registrationEndDate: TO_BE_DETERMINED, title: COURSE_TITLES.AWS_CLOUD_DEVELOPER, + subTitle: null, alias: COURSE_ALIASES.AWS_CLOUD_DEVELOPER, detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVELOPER}`, enroll: 'https://wearecommunity.io/events/aws-cloud-dev-rs2023q4', From 23c8b3b4edd770b6ef03094f2f53ce06f7abd0ca Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Thu, 5 Dec 2024 16:29:09 +0100 Subject: [PATCH 3/6] refactor: 614 - eslint fix --- dev-data/about-course.data.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev-data/about-course.data.tsx b/dev-data/about-course.data.tsx index a29d25b21..0b61f0d35 100644 --- a/dev-data/about-course.data.tsx +++ b/dev-data/about-course.data.tsx @@ -227,7 +227,8 @@ const reactEn: AboutCourseInfo[] = javaScriptEN().map((item) => { ...item, info: ( <p> - Throughout the course, we mostly use{' '} + Throughout the course, we mostly use + {' '} <LinkCustom href={DISCORD_LINKS[COURSE_TITLES.REACT]} external> Discord chat </LinkCustom> From 28e0252d36b4d180c35a32a0abf6dc0ca3438d71 Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Thu, 5 Dec 2024 18:20:59 +0100 Subject: [PATCH 4/6] refactor: 614 - add test --- src/widgets/hero-course/ui/hero-course.test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/widgets/hero-course/ui/hero-course.test.tsx b/src/widgets/hero-course/ui/hero-course.test.tsx index 53f24c2cc..3b24fd380 100644 --- a/src/widgets/hero-course/ui/hero-course.test.tsx +++ b/src/widgets/hero-course/ui/hero-course.test.tsx @@ -11,7 +11,7 @@ import { COURSE_TITLES } from 'data'; const mockedCourse: Course = { id: '6', title: COURSE_TITLES.NODE, - subTitle: null, + subTitle: 'Test Subtitle', alias: COURSE_ALIASES.NODE, iconSrc: MOCKED_IMAGE_PATH, iconSmall: MOCKED_IMAGE_PATH, @@ -54,4 +54,10 @@ describe('HeroCourse component', () => { expect(imageElement).toBeInTheDocument(); expect(imageElement).toHaveAttribute('src', MOCKED_IMAGE_PATH.src); }); + + it('renders the subtitle when provided', async () => { + const subtitleElement = await screen.findByText('Test Subtitle'); + + expect(subtitleElement).toBeVisible(); + }); }); From 643cd5923b37b0a3c4304e304d267372c927ace4 Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Fri, 6 Dec 2024 10:45:17 +0100 Subject: [PATCH 5/6] refactor: 614 - update subtitle test --- .../hero-course/ui/hero-course.test.tsx | 55 ++++++++++++------- 1 file changed, 34 insertions(+), 21 deletions(-) diff --git a/src/widgets/hero-course/ui/hero-course.test.tsx b/src/widgets/hero-course/ui/hero-course.test.tsx index 3b24fd380..abf52cd2b 100644 --- a/src/widgets/hero-course/ui/hero-course.test.tsx +++ b/src/widgets/hero-course/ui/hero-course.test.tsx @@ -29,35 +29,48 @@ const mockedCourse: Course = { }; describe('HeroCourse component', () => { - beforeEach(() => { - renderWithRouter(<HeroCourse course={mockedCourse} />); - }); + describe('Render general content', () => { + beforeEach(() => { + renderWithRouter(<HeroCourse course={mockedCourse} />); + }); - it('renders the title and label correctly', async () => { - const titleElement = await screen.findByText('Node.js Course'); - const labelElement = screen.getByText('planned'); + it('renders the title and label correctly', async () => { + const titleElement = await screen.findByText('Node.js Course'); + const labelElement = screen.getByText('planned'); - expect(titleElement).toBeVisible(); - expect(labelElement).toBeVisible(); - }); + expect(titleElement).toBeVisible(); + expect(labelElement).toBeVisible(); + }); - it('renders enroll button with correct label and href', () => { - const buttonElement = screen.getByRole('link', { name: /enroll/i }); + it('renders enroll button with correct label and href', () => { + const buttonElement = screen.getByRole('link', { name: /enroll/i }); - expect(buttonElement).toBeVisible(); - expect(buttonElement).toHaveAttribute('href', 'https://test.com'); - }); + expect(buttonElement).toBeVisible(); + expect(buttonElement).toHaveAttribute('href', 'https://test.com'); + }); - it('renders the image with correct source', () => { - const imageElement = screen.getByRole('img', { name: /Node.js/i }); + it('renders the image with correct source', () => { + const imageElement = screen.getByRole('img', { name: /Node.js/i }); - expect(imageElement).toBeInTheDocument(); - expect(imageElement).toHaveAttribute('src', MOCKED_IMAGE_PATH.src); + expect(imageElement).toBeInTheDocument(); + expect(imageElement).toHaveAttribute('src', MOCKED_IMAGE_PATH.src); + }); }); - it('renders the subtitle when provided', async () => { - const subtitleElement = await screen.findByText('Test Subtitle'); + describe('Render subtitle', () => { + it('renders the subtitle when provided', async () => { + renderWithRouter(<HeroCourse course={mockedCourse} />); + const subtitleElement = await screen.findByText('Test Subtitle'); + + expect(subtitleElement).toBeVisible(); + }); + + it('does not display subtitles if they are not provided', () => { + mockedCourse.subTitle = null; + renderWithRouter(<HeroCourse course={mockedCourse} />); + const subtitleElement = screen.queryByText('Test Subtitle'); - expect(subtitleElement).toBeVisible(); + expect(subtitleElement).toBeNull(); + }); }); }); From b197aa716af40caac48d3d88bfc503f653caec57 Mon Sep 17 00:00:00 2001 From: YulikK <yulikpoch@gmail.com> Date: Fri, 6 Dec 2024 12:23:00 +0100 Subject: [PATCH 6/6] refactor: 614 - update test --- .../hero-course/ui/hero-course.test.tsx | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/widgets/hero-course/ui/hero-course.test.tsx b/src/widgets/hero-course/ui/hero-course.test.tsx index abf52cd2b..7c1b64775 100644 --- a/src/widgets/hero-course/ui/hero-course.test.tsx +++ b/src/widgets/hero-course/ui/hero-course.test.tsx @@ -27,6 +27,25 @@ const mockedCourse: Course = { accentColor: '#AEDF36', }, }; +const mockedCourseNoSubtitle: Course = { + id: '6', + title: COURSE_TITLES.NODE, + subTitle: null, + alias: COURSE_ALIASES.NODE, + iconSrc: MOCKED_IMAGE_PATH, + iconSmall: MOCKED_IMAGE_PATH, + secondaryIcon: MOCKED_IMAGE_PATH, + startDate: dayJS().subtract(2, 'month').format('D MMM, YYYY'), + registrationEndDate: TO_BE_DETERMINED, + language: ['en'], + mode: 'online', + detailsUrl: `/${ROUTES.COURSES}/${ROUTES.NODE_JS}`, + enroll: 'https://test.com', + backgroundStyle: { + backgroundColor: '#F0F9F4', + accentColor: '#AEDF36', + }, +}; describe('HeroCourse component', () => { describe('Render general content', () => { @@ -34,12 +53,14 @@ describe('HeroCourse component', () => { renderWithRouter(<HeroCourse course={mockedCourse} />); }); - it('renders the title and label correctly', async () => { + it('renders the title, label and subtitle correctly', async () => { const titleElement = await screen.findByText('Node.js Course'); const labelElement = screen.getByText('planned'); + const subtitleElement = await screen.findByText('Test Subtitle'); expect(titleElement).toBeVisible(); expect(labelElement).toBeVisible(); + expect(subtitleElement).toBeVisible(); }); it('renders enroll button with correct label and href', () => { @@ -57,17 +78,9 @@ describe('HeroCourse component', () => { }); }); - describe('Render subtitle', () => { - it('renders the subtitle when provided', async () => { - renderWithRouter(<HeroCourse course={mockedCourse} />); - const subtitleElement = await screen.findByText('Test Subtitle'); - - expect(subtitleElement).toBeVisible(); - }); - + describe('Render widget with empty subtitle', () => { it('does not display subtitles if they are not provided', () => { - mockedCourse.subTitle = null; - renderWithRouter(<HeroCourse course={mockedCourse} />); + renderWithRouter(<HeroCourse course={mockedCourseNoSubtitle} />); const subtitleElement = screen.queryByText('Test Subtitle'); expect(subtitleElement).toBeNull();