Fixing system unicode fonts

#1634

Author: bmingles

README.md

@@ -112,6 +112,12 @@ Snapshots are used by end-to-end tests to visually verify the output. Snapshots
 
 Once you are satisfied with the snapshots and everything is passing locally, you need to use the docker image to update snapshots for CI (unless you are running the same platform as CI (Ubuntu)). Run `npm run e2e:update-ci-snapshots` to update the CI snapshots. The snapshots will be written to your local directories. The Linux snapshots should be committed to git (non-Linux snapshots should be automatically ignored by git).
 
+### Differences in CI vs Local Docker Environments
+Note that while both the GH actions and docker configuration use Ubuntu 22.04 images, their configurations are not identical. One known difference is the available system fonts. In some cases this can cause snapshots to differ when running locally vs in CI such as when rendering unicode characters. To mitigate this, some of our e2e tests have been configured to ensure a consistent unicode font fallback.
+
+- The `DejaVu Sans` font gets installed via the [Dockerfile](tests/docker-scripts/Dockerfile). It already exists in the CI environment.
+- Font family stacks that involve unicode characters can explicitly fallback to `DejaVu Sans` if they impact snapshots. e.g We do so in [Grids.tsx](packages/code-studio/src/styleguide/Grids.tsx) by setting the canvas font to `12px Arial, "DejaVu Sans", sans-serif`
+
 ### Local
 
 These scripts are recommended while developing your tests as they will be quicker to iterate and offer headed mode for debugging. You will need to run `npx playwright install` before using these scripts. You may also need to update the browsers with the same command any time the Playwright version is updated. See [Playwright Browsers](https://playwright.dev/docs/browsers) for more details.

packages/code-studio/src/styleguide/Grids.tsx

@@ -28,6 +28,12 @@ function Grids(): ReactElement {
     autoSelectRow: true,
   });
   const [contextTheme] = useState<Partial<GridThemeType>>({
+    // Unicode characters '⊟' and '⊞' used by the Grid tree don't exist in Arial
+    // font, so we fallback to DejaVu Sans which should exist on both the CI and
+    // the local Docker environments. Otherwise the sans-serif fallback is at the
+    // mercy of the OS and whatever installed fonts are available which is not
+    // the same in the 2 environments.
+    font: '12px Arial, "DejaVu Sans", sans-serif',
     rowHeight: 40,
   });
   return (

tests/docker-scripts/Dockerfile

@@ -4,10 +4,15 @@
 FROM mcr.microsoft.com/playwright:v1.37.1-jammy AS playwright
 WORKDIR /work/
 
-# Update packages list and install some build tools
+# Update packages list and install some build tools.
+# Installing fonts-dejavu-core so we have some common fonts with the GH actions
+# runner that can be used to render unicode fonts. See README for more info.
 RUN set -eux; \
     apt-get update; \
-    apt-get install build-essential --yes;
+    apt-get install build-essential --yes; \
+    apt-get install fonts-dejavu-core --yes;
+
+RUN fc-list : family;
 
 # Copy just the .nvmrc first and install nvm/node/npm first as these will change the least often
 # https://docs.docker.com/build/cache/

tests/styleguide.spec.ts

@@ -27,7 +27,7 @@ test.afterEach(async () => {
 });
 
 // Iterate over all sample sections and take a screenshot of each one.
-test('UI regression test', async () => {
+test('UI regression test - Styleguide sections', async () => {
   const sampleSectionCount = await sampleSections.count();
 
   for (let i = 0; i < sampleSectionCount; i += 1) {