Skip to content

Commit cd8fed6

Browse files
manu4543manu4543
committed
Update .gitignore, add Playwright tests, and modify Test.vue for improved image handling
1 parent cd050ff commit cd8fed6

File tree

6 files changed

+20
-8
lines changed

6 files changed

+20
-8
lines changed

‎test-apps/vue-ts/.gitignore‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,10 @@ coverage
2929

3030
*.tsbuildinfo
3131

32-
package-lock.json
32+
package-lock.json
33+
34+
/blob-report/
35+
/coverage
36+
/playwright/.cache/
37+
/playwright-report/
38+
/test-results/

‎test-apps/vue-ts/e2e/__snapshot__/basic.spec.ts/Test-case-1.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="container"><div><h1>Image</h1><img alt="Image without ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Custom srcset ignored" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with width not number, should produce larger srcset" width="300px" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="With transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with queryParameters" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img alt="Responsive image with sizes" height="300" width="300" loading="lazy" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" loading="lazy" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Image with urlEndpoint override" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with className" class="custom-class" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with lazy loading eager" height="300" width="300" loading="eager" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with path transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img alt="Image with path transformation + custom transformations" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img alt="path not respected with absolute url" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="No width" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Custom deviceBreakpoints" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,c-at_max 200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 400w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max 800w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max"><img alt="Image with responsive off" height="300" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with path transformation" height="300" width="300" src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4"></video></div></div>

test-apps/vue-ts/e2e/test.ts renamed to test-apps/vue-ts/e2e/basic.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { test, expect } from "@playwright/test";
22

3-
test("CSR test case", async ({ page }) => {
4-
await page.goto("/csr");
3+
test("Test case", async ({ page }) => {
4+
await page.goto("/");
55

66
// Scroll to the bottom of the page
77
await page.evaluate(() => {

‎test-apps/vue-ts/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"start": "npm run build && npm run preview",
1010
"preview": "vite preview",
1111
"build-only": "vite build",
12-
"type-check": "vue-tsc --build"
12+
"type-check": "vue-tsc --build",
13+
"test:e2e": "playwright test",
14+
"test:e2e-update": "playwright test --update-snapshots"
1315
},
1416
"dependencies": {
1517
"@playwright/test": "^1.52.0",

‎test-apps/vue-ts/playwright.config.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import { defineConfig, devices } from "@playwright/test";
22
import path from "path";
33

44
// Use process.env.PORT by default and fallback to port 3000
5-
const PORT = process.env.PORT || 3000;
5+
const PORT = process.env.PORT || 4173;
66

77
// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
88
const baseURL = `http://localhost:${PORT}`;
99

1010
// Reference: https://playwright.dev/docs/test-configuration
11-
export default defineConfig({
11+
12+
const config = {
1213
// Timeout per test
1314
timeout: 30 * 1000,
1415
// Test directory
@@ -76,4 +77,5 @@ export default defineConfig({
7677
// use: devices["iPhone 12"],
7778
// },
7879
],
79-
});
80+
}
81+
export default defineConfig(config);

‎test-apps/vue-ts/src/components/Test.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@ import {Image, ImageKitProvider, Video} from "@imagekit/vue"
3434
/>
3535

3636
<!-- Width not number -->
37+
<!-- @vue-ignore -->
3738
<Image
3839
src="/default-image.jpg"
39-
alt="Image with width not number, should produce larger srcset"
40+
alt="Image with width not number, should produce larger srcset"
4041
width="300px"
4142
/>
4243

0 commit comments

Comments
 (0)