@realfavicongenerator/check-favicon 0.0.1

package/fixtures/happy-face.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFDC5D" d="M32 20c0-2.209-1.119-4-2.5-4-.012 0-.021.005-.033.005C27.955 9.704 23.394 5.125 18 5.125s-9.956 4.58-11.467 10.88C6.521 16.004 6.511 16 6.5 16 5.119 16 4 17.791 4 20c0 2.107 1.021 3.815 2.314 3.97C7.537 30.619 12.299 35 18 35c5.7 0 10.463-4.381 11.685-11.03C30.979 23.815 32 22.107 32 20z"/><path fill="#662113" d="M13 21c-.552 0-1-.447-1-1v-2c0-.552.448-1 1-1s1 .448 1 1v2c0 .553-.448 1-1 1zm10 0c-.553 0-1-.447-1-1v-2c0-.552.447-1 1-1s1 .448 1 1v2c0 .553-.447 1-1 1z"/><path fill="#C1694F" d="M18 31c-4.201 0-5.491-1.077-5.707-1.293-.391-.391-.391-1.023 0-1.414.378-.379.984-.39 1.376-.036.08.058 1.1.743 4.331.743 3.355 0 4.326-.739 4.336-.747.39-.389 1.001-.37 1.393.021.391.391.369 1.043-.021 1.434C23.491 29.923 22.201 31 18 31zm1-5h-2c-.552 0-1-.447-1-1s.448-1 1-1h2c.553 0 1 .447 1 1s-.447 1-1 1z"/><path fill="#FFAC33" d="M33 12.65c0-.891-.469-1.667-1.171-2.11.106-.277.171-.575.171-.89 0-1.276-.959-2.316-2.193-2.469.118-.323.193-.667.193-1.031 0-1.657-1.343-3-3-3-.395 0-.77.081-1.115.22-.346-1.276-1.5-2.22-2.885-2.22-.87 0-1.646.376-2.194.967C20.384.971 19.292.15 18 .15s-2.384.821-2.806 1.967C14.646 1.526 13.87 1.15 13 1.15c-1.385 0-2.539.944-2.884 2.22-.346-.139-.721-.22-1.116-.22-1.657 0-3 1.343-3 3 0 .364.075.708.193 1.031C4.959 7.334 4 8.374 4 9.65c0 .315.065.613.171.89C3.469 10.983 3 11.759 3 12.65c0 .878.455 1.648 1.141 2.094-.088.281-.141.585-.141.906 0 1.381.895 2.5 2 2.5.327 0 .63-.107.903-.281C7.347 19.312 8 20.132 8 18.15c0-1.585.013-2.552.76-4.081 1.189.403 2.908.159 4.533-.779.282-.163.545-.34.793-.525.378 1.362 1.986 2.385 3.914 2.385 1.296 0 2.437-.47 3.167-1.187.476 1.259 2.002 2.187 3.833 2.187 1.076 0 2.049-.322 2.767-.841.262.914.272 1.723.272 2.841 0 2.348.674 1.358 1.119-.24.256.15.54.24.842.24 1.105 0 2-1.119 2-2.5 0-.321-.053-.625-.14-.906.685-.446 1.14-1.216 1.14-2.094z"/></svg>

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@realfavicongenerator/check-favicon",
+  "version": "0.0.1",
+  "description": "Check the favicon of a website",
+  "main": "index.ts",
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RealFaviconGenerator/check-favicon.git"
+  },
+  "keywords": [
+    "favicon",
+    "realfavicongenerator",
+    "checker",
+    "check",
+    "RFG"
+  ],
+  "author": "Philippe Bernard",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/RealFaviconGenerator/check-favicon/issues"
+  },
+  "homepage": "https://github.com/RealFaviconGenerator/check-favicon#readme",
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.30",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "decode-ico": "^0.4.1",
+    "node-html-parser": "^6.1.13",
+    "sharp": "^0.33.3"
+  }
+}

package/src/desktop/desktop.test.ts

