Skip to content

Commit

Permalink
fix: Add icon granularity to HTML code generation (#315)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Voltra
Voltra authored Aug 3, 2020
1 parent ff67fcb commit aace90b
Show file tree
Hide file tree
Showing 24 changed files with 623 additions and 262 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,9 @@ Network Trash Folder
Temporary Items
.apdisk

### Brackets ###
.brackets.json

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
Expand Down
14 changes: 14 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,4 +225,6 @@ Because pure Javascript modules aren't available at the moment. For example, the

Feel free to push your code if you agree with publishing under the MIT license.

When testing, don't forget to update snapshots whenever you edit them: `ava --update-snapshots`.

## [License](LICENSE)
337 changes: 276 additions & 61 deletions src/config/html.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ module.exports = function(options) {
properties.start_url = options.start_url;
properties.background_color = options.background;
properties.theme_color = options.theme_color;
properties.icons.map(
properties.icons.forEach(
icon =>
(icon.src = relative(icon.src, options.manifestRelativePaths))
);
Expand Down
149 changes: 138 additions & 11 deletions test/restrict.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,149 @@ const { logo_png } = require("./util");

// snapshotManager.plugins.push(factory(Image, v => new Image(v[0], v[1])));

const source = logo_png;

const options = {
icons: {
favicons: ["favicon-32x32.png"],
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
firefox: false,
windows: false,
yandex: false
}
};

const metaLength = 0;

const expectedLength =
Object.values(options.icons).reduce(
(acc, elem) => acc + (Array.isArray(elem) ? elem.length : 0),
0
) + metaLength;

function processSource() {
return favicons(source, options);
}

function generatedHTML(html) {
return html.filter(str => str.length > 0);
}

test("should allow to restrict the icons to generate", async t => {
// eslint-disable-next-line no-magic-numbers
const testCases = [
{
// favicons
source,
options
},
{
// android
source,
options: {
...options,
icons: {
...options.icons,
favicons: false,
android: ["android-chrome-48x48.png"]
}
}
},
{
// appleIcon
source,
options: {
...options,
icons: {
...options.icons,
favicons: false,
appleIcon: ["apple-touch-icon-60x60.png"]
}
}
}
];

t.plan(testCases.length);

const promises = testCases.map(async ({ source, options }) => {
const { images } = await favicons(source, options);

t.deepEqual(images.length, expectedLength);
});

await Promise.all(promises);
});

test("should allow to restrict the HTML tags generated", async t => {
// eslint-disable-next-line no-magic-numbers
t.plan(1);

const { images } = await favicons(logo_png, {
icons: {
favicons: ["favicon-32x32.png"],
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
firefox: false,
windows: false,
yandex: false
const { html } = await processSource();

const useful = generatedHTML(html);

t.deepEqual(useful.length, expectedLength);
});

test("should allow to restrict the HTML tags taking into account manifests and others", async t => {
const testCases = [
{
// android
testOptions: {
favicons: false,
android: ["android-chrome-48x48.png"],
appleIcon: false,
appleStartup: false,
coast: false,
firefox: false,
windows: false,
yandex: false
},
expectedLength: 4 // (manifest + capable + theme color + app name)
},
{
// firefox
testOptions: {
favicons: false,
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
firefox: ["firefox_app_128x128.png"],
windows: false,
yandex: false
},
expectedLength: 0 // nothing
},
{
// appleIcon
testOptions: {
favicons: false,
android: false,
appleIcon: ["apple-touch-icon-60x60.png"],
appleStartup: false,
coast: false,
firefox: false,
windows: false,
yandex: false
},
expectedLength: 4 // icons + (capable + status bar + app name)
}
];

t.plan(testCases.length);

const promises = testCases.map(async ({ testOptions, expectedLength }) => {
const { html } = await favicons(source, {
icons: testOptions
});
const useful = generatedHTML(html);

t.deepEqual(useful.length, expectedLength);
});

t.deepEqual(images.length, 1);
await Promise.all(promises);
});
42 changes: 21 additions & 21 deletions test/snapshots/array.test.js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,28 +144,28 @@ Generated by [AVA](https://avajs.dev).
'<meta name="apple-mobile-web-app-capable" content="yes">',
'<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">',
'<meta name="apple-mobile-web-app-title">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-640x1136.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-750x1334.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-828x1792.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1125x2436.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2208.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2688.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1536x2048.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2224.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2388.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-2048x2732.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1620x2160.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1136x640.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1334x750.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1792x828.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2436x1125.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2208x1242.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2688x1242.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2048x1536.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2224x1668.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2388x1668.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-640x1136.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-750x1334.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-828x1792.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1125x2436.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2208.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2688.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1536x2048.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2224.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2388.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-2048x2732.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1620x2160.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1136x640.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1334x750.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1792x828.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2436x1125.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2208x1242.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2688x1242.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2048x1536.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2224x1668.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2388x1668.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2732x2048.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1620.png">',
'<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1620.png">',
'<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">',
'<meta name="msapplication-TileColor" content="#fff">',
'<meta name="msapplication-TileImage" content="/mstile-144x144.png">',
Expand Down
Binary file modified test/snapshots/array.test.js.snap
View file
Binary file not shown.
Loading

0 comments on commit aace90b

Please sign in to comment.