matomo-org / matomo-org/developer-documentation
UI Tests - fonts for 'REPLACEMENT CHARACTER' � (`U+FFFD`) is DejaVu
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 58
- Forks
- 88
- Avg merge
- 6d 3h
- Merged PRs (30d)
- 13
Description
You need some extra fonts to get the expected screenshots for the UI Tests - see:
https://github.com/matomo-org/developer-documentation/blob/5f09c4d970461e1399a61b653a44930bcbe88775/docs/5.x/tests-ui.md?plain=1#L37-L41
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:
```bash
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 :shrug:
>
> Expected:
>
>
> Processed:
>
----
### Further investigation:
– Output from Debian environment –
1. Install packages to run `fc-match` and `fc-list`:
```bash
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`:
```bash
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`:
```bash
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`:
```bash
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)
```bash
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
```
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open docs/5.x/tests-ui.md at the linked section around lines 37–41 and review the existing font installation guidance. Document installing fonts-dejavu alongside the listed packages, then verify the instructions cover the UI screenshot test setup and rerun the Comparison UI test if available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- debian
- Domain
- documentation, testing-qa
- Issue type
- Documentation
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100