-
-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2043 from openzim/img-size
Render mobile images to standard size
- Loading branch information
Showing
4 changed files
with
154 additions
and
3 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import * as domino from 'domino' | ||
|
|
||
| import { WikimediaMobileRenderer } from '../../../src/renderers/wikimedia-mobile.renderer' | ||
|
|
||
| describe('mobile renderer', () => { | ||
| let window | ||
|
|
||
| describe('image converter', () => { | ||
| beforeEach(() => { | ||
| window = domino.createWindow( | ||
| ` | ||
| <figure typeof="mw:File/Thumb" class="pcs-widen-image-ancestor"> | ||
| <a href="./Fichier:Bamako_et_fleuve_Niger.jpg" class="mw-file-description pcs-widen-image-ancestor"> | ||
| <span class="mw-file-element pcs-widen-image-override pcs-lazy-load-placeholder pcs-lazy-load-placeholder-pending" | ||
| style="width: 320px;" data-class="mw-file-element pcs-widen-image-override" | ||
| data-src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bamako_et_fleuve_Niger.jpg/320px-Bamako_et_fleuve_Niger.jpg" | ||
| data-srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bamako_et_fleuve_Niger.jpg/480px-Bamako_et_fleuve_Niger.jpg 1.5x" | ||
| data-width="320" data-height="241" data-data-file-width="600" data-data-file-height="450" | ||
| data-data-file-original-src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bamako_et_fleuve_Niger.jpg/250px-Bamako_et_fleuve_Niger.jpg" | ||
| > | ||
| <span style="padding-top: 75.3125%;"></span> | ||
| </span> | ||
| </a> | ||
| <figcaption>Bamako</figcaption> | ||
| </figure> | ||
| <figure typeof="mw:File/Thumb" class="pcs-widen-image-ancestor"> | ||
| <a href="./Fichier:Bamako_bridge2.jpg" class="mw-file-description pcs-widen-image-ancestor"> | ||
| <span class="mw-file-element pcs-widen-image-override pcs-lazy-load-placeholder pcs-lazy-load-placeholder-pending" | ||
| style="width: 640px;" data-class="mw-file-element pcs-widen-image-override" | ||
| data-src="//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Bamako_bridge2.jpg/640px-Bamako_bridge2.jpg" | ||
| data-width="640" data-height="428" data-data-file-width="800" data-data-file-height="533" | ||
| data-data-file-original-src="//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Bamako_bridge2.jpg/250px-Bamako_bridge2.jpg" | ||
| > | ||
| <span style="padding-top: 66.875%;"></span> | ||
| </span> | ||
| </a> | ||
| <figcaption> Bamako Pont, mi bɛ Niger baw kan</figcaption> | ||
| </figure> | ||
| <p> | ||
| San 2021 mɔgɔ 3 000 000 dɛ tun sigin len bɛ Mali faba kɔnɔ. An bɛ yoro mi nan farafina be kono Bamakɔ fanga wili tɔgɔ ka bɔ ni bɛɛ ta ye. wa | ||
| dumia kɔnɔ a bɛ la wɔrɔ dugu la dɛ la singɛ munu la | ||
| </p> | ||
| <p><b>bamakɔ</b> dɛ yɛ ka famgadɔda yɛ.wa nafa ka bɔ a lamini mara bɛ ma </p> | ||
| <p> | ||
| Bamako faaba kila nɛ dɔ ni <b>ki</b> woro dɛ yɛ. ni o niɛmogo tɔgɔ IBRAHIMA N’DIAYE ni ɔ ba fɔ ɔ ma maire | ||
| Kinw minu bɛ Bamakɔ kɔnɔ: | ||
| </p> | ||
| <ul> | ||
| <li>Hippɔdrɔme (tɔgɔkɔrɔ milliɔnki)</li> | ||
| <li>Korofina</li> | ||
| <li>Badalabugu</li> | ||
| <li>Bamakɔ Kura</li> | ||
| <li>Jikoroni</li> | ||
| <li>Bakɔ jikɔrɔni (= derrière le fleuve)</li> | ||
| <li>Misira</li> | ||
| <li>Medina Kura</li> | ||
| <li>Bankɔni</li> | ||
| <li>Maɲambugu</li> | ||
| <li>Dravela</li> | ||
| <li>Jɛlibugu</li> | ||
| <li>Bolibana</li> | ||
| <li>Wɔlɔfɔbugu</li> | ||
| <li>Bajalan I,II,III</li> | ||
| <li>ɲarela</li> | ||
| <li>Bagadaji</li> | ||
| <li>Bozola</li> | ||
| <li>Falaje</li> | ||
| <li>ɲamakoro</li> | ||
| <li>Sɛbenikɔrɔ</li> | ||
| <li>Quinzanbugu</li> | ||
| <li>Kinsanbugu</li> | ||
| <li>Amdalayɛ</li> | ||
| <li>Sabalibugu</li> | ||
| <li>Titibugu</li> | ||
| <li>Lafiabugu</li> | ||
| <li>Badalabugu</li> | ||
| <li>Torokɔrɔbugu</li> | ||
| <li>Quartier du fleuve</li> | ||
| </ul>`, | ||
| 'http://bm.wikipedia.org/api/rest_v1/page/mobile-html/BamakBamakɔ', | ||
| ) | ||
| }) | ||
|
|
||
| test('it converts lazy load to images with the proper size', async () => { | ||
| const mobileRenderer = new WikimediaMobileRenderer() | ||
|
|
||
| const actual = mobileRenderer.INTERNAL.convertLazyLoadToImages(window.document) | ||
| const spans = actual.querySelectorAll('.pcs-lazy-load-placeholder') | ||
| const imgs = actual.querySelectorAll('img') | ||
|
|
||
| expect(spans.length).toBe(0) | ||
| expect(imgs.length).toBe(2) | ||
| expect(imgs[0].src).toEqual('https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bamako_et_fleuve_Niger.jpg/250px-Bamako_et_fleuve_Niger.jpg') | ||
| expect(imgs[1].src).toEqual('https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Bamako_bridge2.jpg/250px-Bamako_bridge2.jpg') | ||
| }) | ||
|
|
||
| test('it uses the data-src when data-data-file-original-src is not available', async () => { | ||
| const test_window = domino.createWindow( | ||
| ` | ||
| <span | ||
| class="mw-file-element gallery-img pcs-widen-image-override pcs-lazy-load-placeholder pcs-lazy-load-placeholder-pending" | ||
| style="width: 150px" | ||
| data-class="mw-file-element gallery-img pcs-widen-image-override" | ||
| data-src="//upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/150px-BMW.svg.png" | ||
| data-srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/225px-BMW.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/300px-BMW.svg.png 2x" | ||
| data-width="150" | ||
| data-height="150" | ||
| data-alt="Logo used in vehicles since 1997" | ||
| data-data-file-width="1015" | ||
| data-data-file-height="1015" | ||
| ><span style="padding-top: 100%"> | ||
| `, | ||
| 'http://en.wikipedia.org/api/rest_v1/page/mobile-html/BMW', | ||
| ) | ||
| const mobileRenderer = new WikimediaMobileRenderer() | ||
|
|
||
| const actual = mobileRenderer.INTERNAL.convertLazyLoadToImages(test_window.document) | ||
| const spans = actual.querySelectorAll('.pcs-lazy-load-placeholder') | ||
| const imgs = actual.querySelectorAll('img') | ||
|
|
||
| expect(spans.length).toBe(0) | ||
| expect(imgs.length).toBe(1) | ||
| expect(imgs[0].src).toEqual('https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/150px-BMW.svg.png') | ||
| }) | ||
| }) | ||
| }) |