test: add e2e case

Author: chenjiahan

test/basic/index.test.ts

@@ -1,44 +1,45 @@
-import { dirname } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
 import { createRsbuild } from '@rsbuild/core';
 import { pluginImageCompress } from '../../src';
-import { getRandomPort } from '../helper';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-test('should render page as expected', async ({ page }) => {
+test('should compress image with use plugin-image-compress', async () => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
       plugins: [pluginImageCompress()],
-      server: {
-        port: getRandomPort(),
-      },
     },
   });
 
-  const { server, urls } = await rsbuild.startDevServer();
-
-  await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
-
-  await server.close();
-});
-
-test('should build succeed', async ({ page }) => {
-  const rsbuild = await createRsbuild({
-    cwd: __dirname,
-    rsbuildConfig: {
-      plugins: [pluginImageCompress()],
-    },
-  });
-
-  await rsbuild.build();
-  const { server, urls } = await rsbuild.preview();
-
-  await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
-
-  await server.close();
+  await expect(rsbuild.build()).resolves.toBeDefined();
+
+  const jpeg = readFileSync(
+    join(__dirname, 'dist/static/image/image.jpeg'),
+    'utf-8',
+  );
+  const png = readFileSync(
+    join(__dirname, 'dist/static/image/image.png'),
+    'utf-8',
+  );
+  const svg = readFileSync(
+    join(__dirname, 'dist/static/image/mobile.svg'),
+    'utf-8',
+  );
+  // const ico = names.find((item) => item.endsWith('.ico'))!;
+
+  const assetsDir = join(__dirname, '../assets');
+  const originJpeg = readFileSync(join(assetsDir, 'image.jpeg'), 'utf-8');
+  const originPng = readFileSync(join(assetsDir, 'image.png'), 'utf-8');
+  const originSvg = readFileSync(join(assetsDir, 'mobile.svg'), 'utf-8');
+  // const originIco = readFileSync(join(assetsDir, 'image.ico'), 'utf-8');
+
+  expect(outputs[jpeg].length).toBeLessThan(originJpeg.length);
+  expect(outputs[png].length).toBeLessThan(originPng.length);
+  expect(outputs[svg].length).toBeLessThan(originSvg.length);
+  // TODO ico file size is not less than origin
+  // expect(outputs[ico].length).toBeLessThan(originIco.length);
 });

test/basic/src/index.js

@@ -1 +1,12 @@
-window.test = 1;
+import imageIco from '../../assets/image.ico?url';
+import imageJpeg from '../../assets/image.jpeg?url';
+import imagePng from '../../assets/image.png?url';
+import imageSvg from '../../assets/mobile.svg?url';
+
+const images = [imageIco, imagePng, imageJpeg, imageSvg];
+
+for (const image of images) {
+  const el = new Image();
+  el.src = image;
+  document.body.appendChild(el);
+}