Web-stories-wp: Karma: ensure Google Fonts are loaded for tests and snapshots

[swissspidy]

Task Description

Percy often fails because the web fonts haven't been loaded completely, showing everything in Times New Roman. Let's make this more robust.

[bmattb]

potential approaches include introducing an artificial delay, but additional discovery is needed to confirm

[spacedmonkey]

@swissspidy Can you provide examples of where this is happening?

Doing a little research into this topic, there are ways of detected if fonts are loaded. See this information.

• fontfaceobserver library
• Options to detect when a @font-face has been loaded
• CSS Font Loading API.

My thought it, is add a little javascript snippet to the page, that adds a class to the body of fonts-loaded or font-<font-name>-loaded. Then we could use this to add a very simple check before running the tests / doing screenshot if these classes exist.

[swissspidy]

Take #5572 as an example and the most recent build there.

On the main branch fonts are not loading, everything is serif:

On the PR they are there, everything is in Roboto:

Sometimes it's also the other way around — main looks OK but the PR doesn't.

---

My thought it, is add a little javascript snippet to the page, that adds a class to the body. Then we could use this to add a very simple check before running the tests / doing screenshot if these classes exist.

CSS Font Loading API is the way to go. Worth noting that we already have some precedence for this in useLoadFontFiles.js.

With that said, I am also curious to find the root cause for fonts not being loaded in the first place.

In that regard, it's interesting that this is only happening for the Karma tests, not the E2E tests. Also, it doesn't seem to happen for the Dashboard, only the editor tests.

In WordPress we load Roboto and Google Sans here:

https://github.com/google/web-stories-wp/blob/af368d18cde56594805f5e7e8f774db7e1507312/includes/Story_Post_Type.php#L462-L476

https://github.com/google/web-stories-wp/blob/af368d18cde56594805f5e7e8f774db7e1507312/includes/Dashboard.php#L274-L282

In the storybook we do that here:

https://github.com/google/web-stories-wp/blob/af368d18cde56594805f5e7e8f774db7e1507312/.storybook/preview-head.html#L17-L24

For the Karma tests... we don't seem to do that anywhere? 🤔

Are the fonts actually loaded for the tests? It doesn't look like it. ⚠️

---

Here's what I think we could try to explore:

Manually load fonts

In the two Karma configuration, use the customContextFile option to specify a custom context.html file. That file contains the <link> tag for loading the fonts.

_Alternatively_, add the <link> tag in Fixture.render (in fixture.js). This might be a bit simpler, with less overhead.

Wait for fonts to be loaded

There are some suitable TODO comments here where we could use waitFor and the CSS Font Loading API to wait for the fonts to be loaded. If not, throw an error.

https://github.com/google/web-stories-wp/blob/af368d18cde56594805f5e7e8f774db7e1507312/assets/src/dashboard/karma/fixture.js

https://github.com/google/web-stories-wp/blob/af368d18cde56594805f5e7e8f774db7e1507312/assets/src/edit-story/karma/fixture/fixture.js#L282-L295

As you can see, we already do that for mediaElements as well.

For fonts it could perhaps look like this (untested):

// Manually load fonts
// ...

// ...

waitFor(async () {
  await document.fonts.load('0 Roboto', '');
  if (!document.fonts.check(' 0 Roboto', '') {
    throw new Error('Not ready: Roboto font could not be loaded');
  }
});

[spacedmonkey]

I have been looking and I am not sure where these fonts are loaded in karma tests. My only idea is the text element / font picker loads the font in. Which is why the tests fail some of the time. Depending on the order tests are run as it effects when the font is loaded in. This is at the moment a guess...

[spacedmonkey]

I think I have just validated the above guess.

First test that runs is a text element. This would load the font / font picker in loading the font.

I am going to add a customContextFile that loads these fonts in .

[swissspidy]

Glad we came to the same conclusion :-) So it's an oversight from way back when we introduced these tests.

I am going to add a customContextFile that loads these fonts in .

Just keep in mind to do that for both dasbhoard (needs Google Sans) and editor tests (needs Roboto).

Also not sure if customContextFile is perhaps a bit overkill. Perhaps fixture/init.js or karma-tests.cjs is a better place. Let's see.