Skip to content

Commit fb0f25e

Browse files
VictoriaBeilsten-EdmandsVictoriaBeilsten-Edmands
committed
Fix linting errors
1 parent 263a4fe commit fb0f25e

File tree

11 files changed

+226
-211
lines changed

11 files changed

+226
-211
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@storybook/react-webpack5": "^8.4.4",
6868
"@storybook/test": "^8.4.4",
6969
"@testing-library/jest-dom": "^6.6.3",
70-
"@testing-library/react": "^16.0.1",
70+
"@testing-library/react": "^16.1.0",
7171
"@types/jest": "^29.5.14",
7272
"@types/node": "^20.17.6",
7373
"@types/react": "^18.3.12",

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ImageColorSchemeSwitch.stories.tsx‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,70 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
33

4-
import imageDark from "../public/generic/logo-dark.svg"
5-
import imageLight from "../public/generic/logo-light.svg"
4+
import imageDark from "../public/generic/logo-dark.svg";
5+
import imageLight from "../public/generic/logo-light.svg";
66

77
const meta: Meta<typeof ImageColorSchemeSwitch> = {
8-
title: "SciReactUI/Control/ImageColorSchemeSwitch",
9-
component: ImageColorSchemeSwitch,
10-
tags: ["autodocs"],
11-
parameters: {
12-
docs: {
13-
description: {
14-
component: 'Switch between an image depending on the color scheme mode, light or dark versions'
15-
},
16-
},
17-
},
8+
title: "SciReactUI/Control/ImageColorSchemeSwitch",
9+
component: ImageColorSchemeSwitch,
10+
tags: ["autodocs"],
11+
parameters: {
12+
docs: {
13+
description: {
14+
component:
15+
"Switch between an image depending on the color scheme mode, light or dark versions",
16+
},
17+
},
18+
},
1819
};
1920

2021
export default meta;
2122
type Story = StoryObj<typeof meta>;
2223

2324
export const SwitchingImage: Story = {
24-
args: {
25-
image: {
26-
src: imageDark,
27-
srcDark: imageLight,
28-
alt: "Testing Switching Image",
29-
width: "100"
30-
}
31-
},
32-
parameters: {
33-
docs: {
34-
description: {
35-
story: 'This image changes depending on the color scheme mode selected.'
36-
},
37-
},
38-
},
25+
args: {
26+
image: {
27+
src: imageDark,
28+
srcDark: imageLight,
29+
alt: "Testing Switching Image",
30+
width: "100",
31+
},
32+
},
33+
parameters: {
34+
docs: {
35+
description: {
36+
story:
37+
"This image changes depending on the color scheme mode selected.",
38+
},
39+
},
40+
},
3941
};
4042

41-
4243
export const LargeSwitchingImage: Story = {
43-
args: {
44-
image: {
45-
src: imageDark,
46-
srcDark: imageLight,
47-
alt: "Testing Switching Image",
48-
width: "300"
49-
}
50-
},
44+
args: {
45+
image: {
46+
src: imageDark,
47+
srcDark: imageLight,
48+
alt: "Testing Switching Image",
49+
width: "300",
50+
},
51+
},
5152
};
5253

5354
export const NonSwitchingImage: Story = {
54-
args: {
55-
image: {
56-
src: imageLight,
57-
alt: "Testing Non-Switching Image",
58-
width: "300"
59-
}
60-
},
61-
parameters: {
62-
docs: {
63-
description: {
64-
story: 'This image only has a single src so will NOT switch when the color scheme mode switches.'
65-
},
66-
},
67-
},
55+
args: {
56+
image: {
57+
src: imageLight,
58+
alt: "Testing Non-Switching Image",
59+
width: "300",
60+
},
61+
},
62+
parameters: {
63+
docs: {
64+
description: {
65+
story:
66+
"This image only has a single src so will NOT switch when the color scheme mode switches.",
67+
},
68+
},
69+
},
6870
};

‎src/components/ImageColorSchemeSwitch.test.tsx‎

Lines changed: 103 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,108 @@ import { render } from "@testing-library/react";
44
import { ImageColorSchemeSwitch, getLogoSrc } from "./ImageColorSchemeSwitch";
55

66
jest.mock("@mui/material", () => {
7-
return {
8-
useColorScheme: jest.fn().mockReturnValue({mode:"dark"})
9-
};
10-
})
7+
return {
8+
useColorScheme: jest.fn().mockReturnValue({ mode: "dark" }),
9+
};
10+
});
1111