@@ -0,0 +1,101 @@
+import { parse } from 'node-html-parser'
+import { checkSvgFavicon } from "./desktop";
+import { CheckerMessage, CheckerStatus, FetchResponse, MessageId } from '..';
+import { filePathToReadableStream, filePathToString, stringToReadableStream } from '../helper';
+import { testFetcher } from '../test-helper';
+
+type TestOutput = Pick<CheckerMessage, 'id' | 'status'>[];
+
+const runTest = async (
+  headFragment: string | null,
+  output: TestOutput,
+  fetchDatabase: { [url: string]: FetchResponse } = {}
+) => {
+  const root = headFragment ? parse(headFragment) : null;
+  const result = await checkSvgFavicon('https://example.com/', root, testFetcher(fetchDatabase));
+  const filteredMessages = result.map(m => ({ status: m.status, id: m.id }));
+  expect(filteredMessages).toEqual(output);
+}
+
+test('checkSvgFavicon - noHead', async () => {
+  await runTest(null, [{
+    status: CheckerStatus.Error,
+    id: MessageId.noHead,
+  }]);
+})
+
+test('checkSvgFavicon - noSvgFavicon', async () => {
+  await runTest(`<title>SOme text</title>`, [{
+    status: CheckerStatus.Error,
+    id: MessageId.noSvgFavicon,
+  }]);
+})
+
+test('checkSvgFavicon - multipleSvgFavicons', async () => {
+  await runTest(`
+  <link rel="icon" type="image/svg+xml" href="/the-icon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/another-icon.svg" />
+  `, [{
+    status: CheckerStatus.Error,
+    id: MessageId.multipleSvgFavicons,
+  }]);
+})
+
+test('checkSvgFavicon - svgFaviconDeclared & noSvgFaviconHref', async () => {
+  await runTest(`<link rel="icon" type="image/svg+xml" />`, [{
+    status: CheckerStatus.Ok,
+    id: MessageId.svgFaviconDeclared,
+  }, {
+    status: CheckerStatus.Error,
+    id: MessageId.noSvgFaviconHref,
+  }]);
+})
+
+test('checkSvgFavicon - svgFaviconDeclared & svgFavicon404', async () => {
+  await runTest(`<link rel="icon" type="image/svg+xml" href="/the-icon.svg" />`, [{
+    status: CheckerStatus.Ok,
+    id: MessageId.svgFaviconDeclared,
+  }, {
+    status: CheckerStatus.Error,
+    id: MessageId.svgFavicon404,
+  }]);
+})
+
+test('checkSvgFavicon - svgFaviconDeclared & svgFaviconCannotGet', async () => {
+  await runTest(`<link rel="icon" type="image/svg+xml" href="/the-icon.svg" />`, [{
+    status: CheckerStatus.Ok,
+    id: MessageId.svgFaviconDeclared,
+  }, {
+    status: CheckerStatus.Error,
+    id: MessageId.svgFaviconCannotGet,
+  }], {
+    'https://example.com/the-icon.svg': {
+      status: 403,
+      contentType: 'image/svg+xml'
+    }
+  });
+})
+
+test('checkSvgFavicon - svgFaviconDeclared & svgFaviconDownloadable & svgFaviconSquare', async () => {
+  const testIconPath = './fixtures/happy-face.svg';
+
+  const serpIcon = await filePathToString(testIconPath);
+
+  await runTest(`<link rel="icon" type="image/svg+xml" href="/the-icon.svg" />`, [
+    {
+      status: CheckerStatus.Ok,
+      id: MessageId.svgFaviconDeclared,
+    }, {
+      status: CheckerStatus.Ok,
+      id: MessageId.svgFaviconDownloadable,
+    }, {
+      status: CheckerStatus.Ok,
+      id: MessageId.svgFaviconSquare,
+    }], {
+    'https://example.com/the-icon.svg': {
+      status: 200,
+      contentType: 'image/svg+xml',
+      readableStream: await filePathToReadableStream(testIconPath)
+    }
+  });
+})

package/src/desktop/desktop.ts

