From 7a3b080d439d85f9135791020eeafc41cfb20688 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Axel=20Bj=C3=B6rkqvist?= Date: Thu, 22 Aug 2024 12:37:03 +0200 Subject: [PATCH 1/4] Added information modal to recommended prerequisites --- i18n/messages.en.js | 3 ++ i18n/messages.se.js | 3 ++ .../js/app/components/CourseSectionList.jsx | 12 +++++- public/js/app/components/CourseSections.jsx | 39 ++++++++++++------- 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/i18n/messages.en.js b/i18n/messages.en.js index 1b356541..c8be684f 100644 --- a/i18n/messages.en.js +++ b/i18n/messages.en.js @@ -161,6 +161,9 @@ module.exports = { course_department: 'Offered by', course_contact_name: 'Contact ', course_prerequisites: 'Recommended prerequisites', + course_prerequisites_description: + 'Describes the knowledge and skills (in addition to the eligibility requirements) that you need to be able to take the course.', + course_prerequisites_menu_aria_label: 'Information about recommended prerequisites', course_suggested_addon_studies: 'Add-on studies', course_supplemental_information_url: 'Supplementary information link', course_supplemental_information_url_text: 'Supplementary information link text', diff --git a/i18n/messages.se.js b/i18n/messages.se.js index f6a475d7..294f7b28 100644 --- a/i18n/messages.se.js +++ b/i18n/messages.se.js @@ -163,6 +163,9 @@ module.exports = { course_department: 'Ges av', course_contact_name: 'Kontaktperson', course_prerequisites: 'Rekommenderade förkunskaper', + course_prerequisites_description: + 'Beskriver vilka kunskaper och färdigheter (utöver behörighetskraven) som du behöver för att kunna ta till dig kursen.', + course_prerequisites_menu_aria_label: 'Information om rekommenderade förkunskaper', course_suggested_addon_studies: 'Påbyggnad', course_supplemental_information_url: 'Övrig information - länk', course_supplemental_information_url_text: 'Övrig information - länk text', diff --git a/public/js/app/components/CourseSectionList.jsx b/public/js/app/components/CourseSectionList.jsx index 211da55d..e6ce1a50 100644 --- a/public/js/app/components/CourseSectionList.jsx +++ b/public/js/app/components/CourseSectionList.jsx @@ -61,7 +61,15 @@ function CourseSectionList({ courseInfo = {}, partToShow, syllabus = {}, syllabu const during = [ ...eligibility, - { header: translation.courseInformation.course_prerequisites, text: courseInfo.course_prerequisites }, + { + header: translation.courseInformation.course_prerequisites, + text: courseInfo.course_prerequisites, + infoModal: { + description: translation.courseInformation.course_prerequisites_description, + closeLabel: translation.courseLabels.label_close, + ariaLabel: translation.courseInformation.course_prerequisites_menu_aria_label, + }, + }, { header: translation.courseInformation.course_required_equipment, text: courseRequiredEquipment }, { header: translation.courseInformation.course_literature, text: literatureText }, ] @@ -192,6 +200,7 @@ function CourseSectionList({ courseInfo = {}, partToShow, syllabus = {}, syllabu sectionId="Content" syllabusMarkerAriaLabel={translation.courseLabels.syllabus_marker_aria_label} /> +

Here comes the course execution

+

Here ends the course execution

(

@@ -10,21 +11,33 @@ const syllabusMarker = (data, syllabusMarkerAriaLabel) => ( )} + {data.infoModal && ( + + )}

) -const CourseSection = ({ sectionHeader: header = '', courseData = [], sectionId = '', syllabusMarkerAriaLabel }) => ( -
- {header.length ?

{header}

: null} - {courseData.map(data => - data.text ? ( - - {data.header && syllabusMarker(data, syllabusMarkerAriaLabel)} -
- - ) : null - )} -
-) +// eslint-disable-next-line arrow-body-style +const CourseSection = ({ sectionHeader: header = '', courseData = [], sectionId = '', syllabusMarkerAriaLabel }) => { + return ( +
+ {header.length ?

{header}

: null} + {courseData.map(data => + data.text ? ( + + {data.header && syllabusMarker(data, syllabusMarkerAriaLabel)} +
+ + ) : null + )} +
+ ) +} export default CourseSection From 6631a2d396b972019d0e1276c3d38c1b0fdaef12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Axel=20Bj=C3=B6rkqvist?= Date: Thu, 22 Aug 2024 12:49:41 +0200 Subject: [PATCH 2/4] Fixed some incorrect namings in project --- i18n/messages.en.js | 2 +- i18n/messages.se.js | 2 +- .../app/components/{CourseSections.jsx => CourseSection.jsx} | 0 public/js/app/components/CourseSectionList.jsx | 2 +- public/js/app/components/RoundSelector/RoundSelector.jsx | 4 ++-- public/js/app/components/__tests__/CourseSections.test.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) rename public/js/app/components/{CourseSections.jsx => CourseSection.jsx} (100%) diff --git a/i18n/messages.en.js b/i18n/messages.en.js index c8be684f..2b1ea27a 100644 --- a/i18n/messages.en.js +++ b/i18n/messages.en.js @@ -85,7 +85,7 @@ module.exports = { }, header_dropdown_menu_navigation: 'Choose semester and course offering to see current information and more about the course, such as course syllabus, study period, and application information.', - header_dropdown_menue: 'Information per course offering', + header_dropdown_menu: 'Information per course offering', header_dropdown_menu_aria_label: 'Information about choosing semester and course offering', header_course_info: 'Course information', header_content: 'Content and learning outcomes', diff --git a/i18n/messages.se.js b/i18n/messages.se.js index 294f7b28..2129681f 100644 --- a/i18n/messages.se.js +++ b/i18n/messages.se.js @@ -87,7 +87,7 @@ module.exports = { }, header_dropdown_menu_navigation: 'Välj termin och kursomgång för att se aktuell information och mer om kursen, såsom kursplan, studieperiod och anmälningsinformation.', - header_dropdown_menue: 'Information per kursomgång', + header_dropdown_menu: 'Information per kursomgång', header_dropdown_menu_aria_label: 'Information om val av termin och kursomgång', header_course_info: 'Kursinformation', header_content: 'Innehåll och lärandemål', diff --git a/public/js/app/components/CourseSections.jsx b/public/js/app/components/CourseSection.jsx similarity index 100% rename from public/js/app/components/CourseSections.jsx rename to public/js/app/components/CourseSection.jsx diff --git a/public/js/app/components/CourseSectionList.jsx b/public/js/app/components/CourseSectionList.jsx index e6ce1a50..355d774d 100644 --- a/public/js/app/components/CourseSectionList.jsx +++ b/public/js/app/components/CourseSectionList.jsx @@ -2,7 +2,7 @@ import React from 'react' import { useLanguage } from '../hooks/useLanguage' import { useMissingInfo } from '../hooks/useMissingInfo' -import CourseSection from './CourseSections' +import CourseSection from './CourseSection' import { SyllabusInformation } from './SyllabusInformation' function CourseSectionList({ courseInfo = {}, partToShow, syllabus = {}, syllabusName }) { diff --git a/public/js/app/components/RoundSelector/RoundSelector.jsx b/public/js/app/components/RoundSelector/RoundSelector.jsx index 4c9559ea..2f619f90 100644 --- a/public/js/app/components/RoundSelector/RoundSelector.jsx +++ b/public/js/app/components/RoundSelector/RoundSelector.jsx @@ -26,9 +26,9 @@ export const RoundSelector = ({ activeSemesters, semesterRoundState }) => {

- {translation.courseLabels.header_dropdown_menue} + {translation.courseLabels.header_dropdown_menu} Date: Thu, 22 Aug 2024 13:06:19 +0200 Subject: [PATCH 3/4] updated test --- .../__tests__/CourseSections.test.js | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/public/js/app/components/__tests__/CourseSections.test.js b/public/js/app/components/__tests__/CourseSections.test.js index 734fd7a8..2f8483c6 100644 --- a/public/js/app/components/__tests__/CourseSections.test.js +++ b/public/js/app/components/__tests__/CourseSections.test.js @@ -3,16 +3,16 @@ import React from 'react' import '@testing-library/jest-dom' import { render, screen } from '@testing-library/react' -import CourseSections from '../CourseSection' +import CourseSection from '../CourseSection' import i18n from '../../../../../i18n' const [translationEN] = i18n.messages -describe('Component ', () => { +describe('Component ', () => { test('render text with a syllabus marker correctly', () => { const mockData = [{ header: 'First test header', text: 'Text for test from test syllabus', syllabusMarker: true }] render( - ', () => { test('render text without a syllabus marker correctly', () => { const mockData = [{ header: 'Test header chosen by user', text: 'Text for test not from syllabys' }] render( - ', () => { expect(header.querySelector('sup')).toBeNull() }) + test('render an info button correctly', () => { + const mockData = [ + { + header: 'First test header', + text: 'Text for test from test syllabus', + syllabusMarker: true, + infoModal: { + description: translationEN.courseInformation.course_prerequisites_description, + closeLabel: translationEN.courseLabels.label_close, + ariaLabel: translationEN.courseInformation.course_prerequisites_menu_aria_label, + }, + }, + ] + render( + + ) + + const modal = screen.getByLabelText(mockData[0].infoModal.ariaLabel) + expect(modal).toBeInTheDocument() + }) + test('render array of several headers with text correctly', () => { const mockData = [ { header: 'First test header', text: 'Text for test from test syllabus', syllabusMarker: true }, { header: 'Second test header', text: 'Text for test not from syllabys' }, ] render( - Date: Thu, 22 Aug 2024 15:32:53 +0200 Subject: [PATCH 4/4] Removed debugging html tags --- public/js/app/components/CourseSectionList.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/js/app/components/CourseSectionList.jsx b/public/js/app/components/CourseSectionList.jsx index 355d774d..6a8c9db7 100644 --- a/public/js/app/components/CourseSectionList.jsx +++ b/public/js/app/components/CourseSectionList.jsx @@ -200,7 +200,6 @@ function CourseSectionList({ courseInfo = {}, partToShow, syllabus = {}, syllabu sectionId="Content" syllabusMarkerAriaLabel={translation.courseLabels.syllabus_marker_aria_label} /> -

Here comes the course execution

-

Here ends the course execution