Maintain font size in grading view

[donny-wong]

Proposed Changes

When the font size is modified by the user in the grading view for the editor, we want to maintain that size even when the browser is refreshed. To do this we store the font size in the browser's local storage, where we check for and apply it when the browser is refreshed.

...

Screenshots of your changes (if applicable)

This image shows where the editor's font size buttons are located:

Associated documentation repository pull request (if applicable)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)	x
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.

After opening your pull request:

• I have updated the project Changelog (this is required for all changes).
• I have verified that the pre-commit.ci checks have passed.
• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

[donny-wong]

Currently, I am working on a Jest test to see if when we visit the grading view, if the font size variable in localstorage is being used to set the state, font_size.

[david-yz-liu]

@donny-wong good work, I just left a few comments.

Regarding the remaining test cases, I suggest using a jest mock to return a particular value for the local storage when accessing text_viewer_font_size. See e.g. https://jestjs.io/docs/mock-functions.

[david-yz-liu]

in general, use triple-equals instead of double-equals in Javascript.

[david-yz-liu]

let's do the Number parsing in a try-catch; if the number fails to parse, don't set state and instead delete the localStorage value

[coveralls]

Pull Request Test Coverage Report for Build 15495817481

Details

• 11 of 11 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.01%) to 91.965%

---

Totals
Change from base Build 15481400742:	0.01%
Covered Lines:	41952
Relevant Lines:	44935

---

💛 - Coveralls

[david-yz-liu]

@donny-wong this is good; please remember to update the Changelog (part of the PR checklist). Also add a test case for when the localStorage value is not parseable as a number (in this case the localStorage.removeItem method should be called).

[donny-wong]

@donny-wong this is good; please remember to update the Changelog (part of the PR checklist). Also add a test case for when the localStorage value is not parseable as a number (in this case the localStorage.removeItem method should be called).

Thank you @david-yz-liu , you will notice in my code I added in the file text_viewer.jsx the following:

        if (isNaN(textViewerFontSize) || textViewerFontSize.trim() === "") {
          throw new Error("Local storage item 'text_viewer_font_size' is not a number.");
        }

The reason for this is because the Number() function does not throw errors directly, but returns NaN when it cannot convert a given value to a number.