From 613168c0ef57981e6a3fdf2cbe6f0400c4350ff6 Mon Sep 17 00:00:00 2001
From: sunyiteng <sunyiteng@bytedance.com>
Date: Wed, 18 Dec 2024 16:19:33 +0800
Subject: [PATCH] chore: update the example

---
 examples/react-component-bundle/src/index.tsx |  2 +-
 tests/e2e/react-component/index.pw.test.ts    | 18 +++++++++++++++---
 tests/e2e/react-component/rsbuild.config.ts   |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx
index 40b402601..b9ceb8718 100644
--- a/examples/react-component-bundle/src/index.tsx
+++ b/examples/react-component-bundle/src/index.tsx
@@ -8,7 +8,7 @@ export const Counter: React.FC = () => {
 
   return (
     <div>
-      <h1 className="counter-title">Counter React Component</h1>
+      <h1 className="counter-title">React</h1>
       <h2 className="counter-text">Counter: {count}</h2>
       <CounterButton onClick={decrement} label="-" />
       <CounterButton onClick={increment} label="+" />
diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts
index c5ba1b514..fc0adde17 100644
--- a/tests/e2e/react-component/index.pw.test.ts
+++ b/tests/e2e/react-component/index.pw.test.ts
@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { type Page, expect, test } from '@playwright/test';
 import { dev } from 'test-helper/rsbuild';
+import assert from 'node:assert';
 
 function getCwdByExample(exampleName: string) {
   return path.join(__dirname, '../../../examples', exampleName);
@@ -27,9 +28,19 @@ async function styleShouldWork(page: Page) {
 
   const buttonEl = page.locator('#root button');
   const [subtractEl, addEl] = await buttonEl.all();
-  subtractEl &&
-    expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
-  addEl && expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+  assert(subtractEl);
+  assert(addEl);
+  expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+  expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+}
+
+async function assetShouldWork(page: Page) {
+  // asset in css url('./logo.svg')
+  const h1El = page.locator('h1');
+  assert(h1El);
+  expect(h1El).toHaveCSS('background', /static\/svg\/logo/);
+
+  // TODO: asset in js
 }
 
 test('should render example "react-component-bundle" successfully', async ({
@@ -43,6 +54,7 @@ test('should render example "react-component-bundle" successfully', async ({
 
   await counterCompShouldWork(page);
   await styleShouldWork(page);
+  await assetShouldWork(page);
   await rsbuild.close();
 });
 
diff --git a/tests/e2e/react-component/rsbuild.config.ts b/tests/e2e/react-component/rsbuild.config.ts
index 75d709864..54298e789 100644
--- a/tests/e2e/react-component/rsbuild.config.ts
+++ b/tests/e2e/react-component/rsbuild.config.ts
@@ -62,6 +62,7 @@ export default defineConfig({
   },
   output: {
     target: 'web',
+    dataUriLimit: 0
   },
   plugins: [
     pluginReact({