Mobile Missions Workspace

[chownces]

Description

• Refactored AssessmentWorkspace.tsx (Missions Workspace) and Assessment.tsx (List of missions page) to functional components
• Introduced the mobile version of the Missions Workspace
• Improved UI of missions/ quests/ paths/ etc. listing pages at academy/*

Note:

• React.useEffect is not fired during Jest snapshot testing with shallow render (see this), thus there is a minor change to the AssessmentWorkspace snapshot as the showOverlay state is not updated after being rendered by Jest. It works as per normal on the browser.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

• See the Mobile Review Guide here for instructions on setup (both mobile browser and progressive web app)
• Features to be tested: Editor, MCQChooser, Autograder, question navigation buttons, missions/quests/paths/etc. listing pages at academy/*
• Desktop features should not be affected
• It is recommended to connect your local frontend to the staging backend to test out the missions list page and the missions workspace

Checklist

• I have tested this code
• I have updated the documentation

[coveralls]

Pull Request Test Coverage Report for Build 678585106

• 90 of 174 (51.72%) changed or added relevant lines in 5 files are covered.
• 33 unchanged lines in 4 files lost coverage.
• Overall coverage decreased (-0.7%) to 28.383%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx	1	2	50.0%
src/commons/assessment/Assessment.tsx	45	53	84.91%
src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx	0	10	0.0%
src/commons/mobileWorkspace/MobileWorkspace.tsx	0	11	0.0%
src/commons/assessmentWorkspace/AssessmentWorkspace.tsx	44	98	44.9%

Files with Coverage Reduction	New Missed Lines	%
src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx	1	1.04%
src/commons/mobileWorkspace/MobileWorkspace.tsx	1	1.39%
src/features/eventLogging/index.ts	6	15.52%
src/commons/assessmentWorkspace/AssessmentWorkspace.tsx	25	36.09%

Totals
Change from base Build 678054819:	-0.7%
Covered Lines:	2246
Relevant Lines:	7253

---

💛 - Coveralls

[yongxiangng]

Note: I'm accessing with android on Chrome

Editor

• Works fine for me

MCQChooser

• Working as intended

Autograder

• Working mostly as intended? (Look below for details)

Question navigation buttons

• Works similar to desktop version

Missions/Quests/Paths/etc.

1. Missions

• Const test provided doesn't work. However, it seems that the other mission's test cases work as intended.

I wrote const x = 2;

• Overflows in curve introductions.

code overflows and the picture too.

2. Quests

• There aren't many testcases to try. However, all the quests seems to be working as intended. Those with testcases work normally. The tone matrix works on mobile as well. Quests which uses video on mobile works but the ratio seems to be a bit off? Feels like my face is fatter on mobile 😞, could be the camera or maybe I'm holding the camera closer to my face.

3. Paths

• Works fine
• Comments are showing as intended
• Test cases works
• repl working as intended

listing pages at academy/*

• Works ok

Suggestions

Maybe show the repl when running the testcases as well, since there are things getting printed in the repl (and might help debug). Usually when click run in editor, the repl will popup. But when click run for testcases, the repl does not pop up.