test: 更新墨韵增强单元测试,覆盖三端响应式和DOM属性验证

This commit is contained in:
张翔
2026-05-03 20:05:24 +08:00
parent 9bba35027e
commit 61bb24d56e
+81 -11
View File
@@ -10,20 +10,32 @@ class MockCanvasContext {
fillStyle = ''; fillStyle = '';
strokeStyle = ''; strokeStyle = '';
lineWidth = 0; lineWidth = 0;
lineCap = '';
globalAlpha = 1;
globalCompositeOperation = 'source-over';
beginPath = jest.fn(); beginPath = jest.fn();
arc = jest.fn(); arc = jest.fn();
ellipse = jest.fn();
fill = jest.fn(); fill = jest.fn();
stroke = jest.fn(); stroke = jest.fn();
moveTo = jest.fn(); moveTo = jest.fn();
lineTo = jest.fn(); lineTo = jest.fn();
quadraticCurveTo = jest.fn();
closePath = jest.fn();
save = jest.fn(); save = jest.fn();
restore = jest.fn(); restore = jest.fn();
clearRect = jest.fn(); clearRect = jest.fn();
fillRect = jest.fn(); fillRect = jest.fn();
setTransform = jest.fn(); setTransform = jest.fn();
translate = jest.fn();
rotate = jest.fn();
createRadialGradient = jest.fn(() => ({ createRadialGradient = jest.fn(() => ({
addColorStop: jest.fn(), addColorStop: jest.fn(),
})); }));
createLinearGradient = jest.fn(() => ({
addColorStop: jest.fn(),
}));
createPattern = jest.fn(() => ({}));
} }
describe('InkDataMorph', () => { describe('InkDataMorph', () => {
@@ -100,29 +112,87 @@ describe('InkDataMorph', () => {
}); });
}); });
describe('Props', () => { describe('Responsive behavior', () => {
it('should accept custom colors', () => { it('should render on mobile viewport with reduced effects', () => {
const { container } = render( const { container } = render(
<div style={{ width: 960, height: 540 }}> <div style={{ width: 375, height: 667 }}>
<InkDataMorph <InkDataMorph />
primaryColor="#000000"
accentColor="#FF0000"
connectionColor="#00FF00"
/>
</div> </div>
); );
const canvas = container.querySelector('canvas'); const canvas = container.querySelector('canvas');
expect(canvas).toBeInTheDocument(); expect(canvas).toBeInTheDocument();
}); });
it('should accept custom particleCount', () => { it('should render on tablet viewport', () => {
const { container } = render( const { container } = render(
<div style={{ width: 960, height: 540 }}> <div style={{ width: 900, height: 600 }}>
<InkDataMorph particleCount={50} /> <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> </div>
); );
const canvas = container.querySelector('canvas'); const canvas = container.querySelector('canvas');
expect(canvas).toBeInTheDocument(); 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');
});
});
}); });