From 75e60d5eb27b577848b8aad24eb0594cc30f8f2c Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Fri, 25 Jun 2021 13:21:33 +0100 Subject: [PATCH] Adds more tests for code --- __tests__/__snapshots__/code.test.ts.snap | 71 ++++++++++++++++++++++- __tests__/code.test.ts | 68 ++++++++++++++-------- state/code/generate.ts | 2 + state/code/text.ts | 12 +++- state/shape-utils/text.tsx | 5 +- types.ts | 1 - 6 files changed, 128 insertions(+), 31 deletions(-) diff --git a/__tests__/__snapshots__/code.test.ts.snap b/__tests__/__snapshots__/code.test.ts.snap index 26ec8ccab..f9638fa3d 100644 --- a/__tests__/__snapshots__/code.test.ts.snap +++ b/__tests__/__snapshots__/code.test.ts.snap @@ -1,6 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`selection creates a code control: generated code controls from code 1`] = `Object {}`; +exports[`selection creates a code control: generated code controls from code 1`] = ` +Object { + "test-number-control": Object { + "id": "test-number-control", + "label": "x", + "step": 1, + "type": "number", + "value": 0, + }, +} +`; exports[`selection generates a draw shape: generated draw from code 1`] = ` Array [ @@ -75,6 +85,35 @@ Array [ ] `; +exports[`selection generates a text shape: generated draw from code 1`] = ` +Array [ + Object { + "childIndex": 1, + "id": "test-text", + "isAspectRatioLocked": false, + "isGenerated": true, + "isHidden": false, + "isLocked": false, + "name": "Test text", + "parentId": "page1", + "point": Array [ + 100, + 100, + ], + "rotation": 0, + "scale": 1, + "style": Object { + "color": "Red", + "dash": "Dotted", + "isFilled": false, + "size": "Large", + }, + "text": "Hello world!", + "type": "text", + }, +] +`; + exports[`selection generates an arrow shape: generated draw from code 1`] = ` Array [ Object { @@ -230,3 +269,33 @@ Object { }, } `; + +exports[`selection updates a code control: rectangle in state after changing code control 1`] = ` +Object { + "childIndex": 1, + "id": "test-rectangle", + "isAspectRatioLocked": false, + "isGenerated": true, + "isHidden": false, + "isLocked": false, + "name": "Test Rectangle", + "parentId": "page1", + "point": Array [ + 0, + 100, + ], + "radius": 2, + "rotation": 0, + "size": Array [ + 0, + 0, + ], + "style": Object { + "color": "Red", + "dash": "Dotted", + "isFilled": false, + "size": "Medium", + }, + "type": "rectangle", +} +`; diff --git a/__tests__/code.test.ts b/__tests__/code.test.ts index fa5e604d1..4c6602035 100644 --- a/__tests__/code.test.ts +++ b/__tests__/code.test.ts @@ -1,6 +1,6 @@ import state from 'state' import { generateFromCode } from 'state/code/generate' -import { getShapes } from 'utils' +import { getShape, getShapes } from 'utils' import * as json from './__mocks__/document.json' jest.useRealTimers() @@ -56,16 +56,9 @@ describe('selection', () => { it('creates a code control', async () => { const code = ` - const rectangle = new Rectangle({ - id: "test-rectangle", - name: 'Test Rectangle', - point: [100, 100], - size: [200, 200], - style: { - size: SizeStyle.Medium, - color: ColorStyle.Red, - dash: DashStyle.Dotted, - }, + new NumberControl({ + id: "test-number-control", + label: "x" }) ` @@ -80,18 +73,6 @@ describe('selection', () => { it('updates a code control', async () => { const code = ` - const rectangle = new Rectangle({ - id: "test-rectangle", - name: 'Test Rectangle', - point: [100, 100], - size: [200, 200], - style: { - size: SizeStyle.Medium, - color: ColorStyle.Red, - dash: DashStyle.Dotted, - }, - }) - new NumberControl({ id: "test-number-control", label: "x" @@ -101,6 +82,18 @@ describe('selection', () => { id: "test-vector-control", label: "size" }) + + const rectangle = new Rectangle({ + id: "test-rectangle", + name: 'Test Rectangle', + point: [controls.x, 100], + size: controls.size, + style: { + size: SizeStyle.Medium, + color: ColorStyle.Red, + dash: DashStyle.Dotted, + }, + }) ` const { controls, shapes } = await generateFromCode(state.data, code) @@ -112,6 +105,10 @@ describe('selection', () => { expect(state.data.codeControls).toMatchSnapshot( 'data in state after changing control' ) + + expect(getShape(state.data, 'test-rectangle')).toMatchSnapshot( + 'rectangle in state after changing code control' + ) }) /* -------------------- Readonly -------------------- */ @@ -251,7 +248,7 @@ describe('selection', () => { it('generates an arrow shape', async () => { state.send('CLEARED_PAGE') const code = ` - const ellipse = new Arrow({ + const draw = new Arrow({ id: 'test-draw', name: 'Test draw', points: [[100, 100], [200,200], [300,300]], @@ -269,4 +266,27 @@ describe('selection', () => { expect(getShapes(state.data)).toMatchSnapshot('generated draw from code') }) + + it('generates a text shape', async () => { + state.send('CLEARED_PAGE') + const code = ` + const text = new Text({ + id: 'test-text', + name: 'Test text', + point: [100, 100], + text: 'Hello world!', + style: { + size: SizeStyle.Large, + color: ColorStyle.Red, + dash: DashStyle.Dotted, + }, + }) + ` + + const { controls, shapes } = await generateFromCode(state.data, code) + + state.send('GENERATED_FROM_CODE', { controls, shapes }) + + expect(getShapes(state.data)).toMatchSnapshot('generated draw from code') + }) }) diff --git a/state/code/generate.ts b/state/code/generate.ts index 2d85a97ba..abdd9e186 100644 --- a/state/code/generate.ts +++ b/state/code/generate.ts @@ -17,6 +17,7 @@ import { Shape, DashStyle, ColorStyle, + FontSize, SizeStyle, } from 'types' import { getPage, getShapes } from 'utils' @@ -39,6 +40,7 @@ const baseScope = { DashStyle, ColorStyle, SizeStyle, + FontSize, } /** diff --git a/state/code/text.ts b/state/code/text.ts index e1d385fbc..94082ca4c 100644 --- a/state/code/text.ts +++ b/state/code/text.ts @@ -1,7 +1,8 @@ import CodeShape from './index' import { uniqueId } from 'utils' -import { TextShape, ShapeProps, ShapeType, FontSize } from 'types' +import { TextShape, ShapeProps, ShapeType } from 'types' import { defaultStyle } from 'state/shape-styles' +import { getShapeUtils } from 'state/shape-utils' /* ----------------- Start Copy Here ---------------- */ @@ -22,7 +23,6 @@ export default class Text extends CodeShape { isHidden: false, text: 'Text', scale: 1, - fontSize: FontSize.Medium, ...props, style: { ...defaultStyle, @@ -30,4 +30,12 @@ export default class Text extends CodeShape { }, }) } + + get scale(): number { + return this.shape.scale + } + + set scale(scale: number) { + getShapeUtils(this.shape).setProperty(this.shape, 'scale', scale) + } } diff --git a/state/shape-utils/text.tsx b/state/shape-utils/text.tsx index 0475af337..bd818dfdd 100644 --- a/state/shape-utils/text.tsx +++ b/state/shape-utils/text.tsx @@ -1,6 +1,6 @@ import { uniqueId, isMobile } from 'utils' import vec from 'utils/vec' -import { TextShape, ShapeType, FontSize } from 'types' +import { TextShape, ShapeType } from 'types' import { defaultStyle, getFontSize, @@ -53,7 +53,6 @@ const text = registerShapeUtils({ create(props) { return { id: uniqueId(), - type: ShapeType.Text, isGenerated: false, name: 'Text', @@ -67,7 +66,6 @@ const text = registerShapeUtils({ style: defaultStyle, text: '', scale: 1, - fontSize: FontSize.Medium, ...props, } }, @@ -118,6 +116,7 @@ const text = registerShapeUtils({ fontSize={fontSize} width={bounds.width} height={bounds.height} + fill={styles.stroke} dominantBaseline="hanging" > {str} diff --git a/types.ts b/types.ts index bcacdbf4b..461f39022 100644 --- a/types.ts +++ b/types.ts @@ -182,7 +182,6 @@ export interface TextShape extends BaseShape { type: ShapeType.Text text: string scale: number - fontSize: FontSize } export interface GroupShape extends BaseShape {