From 61bb24d56e14096c5de22755492018f08db20e92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Sun, 3 May 2026 20:05:24 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=A2=A8=E9=9F=B5?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=EF=BC=8C?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E4=B8=89=E7=AB=AF=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8CDOM=E5=B1=9E=E6=80=A7=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../effects/ink-data-morph.test.tsx           | 92 ++++++++++++++++---
 1 file changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/components/effects/ink-data-morph.test.tsx b/src/components/effects/ink-data-morph.test.tsx
index 143e6b1..f8ed106 100644
--- a/src/components/effects/ink-data-morph.test.tsx
+++ b/src/components/effects/ink-data-morph.test.tsx
@@ -10,20 +10,32 @@ class MockCanvasContext {
   fillStyle = '';
   strokeStyle = '';
   lineWidth = 0;
+  lineCap = '';
+  globalAlpha = 1;
+  globalCompositeOperation = 'source-over';
   beginPath = jest.fn();
   arc = jest.fn();
+  ellipse = jest.fn();
   fill = jest.fn();
   stroke = jest.fn();
   moveTo = jest.fn();
   lineTo = jest.fn();
+  quadraticCurveTo = jest.fn();
+  closePath = jest.fn();
   save = jest.fn();
   restore = jest.fn();
   clearRect = jest.fn();
   fillRect = jest.fn();
   setTransform = jest.fn();
+  translate = jest.fn();
+  rotate = jest.fn();
   createRadialGradient = jest.fn(() => ({
     addColorStop: jest.fn(),
   }));
+  createLinearGradient = jest.fn(() => ({
+    addColorStop: jest.fn(),
+  }));
+  createPattern = jest.fn(() => ({}));
 }
 
 describe('InkDataMorph', () => {
@@ -100,29 +112,87 @@ describe('InkDataMorph', () => {
     });
   });
 
-  describe('Props', () => {
-    it('should accept custom colors', () => {
+  describe('Responsive behavior', () => {
+    it('should render on mobile viewport with reduced effects', () => {
       const { container } = render(
-        <div style={{ width: 960, height: 540 }}>
-          <InkDataMorph
-            primaryColor="#000000"
-            accentColor="#FF0000"
-            connectionColor="#00FF00"
-          />
+        <div style={{ width: 375, height: 667 }}>
+          <InkDataMorph />
         </div>
       );
       const canvas = container.querySelector('canvas');
       expect(canvas).toBeInTheDocument();
     });
 
-    it('should accept custom particleCount', () => {
+    it('should render on tablet viewport', () => {
       const { container } = render(
-        <div style={{ width: 960, height: 540 }}>
-          <InkDataMorph particleCount={50} />
+        <div style={{ width: 900, height: 600 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render on desktop viewport with full effects', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
         </div>
       );
       const canvas = container.querySelector('canvas');
       expect(canvas).toBeInTheDocument();
     });
   });
+
+  describe('Ink wash enhancement', () => {
+    it('should render without errors on mobile without feibai', () => {
+      const { container } = render(
+        <div style={{ width: 375, height: 667 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render without errors on tablet with feibai', () => {
+      const { container } = render(
+        <div style={{ width: 900, height: 600 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render without errors on desktop with full effects', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render canvas with correct aria attributes', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('should accept custom className prop', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph className="ink-enhanced" />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveClass('ink-enhanced');
+    });
+  });
 });