@@ -0,0 +1,207 @@
+import { CheckerMessage, CheckerStatus, DesktopFaviconReport, Fetcher, MessageId, fetchFetcher } from "..";
+import { HTMLElement } from 'node-html-parser'
+import sharp from 'sharp'
+import { CheckIconProcessor, checkIcon, mergeUrlAndPath, readableStreamToString } from "../helper";
+import { checkIcoFavicon } from "./ico";
+
+export const PngFaviconFileSize = 48;
+
+export const checkSvgFavicon = async (baseUrl: string, head: HTMLElement | null, fetcher: Fetcher = fetchFetcher): Promise<CheckerMessage[]> => {
+  const messages: CheckerMessage[] = [];
+
+  if (!head) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noHead,
+      text: 'No <head> element'
+    });
+
+    return messages;
+  }
+
+  const svgs = head?.querySelectorAll("link[rel='icon'][type='image/svg+xml']");
+  if (svgs.length === 0) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noSvgFavicon,
+      text: 'There is no SVG favicon'
+    });
+  } else if (svgs.length > 1) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.multipleSvgFavicons,
+      text: `There are ${svgs.length} SVG favicons`
+    });
+  } else {
+    messages.push({
+      status: CheckerStatus.Ok,
+      id: MessageId.svgFaviconDeclared,
+      text: 'The SVG favicon is declared'
+    });
+
+    const href = svgs[0].attributes.href;
+    if (!href) {
+      messages.push({
+        status: CheckerStatus.Error,
+        id: MessageId.noSvgFaviconHref,
+        text: 'The SVG markup has no href attribute'
+      });
+    } else {
+      const iconMessages = await checkSvgFaviconFile(baseUrl, href, fetcher)
+      return [ ...messages, ...iconMessages ];
+    }
+  }
+
+  return messages;
+}
+
+export const checkSvgFaviconFile = async (baseUrl: string, url: string, fetcher: Fetcher): Promise<CheckerMessage[]> => {
+  const messages: CheckerMessage[] = [];
+
+  const svgUrl = mergeUrlAndPath(baseUrl, url);
+
+  const res = await fetcher(svgUrl, 'image/svg+xml');
+  if (res.status === 404) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.svgFavicon404,
+      text: `The SVG icon file \`${url}\` does not exist (404 error)`
+    });
+  } else if (res.status >= 300) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.svgFaviconCannotGet,
+      text: `Cannot get the SVG icon file at \`${url}\` (${res.status} error)`
+    });
+  } else if (res.readableStream) {
+    messages.push({
+      status: CheckerStatus.Ok,
+      id: MessageId.svgFaviconDownloadable,
+      text: `The SVG favicon is accessible at \`${url}\``
+    });
+
+    const content = await readableStreamToString(res.readableStream);
+    const meta = await sharp(Buffer.from(content)).metadata();
+
+    if (meta.width !== meta.height) {
+      messages.push({
+        status: CheckerStatus.Error,
+        id: MessageId.svgFaviconNotSquare,
+        text: `The SVG is not square (${meta.width}x${meta.height})`
+      });
+    } else {
+      messages.push({
+        status: CheckerStatus.Ok,
+        id: MessageId.svgFaviconSquare,
+        text: `The SVG is square (${meta.width}x${meta.height})`
+      });
+    }
+  }
+
+  return messages;
+}
+
+export const checkPngFavicon = async (baseUrl: string, head: HTMLElement | null, fetcher: Fetcher = fetchFetcher): Promise<DesktopFaviconReport> => {
+  const messages: CheckerMessage[] = [];
+
+  if (!head) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noHead,
+      text: 'No <head> element'
+    });
+
+    return { messages, icon: null };
+  }
+
+  const icons = head?.querySelectorAll("link[rel='icon'][type='image/png']");
+  if (icons.length === 0) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noDesktopPngFavicon,
+      text: 'There is no desktop PNG favicon'
+    });
+  } else {
+    const size = `${PngFaviconFileSize}x${PngFaviconFileSize}`;
+    const sizedIconMarkup = icons.filter(icon => icon.attributes.sizes === size);
+
+    if (sizedIconMarkup.length === 0) {
+      messages.push({
+        status: CheckerStatus.Error,
+        id: MessageId.no48x48DesktopPngFavicon,
+        text: `There is no ${size} desktop PNG favicon`
+      });
+    } else {
+      messages.push({
+        status: CheckerStatus.Ok,
+        id: MessageId.desktopPngFaviconDeclared,
+        text: `The ${size} desktop PNG favicon is declared`
+      });
+  
+      const href = icons[0].attributes.href;
+      if (!href) {
+        messages.push({
+          status: CheckerStatus.Error,
+          id: MessageId.noDesktopPngFaviconHref,
+          text: `The ${size} desktop favicon markup has no href attribute`
+        });
+      } else {
+        const iconUrl = mergeUrlAndPath(baseUrl, href);
+        const processor: CheckIconProcessor = {
+          cannotGet: (httpStatus) => {
+            messages.push({
+              status: CheckerStatus.Error,
+              id: MessageId.desktopPngFaviconCannotGet,
+              text: `Cannot get the ${size} desktop PNG favicon at \`${iconUrl}\` (${httpStatus} error)`
+            });
+          },
+          downloadable: () => {
+            messages.push({
+              status: CheckerStatus.Ok,
+              id: MessageId.desktopPngFaviconDownloadable,
+              text: `The ${size} desktop PNG favicon is accessible`
+            });
+          },
+          icon404: () => {
+            messages.push({
+              status: CheckerStatus.Error,
+              id: MessageId.desktopPngFavicon404,
+              text: `The ${size} desktop PNG favicon does not exist (404 error)`
+            });
+          },
+          notSquare: (width, height) => {}, // Ignore this message
+          wrongSize: (widthHeight) => {
+            messages.push({
+              status: CheckerStatus.Error,
+              id: MessageId.desktopPngFaviconWrongSize,
+              text: `The ${size} desktop PNG favicon has the wrong size (${widthHeight}x${widthHeight})`
+            });
+          },
+          rightSize(widthHeight) {
+            messages.push({
+              status: CheckerStatus.Ok,
+              id: MessageId.desktopPngFaviconRightSize,
+              text: `The ${size} desktop PNG favicon has the right size`
+            });
+          },
+          square: (widthHeight) => {}, // Ignore this message,
+          noHref: () => {} // Ignore this message
+        };
+        const icon = await checkIcon(iconUrl, processor, fetcher, icons[0].attributes.mimeType || 'image/png', PngFaviconFileSize);
+        return { messages, icon }
+      }
+    }
+  }
+
+  return { messages, icon: null };
+}
+
+export const checkDesktopFavicon = async (baseUrl: string, head: HTMLElement | null, fetcher: Fetcher = fetchFetcher): Promise<DesktopFaviconReport> => {
+  const svgMessages = await checkSvgFavicon(baseUrl, head, fetcher);
+  const pngReport = await checkPngFavicon(baseUrl, head, fetcher);
+  const icoReport = await checkIcoFavicon(baseUrl, head, fetcher);
+  return {
+    messages: [ ...svgMessages, ...pngReport.messages, ...icoReport ],
+    icon: pngReport.icon
+  };
+}

