diff --git a/packages/core/src/network.js b/packages/core/src/network.js index b07bbb879..dd223c04c 100644 --- a/packages/core/src/network.js +++ b/packages/core/src/network.js @@ -1,7 +1,7 @@ -import mime from 'mime-types'; -import logger from '@percy/logger'; import { request as makeRequest } from '@percy/client/utils'; -import { normalizeURL, hostnameMatches, createResource, waitFor } from './utils.js'; +import logger from '@percy/logger'; +import mime from 'mime-types'; +import { createResource, hostnameMatches, normalizeURL, waitFor } from './utils.js'; const MAX_RESOURCE_SIZE = 25 * (1024 ** 2); // 25MB const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308]; @@ -397,7 +397,10 @@ async function saveResponseResource(network, request) { return log.debug(`- Skipping disallowed resource type [${request.type}]`, meta); } - let detectedMime = mime.lookup(response.url); + // mime package does not handle query params + let urlObj = new URL(url); + let urlWithoutSearchParams = urlObj.origin + urlObj.pathname; + let detectedMime = mime.lookup(urlWithoutSearchParams); let mimeType = ( // ensure the mimetype is correct for text/plain responses response.mimeType === 'text/plain' && detectedMime diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js index 491a8fd4d..b3d3bbe63 100644 --- a/packages/core/test/discovery.test.js +++ b/packages/core/test/discovery.test.js @@ -384,11 +384,11 @@ describe('Discovery', () => { it('fetches font file correctly with makeDirect', async () => { // add font to page via stylesheet server.reply('/style.css', () => [200, 'text/css', [ - '@font-face { font-family: "test"; src: url("/font.woff") format("woff"); }', + '@font-face { font-family: "test"; src: url("/font.woff?abc=1") format("woff"); }', 'body { font-family: "test", "sans-serif"; }' ].join('')]); - server.reply('/font.woff', () => { + server.reply('/font.woff?abc=1', () => { return [200, 'application/octate-stream', '']; }); @@ -401,17 +401,17 @@ describe('Discovery', () => { await percy.idle(); // confirm that request was made 2 times, once via browser and once due to makeDirectRequest let paths = server.requests.map(r => r[0]); - expect(paths.filter(x => x === '/font.woff').length).toEqual(2); + expect(paths.filter(x => x === '/font.woff?abc=1').length).toEqual(2); let requestData = captured[0].map((x) => x.attributes) - .filter(x => x['resource-url'] === 'http://localhost:8000/font.woff')[0]; + .filter(x => x['resource-url'] === 'http://localhost:8000/font.woff?abc=1')[0]; // confirm that original response mimetype is not tampered expect(requestData.mimetype).toEqual('application/octate-stream'); }); }); - it('does not mimetype parse resourced with no file extension', async () => { + it('does not mimetype parse resource with no file extension', async () => { let brokeDOM = testDOM.replace('style.css', 'broken-css'); server.reply('/broken-css', () => [200, 'text/plain', testCSS]); percy.loglevel('debug'); diff --git a/packages/core/test/helpers/server.js b/packages/core/test/helpers/server.js index 05a1b5c4b..9064f0a33 100644 --- a/packages/core/test/helpers/server.js +++ b/packages/core/test/helpers/server.js @@ -22,7 +22,7 @@ export function createTestServer({ default: defaultReply, ...replies }, port = 8 let pathname = req.url.pathname; if (req.url.search) pathname += req.url.search; server.requests.push(req.body ? [pathname, req.body] : [pathname]); - let reply = replies[req.url.pathname] || defaultReply; + let reply = replies[pathname] || defaultReply; return reply ? await reply(req, res) : next(); });