Fix linting errors

package.json

@@ -67,7 +67,7 @@
     "@storybook/react-webpack5": "^8.4.4",
     "@storybook/test": "^8.4.4",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",

src/components/ImageColorSchemeSwitch.stories.tsx

@@ -1,68 +1,70 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
 
-import imageDark from "../public/generic/logo-dark.svg"
-import imageLight from "../public/generic/logo-light.svg"
+import imageDark from "../public/generic/logo-dark.svg";
+import imageLight from "../public/generic/logo-light.svg";
 
 const meta: Meta<typeof ImageColorSchemeSwitch> = {
-	title: "SciReactUI/Control/ImageColorSchemeSwitch",
-	component: ImageColorSchemeSwitch,
-	tags: ["autodocs"],
-	parameters: {
-		docs: {
-			description: {
-				component: 'Switch between an image depending on the color scheme mode, light or dark versions'
-			},
-		},
-	},
+  title: "SciReactUI/Control/ImageColorSchemeSwitch",
+  component: ImageColorSchemeSwitch,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Switch between an image depending on the color scheme mode, light or dark versions",
+      },
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const SwitchingImage: Story = {
-	args: {
-		image: {
-			src: imageDark,
-			srcDark: imageLight,
-			alt: "Testing Switching Image",
-			width: "100"
-		}
-	},
-	parameters: {
-		docs: {
-			description: {
-				story: 'This image changes depending on the color scheme mode selected.'
-			},
-		},
-	},
+  args: {
+    image: {
+      src: imageDark,
+      srcDark: imageLight,
+      alt: "Testing Switching Image",
+      width: "100",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This image changes depending on the color scheme mode selected.",
+      },
+    },
+  },
 };
 
-
 export const LargeSwitchingImage: Story = {
-	args: {
-		image: {
-			src: imageDark,
-			srcDark: imageLight,
-			alt: "Testing Switching Image",
-			width: "300"
-		}
-	},
+  args: {
+    image: {
+      src: imageDark,
+      srcDark: imageLight,
+      alt: "Testing Switching Image",
+      width: "300",
+    },
+  },
 };
 
 export const NonSwitchingImage: Story = {
-	args: {
-	  image: {
-		  src: imageLight,
-		  alt: "Testing Non-Switching Image",
-		  width: "300"
-	  }
-	},
-	parameters: {
-		docs: {
-			description: {
-				story: 'This image only has a single src so will NOT switch when the color scheme mode switches.'
-			},
-		},
-	},
+  args: {
+    image: {
+      src: imageLight,
+      alt: "Testing Non-Switching Image",
+      width: "300",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This image only has a single src so will NOT switch when the color scheme mode switches.",
+      },
+    },
+  },
 };

src/components/ImageColorSchemeSwitch.test.tsx

