From 661fb189d925739a7369f37e137bccb4fd70b0e2 Mon Sep 17 00:00:00 2001 From: Isaac Lee <124631592+ilee2u@users.noreply.github.com> Date: Thu, 6 Apr 2023 10:55:09 -0400 Subject: [PATCH] feat: refresh accessibility string in UI (#94) * feat: refresh accessibility string in UI * fix: refactored humanizedTime * feat: moved a11y string logic to api.js * temp: a11y string test debug * test: test generate a11y string func * fix: renamed pollExamAttempt return var * docs: better intl note * fix: round down exam time + 30 sec refresh * test: added round down test * temp: iterative dev on UI move * feat: moved a11y string gen to UI, removed extra polls * fix: replaced poll func & generating string from ints * test: added tests --- src/data/__factories__/attempt.factory.js | 1 - src/data/__snapshots__/redux.test.jsx.snap | 11 ---- src/data/slice.js | 1 - src/data/thunks.js | 1 - src/timer/CountDownTimer.jsx | 30 ++++++++++- src/timer/CountDownTimer.test.jsx | 58 +++++++++++++++++++++- src/timer/ExamTimerBlock.jsx | 1 - src/timer/TimerProvider.jsx | 2 +- 8 files changed, 86 insertions(+), 19 deletions(-) diff --git a/src/data/__factories__/attempt.factory.js b/src/data/__factories__/attempt.factory.js index 885a9b49..cf1ffe85 100644 --- a/src/data/__factories__/attempt.factory.js +++ b/src/data/__factories__/attempt.factory.js @@ -11,7 +11,6 @@ Factory.define('attempt') exam_url_path: 'http://localhost:2000/course/course-v1:test+special+exam/block-v1:test+special+exam+type@sequential+block@abc123', time_remaining_seconds: 1799.9, course_id: 'course-v1:test+special+exam', - accessibility_time_string: 'you have 30 minutes remaining', exam_started_poll_url: '/api/edx_proctoring/v1/proctored_exam/attempt/1', desktop_application_js_url: '', attempt_code: '', diff --git a/src/data/__snapshots__/redux.test.jsx.snap b/src/data/__snapshots__/redux.test.jsx.snap index 8906e7f6..fc593046 100644 --- a/src/data/__snapshots__/redux.test.jsx.snap +++ b/src/data/__snapshots__/redux.test.jsx.snap @@ -11,7 +11,6 @@ exports[`Data layer integration tests Test exams IDA url Should call the exams s Object { "examState": Object { "activeAttempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -31,7 +30,6 @@ Object { "apiErrorMsg": "", "exam": Object { "attempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -96,7 +94,6 @@ exports[`Data layer integration tests Test exams IDA url Should call the exams s Object { "examState": Object { "activeAttempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "ready_to_submit", @@ -142,7 +139,6 @@ exports[`Data layer integration tests Test getExamAttemptsData Should get, and s Object { "examState": Object { "activeAttempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -162,7 +158,6 @@ Object { "apiErrorMsg": "", "exam": Object { "attempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -227,7 +222,6 @@ exports[`Data layer integration tests Test getLatestAttemptData Should get, and Object { "examState": Object { "activeAttempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -303,7 +297,6 @@ Object { exports[`Data layer integration tests Test pollAttempt Should poll exam attempt, and update attempt and exam 1`] = ` Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -323,7 +316,6 @@ Object { exports[`Data layer integration tests Test pollAttempt Should poll exam attempt, and update attempt and exam 2`] = ` Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -349,7 +341,6 @@ Object { "apiErrorMsg": "Request failed with status code 404", "exam": Object { "attempt": Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 2, "attempt_status": "created", @@ -412,7 +403,6 @@ Object { exports[`Data layer integration tests Test startProctoredExam Should start exam, and update attempt and exam 1`] = ` Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", @@ -432,7 +422,6 @@ Object { exports[`Data layer integration tests Test startTimedExam Should start exam, and update attempt and exam 1`] = ` Object { - "accessibility_time_string": "you have 30 minutes remaining", "attempt_code": "", "attempt_id": 1, "attempt_status": "started", diff --git a/src/data/slice.js b/src/data/slice.js index 6af6c667..d6348da6 100644 --- a/src/data/slice.js +++ b/src/data/slice.js @@ -50,7 +50,6 @@ export const examSlice = createSlice({ time_remaining_seconds: null, course_id: '', attempt_id: null, - accessibility_time_string: '', attempt_status: '', exam_started_poll_url: '', desktop_application_js_url: '', diff --git a/src/data/thunks.js b/src/data/thunks.js index 0bc34e5b..36a51c99 100644 --- a/src/data/thunks.js +++ b/src/data/thunks.js @@ -257,7 +257,6 @@ export function pollAttempt(url) { const updatedAttempt = { ...currentAttempt, time_remaining_seconds: data.time_remaining_seconds, - accessibility_time_string: data.accessibility_time_string, attempt_status: data.status, }; dispatch(setActiveAttempt({ diff --git a/src/timer/CountDownTimer.jsx b/src/timer/CountDownTimer.jsx index 1eb10d90..81c06952 100644 --- a/src/timer/CountDownTimer.jsx +++ b/src/timer/CountDownTimer.jsx @@ -9,15 +9,43 @@ import { TimerContext } from './TimerProvider'; */ const CountDownTimer = injectIntl((props) => { const timer = useContext(TimerContext); + const timeString = timer.getTimeString(); const [isShowTimer, showTimer, hideTimer] = useToggle(true); const { intl } = props; + const generateAccessbilityString = (timeState) => { + const { hours, minutes } = timeState; + + let remainingTime = ''; + + if (hours !== 0) { + remainingTime += `${hours} hour`; + if (hours >= 2) { + remainingTime += 's'; + } + remainingTime += ' and '; + } + remainingTime += `${minutes} minute`; + if (minutes !== 1) { + remainingTime += 's'; + } + + /** + * INTL NOTE: At the moment, these strings are NOT internationalized/translated. + * The back-end also does not support this either. + * + * It is TBD if this needs to be implemented + */ + return `you have ${remainingTime} remaining`; + }; + return (