tldraw/__tests__/commands/toggle.test.ts

import { ShapeType } from 'types'
import TestState from '../test-utils'

describe('toggle command', () => {
  const tt = new TestState()
  tt.resetDocumentState()
    .createShape(
      {
        type: ShapeType.Rectangle,
        point: [0, 0],
        size: [100, 100],
        childIndex: 1,
        isLocked: false,
        isHidden: false,
        isAspectRatioLocked: false,
      },
      'rect1'
    )
    .createShape(
      {
        type: ShapeType.Rectangle,
        point: [400, 0],
        size: [100, 100],
        childIndex: 2,
        isHidden: false,
        isLocked: false,
        isAspectRatioLocked: false,
      },
      'rect2'
    )
    .createShape(
      {
        type: ShapeType.Rectangle,
        point: [800, 0],
        size: [100, 100],
        childIndex: 3,
        isHidden: true,
        isLocked: true,
        isAspectRatioLocked: true,
      },
      'rect3'
    )
    .createShape(
      {
        type: ShapeType.Rectangle,
        point: [1000, 0],
        size: [100, 100],
        childIndex: 4,
        isHidden: true,
        isLocked: true,
        isAspectRatioLocked: true,
      },
      'rect4'
    )
    .save()

  describe('toggles properties on single shape', () => {
    it('does command', () => {
      tt.restore().clickShape('rect1')

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(true)

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(false)
    })

    it('undoes and redoes command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore().clickShape('rect1')

      tt.send('TOGGLED_SHAPE_LOCK')

      tt.send('UNDO')

      expect(tt.getShape('rect1').isLocked).toBe(false)

      tt.send('REDO')

      expect(tt.getShape('rect1').isLocked).toBe(true)
    })
  })

  describe('toggles properties on shapes with matching properties, starting from false', () => {
    it('does command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore().clickShape('rect1').clickShape('rect2', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(true)
      expect(tt.getShape('rect2').isLocked).toBe(true)

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(false)
      expect(tt.getShape('rect2').isLocked).toBe(false)

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(true)
      expect(tt.getShape('rect2').isLocked).toBe(true)
    })

    it('undoes and redoes command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore().clickShape('rect1').clickShape('rect2', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK').undo()

      expect(tt.getShape('rect1').isLocked).toBe(false)
      expect(tt.getShape('rect2').isLocked).toBe(false)

      tt.redo()

      expect(tt.getShape('rect1').isLocked).toBe(true)
      expect(tt.getShape('rect2').isLocked).toBe(true)
    })
  })

  describe('toggles properties on shapes with matching properties, starting from true', () => {
    it('does command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore().clickShape('rect3').clickShape('rect4', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect3').isLocked).toBe(false)
      expect(tt.getShape('rect4').isLocked).toBe(false)

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect3').isLocked).toBe(true)
      expect(tt.getShape('rect4').isLocked).toBe(true)
    })

    it('undoes and redoes command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore().clickShape('rect3').clickShape('rect4', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK').undo()

      expect(tt.getShape('rect3').isLocked).toBe(true)
      expect(tt.getShape('rect4').isLocked).toBe(true)

      tt.redo()

      expect(tt.getShape('rect3').isLocked).toBe(false)
      expect(tt.getShape('rect4').isLocked).toBe(false)
    })
  })

  describe('toggles properties on shapes with different properties', () => {
    it('does command', () => {
      // Restore the saved data state, with the initial selection
      tt.restore()
        .clickShape('rect1')
        .clickShape('rect2', { shiftKey: true })
        .clickShape('rect3', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(true)
      expect(tt.getShape('rect2').isLocked).toBe(true)
      expect(tt.getShape('rect3').isLocked).toBe(true)

      tt.send('TOGGLED_SHAPE_LOCK')

      expect(tt.getShape('rect1').isLocked).toBe(false)
      expect(tt.getShape('rect2').isLocked).toBe(false)
      expect(tt.getShape('rect3').isLocked).toBe(false)
    })

    it('undoes and redoes command', () => {
      tt.restore()
        .clickShape('rect1')
        .clickShape('rect2', { shiftKey: true })
        .clickShape('rect3', { shiftKey: true })

      tt.send('TOGGLED_SHAPE_LOCK').undo()

      expect(tt.getShape('rect1').isLocked).toBe(false)
      expect(tt.getShape('rect2').isLocked).toBe(false)
      expect(tt.getShape('rect3').isLocked).toBe(true)

      tt.redo()

      expect(tt.getShape('rect1').isLocked).toBe(true)
      expect(tt.getShape('rect2').isLocked).toBe(true)
      expect(tt.getShape('rect3').isLocked).toBe(true)
    })
  })

  describe('catch all for other toggle props', () => {
    const eventPropertyPairs = {
      TOGGLED_SHAPE_LOCK: 'isLocked',
      TOGGLED_SHAPE_HIDE: 'isHidden',
      TOGGLED_SHAPE_ASPECT_LOCK: 'isAspectRatioLocked',
    }

    it('toggles all event property pairs', () => {
      Object.entries(eventPropertyPairs).forEach(([eventName, propName]) => {
        // Restore the saved data state, with the initial selection
        tt.restore()
          .clickShape('rect1')
          .clickShape('rect2', { shiftKey: true })
          .clickShape('rect3', { shiftKey: true })

        tt.send(eventName)

        expect(tt.getShape('rect1')[propName]).toBe(true)
        expect(tt.getShape('rect2')[propName]).toBe(true)
        expect(tt.getShape('rect3')[propName]).toBe(true)

        tt.undo()

        expect(tt.getShape('rect1')[propName]).toBe(false)
        expect(tt.getShape('rect2')[propName]).toBe(false)
        expect(tt.getShape('rect3')[propName]).toBe(true)

        tt.redo()

        expect(tt.getShape('rect1')[propName]).toBe(true)
        expect(tt.getShape('rect2')[propName]).toBe(true)
        expect(tt.getShape('rect3')[propName]).toBe(true)

        tt.send(eventName)

        expect(tt.getShape('rect1')[propName]).toBe(false)
        expect(tt.getShape('rect2')[propName]).toBe(false)
        expect(tt.getShape('rect3')[propName]).toBe(false)
      })
    })
  })
})