matomo-org / matomo-org/developer-documentation

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

Open
#776 1 comment 0 reactions 0 assignees View on GitHub

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':
![grafik](https://github.com/matomo-org/developer-documentation/assets/29690343/5ca0b72d-c3ed-44af-8675-57a90960467a)

#### 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':
![grafik](https://github.com/matomo-org/developer-documentation/assets/29690343/eedfb474-b656-4dd8-949e-eab11377e9ff)

#### 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':
![grafik](https://github.com/matomo-org/developer-documentation/assets/29690343/a23aacd6-b312-4142-a397-4d4158304441)

> 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.