Ghost/test/unit/frontend/meta/asset-url.test.js
Simon Backx a051ab3b69
🎨 Reduced favicon requirements and added image formatting (#14918)
fixes https://github.com/TryGhost/Team/issues/1652
fixes https://github.com/TryGhost/Ghost/issues/13319

**Image formatting**
Added support for changing the format of images via the `handle-image-sizes` middleware (e.g. format SVG to png, jpeg, webp)

This change was required:
- Not all browsers support SVG favicons, so we need to convert them to PNGs
- We can't fit image resizing and formatting in the `serve-favicon` middleware: we need to store the resized image to avoid resizing on every request. This system was already present in the `handle-image-sizes` middleware.

To format an uploaded image:
- Original URL: https://localhost/blog/content/images/2022/05/giphy.gif
- To resize: https://localhost/blog/content/images/size/w256h256/2022/05/giphy.gif (already supported)
- To resize and format to webp: https://localhost/blog/content/images/size/w256h256/format/webp/2022/05/giphy.gif
- Animations are preserved when converting Gifs to Webp and in reverse, and also when only resizing (https://github.com/TryGhost/Ghost/issues/13319)

**Favicons**
- Custom favicons are no longer served via `/favicon.png` or `/favicon.ico` (only for default favicon), but use their full path
- Added support for uploading more image extensions in Ghost as a favicon: .jpg, .jpeg, .gif, .webp and .svg are now supported (already supported .png and .ico).
- File extensions other than jpg/jpeg, png, or ico will always get transformed to the image/png format to guarantee browser support (webp and svg images are not yet supported as favicons by all browsers).

For all image formats, other than .ico files:
- Allowed to upload images larger than 1000px in width and height, they will get cropped to 256x256px.
- Allowed uploading favicons that are not square. They will get cropped automatically.
- Allowed to upload larger files, up to 20MB (will get served at a lower file size after being resized)

For .svg files:
- The minimum size of 60x60px is no longer required.

For .ico files:
- The file size limit is increased to 200kb (coming from 100kb)
2022-05-27 16:36:53 +02:00

168 lines
7.6 KiB
JavaScript

const should = require('should');
const sinon = require('sinon');
const imageLib = require('../../../../core/server/lib/image');
const settingsCache = require('../../../../core/shared/settings-cache');
const configUtils = require('../../../utils/configUtils');
const config = configUtils.config;
const getAssetUrl = require('../../../../core/frontend/meta/asset-url');
describe('getAssetUrl', function () {
afterEach(function () {
configUtils.restore();
sinon.restore();
});
it('should return asset url with just context', function () {
const testUrl = getAssetUrl('myfile.js');
testUrl.should.equal('/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should return asset url with just context even with leading /', function () {
const testUrl = getAssetUrl('/myfile.js');
testUrl.should.equal('/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should not add asset to url if ghost.css for default templates', function () {
const testUrl = getAssetUrl('public/ghost.css');
testUrl.should.equal('/public/ghost.css?v=' + config.get('assetHash'));
});
it('should not add asset to url has public in it', function () {
const testUrl = getAssetUrl('public/myfile.js');
testUrl.should.equal('/public/myfile.js?v=' + config.get('assetHash'));
});
it('should return hash before #', function () {
const testUrl = getAssetUrl('myfile.svg#arrow-up');
testUrl.should.equal(`/assets/myfile.svg?v=${config.get('assetHash')}#arrow-up`);
});
describe('favicon', function () {
it('should not add asset to url if favicon.ico', function () {
const testUrl = getAssetUrl('favicon.ico');
testUrl.should.equal('/favicon.ico');
});
it('should not add asset to url if favicon.png', function () {
const testUrl = getAssetUrl('favicon.png');
testUrl.should.equal('/favicon.ico');
});
it('should correct favicon path for custom png', function () {
sinon.stub(settingsCache, 'get').withArgs('icon').returns('/content/images/2017/04/my-icon.png');
const testUrl = getAssetUrl('favicon.ico');
testUrl.should.equal('/content/images/size/w256h256/2017/04/my-icon.png');
});
it('should correct favicon path for custom svg', function () {
sinon.stub(settingsCache, 'get').withArgs('icon').returns('/content/images/2017/04/my-icon.svg');
const testUrl = getAssetUrl('favicon.ico');
testUrl.should.equal('/content/images/size/w256h256/format/png/2017/04/my-icon.svg');
});
});
describe('minify', function () {
it('should return asset minified url when hasMinFile & useMinFiles are both set to true', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('myfile.js', true);
testUrl.should.equal('/assets/myfile.min.js?v=' + config.get('assetHash'));
});
it('should NOT return asset minified url when hasMinFile true but useMinFiles is false', function () {
configUtils.set('useMinFiles', false);
const testUrl = getAssetUrl('myfile.js', true);
testUrl.should.equal('/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should NOT return asset minified url when hasMinFile false but useMinFiles is true', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('myfile.js', false);
testUrl.should.equal('/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should not add min to anything besides the last .', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('test.page/myfile.js', true);
testUrl.should.equal('/assets/test.page/myfile.min.js?v=' + config.get('assetHash'));
});
});
describe('with /blog subdirectory', function () {
beforeEach(function () {
configUtils.set({url: 'http://localhost:65535/blog'});
});
afterEach(function () {
configUtils.restore();
});
it('should return asset url with just context', function () {
const testUrl = getAssetUrl('myfile.js');
testUrl.should.equal('/blog/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should return asset url with just context even with leading /', function () {
const testUrl = getAssetUrl('/myfile.js');
testUrl.should.equal('/blog/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should not add asset to url if ghost.css for default templates', function () {
const testUrl = getAssetUrl('public/ghost.css');
testUrl.should.equal('/blog/public/ghost.css?v=' + config.get('assetHash'));
});
it('should not add asset to url has public in it', function () {
const testUrl = getAssetUrl('public/myfile.js');
testUrl.should.equal('/blog/public/myfile.js?v=' + config.get('assetHash'));
});
describe('favicon', function () {
it('should not add asset to url if favicon.ico', function () {
sinon.stub(imageLib.blogIcon, 'getIconUrl').returns('/blog/favicon.ico');
const testUrl = getAssetUrl('favicon.ico');
testUrl.should.equal('/blog/favicon.ico');
});
it('should not add asset to url if favicon.png', function () {
sinon.stub(imageLib.blogIcon, 'getIconUrl').returns('/blog/favicon.ico');
const testUrl = getAssetUrl('favicon.png');
testUrl.should.equal('/blog/favicon.ico');
});
it('should return correct favicon path for custom png', function () {
sinon.stub(imageLib.blogIcon, 'getIconUrl').returns('/blog/favicon.png');
sinon.stub(settingsCache, 'get').withArgs('icon').returns('/content/images/2017/04/my-icon.png');
const testUrl = getAssetUrl('favicon.ico');
testUrl.should.equal('/blog/favicon.png');
});
});
describe('minify', function () {
it('should return asset minified url when hasMinFile & useMinFiles are both set to true', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('myfile.js', true);
testUrl.should.equal('/blog/assets/myfile.min.js?v=' + config.get('assetHash'));
});
it('should NOT return asset minified url when hasMinFile true but useMinFiles is false', function () {
configUtils.set('useMinFiles', false);
const testUrl = getAssetUrl('myfile.js', true);
testUrl.should.equal('/blog/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should NOT return asset minified url when hasMinFile false but useMinFiles is true', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('myfile.js', false);
testUrl.should.equal('/blog/assets/myfile.js?v=' + config.get('assetHash'));
});
it('should not add min to anything besides the last .', function () {
configUtils.set('useMinFiles', true);
const testUrl = getAssetUrl('test.page/myfile.js', true);
testUrl.should.equal('/blog/assets/test.page/myfile.min.js?v=' + config.get('assetHash'));
});
});
});
});