package/src/desktop/ico.ts

@@ -0,0 +1,110 @@
+import { CheckerMessage, CheckerStatus, Fetcher, MessageId } from "..";
+import { HTMLElement } from 'node-html-parser'
+import { mergeUrlAndPath, readableStreamToBuffer } from "../helper";
+import decodeIco from "decode-ico";
+
+export const IcoFaviconSizes = [ 48, 32, 16 ];
+
+export const checkIcoFavicon = async (url: string, head: HTMLElement | null, fetcher: Fetcher): Promise<CheckerMessage[]> => {
+  const messages: CheckerMessage[] = [];
+
+  if (!head) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noHead,
+      text: 'No <head> element'
+    });
+
+    return messages;
+  }
+
+  const icos =
+    head.querySelectorAll('link[rel="shortcut icon"]') ||
+    head.querySelectorAll('link[rel="icon"][type="image/x-icon"]');
+
+  if (icos.length === 0) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.noIcoFavicon,
+      text: 'There is no ICO favicon'
+    });
+  } else if (icos.length > 1) {
+    messages.push({
+      status: CheckerStatus.Error,
+      id: MessageId.multipleIcoFavicons,
+      text: `There are ${icos.length} ICO favicons`
+    });
+  } else {
+    messages.push({
+      status: CheckerStatus.Ok,
+      id: MessageId.icoFaviconDeclared,
+      text: 'The ICO favicon is declared'
+    });
+
+    const href = icos[0].attributes.href;
+    if (!href) {
+      messages.push({
+        status: CheckerStatus.Error,
+        id: MessageId.noIcoFaviconHref,
+        text: 'The ICO markup has no href attribute'
+      });
+    } else {
+      const iconUrl = mergeUrlAndPath(url, href);
+      const iconResponse = await fetcher(iconUrl, 'image/x-icon');
+      if (iconResponse.status === 404) {
+        messages.push({
+          status: CheckerStatus.Error,
+          id: MessageId.icoFavicon404,
+          text: `ICO favicon not found at ${iconUrl}`
+        });
+      } else if (iconResponse.status >= 300 || !iconResponse.readableStream) {
+        messages.push({
+          status: CheckerStatus.Error,
+          id: MessageId.icoFaviconCannotGet,
+          text: `Error fetching ICO favicon at ${iconUrl} (status ${iconResponse.status})`
+        });
+      } else {
+        messages.push({
+          status: CheckerStatus.Ok,
+          id: MessageId.icoFaviconDownloadable,
+          text: 'ICO favicon found'
+        });
+
+        const iconBuffer = await readableStreamToBuffer(iconResponse.readableStream);
+        const images = await decodeIco(iconBuffer);
+
+        const imageSizes = images.map(image => `${image.width}x${image.height}`);
+
+        const expectedSizes = IcoFaviconSizes.map(size => `${size}x${size}`);
+
+        const extraSizes = imageSizes.filter(size => !expectedSizes.includes(size));
+        if (extraSizes.length > 0) {
+          messages.push({
+            status: CheckerStatus.Warning,
+            id: MessageId.icoFaviconExtraSizes,
+            text: `Extra sizes found in ICO favicon: ${extraSizes.join(', ')}`
+          });
+        }
+
+        const missingSizes = expectedSizes.filter(size => !imageSizes.includes(size));
+        if (missingSizes.length > 0) {
+          messages.push({
+            status: CheckerStatus.Warning,
+            id: MessageId.icoFaviconMissingSizes,
+            text: `Missing sizes in ICO favicon: ${missingSizes.join(', ')}`
+          });
+        }
+
+        if (extraSizes.length === 0 && missingSizes.length === 0) {
+          messages.push({
+            status: CheckerStatus.Ok,
+            id: MessageId.icoFaviconExpectedSizes,
+            text: `The ICO favicon has the expected sizes (${imageSizes.join(', ')})`
+          });
+        }
+      }
+    }
+  }
+
+  return messages;
+}

