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 = '';
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');
});
});
});