Apply fix for bug in JSDOM to enable styles to correctly be applied from dynamically added style tags in document.head

Author: aeagle

src/components/tests/Common.tsx

@@ -8,6 +8,22 @@ const mutateComponent = (component: React.ReactNode, newProps: Object) => {
 	return React.cloneElement(component as React.DetailedReactHTMLElement<any, HTMLElement>, newProps);
 };
 
+export const fixUp = (sut: HTMLElement) => {
+	// This is annoying. A bug in JSDOM means that getComputedStyle() on test elements does
+	// not correctly return the applied styles when a dynamically added style tag is added to
+	// the document.head. It doesn't happen in all cases. Quick fix for now is take the style
+	// from the doc head and apply directly to the test element
+	// Existing issue raised on JSDOM repo - https://github.com/jsdom/jsdom/issues/2986
+	const test = document.documentElement.querySelector(`#style_${sut.id}`)!;
+	const style = test.innerHTML
+		.replace(`#${sut.id} { `, "")
+		.split("#")[0]
+		.replace(" }", "");
+	sut.setAttribute("style", style);
+
+	return sut;
+};
+
 export const commonPropsTests = (name: string, component: React.ReactNode, expectedStyle: Partial<CSSStyleDeclaration>) => {
 	test(`${name} default has correct styles`, async () => {
 		// arrange, act
@@ -136,8 +152,8 @@ export const commonAnchorTests = (
 				{mutateComponent(component, { id: "test1", size: 100, order: 1 })}
 			</ViewPort>,
 		);
-		const sut = container.querySelector("#test")!;
-		const sut1 = container.querySelector("#test1")!;
+		const sut = fixUp(container.querySelector("#test")!);
+		const sut1 = fixUp(container.querySelector("#test1")!);
 
 		// assert
 		const style = window.getComputedStyle(sut);
@@ -173,8 +189,8 @@ export const commonAnchorTests = (
 				{mutateComponent(component, { id: "test", size: 50, order: 0 })}
 			</ViewPort>,
 		);
-		const sut = container.querySelector("#test")!;
-		const sut1 = container.querySelector("#test1")!;
+		const sut = fixUp(container.querySelector("#test")!);
+		const sut1 = fixUp(container.querySelector("#test1")!);
 
 		// assert
 		const style = window.getComputedStyle(sut);

src/components/tests/__tests__/Fill.tsx

@@ -4,7 +4,7 @@ import { Fill } from "../../Fill";
 import { Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable } from "../../Anchored";
 import "@testing-library/jest-dom/extend-expect";
 import { ViewPort } from "../../ViewPort";
-import { commonPropsTests } from "../Common";
+import { commonPropsTests, fixUp } from "../Common";
 
 afterEach(cleanup);
 
@@ -197,7 +197,8 @@ test("Fill with LeftResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -219,7 +220,7 @@ test("Fill with stacked LeftResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -240,7 +241,7 @@ test("Fill with TopResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -262,7 +263,7 @@ test("Fill with stacked TopResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -283,7 +284,7 @@ test("Fill with RightResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -305,7 +306,7 @@ test("Fill with stacked RightResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -326,7 +327,7 @@ test("Fill with BottomResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");
@@ -348,7 +349,7 @@ test("Fill with stacked BottomResizable has correct styles", async () => {
 			<Fill id="test" />
 		</ViewPort>,
 	);
-	const sut = container.querySelector("#test")!;
+	const sut = fixUp(container.querySelector("#test")!);
 	const style = window.getComputedStyle(sut);
 
 	expect(style.display).toBe("block");