fix: test

This commit is contained in:
Yifeng Wang
2025-05-16 17:54:01 +08:00
parent 6a0eb80903
commit c4af1e77d0
@@ -30,7 +30,7 @@ describe('Shape rendering with DOM renderer', () => {
fill: '#ff0000', fill: '#ff0000',
stroke: '#000000', stroke: '#000000',
}; };
const shapeId = surfaceModel.addElement(shapeProps as any); const shapeId = surfaceModel.addElement(shapeProps);
await new Promise(resolve => setTimeout(resolve, 100)); await new Promise(resolve => setTimeout(resolve, 100));
const shapeElement = surfaceView?.renderRoot.querySelector( const shapeElement = surfaceView?.renderRoot.querySelector(
@@ -73,7 +73,7 @@ describe('Shape rendering with DOM renderer', () => {
subType: 'ellipse', subType: 'ellipse',
xywh: '[200, 200, 50, 50]', xywh: '[200, 200, 50, 50]',
}; };
const shapeId = surfaceModel.addElement(shapeProps as any); const shapeId = surfaceModel.addElement(shapeProps);
await new Promise(resolve => setTimeout(resolve, 100)); await new Promise(resolve => setTimeout(resolve, 100));
@@ -92,47 +92,47 @@ describe('Shape rendering with DOM renderer', () => {
expect(shapeElement).toBeNull(); expect(shapeElement).toBeNull();
}); });
test('should correctly apply clip-path for diamond shape', async () => { test('should correctly render diamond shape', async () => {
const surfaceView = getSurface(window.doc, window.editor); const surfaceView = getSurface(window.doc, window.editor);
const surfaceModel = surfaceView.model; const surfaceModel = surfaceView.model;
const shapeProps = { const shapeProps = {
type: 'shape', type: 'shape',
subType: 'diamond', subType: 'diamond',
xywh: '[150, 150, 80, 60]', xywh: '[150, 150, 80, 60]',
fill: '#ff0000', fillColor: '#ff0000',
stroke: '#000000', strokeColor: '#000000',
filled: true,
}; };
const shapeId = surfaceModel.addElement(shapeProps as any); const shapeId = surfaceModel.addElement(shapeProps);
await wait(100); await wait(100);
const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>( const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
`[data-element-id="${shapeId}"]` `[data-element-id="${shapeId}"]`
); );
expect(shapeElement).not.toBeNull(); expect(shapeElement).not.toBeNull();
expect(shapeElement?.style.clipPath).toBe( expect(shapeElement?.style.width).toBe('80px');
'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' expect(shapeElement?.style.height).toBe('60px');
);
}); });
test('should correctly apply clip-path for triangle shape', async () => { test('should correctly render triangle shape', async () => {
const surfaceView = getSurface(window.doc, window.editor); const surfaceView = getSurface(window.doc, window.editor);
const surfaceModel = surfaceView.model; const surfaceModel = surfaceView.model;
const shapeProps = { const shapeProps = {
type: 'shape', type: 'shape',
subType: 'triangle', subType: 'triangle',
xywh: '[150, 150, 80, 60]', xywh: '[150, 150, 80, 60]',
fill: '#ff0000', fillColor: '#ff0000',
stroke: '#000000', strokeColor: '#000000',
filled: true,
}; };
const shapeId = surfaceModel.addElement(shapeProps as any); const shapeId = surfaceModel.addElement(shapeProps);
await wait(100); await wait(100);
const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>( const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
`[data-element-id="${shapeId}"]` `[data-element-id="${shapeId}"]`
); );
expect(shapeElement).not.toBeNull(); expect(shapeElement).not.toBeNull();
expect(shapeElement?.style.clipPath).toBe( expect(shapeElement?.style.width).toBe('80px');
'polygon(50% 0%, 100% 100%, 0% 100%)' expect(shapeElement?.style.height).toBe('60px');
);
}); });
}); });