Skip to content

Commit 6e599d6

Browse files
manu4543manu4543
committed
add test case
1 parent ae9546c commit 6e599d6

File tree

16 files changed

+3566
-1
lines changed

16 files changed

+3566
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "imagekitio-react",
2+
"name": "@imagekit/react",
33
"version": "5.0.0-beta.1",
44
"description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
55
"scripts": {

‎test-app/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
/node_modules/
3+
4+
# React Router
5+
/.react-router/
6+
/build/

‎test-app/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## How it works
2+
3+
This is a simple React router v7 app. In Github CI, we build the SDK and pack it. Then we install it in this test app and run the playwright tests.
4+
5+
We are using snapshot testing to verify the output generate by the SDK. This asserts the whole element along with all attributes instead of tons of assertions for each attribute.
6+
7+
Run the test app and manually verify the output before comming any changes in snapshots.
8+
9+
We are testing both SSR and CSR.

‎test-app/app/app.css‎

Whitespace-only changes.

‎test-app/app/components/ImageClient.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Image } from "@imagekit/react";
2+
3+
export const ImageEvents = () => {
4+
return (
5+
<div>
6+
<Image
7+
urlEndpoint="https://ik.imagekit.io/demo/"
8+
src="/default-image.jpg"
9+
alt="Image with events"
10+
height={300}
11+
width={300}
12+
onError={(e) => {
13+
// Set an attribute to this element to indicate that the image failed to load
14+
e.currentTarget.setAttribute("data-imagekit-error", "true");
15+
}}
16+
onLoad={(e) => {
17+
// Set an attribute to this element to indicate that the image loaded successfully
18+
e.currentTarget.setAttribute("data-imagekit-loaded", "true");
19+
}}
20+
style={{ color: "red" }}
21+
/>
22+
23+
24+
<Image
25+
urlEndpoint="https://ik.imagekit.io/demo/"
26+
src="/does-not-exists-show-call-on-error.jpg"
27+
alt="Image with events"
28+
height={300}
29+
width={300}
30+
onError={(e) => {
31+
// Set an attribute to this element to indicate that the image failed to load
32+
e.currentTarget.setAttribute("data-imagekit-error", "true");
33+
}}
34+
onLoad={(e) => {
35+
// Set an attribute to this element to indicate that the image loaded successfully
36+
e.currentTarget.setAttribute("data-imagekit-loaded", "true");
37+
}}
38+
style={{ color: "red" }}
39+
/>
40+
</div>
41+
)
42+
}

‎test-app/app/components/basic.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { Image, ImageKitProvider, Video } from "@imagekit/react";
2+
3+
4+
export const Basic = () => {
5+
return (
6+
<div>
7+
<h1>Image</h1>
8+
9+
<Image
10+
urlEndpoint="https://ik.imagekit.io/demo/"
11+
src="default-image.jpg"
12+
alt="Image without ImageKit provider"
13+
height={300}
14+
width={300}
15+
style={{ color: "red" }} // we add `color:red` styles in all Image because otherwise Next.js may add `color:transparent` styles to the image. This may causes flaky tests.
16+
/>
17+
18+
<ImageKitProvider urlEndpoint="https://ik.imagekit.io/demo/">
19+
<Image
20+
src="/default-image.jpg"
21+
alt="Image with ImageKit provider"
22+
height={300}
23+
width={300}
24+
style={{ color: "red" }}
25+
/>
26+
27+
<Image
28+
src="/default-image.jpg"
29+
alt="With transformation"
30+
transformation={[{ height: 100, width: 100 }]}
31+
height={300}
32+
width={300}
33+
style={{ color: "red" }}
34+
/>
35+
36+
{/* quality={50} */}
37+
<Image
38+
src="/default-image.jpg"
39+
alt="Image with quality"
40+
quality={50}
41+
transformation={[{ height: 100, width: 100 }]}
42+
height={300}
43+
width={300}
44+
style={{ color: "red" }}
45+
/>
46+
47+
<Image
48+
src="/default-image.jpg"
49+
alt="Image with queryParameters"
50+
queryParameters={{
51+
version: "v1",
52+
}}
53+
transformation={[{ height: 100, width: 100 }]}
54+
height={300}
55+
width={300}
56+
style={{ color: "red" }}
57+
/>
58+
59+
{/* responsive images with sizes */}
60+
<Image
61+
src="/default-image.jpg"
62+
alt="Responsive image with sizes"
63+
sizes="(max-width: 600px) 100vw, 50vw"
64+
height={300}
65+
width={300}
66+
style={{ color: "red" }}
67+
/>
68+
69+
{/* urlEndpoint override */}
70+
<Image
71+
urlEndpoint="https://ik.imagekit.io/demo2/"
72+
src="/default-image.jpg"
73+
alt="Image with urlEndpoint override"
74+
transformation={[{ height: 100, width: 100 }]}
75+
height={300}
76+
width={300}
77+
style={{ color: "red" }}
78+
/>
79+
80+
{/* Pass className to the image tag as it is */}
81+
<Image
82+
src="/default-image.jpg"
83+
alt="Image with className"
84+
className="custom-class"
85+
height={300}
86+
width={300}
87+
style={{ color: "red" }}
88+
/>
89+
90+
{/* Lazy loading eager */}
91+
<Image
92+
src="/default-image.jpg"
93+
alt="Image with lazy loading eager"
94+
loading="eager"
95+
height={300}
96+
width={300}
97+
style={{ color: "red" }}
98+
/>
99+
100+
{/* Transformation position test */}
101+
<Image
102+
src="/default-image.jpg"
103+
alt="Image with path transformation"
104+
transformationPosition="path"
105+
height={300}
106+
width={300}
107+
style={{ color: "red" }}
108+
/>
109+
110+
<Image
111+
src="https://ik.imagekit/demo/default-image.jpg"
112+
alt="path not respected with absolute url"
113+
transformationPosition="path"
114+
height={300}
115+
width={300}
116+
style={{ color: "red" }}
117+
/>
118+
119+
{/* Responsive off */}
120+
<Image
121+
src="/default-image.jpg"
122+
alt="Image with responsive off"
123+
height={300}
124+
width={300}
125+
transformation={[{
126+
named: "restrict-unnamed",
127+
}]}
128+
style={{ color: "red" }}
129+
responsive={false}
130+
sizes="(max-width: 600px) 100vw, 50vw"
131+
/>
132+
133+
</ImageKitProvider>
134+
135+
<h1>Video</h1>
136+
137+
<Video
138+
urlEndpoint="https://ik.imagekit.io/demo/"
139+
src="sample-video.mp4"
140+
title="Video without ImageKit provider"
141+
height={300}
142+
width={300}
143+
controls={true}
144+
/>
145+
146+
{/* With ImageKit provider */}
147+
<ImageKitProvider urlEndpoint="https://ik.imagekit.io/demo/">
148+
<Video
149+
src="sample-video.mp4"
150+
title="Video with ImageKit provider"
151+
height={300}
152+
width={300}
153+
controls={true}
154+
/>
155+
156+
{/* With transformations */}
157+
<Video
158+
src="sample-video.mp4"
159+
title="Video with transformations"
160+
transformation={[{ height: 100, width: 100 }]}
161+
height={300}
162+
width={300}
163+
controls={true}
164+
/>
165+
166+
{/* Passing all props to the video tag as it is */}
167+
<Video
168+
src="sample-video.mp4"
169+
title="Video with all props"
170+
height={300}
171+
width={300}
172+
controls
173+
autoPlay
174+
loop
175+
muted
176+
playsInline
177+
preload="none"
178+
poster="https://ik.imagekit.io/demo/default-image.jpg"
179+
/>
180+
181+
{/* urlEndpoint override */}
182+
<Video
183+
urlEndpoint="https://ik.imagekit.io/demo2/"
184+
src="sample-video.mp4"
185+
title="Video with urlEndpoint override"
186+
height={300}
187+
width={300}
188+
transformation={[{ height: 100, width: 100 }]}
189+
controls={true}
190+
/>
191+
</ImageKitProvider>
192+
193+
</div>
194+
)
195+
}