@@ -4,91 +4,108 @@ import { render } from "@testing-library/react";
 import { ImageColorSchemeSwitch, getLogoSrc } from "./ImageColorSchemeSwitch";
 
 jest.mock("@mui/material", () => {
-	return {
-		useColorScheme: jest.fn().mockReturnValue({mode:"dark"})
-	};
-})
+  return {
+    useColorScheme: jest.fn().mockReturnValue({ mode: "dark" }),
+  };
+});
 
 describe("ImageColorSchemeSwitch", () => {
-	const testVals = {
-		src: "src/light",
-		alt: "test-alt"
-	};
-
-	function getRenderImg( image: any) {
-		const {getByAltText} = render(<ImageColorSchemeSwitch image={{...testVals, ...image}}/>);
-
-		const img = getByAltText(testVals.alt)
-		expect(img).toBeInTheDocument()
-		return img
-	}
-
-	it("should render without errors", () => {
-		render(<ImageColorSchemeSwitch image={{...testVals}}/>);
-	});
-
-	it("should have src and alt by default", () => {
-		const img = getRenderImg({})
-
-		expect(img).toHaveAttribute("alt", testVals.alt)
-		expect(img).toHaveAttribute("src", testVals.src)
-
-		expect(img).not.toHaveAttribute("width")
-		expect(img).not.toHaveAttribute("height")
-	});
-
-	it("should have width 123", () => {
-		const width = "123";
-
-		const img = getRenderImg({width})
-		expect(img).toHaveAttribute("width", width)
-		expect(img).not.toHaveAttribute("height")
-	});
-
-	it("should have width 123 and height 124", () => {
-		const width = "123",
-			height = "124";
-
-		const img = getRenderImg({width,height})
-
-		expect(img).toHaveAttribute("width", width)
-		expect(img).toHaveAttribute("height", height)
-	});
-
-	it("should have alternate src", () => {
-		const srcDark = "src/dark";
-
-		const img = getRenderImg({srcDark})
-
-		expect(img).toHaveAttribute("src", srcDark)
-	});
-})
-
-describe("getLogoSrc", ()=>{
-	const srcLight = "src/light",
-		srcDark = "src/dark";
-
-	it("should be null if no image", () => {
-		// @ts-ignore: invalid input
-		expect(getLogoSrc(null,"")).toStrictEqual(undefined);
-		// @ts-ignore: invalid input, calm down ts
-		expect(getLogoSrc()).toStrictEqual(undefined);
-	});
-
-	it("should be srcLight if no srcDark", () => {
-		expect(getLogoSrc({src:srcLight, alt:""},"light")).toStrictEqual(srcLight);
-	});
-
-	it("should be srcLight if mode is dark but no srcDark", () => {
-		expect(getLogoSrc({src:srcLight, alt:""},"dark")).toStrictEqual(srcLight);
-	});
-
-	it("should be srcLight if srcDark but mode light", () => {
-		expect(getLogoSrc( {src: srcLight, srcDark: srcDark, alt:""},"light")).toStrictEqual(srcLight);
-	});
-
-	it("should be srcDark if mode dark", () => {
-		expect( getLogoSrc({src:"src/light", srcDark:srcDark, alt:""},"dark")).toStrictEqual(srcDark);
-	});
-
-})
+  const testVals = {
+    src: "src/light",
+    alt: "test-alt",
+  };
+
+  function getRenderImg(image: {
+    src?: string;
+    srcDark?: string;
+    alt?: string;
+    width?: string;
+    height?: string;
+  }) {
+    const { getByAltText } = render(
+      <ImageColorSchemeSwitch image={{ ...testVals, ...image }} />,
+    );
+
+    const img = getByAltText(testVals.alt);
+    expect(img).toBeInTheDocument();
+    return img;
+  }
+
+  it("should render without errors", () => {
+    render(<ImageColorSchemeSwitch image={{ ...testVals }} />);
+  });
+
+  it("should have src and alt by default", () => {
+    const img = getRenderImg({});
+
+    expect(img).toHaveAttribute("alt", testVals.alt);
+    expect(img).toHaveAttribute("src", testVals.src);
+
+    expect(img).not.toHaveAttribute("width");
+    expect(img).not.toHaveAttribute("height");
+  });
+
+  it("should have width 123", () => {
+    const width = "123";
+
+    const img = getRenderImg({ width });
+    expect(img).toHaveAttribute("width", width);
+    expect(img).not.toHaveAttribute("height");
+  });
+
+  it("should have width 123 and height 124", () => {
+    const width = "123",
+      height = "124";
+
+    const img = getRenderImg({ width, height });
+
+    expect(img).toHaveAttribute("width", width);
+    expect(img).toHaveAttribute("height", height);
+  });
+
+  it("should have alternate src", () => {
+    const srcDark = "src/dark";
+
+    const img = getRenderImg({
+      srcDark,
+    });
+
+    expect(img).toHaveAttribute("src", srcDark);
+  });
+});
+
+describe("getLogoSrc", () => {
+  const srcLight = "src/light",
+    srcDark = "src/dark";
+
+  it("should be null if no image", () => {
+    // @ts-expect-error: invalid input
+    expect(getLogoSrc(null, "")).toStrictEqual(undefined);
+    // @ts-expect-error: invalid input, calm down ts
+    expect(getLogoSrc()).toStrictEqual(undefined);
+  });
+
+  it("should be srcLight if no srcDark", () => {
+    expect(getLogoSrc({ src: srcLight, alt: "" }, "light")).toStrictEqual(
+      srcLight,
+    );
+  });
+
+  it("should be srcLight if mode is dark but no srcDark", () => {
+    expect(getLogoSrc({ src: srcLight, alt: "" }, "dark")).toStrictEqual(
+      srcLight,
+    );
+  });
+
+  it("should be srcLight if srcDark but mode light", () => {
+    expect(
+      getLogoSrc({ src: srcLight, srcDark: srcDark, alt: "" }, "light"),
+    ).toStrictEqual(srcLight);
+  });
+
+  it("should be srcDark if mode dark", () => {
+    expect(
+      getLogoSrc({ src: "src/light", srcDark: srcDark, alt: "" }, "dark"),
+    ).toStrictEqual(srcDark);
+  });
+});