From 6f68471484ca7b1ccb75cac8955db8a977804a2c Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 17:35:38 +0300 Subject: [PATCH 01/33] refactor: 546 - rename CourseCard to course-item --- .../courses-school/ui/{CourseCard.tsx => course-item.tsx} | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) rename src/widgets/courses-school/ui/{CourseCard.tsx => course-item.tsx} (95%) diff --git a/src/widgets/courses-school/ui/CourseCard.tsx b/src/widgets/courses-school/ui/course-item.tsx similarity index 95% rename from src/widgets/courses-school/ui/CourseCard.tsx rename to src/widgets/courses-school/ui/course-item.tsx index 354dfd54a..c996445e3 100644 --- a/src/widgets/courses-school/ui/CourseCard.tsx +++ b/src/widgets/courses-school/ui/course-item.tsx @@ -14,7 +14,7 @@ type addFields = { type PropsType = Pick & addFields; -export const CourseCard = ({ +export const CourseItem = ({ title, language, startDate, @@ -39,5 +39,3 @@ export const CourseCard = ({ ); }; - -export default CourseCard; From 539f3e0dd5499f639f190d15fec758e8cb44b985 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 17:38:55 +0300 Subject: [PATCH 02/33] refactor: 546 - extract course-item styles to separate file --- .../courses-school/ui/course-item.module.scss | 54 +++++++++++++++++++ src/widgets/courses-school/ui/course-item.tsx | 2 +- 2 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/widgets/courses-school/ui/course-item.module.scss diff --git a/src/widgets/courses-school/ui/course-item.module.scss b/src/widgets/courses-school/ui/course-item.module.scss new file mode 100644 index 000000000..96818e686 --- /dev/null +++ b/src/widgets/courses-school/ui/course-item.module.scss @@ -0,0 +1,54 @@ +.course-item { + @extend %transition-all; + + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + .icon-container { + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + + img { + width: 48px; + height: 36px; + object-fit: contain; + } + } + + .course-info { + width: 100%; + + .name { + margin-top: 0; + margin-bottom: 0; + + font-size: 18px; + font-weight: $font-weight-medium; + line-height: 24px; + color: $color-black; + } + + .date { + margin-top: 8px; + margin-bottom: 0; + + font-size: 14px; + line-height: 20px; + color: $color-gray-600; + } + } + + .details-container { + padding: 16px; + } + + @include media-hover { + &:hover { + box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%); + } + } +} diff --git a/src/widgets/courses-school/ui/course-item.tsx b/src/widgets/courses-school/ui/course-item.tsx index c996445e3..207a7445e 100644 --- a/src/widgets/courses-school/ui/course-item.tsx +++ b/src/widgets/courses-school/ui/course-item.tsx @@ -23,7 +23,7 @@ export const CourseItem = ({ iconSrc, }: PropsType) => { return ( -
+
{title}
From a3c1481298ed99b482d3ba59b742eae0671042e3 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 21:57:52 +0300 Subject: [PATCH 03/33] feat: 546 - add course-item unit tests --- .../courses-school/ui/course-item.test.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/widgets/courses-school/ui/course-item.test.tsx diff --git a/src/widgets/courses-school/ui/course-item.test.tsx b/src/widgets/courses-school/ui/course-item.test.tsx new file mode 100644 index 000000000..f2ce75bd3 --- /dev/null +++ b/src/widgets/courses-school/ui/course-item.test.tsx @@ -0,0 +1,57 @@ +import { screen } from '@testing-library/react'; +import { renderWithRouter } from '@/shared/__tests__/utils'; +import { CourseItem, PropsType } from '@/widgets/courses-school/ui/course-item.tsx'; + +const mockedProps: PropsType = { + title: 'Introduction to React', + language: ['en'], + startDate: '2024-05-01', + detailsUrl: '/courses/react-intro', + buttonText: 'View Details', + iconSrc: '/images/react-icon.png', +}; + +describe('CourseItem Component', () => { + beforeEach(() => { + renderWithRouter(); + }); + + it('renders the course title', () => { + const titleElement = screen.getByText(mockedProps.title); + + expect(titleElement).toBeInTheDocument(); + }); + + it('renders the course language with the first letter capitalized', () => { + const languageInitial = mockedProps.language[0].toUpperCase(); + const dateElement = screen.getByText(`${mockedProps.startDate} • ${languageInitial}`); + + expect(dateElement).toBeInTheDocument(); + }); + + it('renders the start date correctly', () => { + const dateElement = screen.getByText( + `${mockedProps.startDate} • ${mockedProps.language[0].toUpperCase()}`, + ); + + expect(dateElement).toHaveTextContent( + `${mockedProps.startDate} • ${mockedProps.language[0].toUpperCase()}`, + ); + }); + + it('renders the course image with correct src and alt attributes', () => { + const image = screen.getByTestId('course-image') as HTMLImageElement; + + expect(image).toBeInTheDocument(); + expect(image.src).toContain(mockedProps.iconSrc); + expect(image.alt).toBe(mockedProps.title); + }); + + it('renders the LinkCustom component with correct href and text', () => { + const link = screen.getByTestId('course-link') as HTMLAnchorElement; + + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', mockedProps.detailsUrl); + expect(link).toHaveTextContent(mockedProps.buttonText); + }); +}); From 672eff523054ed202a069d8affa3fd97fffd3f00 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:02:18 +0300 Subject: [PATCH 04/33] refactor: 546 - move course-item to entity course --- .../course/ui/course-item}/course-item.module.scss | 0 .../course/ui/course-item}/course-item.test.tsx | 2 +- .../course/ui/course-item}/course-item.tsx | 13 +++++++++---- 3 files changed, 10 insertions(+), 5 deletions(-) rename src/{widgets/courses-school/ui => entities/course/ui/course-item}/course-item.module.scss (100%) rename src/{widgets/courses-school/ui => entities/course/ui/course-item}/course-item.test.tsx (95%) rename src/{widgets/courses-school/ui => entities/course/ui/course-item}/course-item.tsx (69%) diff --git a/src/widgets/courses-school/ui/course-item.module.scss b/src/entities/course/ui/course-item/course-item.module.scss similarity index 100% rename from src/widgets/courses-school/ui/course-item.module.scss rename to src/entities/course/ui/course-item/course-item.module.scss diff --git a/src/widgets/courses-school/ui/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx similarity index 95% rename from src/widgets/courses-school/ui/course-item.test.tsx rename to src/entities/course/ui/course-item/course-item.test.tsx index f2ce75bd3..717f401b1 100644 --- a/src/widgets/courses-school/ui/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; +import { CourseItem, PropsType } from '@/entities/course/ui/course-item/course-item.tsx'; import { renderWithRouter } from '@/shared/__tests__/utils'; -import { CourseItem, PropsType } from '@/widgets/courses-school/ui/course-item.tsx'; const mockedProps: PropsType = { title: 'Introduction to React', diff --git a/src/widgets/courses-school/ui/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx similarity index 69% rename from src/widgets/courses-school/ui/course-item.tsx rename to src/entities/course/ui/course-item/course-item.tsx index 207a7445e..e4c7ae60c 100644 --- a/src/widgets/courses-school/ui/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -3,7 +3,7 @@ import type { Course } from '@/entities/course'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; -import styles from './courses.module.scss'; +import styles from './course-item.module.scss'; const cx = classNames.bind(styles); @@ -12,7 +12,7 @@ type addFields = { iconSrc: string; }; -type PropsType = Pick & addFields; +export type PropsType = Pick & addFields; export const CourseItem = ({ title, @@ -25,14 +25,19 @@ export const CourseItem = ({ return (
- {title} + {title}

{title}

{`${startDate} • ${language[0].toUpperCase()}`}

- + {buttonText}
From f78ccc515852e1c9bd3806fb7fc0d37122758297 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:03:22 +0300 Subject: [PATCH 05/33] refactor: 546 - remove course-item styles from courses scss --- .../courses-school/ui/courses.module.scss | 56 ------------------- 1 file changed, 56 deletions(-) diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss index 91898aefa..a2c348879 100644 --- a/src/widgets/courses-school/ui/courses.module.scss +++ b/src/widgets/courses-school/ui/courses.module.scss @@ -22,62 +22,6 @@ width: 800px; - .course-card { - @extend %transition-all; - - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - - .icon-container { - display: flex; - align-items: center; - justify-content: center; - padding: 16px; - - img { - width: 48px; - height: 36px; - object-fit: contain; - } - } - - .course-info { - width: 100%; - text-align: left; - - .name { - margin-top: 0; - margin-bottom: 0; - - font-size: 18px; - font-weight: $font-weight-medium; - line-height: 24px; - color: $color-black; - } - - .date { - margin-top: 8px; - margin-bottom: 0; - - font-size: 14px; - line-height: 20px; - color: $color-gray-600; - } - } - - .details-container { - padding: 16px; - } - - @include media-hover { - &:hover { - box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%); - } - } - } - @include media-laptop { width: 100%; } From 1ee229c76cc08368e0f85a783c39c88f2eec2d0c Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:04:57 +0300 Subject: [PATCH 06/33] fix: 546 - courses imports --- src/widgets/courses-school/ui/courses.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx index 1fd389b5e..caf9ca153 100644 --- a/src/widgets/courses-school/ui/courses.tsx +++ b/src/widgets/courses-school/ui/courses.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames/bind'; -import { CourseCard } from './CourseCard'; import { MAX_COURSE_COUNT } from '../model/constants'; import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/app/const'; import type { Course } from '@/entities/course'; +import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; import { getActualData } from '@/shared/helpers/getActualData'; import { useWindowSize } from '@/shared/hooks/use-window-size'; import { RsBanner } from '@/shared/icons'; @@ -33,7 +33,7 @@ export const Courses = () => { .slice(0, Math.min(coursesData.length, MAX_COURSE_COUNT)) .map(({ title, language, startDate, detailsUrl, iconSrc }) => { return ( - Date: Fri, 27 Sep 2024 22:09:31 +0300 Subject: [PATCH 07/33] refactor: 546 - rename courses to courses-school --- src/pages/home.tsx | 4 ++-- src/widgets/courses-school/courses.test.tsx | 8 ++++---- src/widgets/courses-school/index.ts | 2 +- .../courses-school/ui/{courses.tsx => courses-school.tsx} | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) rename src/widgets/courses-school/ui/{courses.tsx => courses-school.tsx} (98%) diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 48ec534d0..4d583b559 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -4,7 +4,7 @@ import { useTitle } from '@/shared/hooks/use-title'; import { AboutSchool } from '@/widgets/about-school'; import { Alumni } from '@/widgets/alumni'; import { Breadcrumbs } from '@/widgets/breadcrumbs'; -import { Courses } from '@/widgets/courses-school'; +import { CoursesSchool } from '@/widgets/courses-school'; import { HeroPage } from '@/widgets/hero-page'; import { Mentoring } from '@/widgets/mentoring'; import { Mentors } from '@/widgets/mentors'; @@ -22,7 +22,7 @@ export const Home: FC = () => { - + diff --git a/src/widgets/courses-school/courses.test.tsx b/src/widgets/courses-school/courses.test.tsx index 6c674b844..af5f1c8f7 100644 --- a/src/widgets/courses-school/courses.test.tsx +++ b/src/widgets/courses-school/courses.test.tsx @@ -7,11 +7,11 @@ import { it, vi, } from 'vitest'; -import { Courses } from './ui/courses'; import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; import { useWindowSize } from '@/shared/hooks/use-window-size'; +import { CoursesSchool } from '@/widgets/courses-school'; const mockedData = [ { @@ -79,7 +79,7 @@ vi.mock('@/shared/hooks/use-window-size', () => { describe('Courses', () => { beforeEach(() => { - renderWithRouter(); + renderWithRouter(); }); it('renders the title correctly', () => { @@ -100,7 +100,7 @@ describe('Courses', () => { width: 810, height: 900, }); - renderWithRouter(); + renderWithRouter(); const courseCards = screen.getAllByRole('link', { name: 'More' }); expect(courseCards.length).toBeLessThanOrEqual(5); @@ -111,7 +111,7 @@ describe('Courses', () => { width: 811, height: 900, }); - renderWithRouter(); + renderWithRouter(); const courseCards = screen.getAllByText('More details'); expect(courseCards.length).toBeLessThanOrEqual(5); diff --git a/src/widgets/courses-school/index.ts b/src/widgets/courses-school/index.ts index 8baffcdc2..4b57cb874 100644 --- a/src/widgets/courses-school/index.ts +++ b/src/widgets/courses-school/index.ts @@ -1 +1 @@ -export { Courses } from './ui/courses'; +export { CoursesSchool } from './ui/courses-school'; diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses-school.tsx similarity index 98% rename from src/widgets/courses-school/ui/courses.tsx rename to src/widgets/courses-school/ui/courses-school.tsx index caf9ca153..ed6310d14 100644 --- a/src/widgets/courses-school/ui/courses.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -14,7 +14,7 @@ import styles from './courses.module.scss'; const cx = classNames.bind(styles); -export const Courses = () => { +export const CoursesSchool = () => { const size = useWindowSize(); const tabletScreenBreakPoint = 810; const coursesData: Course[] = getActualData({ From 872ac238a97bfffe6080c13c17885f22996dee36 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:10:16 +0300 Subject: [PATCH 08/33] refactor: 546 - rename courses scss to courses-school scss --- .../ui/{courses.module.scss => courses-school.module.scss} | 0 src/widgets/courses-school/ui/courses-school.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/widgets/courses-school/ui/{courses.module.scss => courses-school.module.scss} (100%) diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses-school.module.scss similarity index 100% rename from src/widgets/courses-school/ui/courses.module.scss rename to src/widgets/courses-school/ui/courses-school.module.scss diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index ed6310d14..c3f6f7e5a 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -10,7 +10,7 @@ import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; import { courses } from 'data'; -import styles from './courses.module.scss'; +import styles from './courses-school.module.scss'; const cx = classNames.bind(styles); From 6d367e2231f2931ea1642327453c7fd4d9d1eb9f Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:11:21 +0300 Subject: [PATCH 09/33] refactor: 546 - move tabletScreenBreakPoint to constants.ts --- src/widgets/courses-school/constants.ts | 1 + src/widgets/courses-school/ui/courses-school.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 src/widgets/courses-school/constants.ts diff --git a/src/widgets/courses-school/constants.ts b/src/widgets/courses-school/constants.ts new file mode 100644 index 000000000..1c37cf3ec --- /dev/null +++ b/src/widgets/courses-school/constants.ts @@ -0,0 +1 @@ +export const tabletScreenBreakPoint = 810; diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index c3f6f7e5a..1711e3837 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -8,6 +8,7 @@ import { useWindowSize } from '@/shared/hooks/use-window-size'; import { RsBanner } from '@/shared/icons'; import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; +import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; import { courses } from 'data'; import styles from './courses-school.module.scss'; @@ -16,7 +17,6 @@ const cx = classNames.bind(styles); export const CoursesSchool = () => { const size = useWindowSize(); - const tabletScreenBreakPoint = 810; const coursesData: Course[] = getActualData({ data: courses, staleAfter: COURSE_STALE_AFTER_DAYS, From 905878d46307fa92dd3c8e1ebd02e75a478cea8a Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:19:59 +0300 Subject: [PATCH 10/33] refactor: 546 - replace RsBanner with Image component --- src/shared/icons/index.tsx | 1 - src/shared/icons/rs-banner.tsx | 6 ------ .../courses-school/ui/courses-school.module.scss | 6 ++---- src/widgets/courses-school/ui/courses-school.tsx | 12 ++++++++---- 4 files changed, 10 insertions(+), 15 deletions(-) delete mode 100644 src/shared/icons/rs-banner.tsx diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx index 3e75ed684..c895d920f 100644 --- a/src/shared/icons/index.tsx +++ b/src/shared/icons/index.tsx @@ -14,7 +14,6 @@ export { NodeJsIcon } from './nodejs-icon'; export { OpenSourcePhilosophyIcon } from './open-source-philosophy-icon'; export { OpenToEveryoneIcon } from './open-to-everyone-icon'; export { ReactIcon } from './react-icon'; -export { RsBanner } from './rs-banner'; export { TeachItForwardIcon } from './teach-It-forward-icon'; export { TelegramIcon } from './telegram'; export { TextLinkIcon } from './text-link-icon'; diff --git a/src/shared/icons/rs-banner.tsx b/src/shared/icons/rs-banner.tsx deleted file mode 100644 index 67f1ba25e..000000000 --- a/src/shared/icons/rs-banner.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import banner from '@/shared/assets/svg/RsBanner.svg'; -import { Image } from '@/shared/ui/image'; - -export const RsBanner = () => { - return RsBanner Icon; -}; diff --git a/src/widgets/courses-school/ui/courses-school.module.scss b/src/widgets/courses-school/ui/courses-school.module.scss index a2c348879..241c950e2 100644 --- a/src/widgets/courses-school/ui/courses-school.module.scss +++ b/src/widgets/courses-school/ui/courses-school.module.scss @@ -3,10 +3,8 @@ } .image { - img { - width: 299px; - height: 193px; - } + width: 300px; + height: 200px; @include media-laptop { margin-top: 24px; diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index 1711e3837..2e8953f8d 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -3,9 +3,10 @@ import { MAX_COURSE_COUNT } from '../model/constants'; import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/app/const'; import type { Course } from '@/entities/course'; import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; +import RSBanner from '@/shared/assets/svg/RsBanner.svg'; import { getActualData } from '@/shared/helpers/getActualData'; import { useWindowSize } from '@/shared/hooks/use-window-size'; -import { RsBanner } from '@/shared/icons'; +import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; @@ -58,9 +59,12 @@ export const CoursesSchool = () => { Go to courses -
- -
+ The Rolling Scopes organization logo
From 50eb8197588728d661e2797dd106136ec9049f55 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:41:25 +0300 Subject: [PATCH 11/33] refactor: 546 - rename MAX_COURSE_COUNT to camelCase --- src/widgets/courses-school/constants.ts | 1 + src/widgets/courses-school/model/constants.ts | 1 - src/widgets/courses-school/ui/courses-school.tsx | 5 ++--- 3 files changed, 3 insertions(+), 4 deletions(-) delete mode 100644 src/widgets/courses-school/model/constants.ts diff --git a/src/widgets/courses-school/constants.ts b/src/widgets/courses-school/constants.ts index 1c37cf3ec..0c853fa27 100644 --- a/src/widgets/courses-school/constants.ts +++ b/src/widgets/courses-school/constants.ts @@ -1 +1,2 @@ export const tabletScreenBreakPoint = 810; +export const maxCourseCount = 5; diff --git a/src/widgets/courses-school/model/constants.ts b/src/widgets/courses-school/model/constants.ts deleted file mode 100644 index 99523d0fe..000000000 --- a/src/widgets/courses-school/model/constants.ts +++ /dev/null @@ -1 +0,0 @@ -export const MAX_COURSE_COUNT = 5; diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index 2e8953f8d..579864bc8 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames/bind'; -import { MAX_COURSE_COUNT } from '../model/constants'; import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/app/const'; import type { Course } from '@/entities/course'; import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; @@ -9,7 +8,7 @@ import { useWindowSize } from '@/shared/hooks/use-window-size'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; -import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; +import { maxCourseCount, tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; import { courses } from 'data'; import styles from './courses-school.module.scss'; @@ -31,7 +30,7 @@ export const CoursesSchool = () => { } const coursesContent = coursesData - .slice(0, Math.min(coursesData.length, MAX_COURSE_COUNT)) + .slice(0, Math.min(coursesData.length, maxCourseCount)) .map(({ title, language, startDate, detailsUrl, iconSrc }) => { return ( Date: Fri, 27 Sep 2024 22:43:16 +0300 Subject: [PATCH 12/33] refactor: 546 - move courses-school test to ui folder --- .../{courses.test.tsx => ui/courses-school.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/widgets/courses-school/{courses.test.tsx => ui/courses-school.test.tsx} (100%) diff --git a/src/widgets/courses-school/courses.test.tsx b/src/widgets/courses-school/ui/courses-school.test.tsx similarity index 100% rename from src/widgets/courses-school/courses.test.tsx rename to src/widgets/courses-school/ui/courses-school.test.tsx From 249f5faa7356d60443abd7a4eb5dd3919c7e1b5a Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:46:50 +0300 Subject: [PATCH 13/33] refactor: 546 - move all the width and height to constants --- .../courses-school/ui/courses-school.test.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/widgets/courses-school/ui/courses-school.test.tsx b/src/widgets/courses-school/ui/courses-school.test.tsx index af5f1c8f7..e1ecf759b 100644 --- a/src/widgets/courses-school/ui/courses-school.test.tsx +++ b/src/widgets/courses-school/ui/courses-school.test.tsx @@ -12,6 +12,10 @@ import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; import { useWindowSize } from '@/shared/hooks/use-window-size'; import { CoursesSchool } from '@/widgets/courses-school'; +import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; + +const height = 900; +const width = tabletScreenBreakPoint; const mockedData = [ { @@ -97,8 +101,8 @@ describe('Courses', () => { it.skip('renders link with "More" on window size 810px', () => { (useWindowSize as Mock).mockReturnValue({ - width: 810, - height: 900, + width, + height, }); renderWithRouter(); const courseCards = screen.getAllByRole('link', { name: 'More' }); @@ -108,8 +112,8 @@ describe('Courses', () => { it.skip('renders link with "More details" on window size more than 810px', () => { (useWindowSize as Mock).mockReturnValue({ - width: 811, - height: 900, + width: width + 1, + height, }); renderWithRouter(); const courseCards = screen.getAllByText('More details'); From 430c8b5acd4e8d6ae1bce41ddd76ae68fa30c588 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 22:52:11 +0300 Subject: [PATCH 14/33] refactor: 546 - remove all it.skip --- .../course/ui/course-card/course-card.tsx | 1 + .../courses-school/ui/courses-school.test.tsx | 43 ++----------------- 2 files changed, 5 insertions(+), 39 deletions(-) diff --git a/src/entities/course/ui/course-card/course-card.tsx b/src/entities/course/ui/course-card/course-card.tsx index 4a10fdba3..30cab17df 100644 --- a/src/entities/course/ui/course-card/course-card.tsx +++ b/src/entities/course/ui/course-card/course-card.tsx @@ -42,6 +42,7 @@ export const CourseCard = ({ href={detailsUrl} variant="rounded" aria-label="View course details" + data-testid="course-link" > View details diff --git a/src/widgets/courses-school/ui/courses-school.test.tsx b/src/widgets/courses-school/ui/courses-school.test.tsx index e1ecf759b..96f5dcc80 100644 --- a/src/widgets/courses-school/ui/courses-school.test.tsx +++ b/src/widgets/courses-school/ui/courses-school.test.tsx @@ -1,21 +1,9 @@ import { screen } from '@testing-library/react'; -import { - Mock, - beforeEach, - describe, - expect, - it, - vi, -} from 'vitest'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; -import { useWindowSize } from '@/shared/hooks/use-window-size'; import { CoursesSchool } from '@/widgets/courses-school'; -import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; - -const height = 900; -const width = tabletScreenBreakPoint; const mockedData = [ { @@ -92,33 +80,10 @@ describe('Courses', () => { expect(titleElement).toBeInTheDocument(); }); - it.skip('renders no more than 5 course cards', () => { - // TODO remove 'skip' after 'data-testid' will be added to CourseCard - const courseCards = screen.getAllByRole('link'); - - expect(courseCards.length).toBeLessThan(5); - }); - - it.skip('renders link with "More" on window size 810px', () => { - (useWindowSize as Mock).mockReturnValue({ - width, - height, - }); - renderWithRouter(); - const courseCards = screen.getAllByRole('link', { name: 'More' }); - - expect(courseCards.length).toBeLessThanOrEqual(5); - }); - - it.skip('renders link with "More details" on window size more than 810px', () => { - (useWindowSize as Mock).mockReturnValue({ - width: width + 1, - height, - }); - renderWithRouter(); - const courseCards = screen.getAllByText('More details'); + it('renders no more than 5 course cards', () => { + const courseCards = screen.getByTestId('courses-list'); - expect(courseCards.length).toBeLessThanOrEqual(5); + expect(courseCards.children.length).toEqual(5); }); it('renders the Go to RS School button', () => { From 247abf4503832f874245c29996bb2373538f0031 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:02:40 +0300 Subject: [PATCH 15/33] refactor: 546 - get rid of divs --- .../ui/course-item/course-item.module.scss | 16 ++-------- .../course/ui/course-item/course-item.tsx | 32 ++++++++++--------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/entities/course/ui/course-item/course-item.module.scss b/src/entities/course/ui/course-item/course-item.module.scss index 96818e686..50149d681 100644 --- a/src/entities/course/ui/course-item/course-item.module.scss +++ b/src/entities/course/ui/course-item/course-item.module.scss @@ -12,7 +12,7 @@ justify-content: center; padding: 16px; - img { + .course-icon { width: 48px; height: 36px; object-fit: contain; @@ -22,16 +22,6 @@ .course-info { width: 100%; - .name { - margin-top: 0; - margin-bottom: 0; - - font-size: 18px; - font-weight: $font-weight-medium; - line-height: 24px; - color: $color-black; - } - .date { margin-top: 8px; margin-bottom: 0; @@ -42,8 +32,8 @@ } } - .details-container { - padding: 16px; + .details-link { + margin: 16px; } @include media-hover { diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index e4c7ae60c..1808ea484 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames/bind'; import type { Course } from '@/entities/course'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; +import { Subtitle } from '@/shared/ui/subtitle'; import styles from './course-item.module.scss'; @@ -25,22 +26,23 @@ export const CourseItem = ({ return (
- {title} + {title}
-
-

{title}

-

{`${startDate} • ${language[0].toUpperCase()}`}

-
-
- - {buttonText} - -
+
+ + {title} + + {`${startDate} • ${language[0].toUpperCase()}`} +
+ + {buttonText} +
); }; From c229b9b04264f4aed9382d9481c1ca6e7455eb11 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:08:18 +0300 Subject: [PATCH 16/33] refactor: 546 - move course item type to entity types --- src/entities/course/index.ts | 2 +- src/entities/course/types.ts | 5 +++++ .../course/ui/course-item/course-item.test.tsx | 5 +++-- src/entities/course/ui/course-item/course-item.tsx | 11 ++--------- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/entities/course/index.ts b/src/entities/course/index.ts index 8d29b9b1c..251891cb3 100644 --- a/src/entities/course/index.ts +++ b/src/entities/course/index.ts @@ -1,2 +1,2 @@ -export type { Course, CourseStatus } from './types'; +export type { Course, CourseItem, CourseStatus } from './types'; export { CourseCard } from './ui/course-card/course-card'; diff --git a/src/entities/course/types.ts b/src/entities/course/types.ts index 2284d5347..f88671434 100644 --- a/src/entities/course/types.ts +++ b/src/entities/course/types.ts @@ -17,3 +17,8 @@ export type Course = { }; export type CourseStatus = 'planned' | 'available' | 'upcoming'; + +export type CourseItem = Pick & { + buttonText: string; + iconSrc: string; +}; diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 717f401b1..4e7093270 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -1,8 +1,9 @@ import { screen } from '@testing-library/react'; -import { CourseItem, PropsType } from '@/entities/course/ui/course-item/course-item.tsx'; +import { CourseItem as TCourseItem } from '@/entities/course'; +import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; import { renderWithRouter } from '@/shared/__tests__/utils'; -const mockedProps: PropsType = { +const mockedProps: TCourseItem = { title: 'Introduction to React', language: ['en'], startDate: '2024-05-01', diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index 1808ea484..36784a79a 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames/bind'; -import type { Course } from '@/entities/course'; +import type { CourseItem as TCourseItem } from '@/entities/course'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { Subtitle } from '@/shared/ui/subtitle'; @@ -8,13 +8,6 @@ import styles from './course-item.module.scss'; const cx = classNames.bind(styles); -type addFields = { - buttonText: string; - iconSrc: string; -}; - -export type PropsType = Pick & addFields; - export const CourseItem = ({ title, language, @@ -22,7 +15,7 @@ export const CourseItem = ({ detailsUrl, buttonText, iconSrc, -}: PropsType) => { +}: TCourseItem) => { return (
From 7d6670c3a408c55d1820a03716caad2a43a2485e Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:10:01 +0300 Subject: [PATCH 17/33] refactor: 546 - remove course icon alt attribute --- src/entities/course/ui/course-item/course-item.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index 36784a79a..20f095282 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -19,7 +19,13 @@ export const CourseItem = ({ return (
- {title} +
From 3e2d49234b1acbe9378656f369995deffdac46e1 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:12:26 +0300 Subject: [PATCH 18/33] refactor: 546 - add better class name --- src/widgets/courses-school/ui/courses-school.module.scss | 2 +- src/widgets/courses-school/ui/courses-school.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widgets/courses-school/ui/courses-school.module.scss b/src/widgets/courses-school/ui/courses-school.module.scss index 241c950e2..48f547d0d 100644 --- a/src/widgets/courses-school/ui/courses-school.module.scss +++ b/src/widgets/courses-school/ui/courses-school.module.scss @@ -2,7 +2,7 @@ margin-top: 24px; } -.image { +.rs-banner { width: 300px; height: 200px; diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index 579864bc8..580cc1123 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -59,7 +59,7 @@ export const CoursesSchool = () => { The Rolling Scopes organization logo Date: Fri, 27 Sep 2024 23:13:14 +0300 Subject: [PATCH 19/33] fix: 546 - remove blank line --- src/widgets/courses-school/ui/courses-school.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/widgets/courses-school/ui/courses-school.test.tsx b/src/widgets/courses-school/ui/courses-school.test.tsx index 96f5dcc80..1b947be4b 100644 --- a/src/widgets/courses-school/ui/courses-school.test.tsx +++ b/src/widgets/courses-school/ui/courses-school.test.tsx @@ -1,7 +1,6 @@ import { screen } from '@testing-library/react'; import { beforeEach, describe, expect, it, vi } from 'vitest'; import { ROUTES } from '@/app/const'; - import { renderWithRouter } from '@/shared/__tests__/utils'; import { CoursesSchool } from '@/widgets/courses-school'; From 710faa96b22c42ca732959e22ece178e4c93e426 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:17:16 +0300 Subject: [PATCH 20/33] refactor: 546 - replace date with time tag --- src/entities/course/ui/course-item/course-item.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index 20f095282..40bc5d20d 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames/bind'; +import dayjs from 'dayjs'; import type { CourseItem as TCourseItem } from '@/entities/course'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; @@ -16,6 +17,8 @@ export const CourseItem = ({ buttonText, iconSrc, }: TCourseItem) => { + const dateTime = dayjs(startDate).toISOString(); + return (
@@ -31,7 +34,10 @@ export const CourseItem = ({ {title} - {`${startDate} • ${language[0].toUpperCase()}`} + + + {` • ${language[0].toUpperCase()}`} +
Date: Fri, 27 Sep 2024 23:22:06 +0300 Subject: [PATCH 21/33] refactor: 546 - remove unnecessary test --- src/entities/course/ui/course-item/course-item.test.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 4e7093270..9691bab49 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -40,14 +40,6 @@ describe('CourseItem Component', () => { ); }); - it('renders the course image with correct src and alt attributes', () => { - const image = screen.getByTestId('course-image') as HTMLImageElement; - - expect(image).toBeInTheDocument(); - expect(image.src).toContain(mockedProps.iconSrc); - expect(image.alt).toBe(mockedProps.title); - }); - it('renders the LinkCustom component with correct href and text', () => { const link = screen.getByTestId('course-link') as HTMLAnchorElement; From 3d0f336a004ae91f3545b62e8be26248e8637773 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:22:46 +0300 Subject: [PATCH 22/33] refactor: 546 - change course entity re-exports --- src/entities/course/index.ts | 3 ++- src/entities/course/types.ts | 2 +- src/entities/course/ui/course-item/course-item.test.tsx | 5 ++--- src/entities/course/ui/course-item/course-item.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/entities/course/index.ts b/src/entities/course/index.ts index 251891cb3..c60e795cf 100644 --- a/src/entities/course/index.ts +++ b/src/entities/course/index.ts @@ -1,2 +1,3 @@ -export type { Course, CourseItem, CourseStatus } from './types'; +export type { Course, CourseItemData, CourseStatus } from './types'; export { CourseCard } from './ui/course-card/course-card'; +export { CourseItem } from './ui/course-item/course-item'; diff --git a/src/entities/course/types.ts b/src/entities/course/types.ts index f88671434..e235fa013 100644 --- a/src/entities/course/types.ts +++ b/src/entities/course/types.ts @@ -18,7 +18,7 @@ export type Course = { export type CourseStatus = 'planned' | 'available' | 'upcoming'; -export type CourseItem = Pick & { +export type CourseItemData = Pick & { buttonText: string; iconSrc: string; }; diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 9691bab49..0eb15fd2e 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -1,9 +1,8 @@ import { screen } from '@testing-library/react'; -import { CourseItem as TCourseItem } from '@/entities/course'; -import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; +import { CourseItem, CourseItemData } from '@/entities/course'; import { renderWithRouter } from '@/shared/__tests__/utils'; -const mockedProps: TCourseItem = { +const mockedProps: CourseItemData = { title: 'Introduction to React', language: ['en'], startDate: '2024-05-01', diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index 40bc5d20d..853f53ef7 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames/bind'; import dayjs from 'dayjs'; -import type { CourseItem as TCourseItem } from '@/entities/course'; +import { CourseItemData } from '@/entities/course'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { Subtitle } from '@/shared/ui/subtitle'; @@ -16,7 +16,7 @@ export const CourseItem = ({ detailsUrl, buttonText, iconSrc, -}: TCourseItem) => { +}: CourseItemData) => { const dateTime = dayjs(startDate).toISOString(); return ( From 4847b5212313593a38dbfff4a26382a410e78351 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:23:40 +0300 Subject: [PATCH 23/33] fix: 546 - course school import --- src/widgets/courses-school/ui/courses-school.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/courses-school/ui/courses-school.tsx index 580cc1123..317019b17 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/courses-school/ui/courses-school.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames/bind'; import { COURSE_STALE_AFTER_DAYS, ROUTES } from '@/app/const'; import type { Course } from '@/entities/course'; -import { CourseItem } from '@/entities/course/ui/course-item/course-item.tsx'; +import { CourseItem } from '@/entities/course'; import RSBanner from '@/shared/assets/svg/RsBanner.svg'; import { getActualData } from '@/shared/helpers/getActualData'; import { useWindowSize } from '@/shared/hooks/use-window-size'; From 064296764c4ff345d915983571d7e6e2bc64fba6 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:30:22 +0300 Subject: [PATCH 24/33] fix: 546 - correct test cases --- .../course/ui/course-item/course-item.test.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 0eb15fd2e..8d48d3b11 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -1,4 +1,5 @@ import { screen } from '@testing-library/react'; +import dayjs from 'dayjs'; import { CourseItem, CourseItemData } from '@/entities/course'; import { renderWithRouter } from '@/shared/__tests__/utils'; @@ -11,6 +12,8 @@ const mockedProps: CourseItemData = { iconSrc: '/images/react-icon.png', }; +const expectedDate = dayjs(mockedProps.startDate).toISOString(); + describe('CourseItem Component', () => { beforeEach(() => { renderWithRouter(); @@ -24,19 +27,16 @@ describe('CourseItem Component', () => { it('renders the course language with the first letter capitalized', () => { const languageInitial = mockedProps.language[0].toUpperCase(); - const dateElement = screen.getByText(`${mockedProps.startDate} • ${languageInitial}`); + const dateElement = screen.getByTestId('course-language'); expect(dateElement).toBeInTheDocument(); + expect(dateElement).toHaveTextContent(`• ${languageInitial}`); }); it('renders the start date correctly', () => { - const dateElement = screen.getByText( - `${mockedProps.startDate} • ${mockedProps.language[0].toUpperCase()}`, - ); + const courseDate = screen.getByTestId('course-date'); - expect(dateElement).toHaveTextContent( - `${mockedProps.startDate} • ${mockedProps.language[0].toUpperCase()}`, - ); + expect(courseDate).toHaveAttribute('datetime', expectedDate); }); it('renders the LinkCustom component with correct href and text', () => { From d9bcd4440ba80589ca6e2a0bd559cd57d0c0da5e Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Fri, 27 Sep 2024 23:30:40 +0300 Subject: [PATCH 25/33] refactor: 546 - change course language tag --- src/entities/course/ui/course-item/course-item.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/entities/course/ui/course-item/course-item.tsx b/src/entities/course/ui/course-item/course-item.tsx index 853f53ef7..f0c755f9b 100644 --- a/src/entities/course/ui/course-item/course-item.tsx +++ b/src/entities/course/ui/course-item/course-item.tsx @@ -34,10 +34,12 @@ export const CourseItem = ({ {title} - - - {` • ${language[0].toUpperCase()}`} - +

+ + {` • ${language[0].toUpperCase()}`} +

Date: Mon, 30 Sep 2024 13:24:46 +0300 Subject: [PATCH 26/33] refactor: 546 - remove unnecessary type casting --- src/entities/course/ui/course-item/course-item.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 8d48d3b11..0bdf18579 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -40,7 +40,7 @@ describe('CourseItem Component', () => { }); it('renders the LinkCustom component with correct href and text', () => { - const link = screen.getByTestId('course-link') as HTMLAnchorElement; + const link = screen.getByTestId('course-link'); expect(link).toBeInTheDocument(); expect(link).toHaveAttribute('href', mockedProps.detailsUrl); From dc28c0ded22ea794da6c713428f7a40939eaefad Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 30 Sep 2024 14:31:16 +0300 Subject: [PATCH 27/33] feat: 546 - add test cases to cover different screen sizes --- .../courses-school/ui/courses-school.test.tsx | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/widgets/courses-school/ui/courses-school.test.tsx b/src/widgets/courses-school/ui/courses-school.test.tsx index 1b947be4b..c52593d5f 100644 --- a/src/widgets/courses-school/ui/courses-school.test.tsx +++ b/src/widgets/courses-school/ui/courses-school.test.tsx @@ -1,8 +1,17 @@ import { screen } from '@testing-library/react'; -import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { + Mock, + beforeEach, + describe, + expect, + it, + vi, +} from 'vitest'; import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; +import { useWindowSize } from '@/shared/hooks/use-window-size'; import { CoursesSchool } from '@/widgets/courses-school'; +import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; const mockedData = [ { @@ -49,6 +58,10 @@ const mockedData = [ }, ]; +const height = 900; +const widthMobile = tabletScreenBreakPoint; +const widthDesktop = widthMobile + 100; + vi.mock('@/app/hooks/use-data-by-name', () => { return { useDataByName: vi.fn().mockImplementation(() => ({ @@ -97,3 +110,29 @@ describe('Courses', () => { expect(rsBanner).toBeInTheDocument(); }); }); + +describe('School Courses on different screen sizes', () => { + it('renders link with icon only on window size 810px', () => { + (useWindowSize as Mock).mockReturnValue({ + width: widthMobile, + height, + }); + + renderWithRouter(); + const courseCards = screen.getAllByTestId('course-link').at(0); + + expect(courseCards).toHaveTextContent(''); + }); + + it('renders link with "More details" on window size more than 810px', () => { + (useWindowSize as Mock).mockReturnValue({ + width: widthDesktop, + height, + }); + + renderWithRouter(); + const courseCards = screen.getAllByTestId('course-link').at(0); + + expect(courseCards).toHaveTextContent('More details'); + }); +}); From cda22b2f7e9556a6ea37494e1c5cb4d2062612ac Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Mon, 30 Sep 2024 14:41:28 +0300 Subject: [PATCH 28/33] refactor: 546 - rename component to upcoming courses --- src/pages/home.tsx | 4 ++-- src/widgets/courses-school/index.ts | 1 - .../{courses-school => upcoming-courses}/constants.ts | 0 src/widgets/upcoming-courses/index.ts | 1 + .../ui/upcoming-courses.module.scss} | 0 .../ui/upcoming-courses.test.tsx} | 10 +++++----- .../ui/upcoming-courses.tsx} | 6 +++--- 7 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 src/widgets/courses-school/index.ts rename src/widgets/{courses-school => upcoming-courses}/constants.ts (100%) create mode 100644 src/widgets/upcoming-courses/index.ts rename src/widgets/{courses-school/ui/courses-school.module.scss => upcoming-courses/ui/upcoming-courses.module.scss} (100%) rename src/widgets/{courses-school/ui/courses-school.test.tsx => upcoming-courses/ui/upcoming-courses.test.tsx} (91%) rename src/widgets/{courses-school/ui/courses-school.tsx => upcoming-courses/ui/upcoming-courses.tsx} (94%) diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 4d583b559..094fb9cc0 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -4,13 +4,13 @@ import { useTitle } from '@/shared/hooks/use-title'; import { AboutSchool } from '@/widgets/about-school'; import { Alumni } from '@/widgets/alumni'; import { Breadcrumbs } from '@/widgets/breadcrumbs'; -import { CoursesSchool } from '@/widgets/courses-school'; import { HeroPage } from '@/widgets/hero-page'; import { Mentoring } from '@/widgets/mentoring'; import { Mentors } from '@/widgets/mentors'; import { Principles } from '@/widgets/principles'; import { Requirements } from '@/widgets/requirements'; import { StudyWithUs } from '@/widgets/study-with-us'; +import { UpcomingCourses } from '@/widgets/upcoming-courses'; export const Home: FC = () => { useTitle('Home · The Rolling Scopes School'); @@ -22,7 +22,7 @@ export const Home: FC = () => { - + diff --git a/src/widgets/courses-school/index.ts b/src/widgets/courses-school/index.ts deleted file mode 100644 index 4b57cb874..000000000 --- a/src/widgets/courses-school/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CoursesSchool } from './ui/courses-school'; diff --git a/src/widgets/courses-school/constants.ts b/src/widgets/upcoming-courses/constants.ts similarity index 100% rename from src/widgets/courses-school/constants.ts rename to src/widgets/upcoming-courses/constants.ts diff --git a/src/widgets/upcoming-courses/index.ts b/src/widgets/upcoming-courses/index.ts new file mode 100644 index 000000000..9deb5a731 --- /dev/null +++ b/src/widgets/upcoming-courses/index.ts @@ -0,0 +1 @@ +export { UpcomingCourses } from './ui/upcoming-courses.tsx'; diff --git a/src/widgets/courses-school/ui/courses-school.module.scss b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss similarity index 100% rename from src/widgets/courses-school/ui/courses-school.module.scss rename to src/widgets/upcoming-courses/ui/upcoming-courses.module.scss diff --git a/src/widgets/courses-school/ui/courses-school.test.tsx b/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx similarity index 91% rename from src/widgets/courses-school/ui/courses-school.test.tsx rename to src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx index c52593d5f..4750e87bd 100644 --- a/src/widgets/courses-school/ui/courses-school.test.tsx +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx @@ -10,8 +10,8 @@ import { import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; import { useWindowSize } from '@/shared/hooks/use-window-size'; -import { CoursesSchool } from '@/widgets/courses-school'; -import { tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; +import { UpcomingCourses } from '@/widgets/upcoming-courses'; +import { tabletScreenBreakPoint } from '@/widgets/upcoming-courses/constants.ts'; const mockedData = [ { @@ -83,7 +83,7 @@ vi.mock('@/shared/hooks/use-window-size', () => { describe('Courses', () => { beforeEach(() => { - renderWithRouter(); + renderWithRouter(); }); it('renders the title correctly', () => { @@ -118,7 +118,7 @@ describe('School Courses on different screen sizes', () => { height, }); - renderWithRouter(); + renderWithRouter(); const courseCards = screen.getAllByTestId('course-link').at(0); expect(courseCards).toHaveTextContent(''); @@ -130,7 +130,7 @@ describe('School Courses on different screen sizes', () => { height, }); - renderWithRouter(); + renderWithRouter(); const courseCards = screen.getAllByTestId('course-link').at(0); expect(courseCards).toHaveTextContent('More details'); diff --git a/src/widgets/courses-school/ui/courses-school.tsx b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx similarity index 94% rename from src/widgets/courses-school/ui/courses-school.tsx rename to src/widgets/upcoming-courses/ui/upcoming-courses.tsx index 317019b17..a74d1f0c6 100644 --- a/src/widgets/courses-school/ui/courses-school.tsx +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx @@ -8,14 +8,14 @@ import { useWindowSize } from '@/shared/hooks/use-window-size'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; -import { maxCourseCount, tabletScreenBreakPoint } from '@/widgets/courses-school/constants.ts'; +import { maxCourseCount, tabletScreenBreakPoint } from '@/widgets/upcoming-courses/constants.ts'; import { courses } from 'data'; -import styles from './courses-school.module.scss'; +import styles from './upcoming-courses.module.scss'; const cx = classNames.bind(styles); -export const CoursesSchool = () => { +export const UpcomingCourses = () => { const size = useWindowSize(); const coursesData: Course[] = getActualData({ data: courses, From 66654cc7718294cc9f772a671e6a0fe4fe17ecf2 Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Tue, 1 Oct 2024 17:54:56 +0300 Subject: [PATCH 29/33] refactor: 546 - rename maxCourseCount to maxUpcomingCoursesQuantity --- src/widgets/upcoming-courses/constants.ts | 2 +- src/widgets/upcoming-courses/ui/upcoming-courses.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/widgets/upcoming-courses/constants.ts b/src/widgets/upcoming-courses/constants.ts index 0c853fa27..ae7246757 100644 --- a/src/widgets/upcoming-courses/constants.ts +++ b/src/widgets/upcoming-courses/constants.ts @@ -1,2 +1,2 @@ export const tabletScreenBreakPoint = 810; -export const maxCourseCount = 5; +export const maxUpcomingCoursesQuantity = 5; diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.tsx b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx index a74d1f0c6..8adcf318b 100644 --- a/src/widgets/upcoming-courses/ui/upcoming-courses.tsx +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx @@ -8,7 +8,10 @@ import { useWindowSize } from '@/shared/hooks/use-window-size'; import { Image } from '@/shared/ui/image'; import { LinkCustom } from '@/shared/ui/link-custom'; import { WidgetTitle } from '@/shared/ui/widget-title'; -import { maxCourseCount, tabletScreenBreakPoint } from '@/widgets/upcoming-courses/constants.ts'; +import { + maxUpcomingCoursesQuantity, + tabletScreenBreakPoint, +} from '@/widgets/upcoming-courses/constants.ts'; import { courses } from 'data'; import styles from './upcoming-courses.module.scss'; @@ -30,7 +33,7 @@ export const UpcomingCourses = () => { } const coursesContent = coursesData - .slice(0, Math.min(coursesData.length, maxCourseCount)) + .slice(0, Math.min(coursesData.length, maxUpcomingCoursesQuantity)) .map(({ title, language, startDate, detailsUrl, iconSrc }) => { return ( Date: Tue, 1 Oct 2024 18:21:11 +0300 Subject: [PATCH 30/33] refactor: 546 - merge some test cases --- .../course/ui/course-item/course-item.test.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/entities/course/ui/course-item/course-item.test.tsx b/src/entities/course/ui/course-item/course-item.test.tsx index 0bdf18579..2850f3bd7 100644 --- a/src/entities/course/ui/course-item/course-item.test.tsx +++ b/src/entities/course/ui/course-item/course-item.test.tsx @@ -19,23 +19,15 @@ describe('CourseItem Component', () => { renderWithRouter(); }); - it('renders the course title', () => { + it('renders the component data as expected', () => { const titleElement = screen.getByText(mockedProps.title); - - expect(titleElement).toBeInTheDocument(); - }); - - it('renders the course language with the first letter capitalized', () => { const languageInitial = mockedProps.language[0].toUpperCase(); const dateElement = screen.getByTestId('course-language'); + const courseDate = screen.getByTestId('course-date'); + expect(titleElement).toBeInTheDocument(); expect(dateElement).toBeInTheDocument(); expect(dateElement).toHaveTextContent(`• ${languageInitial}`); - }); - - it('renders the start date correctly', () => { - const courseDate = screen.getByTestId('course-date'); - expect(courseDate).toHaveAttribute('datetime', expectedDate); }); From b8e8052fa0bab44c4fd0450eb5016aa7213aa77f Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Tue, 1 Oct 2024 18:22:03 +0300 Subject: [PATCH 31/33] refactor: 546 - remove unnecessary file extension --- src/widgets/upcoming-courses/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/upcoming-courses/index.ts b/src/widgets/upcoming-courses/index.ts index 9deb5a731..d43695aa3 100644 --- a/src/widgets/upcoming-courses/index.ts +++ b/src/widgets/upcoming-courses/index.ts @@ -1 +1 @@ -export { UpcomingCourses } from './ui/upcoming-courses.tsx'; +export { UpcomingCourses } from './ui/upcoming-courses'; From 02ddde6aa8cf3429223190dbdb7c777a499ededa Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Tue, 1 Oct 2024 18:25:22 +0300 Subject: [PATCH 32/33] refactor: 546 - remove unnecessary file extension --- src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx b/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx index 4750e87bd..3f5f8cf9a 100644 --- a/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.test.tsx @@ -11,7 +11,7 @@ import { ROUTES } from '@/app/const'; import { renderWithRouter } from '@/shared/__tests__/utils'; import { useWindowSize } from '@/shared/hooks/use-window-size'; import { UpcomingCourses } from '@/widgets/upcoming-courses'; -import { tabletScreenBreakPoint } from '@/widgets/upcoming-courses/constants.ts'; +import { tabletScreenBreakPoint } from '@/widgets/upcoming-courses/constants'; const mockedData = [ { From 0fc8232c683adaf6848e2a321f7e2bacb9802c2d Mon Sep 17 00:00:00 2001 From: Bohdan Shcherbyna Date: Tue, 1 Oct 2024 18:26:45 +0300 Subject: [PATCH 33/33] refactor: 546 - remove title's top margin --- src/widgets/upcoming-courses/ui/upcoming-courses.module.scss | 4 ---- src/widgets/upcoming-courses/ui/upcoming-courses.tsx | 4 +--- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss index 48f547d0d..195f10917 100644 --- a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss @@ -1,7 +1,3 @@ -.course-title { - margin-top: 24px; -} - .rs-banner { width: 300px; height: 200px; diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.tsx b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx index 8adcf318b..f9a8f395d 100644 --- a/src/widgets/upcoming-courses/ui/upcoming-courses.tsx +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.tsx @@ -51,9 +51,7 @@ export const UpcomingCourses = () => { return (
- - Upcoming courses - + Upcoming courses
{coursesContent}