test: reorganize assets e2e cases (#3841)

e2e/cases/assets/assets-inline-auto/index.test.ts

@@ -0,0 +1,19 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+test('should inline small assets automatically', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    page,
+    plugins: [pluginReact()],
+  });
+
+  await expect(
+    page.evaluate(
+      `document.getElementById('test-img').src.startsWith('data:image/png')`,
+    ),
+  ).resolves.toBeTruthy();
+
+  await rsbuild.close();
+});

e2e/cases/assets/assets-inline-false/index.test.ts

@@ -0,0 +1,21 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+test('should allow to disable assets inline with `?__inline=false`', async ({
+  page,
+}) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    page,
+    plugins: [pluginReact()],
+  });
+
+  await expect(
+    page.evaluate(
+      `document.getElementById('test-img').src.includes('static/image/icon')`,
+    ),
+  ).resolves.toBeTruthy();
+
+  await rsbuild.close();
+});

e2e/cases/assets/assets-inline/index.test.ts

@@ -0,0 +1,19 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+test('should allow to inline assets with `?inline`', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    page,
+    plugins: [pluginReact()],
+  });
+
+  await expect(
+    page.evaluate(
+      `document.getElementById('test-img').src.startsWith('data:image/png')`,
+    ),
+  ).resolves.toBeTruthy();
+
+  await rsbuild.close();
+});

e2e/cases/assets/assets-url/index.test.ts

@@ -0,0 +1,19 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+test('should allow to get assets URL with `?url`', async ({ page }) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    page,
+    plugins: [pluginReact()],
+  });
+
+  await expect(
+    page.evaluate(
+      `document.getElementById('test-img').src.includes('static/image/icon')`,
+    ),
+  ).resolves.toBeTruthy();
+
+  await rsbuild.close();
+});

e2e/cases/output/assets.test.ts → e2e/cases/output/data-uri-limit/assets.test.ts

@@ -1,19 +1,11 @@
-import { join } from 'node:path';
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 import { pluginReact } from '@rsbuild/plugin-react';
 
-const fixtures = __dirname;
-
 const cases = [
-  {
-    name: 'assets(default)',
-    cwd: join(fixtures, 'assets'),
-    expected: 'inline',
-  },
   {
     name: 'assets(dataUriLimit 0)',
-    cwd: join(fixtures, 'assets'),
+    cwd: __dirname,
     config: {
       output: {
         dataUriLimit: 0,
@@ -23,7 +15,7 @@ const cases = [
   },
   {
     name: 'assets(dataUriLimit.image 0)',
-    cwd: join(fixtures, 'assets'),
+    cwd: __dirname,
     config: {
       output: {
         dataUriLimit: {
@@ -35,7 +27,7 @@ const cases = [
   },
   {
     name: 'assets(dataUriLimit max number)',
-    cwd: join(fixtures, 'assets'),
+    cwd: __dirname,
     config: {
       output: {
         dataUriLimit: {
@@ -45,26 +37,6 @@ const cases = [
     },
     expected: 'inline',
   },
-  {
-    name: 'assets-url',
-    cwd: join(fixtures, 'assets-url'),
-    expected: 'url',
-  },
-  {
-    name: 'assets-no-inline',
-    cwd: join(fixtures, 'assets-no-inline'),
-    expected: 'url',
-  },
-  {
-    name: 'assets__inline',
-    cwd: join(fixtures, 'assets__inline'),
-    expected: 'inline',
-  },
-  {
-    name: 'assets-inline',
-    cwd: join(fixtures, 'assets-inline'),
-    expected: 'inline',
-  },
 ];
 
 for (const item of cases) {

e2e/cases/output/assets__inline/src/App.jsx → e2e/cases/output/data-uri-limit/src/App.jsx

@@ -1,4 +1,4 @@
-import img from '@assets/icon.png?inline';
+import img from '@assets/icon.png';
 
 function App() {
   return (