UI Tests - fonts for 'REPLACEMENT CHARACTER' � (`U+FFFD`) is DejaVu

[rr-it]

You need some extra fonts to get the expected screenshots for the UI Tests - see:

developer-documentation/docs/5.x/tests-ui.md

Lines 37 to 41 in 5f09c4d

	If you're on Ubuntu, you'll need some extra packages to make sure screenshots will render correctly:
	```
	$ sudo apt-get install ttf-mscorefonts-installer imagemagick imagemagick-doc
	```

Especially the 'REPLACEMENT CHARACTER' � (U+FFFD) is not rendered by MS-fonts but by DejaVu instead!

Add a hint in the docs to install fonts-dejavu, as it is not installed by default in e.g. a slim docker container:

sudo apt-get install fonts-dejavu ttf-mscorefonts-installer imagemagick imagemagick-doc

---

Steps to reproduce on Debian:

Expected result:

Extract from 'expected-screenshots/Comparison_segmented_visitorlog.png':

Without additional fonts:

1. run ./console tests:run-ui --persist-fixture-data Comparison
2. fails:

 2) should show the segmented visitor log popup for the compared row/segment/period when clicked
     images differ in 2870 pixels (command output: 2870)
          Generated screenshot: /var/www/html/tests/UI/processed-ui-screenshots/Comparison_segmented_visitorlog.png
          Expected screenshot: /var/www/html/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png
     
          Url to reproduce: http://matomo.ddev.site/tests/PHPUnit/proxy/?module=Widgetize&action=iframe&moduleToWidgetize=Referrers&idSite=1&period=year&date=2012-08-09&actionToWidgetize=getSearchEngines&viewDataTable=table&filter_limit=5&isFooterExpandedInDashboard=1&compareDates[]=2012-01-01,2012-01-31&comparePeriods[]=range#?period=year&date=2012-08-09&popover=RowAction%243ASegmentVisitorLog%243AReferrers.getSearchEngines%243AreferrerName%24253D%24253DGoogle%243A%24257B%242522date%242522%24253A%2425222012-01-01%24252C2012-01-31%242522%24252C%242522period%242522%24253A%242522range%242522%24252C%242522comparePeriods%242522%24253A%242522%242522%24252C%242522compareDates%242522%24253A%242522%242522%24257D
          No captured console logs.

Extract from 'processed-ui-screenshots/Comparison_segmented_visitorlog.png':

With DejaVu fonts installed:

1. run ./console tests:run-ui --persist-fixture-data Comparison
2. fails:

2) Comparison
       should show the segmented visitor log popup for the compared row/segment/period when clicked:
          images differ in 274 pixels (command output: 274)
            Generated screenshot: /var/www/html/tests/UI/processed-ui-screenshots/Comparison_segmented_visitorlog.png
            Expected screenshot: /var/www/html/tests/UI/expected-screenshots/Comparison_segmented_visitorlog.png
       
            Url to reproduce: http://matomo.ddev.site/tests/PHPUnit/proxy/?module=Widgetize&action=iframe&moduleToWidgetize=Referrers&idSite=1&period=year&date=2012-08-09&actionToWidgetize=getSearchEngines&viewDataTable=table&filter_limit=5&isFooterExpandedInDashboard=1&compareDates[]=2012-01-01,2012-01-31&comparePeriods[]=range#?period=year&date=2012-08-09&popover=RowAction%243ASegmentVisitorLog%243AReferrers.getSearchEngines%243AreferrerName%24253D%24253DGoogle%243A%24257B%242522date%242522%24253A%2425222012-01-01%24252C2012-01-31%242522%24252C%242522period%242522%24253A%242522range%242522%24252C%242522comparePeriods%242522%24253A%242522%242522%24252C%242522compareDates%242522%24253A%242522%242522%24257D
            No captured console logs.

Extract from 'processed-ui-screenshots/Comparison_segmented_visitorlog.png':

The still missing 274 pixel difference is triggered by image rendering/smoothing 🤷

Expected:

Processed:

---

Further investigation:

– Output from Debian environment –

1. Install packages to run fc-match and fc-list:

root@matomo-web:~# apt-get -qq update || true
root@matomo-web:~# DEBIAN_FRONTEND=noninteractive apt-get -qq install -y -o Dpkg::Options::="--force-confold" --no-install-recommends --no-install-suggests xfonts-utils

2. Check sans-serif fonts and U+FFFD:

root@matomo-web:~# fc-match sans-serif
Verdana.ttf: "Verdana" "Regular"

root@matomo-web:~# fc-list :charset=FFFD
# --> no output here

3. Install fonts-dejavu:

root@matomo-web:~# DEBIAN_FRONTEND=noninteractive apt-get -qq install -y -o Dpkg::Options::="--force-confold" --no-install-recommends --no-install-suggests fonts-dejavu

4. Again check sans-serif fonts and U+FFFD:

root@matomo-web:~# fc-match sans-serif
DejaVuSans.ttf: "DejaVu Sans" "Book"

root@matomo-web:~# fc-list :charset=FFFD
/usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf: DejaVu Serif:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
[…]

Complete output fc-list :charset=FFFD (click to open)

root@matomo-web:~# fc-list :charset=FFFD
/usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf: DejaVu Serif:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-Oblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Oblique,Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSerifCondensed-BoldItalic.ttf: DejaVu Serif,DejaVu Serif Condensed:style=Condensed Bold Italic,Bold Italic
/usr/share/fonts/truetype/dejavu/DejaVuSans-ExtraLight.ttf: DejaVu Sans,DejaVu Sans Light:style=ExtraLight
/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSerifCondensed.ttf: DejaVu Serif,DejaVu Serif Condensed:style=Condensed,Book
/usr/share/fonts/truetype/dejavu/DejaVuSerifCondensed-Italic.ttf: DejaVu Serif,DejaVu Serif Condensed:style=Condensed Italic,Italic
/usr/share/fonts/truetype/dejavu/DejaVuSerif-BoldItalic.ttf: DejaVu Serif:style=Bold Italic
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Oblique.ttf: DejaVu Sans Mono:style=Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSerifCondensed-Bold.ttf: DejaVu Serif,DejaVu Serif Condensed:style=Condensed Bold,Bold
/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-BoldOblique.ttf: DejaVu Sans Mono:style=Bold Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-BoldOblique.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold Oblique,Bold Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed,Book
/usr/share/fonts/truetype/dejavu/DejaVuSansCondensed-Bold.ttf: DejaVu Sans,DejaVu Sans Condensed:style=Condensed Bold,Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf: DejaVu Sans Mono:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSans-Oblique.ttf: DejaVu Sans:style=Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSerif-Italic.ttf: DejaVu Serif:style=Italic
/usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf: DejaVu Serif:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSans-BoldOblique.ttf: DejaVu Sans:style=Bold Oblique

[michalkleiner]

Thanks for the report @rr-it. Since you've been through the documentation about this just now, would you be keen to open a PR adding the hint in the 5.x docs?