package/src/helper.test.ts

@@ -0,0 +1,128 @@
+import sharp from "sharp";
+import { CheckIconProcessor, checkIcon, filePathToReadableStream, mergeUrlAndPath, parseSizesAttribute } from "./helper";
+import { testFetcher } from "./test-helper";
+
+const getTestProcessor = () => {
+  const messages: string[] = [];
+
+  const processor: CheckIconProcessor = {
+    noHref: () => { messages.push('noHref') },
+    icon404: () => { messages.push('icon404') },
+    cannotGet: (httpStatusCode: number) => { messages.push(`cannotGet ${httpStatusCode}`) },
+    downloadable: () => { messages.push('downloadable') },
+    square: (widthHeight: number) => { messages.push(`square ${widthHeight}`) },
+    notSquare: (width: number, Height: number) => { messages.push(`notSquare ${width}x${Height}`) },
+    rightSize: (width: number) => { messages.push(`rightSize ${width}x${width}`) },
+    wrongSize: (widthHeight: number) => { messages.push(`wrongSize ${widthHeight}x${widthHeight}`) }
+  }
+
+  return { processor, messages };
+}
+
+const testIcon = './fixtures/logo-transparent.png';
+const nonSquareIcon = './fixtures/non-square.png';
+
+test('checkIcon - noHref', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon(undefined, processor.processor, testFetcher({}), 'image/png')).toBeNull();
+  expect(processor.messages).toEqual(['noHref']);
+})
+
+test('checkIcon - icon404', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/does-not-exist.png', processor.processor, testFetcher({}), 'image/png')).toBeNull();
+  expect(processor.messages).toEqual(['icon404']);
+})
+
+test('checkIcon - icon404', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/bad-icon.png', processor.processor, testFetcher({
+    '/bad-icon.png': {
+      contentType: 'image/png',
+      status: 500
+    }
+  }), 'image/png')).toBeNull();
+  expect(processor.messages).toEqual(['cannotGet 500']);
+})
+
+test('checkIcon - downloadable & square', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/some-icon.png', processor.processor, testFetcher({
+    '/some-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: await filePathToReadableStream(testIcon)
+    }
+  }), 'image/png')).not.toBeNull();
+  expect(processor.messages).toEqual([
+    'downloadable',
+    'square 754'
+  ]);
+})
+
+test('checkIcon - downloadable & rightSize', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/some-icon.png', processor.processor, testFetcher({
+    '/some-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: await filePathToReadableStream(testIcon)
+    }
+  }), 'image/png', 754)).not.toBeNull();
+  expect(processor.messages).toEqual([
+    'downloadable',
+    'square 754',
+    'rightSize 754x754'
+  ]);
+})
+
+test('checkIcon - downloadable & wrongSize', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/some-icon.png', processor.processor, testFetcher({
+    '/some-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: await filePathToReadableStream(testIcon)
+    }
+  }), 'image/png', 500)).not.toBeNull();
+  expect(processor.messages).toEqual([
+    'downloadable',
+    'square 754',
+    'wrongSize 754x754'
+  ]);
+})
+
+test('checkIcon - downloadable & notSquare', async () => {
+  const processor = getTestProcessor();
+  expect(await checkIcon('/non-square-icon.png', processor.processor, testFetcher({
+    '/non-square-icon.png': {
+      status: 200,
+      contentType: 'image/png',
+      readableStream: await filePathToReadableStream(nonSquareIcon)
+    }
+  }), 'image/png', 500)).toBeNull();
+  expect(processor.messages).toEqual([
+    'downloadable',
+    'notSquare 240x180'
+  ]);
+})
+
+test('mergeUrlAndPath', () => {
+  expect(mergeUrlAndPath('https://example.com', '/some-path')).toBe('https://example.com/some-path');
+  expect(mergeUrlAndPath('https://example.com', 'some/path')).toBe('https://example.com/some/path');
+
+ expect(mergeUrlAndPath('https://example.com', 'some/path?some=param&and=other-param')).toBe('https://example.com/some/path?some=param&and=other-param');
+
+  expect(mergeUrlAndPath('https://example.com/sub-page', '/some-path')).toBe('https://example.com/some-path');
+  expect(mergeUrlAndPath('https://example.com/sub-page', 'some/path')).toBe('https://example.com/sub-page/some/path');
+
+  expect(mergeUrlAndPath('https://example.com', 'https://elsewhere.com/some-path')).toBe('https://elsewhere.com/some-path');
+})
+
+test('parseSizesAttribute', () => {
+  expect(parseSizesAttribute(null)).toEqual(null);
+  expect(parseSizesAttribute('dummy')).toEqual(null);
+
+  expect(parseSizesAttribute("16x16")).toEqual(16);
+  expect(parseSizesAttribute("50x170")).toEqual(null);
+})