PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Updates code test, test utils

Browse source
This commit is contained in:
Steve Ruiz 2021-07-14 09:12:56 +01:00
parent 0855a92497
commit 67b25ad1e1
2 changed files with 65 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
__tests__/code.test.ts
View file

@ -1,36 +1,32 @@
import state from 'state'
import { generateFromCode } from 'state/code/generate' import { generateFromCode } from 'state/code/generate'
import * as json from './__mocks__/document.json' import * as json from './__mocks__/document.json'
import tld from 'utils/tld' import TestState from './test-utils'
jest.useRealTimers() jest.useRealTimers()
state.reset() const tt = new TestState()
state tt.resetDocumentState()
.send('MOUNTED')
.send('MOUNTED_SHAPES')
.send('LOADED_FROM_FILE', { json: JSON.stringify(json) }) .send('LOADED_FROM_FILE', { json: JSON.stringify(json) })
state.send('CLEARED_PAGE') .send('CLEARED_PAGE')
.save()
describe('selection', () => { describe('selection', () => {
it('opens and closes the code panel', () => { it('opens and closes the code panel', () => {
expect(state.data.settings.isCodeOpen).toBe(false) expect(tt.data.settings.isCodeOpen).toBe(false)
state.send('TOGGLED_CODE_PANEL_OPEN') tt.send('TOGGLED_CODE_PANEL_OPEN')
expect(state.data.settings.isCodeOpen).toBe(true) expect(tt.data.settings.isCodeOpen).toBe(true)
state.send('TOGGLED_CODE_PANEL_OPEN') tt.send('TOGGLED_CODE_PANEL_OPEN')
expect(state.data.settings.isCodeOpen).toBe(false) expect(tt.data.settings.isCodeOpen).toBe(false)
}) })
it('saves changes to code', () => { it('saves changes to code', () => {
expect(tld.getShapes(state.data).length).toBe(0) expect(tt.getSortedPageShapeIds().length).toBe(0)
const code = `// hello world!` const code = `// hello world!`
state.send('SAVED_CODE', { code }) tt.send('SAVED_CODE', { code })
expect(state.data.document.code[state.data.currentCodeFileId].code).toBe( expect(tt.data.document.code[tt.data.currentCodeFileId].code).toBe(code)
code
)
}) })
it('generates shapes', async () => { it('generates shapes', async () => {
@ -48,13 +44,11 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated rectangle from code')
'generated rectangle from code'
)
}) })
it('creates a code control', async () => { it('creates a code control', async () => {
@ -65,11 +59,11 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(state.data.codeControls).toMatchSnapshot( expect(tt.data.codeControls).toMatchSnapshot(
'generated code controls from code' 'generated code controls from code'
) )
}) })
@ -99,17 +93,17 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
state.send('CHANGED_CODE_CONTROL', { 'test-number-control': 100 }) tt.send('CHANGED_CODE_CONTROL', { 'test-number-control': 100 })
expect(state.data.codeControls).toMatchSnapshot( expect(tt.data.codeControls).toMatchSnapshot(
'data in state after changing control' 'data in state after changing control'
) )
expect(tld.getShape(state.data, 'test-rectangle')).toMatchSnapshot( expect(tt.getShape('test-rectangle')).toMatchSnapshot(
'rectangle in state after changing code control' 'rectangle in state after changing code control'
) )
}) })
@ -117,24 +111,21 @@ describe('selection', () => {
/* -------------------- Readonly -------------------- */ /* -------------------- Readonly -------------------- */
it('does not saves changes to code when readonly', () => { it('does not saves changes to code when readonly', () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
expect(tld.getShapes(state.data).length).toBe(0) expect(tt.getShapes().length).toBe(0)
const code = `// hello world!` const code = `// hello world!`
state tt.send('SAVED_CODE', { code })
.send('SAVED_CODE', { code })
.send('TOGGLED_READ_ONLY') .send('TOGGLED_READ_ONLY')
.send('SAVED_CODE', { code: '' }) .send('SAVED_CODE', { code: '' })
expect(state.data.document.code[state.data.currentCodeFileId].code).toBe( expect(tt.data.document.code[tt.data.currentCodeFileId].code).toBe(code)
code
)
state.send('TOGGLED_READ_ONLY').send('SAVED_CODE', { code: '' }) tt.send('TOGGLED_READ_ONLY').send('SAVED_CODE', { code: '' })
expect(state.data.document.code[state.data.currentCodeFileId].code).toBe('') expect(tt.data.document.code[tt.data.currentCodeFileId].code).toBe('')
}) })
/* --------------------- Methods -------------------- */ /* --------------------- Methods -------------------- */
@ -174,7 +165,7 @@ describe('selection', () => {
/* --------------------- Shapes --------------------- */ /* --------------------- Shapes --------------------- */
it('generates a rectangle shape', async () => { it('generates a rectangle shape', async () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
const code = ` const code = `
const rectangle = new Rectangle({ const rectangle = new Rectangle({
id: "test-rectangle", id: "test-rectangle",
@ -189,13 +180,11 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated rectangle from code')
'generated rectangle from code'
)
}) })
it('changes a rectangle size', async () => { it('changes a rectangle size', async () => {
@ -203,7 +192,7 @@ describe('selection', () => {
}) })
it('generates an ellipse shape', async () => { it('generates an ellipse shape', async () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
const code = ` const code = `
const ellipse = new Ellipse({ const ellipse = new Ellipse({
id: 'test-ellipse', id: 'test-ellipse',
@ -219,17 +208,15 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated ellipse from code')
'generated ellipse from code'
)
}) })
it('generates a draw shape', async () => { it('generates a draw shape', async () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
const code = ` const code = `
const ellipse = new Draw({ const ellipse = new Draw({
id: 'test-draw', id: 'test-draw',
@ -243,17 +230,15 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated draw from code')
'generated draw from code'
)
}) })
it('generates an arrow shape', async () => { it('generates an arrow shape', async () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
const code = ` const code = `
const draw = new Arrow({ const draw = new Arrow({
id: 'test-draw', id: 'test-draw',
@ -267,17 +252,15 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated draw from code')
'generated draw from code'
)
}) })
it('generates a text shape', async () => { it('generates a text shape', async () => {
state.send('CLEARED_PAGE') tt.send('CLEARED_PAGE')
const code = ` const code = `
const text = new Text({ const text = new Text({
id: 'test-text', id: 'test-text',
@ -292,12 +275,10 @@ describe('selection', () => {
}) })
` `
const { controls, shapes } = await generateFromCode(state.data, code) const { controls, shapes } = await generateFromCode(tt.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes }) tt.send('GENERATED_FROM_CODE', { controls, shapes })
expect(tld.getShapes(state.data)).toMatchSnapshot( expect(tt.getShapes()).toMatchSnapshot('generated draw from code')
'generated draw from code'
)
}) })
}) })

15
__tests__/test-utils.ts
View file

@ -113,6 +113,21 @@ class TestState {
.map((shape) => shape.id) .map((shape) => shape.id)
} }
/**
* Get shapes for the current page.
*
* ### Example
*
*```ts
* tt.getShapes()
*```
*/
getShapes(): Shape[] {
return Object.values(
this.data.document.pages[this.data.currentPageId].shapes
)
}
/** /**
* Get whether the provided ids are the current selected ids. If the `strict` argument is `true`, then the result will be false if the state has selected ids in addition to those provided. * Get whether the provided ids are the current selected ids. If the `strict` argument is `true`, then the result will be false if the state has selected ids in addition to those provided.
* *