‎test-app/app/root.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
isRouteErrorResponse,
3+
Links,
4+
Meta,
5+
Outlet,
6+
Scripts,
7+
ScrollRestoration,
8+
} from "react-router";
9+
10+
import type { Route } from "./+types/root";
11+
import "./app.css";
12+
13+
export const links: Route.LinksFunction = () => [
14+
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
15+
{
16+
rel: "preconnect",
17+
href: "https://fonts.gstatic.com",
18+
crossOrigin: "anonymous",
19+
},
20+
{
21+
rel: "stylesheet",
22+
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
23+
},
24+
];
25+
26+
export function Layout({ children }: { children: React.ReactNode }) {
27+
return (
28+
<html lang="en">
29+
<head>
30+
<meta charSet="utf-8" />
31+
<meta name="viewport" content="width=device-width, initial-scale=1" />
32+
<Meta />
33+
<Links />
34+
</head>
35+
<body>
36+
{children}
37+
<ScrollRestoration />
38+
<Scripts />
39+
</body>
40+
</html>
41+
);
42+
}
43+
44+
export default function App() {
45+
return <Outlet />;
46+
}
47+
48+
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
49+
let message = "Oops!";
50+
let details = "An unexpected error occurred.";
51+
let stack: string | undefined;
52+
53+
if (isRouteErrorResponse(error)) {
54+
message = error.status === 404 ? "404" : "Error";
55+
details =
56+
error.status === 404
57+
? "The requested page could not be found."
58+
: error.statusText || details;
59+
} else if (import.meta.env.DEV && error && error instanceof Error) {
60+
details = error.message;
61+
stack = error.stack;
62+
}
63+
64+
return (
65+
<main className="pt-16 p-4 container mx-auto">
66+
<h1>{message}</h1>
67+
<p>{details}</p>
68+
{stack && (
69+
<pre className="w-full p-4 overflow-x-auto">
70+
<code>{stack}</code>
71+
</pre>
72+
)}
73+
</main>
74+
);
75+
}

‎test-app/app/routes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {
2+
type RouteConfig,
3+
route,
4+
} from "@react-router/dev/routes";
5+
6+
export default [
7+
route("csr", "./routes/csr.tsx"), // client-side render
8+
route("ssr", "./routes/ssr.tsx"), // server-side render
9+
] satisfies RouteConfig;

‎test-app/app/routes/csr.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Basic } from "~/components/basic";
2+
import type { Route } from "./+types/home";
3+
import { ImageEvents } from "~/components/ImageClient";
4+
import { useState, useEffect } from "react";
5+
6+
export function meta({ }: Route.MetaArgs) {
7+
return [
8+
{ title: "New React Router App" },
9+
{ name: "description", content: "Welcome to React Router!" },
10+
];
11+
}
12+
13+
export default function CSR() {
14+
const [pageLoaded, setPageLoaded] = useState(false);
15+
useEffect(() => {
16+
setPageLoaded(true);
17+
}, []);
18+
19+
if (!pageLoaded) {
20+
return <>
21+
Loading...
22+
</>
23+
}
24+
25+
return (
26+
<div className="container">
27+
<Basic />
28+
<h1>Advanced</h1>
29+
<ImageEvents />
30+
</div>
31+
)
32+
}

0 commit comments

Comments
 (0)