1212
describe("ImageColorSchemeSwitch", () => {
13-
const testVals = {
14-
src: "src/light",
15-
alt: "test-alt"
16-
};
17-
18-
function getRenderImg( image: any) {
19-
const {getByAltText} = render(<ImageColorSchemeSwitch image={{...testVals, ...image}}/>);
20-
21-
const img = getByAltText(testVals.alt)
22-
expect(img).toBeInTheDocument()
23-
return img
24-
}
25-
26-
it("should render without errors", () => {
27-
render(<ImageColorSchemeSwitch image={{...testVals}}/>);
28-
});
29-
30-
it("should have src and alt by default", () => {
31-
const img = getRenderImg({})
32-
33-
expect(img).toHaveAttribute("alt", testVals.alt)
34-
expect(img).toHaveAttribute("src", testVals.src)
35-
36-
expect(img).not.toHaveAttribute("width")
37-
expect(img).not.toHaveAttribute("height")
38-
});
39-
40-
it("should have width 123", () => {
41-
const width = "123";
42-
43-
const img = getRenderImg({width})
44-
expect(img).toHaveAttribute("width", width)
45-
expect(img).not.toHaveAttribute("height")
46-
});
47-
48-
it("should have width 123 and height 124", () => {
49-
const width = "123",
50-
height = "124";
51-
52-
const img = getRenderImg({width,height})
53-
54-
expect(img).toHaveAttribute("width", width)
55-
expect(img).toHaveAttribute("height", height)
56-
});
57-
58-
it("should have alternate src", () => {
59-
const srcDark = "src/dark";
60-
61-
const img = getRenderImg({srcDark})
62-
63-
expect(img).toHaveAttribute("src", srcDark)
64-
});
65-
})
66-
67-
describe("getLogoSrc", ()=>{
68-
const srcLight = "src/light",
69-
srcDark = "src/dark";
70-
71-
it("should be null if no image", () => {
72-
// @ts-ignore: invalid input
73-
expect(getLogoSrc(null,"")).toStrictEqual(undefined);
74-
// @ts-ignore: invalid input, calm down ts
75-
expect(getLogoSrc()).toStrictEqual(undefined);
76-
});
77-
78-
it("should be srcLight if no srcDark", () => {
79-
expect(getLogoSrc({src:srcLight, alt:""},"light")).toStrictEqual(srcLight);
80-
});
81-
82-
it("should be srcLight if mode is dark but no srcDark", () => {
83-
expect(getLogoSrc({src:srcLight, alt:""},"dark")).toStrictEqual(srcLight);
84-
});
85-
86-
it("should be srcLight if srcDark but mode light", () => {
87-
expect(getLogoSrc( {src: srcLight, srcDark: srcDark, alt:""},"light")).toStrictEqual(srcLight);
88-
});
89-
90-
it("should be srcDark if mode dark", () => {
91-
expect( getLogoSrc({src:"src/light", srcDark:srcDark, alt:""},"dark")).toStrictEqual(srcDark);
92-
});
93-
94-
})
13+
const testVals = {
14+
src: "src/light",
15+
alt: "test-alt",
16+
};
17+
18+
function getRenderImg(image: {
19+
src?: string;
20+
srcDark?: string;
21+
alt?: string;
22+
width?: string;
23+
height?: string;
24+
}) {
25+
const { getByAltText } = render(
26+
<ImageColorSchemeSwitch image={{ ...testVals, ...image }} />,
27+
);
28+
29+
const img = getByAltText(testVals.alt);
30+
expect(img).toBeInTheDocument();
31+
return img;
32+
}
33+
34+
it("should render without errors", () => {
35+
render(<ImageColorSchemeSwitch image={{ ...testVals }} />);
36+
});
37+
38+
it("should have src and alt by default", () => {
39+
const img = getRenderImg({});
40+
41+
expect(img).toHaveAttribute("alt", testVals.alt);
42+
expect(img).toHaveAttribute("src", testVals.src);
43+
44+
expect(img).not.toHaveAttribute("width");
45+
expect(img).not.toHaveAttribute("height");
46+
});
47+
48+
it("should have width 123", () => {
49+
const width = "123";
50+
51+
const img = getRenderImg({ width });
52+
expect(img).toHaveAttribute("width", width);
53+
expect(img).not.toHaveAttribute("height");
54+
});
55+
56+
it("should have width 123 and height 124", () => {
57+
const width = "123",
58+
height = "124";
59+
60+
const img = getRenderImg({ width, height });
61+
62+
expect(img).toHaveAttribute("width", width);
63+
expect(img).toHaveAttribute("height", height);
64+
});
65+
66+
it("should have alternate src", () => {
67+
const srcDark = "src/dark";
68+
69+
const img = getRenderImg({
70+
srcDark,
71+
});
72+
73+
expect(img).toHaveAttribute("src", srcDark);
74+
});
75+
});
76+
77+
describe("getLogoSrc", () => {
78+
const srcLight = "src/light",
79+
srcDark = "src/dark";
80+
81+
it("should be null if no image", () => {
82+
// @ts-expect-error: invalid input
83+
expect(getLogoSrc(null, "")).toStrictEqual(undefined);
84+
// @ts-expect-error: invalid input, calm down ts
85+
expect(getLogoSrc()).toStrictEqual(undefined);
86+
});
87+
88+
it("should be srcLight if no srcDark", () => {
89+
expect(getLogoSrc({ src: srcLight, alt: "" }, "light")).toStrictEqual(
90+
srcLight,
91+
);
92+
});
93+
94+
it("should be srcLight if mode is dark but no srcDark", () => {
95+
expect(getLogoSrc({ src: srcLight, alt: "" }, "dark")).toStrictEqual(
96+
srcLight,
97+
);
98+
});
99+
100+
it("should be srcLight if srcDark but mode light", () => {
101+
expect(
102+
getLogoSrc({ src: srcLight, srcDark: srcDark, alt: "" }, "light"),
103+
).toStrictEqual(srcLight);
104+
});
105+
106+
it("should be srcDark if mode dark", () => {
107+
expect(
108+
getLogoSrc({ src: "src/light", srcDark: srcDark, alt: "" }, "dark"),
109+
).toStrictEqual(srcDark);
110+
});
111+
});

0 commit comments

Comments
 (0)