Make system fonts work more reliably

[wooster0]

So for a while I tried to use the Commodore 64 font (the same that VVVVVV uses) in my favorite messenger.
But I always had this problem that I had the font installed and I entered the exact name of the font but it didn't work:

Why doesn't it work :(

Well it turns out that the problem was the space in the font's name:

It works!

Doing this automatically for the user should avoid a lot of confusion.

Signed-off-by: r00ster91 <r00ster91@proton.me>

---

This change is marked as an internal change (Task), so will not be included in the changelog.

[t3chguy]

This will need to be a bit smarter as you can specify multiple comma separated fonts. E.g Inter, Twemoji

[wooster0]

@t3chguy I wonder how well this would work in practice?

const possible_user_input = "Fira Sans Thin, Commodore 64";
`"${possible_user_input.split(',').map(font => font.trim()).join("\",\"")}"` // "Fira Sans Thin","Commodore 64"

Alternatively, we could only do "${font}" if there is no comma included in the font string (i.e. only one font), otherwise use the font string as-is.

[t3chguy]

The split map join is what I had in mind but please add the double quotes in the map phase to aid readability

[t3chguy]

Also worth considering that existing users may have already added double quotes manually

[wooster0]

I wonder how it is now?

[wooster0]

@t3chguy I applied your suggestions.

[t3chguy]

Do you think it'd be feasible to write a small test for this improvement?

[wooster0]

@t3chguy Sadly I don't have any idea where or how to do that...
I suppose I would add an x-test.ts in test/ but I don't know how to interact with the APIs to create that test.

What would maybe be possible for me is to extract the relevant logic into a function that would be tested.
Would I export that function from FontWatcher.ts, import it into x-test.ts and then test it?

[t3chguy]

So yeah you'd create a file test/settings/watchers/FontWatcher-test.tsx and test it via hitting .start() whilst mocking/stubbing the SettingsStore to manipulate the values for useSystemFont and font then expect(...)ing specific values to be set on document.body.style.fontFamily

You can probably copy ThemeWatcher-test.tsx from that same directory

[wooster0]

I've added a basic template. How do I have to modify SettingsStore to set document.body.style.fontFamily?

[t3chguy]

@r00ster91 look at the other test in the same directory, it does these exact things

[wooster0]

I wonder if something like this would do it.

[t3chguy]

Awesome, thanks for your contribution!!

[wooster0]

Thanks!

[wooster0]

Right, I just wanted to add those asyncs as well.

[t3chguy]

Async stuff is always fun, gimme a sec

[t3chguy]

Hey @r00ster91 unfortunately one of your tests had a legitimate failure

Which makes sense given both sides of the " have spaces on them, and trim will only take out the outer ones.

I'm going to update it to get rid of the spurious spaces inside the quotes, if a user put spaces in quotes they probably intended them..

---

Please review my changes and let me know if you're happy for them to land alongside your changes :)

[wooster0]

Uh-huh, it seems you did some organizational changes too.
I'm surprised to see this PR turn out much more complicated than I initially thought.
It looks fine overall! You might as well add your copyright too.

[t3chguy]

It looks fine overall! You might as well add your copyright too.

Haha, I'm about to add some tests into the file as part of another PR #8670 so will do so there

Uh-huh, it seems you did some organizational changes too.

Mostly just to reuse testing utilities around the dispatcher

[t3chguy]

Thanks for writing the actual code to make custom fonts less confusing!!