github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): drop old polyfill

Browse Source
This commit is contained in:
Lukasz Mierzwa
2026-03-09 14:39:47 +00:00
committed by Łukasz Mierzwa
parent 386dc3a9a4
commit 5ec45fcc14
7 changed files with 4 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/.browserslistrc
View File

@@ -1,7 +1,7 @@
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Safari >= 13
iOS >= 13
Chrome >= 64
Firefox >= 69
Safari >= 13.1
iOS >= 13.4

7
ui/package-lock.json generated
View File

@@ -14,7 +14,6 @@
"@fortawesome/free-regular-svg-icons": "7.2.0",
"@fortawesome/free-solid-svg-icons": "7.2.0",
"@fortawesome/react-fontawesome": "3.2.0",
"@juggle/resize-observer": "3.4.0",
"body-scroll-lock": "3.1.5",
"bootstrap": "5.3.8",
"bootswatch": "5.3.8",
@@ -3717,12 +3716,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@juggle/resize-observer": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
"license": "Apache-2.0"
},
"node_modules/@napi-rs/wasm-runtime": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",

1
ui/package.json
View File

@@ -10,7 +10,6 @@
"@fortawesome/free-regular-svg-icons": "7.2.0",
"@fortawesome/free-solid-svg-icons": "7.2.0",
"@fortawesome/react-fontawesome": "3.2.0",
"@juggle/resize-observer": "3.4.0",
"body-scroll-lock": "3.1.5",
"bootstrap": "5.3.8",
"bootswatch": "5.3.8",

3
ui/src/index.tsx
View File

@@ -1,6 +1,3 @@
// MUST be first thing we import
import "./polyfills";
import { createRoot } from "react-dom/client";
import {

83
ui/src/polyfill-load.test.tsx
View File

@@ -1,83 +0,0 @@
import fetchMock from "@fetch-mock/jest";
import { EmptyAPIResponse } from "__fixtures__/Fetch";
import { mockMatchMedia } from "__fixtures__/matchMedia";
// Mock react-cool-dimensions for this test file only since we're testing
// ResizeObserver polyfill loading and react-cool-dimensions logs an error
// before the polyfill is loaded
jest.mock("react-cool-dimensions", () => ({
__esModule: true,
default: () => ({
observe: jest.fn(),
unobserve: jest.fn(),
width: 1000,
height: 500,
entry: undefined,
}),
}));
declare let global: any;
declare let window: any;
const settingsElement = {
dataset: {
defaultFiltersBase64: "WyJmb289YmFyIiwiYmFyPX5iYXoiXQ==",
},
};
let root: HTMLDivElement;
beforeEach(() => {
window.matchMedia = mockMatchMedia({});
global.MutationObserver = class {
disconnect() {}
observe() {}
};
// Remove ResizeObserver polyfill from testEnvironment.ts to test polyfill loading
delete global.ResizeObserver;
root = document.createElement("div");
root.id = "root";
document.body.appendChild(root);
});
afterEach(async () => {
// Clean up React root to prevent async operations after test ends
// Clear innerHTML first to trigger React cleanup
if (root) {
root.innerHTML = "";
}
// Wait for any pending React updates to complete
await new Promise((resolve) => setTimeout(resolve, 0));
if (root && root.parentNode) {
root.parentNode.removeChild(root);
}
jest.resetModules();
});
it("loads ResizeObserver polyfill if needed", () => {
// Verifies app loads ResizeObserver polyfill when not available
expect(window.ResizeObserver).toBeFalsy();
jest.spyOn(global.document, "getElementById").mockImplementation((name) => {
return name === "settings"
? settingsElement
: name === "defaults"
? null
: name === "root"
? root
: null;
});
const response = EmptyAPIResponse();
response.filters = [];
fetchMock.mockReset();
fetchMock.route("*", {
body: JSON.stringify(response),
});
require("./index.tsx");
expect(window.ResizeObserver).toBeTruthy();
});

87
ui/src/polyfill-noop.test.tsx
View File

@@ -1,87 +0,0 @@
import fetchMock from "@fetch-mock/jest";
import { EmptyAPIResponse } from "__fixtures__/Fetch";
import { mockMatchMedia } from "__fixtures__/matchMedia";
// Mock react-cool-dimensions for this test file only since we're testing
// ResizeObserver polyfill loading and react-cool-dimensions logs an error
// before the polyfill is loaded
jest.mock("react-cool-dimensions", () => ({
__esModule: true,
default: () => ({
observe: jest.fn(),
unobserve: jest.fn(),
width: 1000,
height: 500,
entry: undefined,
}),
}));
declare let global: any;
declare let window: any;
const settingsElement = {
dataset: {
defaultFiltersBase64: "WyJmb289YmFyIiwiYmFyPX5iYXoiXQ==",
},
};
let root: HTMLDivElement;
beforeEach(() => {
window.matchMedia = mockMatchMedia({});
global.MutationObserver = class {
disconnect() {}
observe() {}
};
root = document.createElement("div");
root.id = "root";
document.body.appendChild(root);
});
afterEach(async () => {
// Clean up React root to prevent async operations after test ends
// Clear innerHTML first to trigger React cleanup
if (root) {
root.innerHTML = "";
}
// Wait for any pending React updates to complete
await new Promise((resolve) => setTimeout(resolve, 0));
if (root && root.parentNode) {
root.parentNode.removeChild(root);
}
jest.resetModules();
jest.restoreAllMocks();
});
it("doesn't load ResizeObserver polyfill if not needed", () => {
// Verifies app doesn't load ResizeObserver polyfill when already available
global.window.ResizeObserver = jest.fn((_) => {
return {
observe: jest.fn(),
disconnect: jest.fn(),
};
});
jest.spyOn(global.document, "getElementById").mockImplementation((name) => {
return name === "settings"
? settingsElement
: name === "defaults"
? null
: name === "root"
? root
: null;
});
const response = EmptyAPIResponse();
response.filters = [];
fetchMock.mockReset();
fetchMock.route("*", {
body: JSON.stringify(response),
});
require("./index.tsx");
expect(window.ResizeObserver).toBeTruthy();
});

15
ui/src/polyfills.ts
View File

@@ -1,15 +0,0 @@
declare global {
interface Window {
ResizeObserver: () => void;
}
}
const pollyfillsLoaded: string[] = [];
if ("ResizeObserver" in window === false) {
pollyfillsLoaded.push("ResizeObserver");
const module = require("@juggle/resize-observer"); // eslint-disable-line @typescript-eslint/no-require-imports
(window as Window).ResizeObserver = module.ResizeObserver;
}
export default pollyfillsLoaded;