Merge pull request #9 from proful/test-bounds

Added tests for bounds components
tldraw · Nov 5, 2021 · 1ae5997 · 1ae5997 · vercel · Nov 5, 2021
2 parents a8cc3a7 + fdddedd
commit 1ae5997
Show file tree

Hide file tree

Showing 14 changed files with 305 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -38,8 +38,8 @@
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.10",
-    "@types/react-dom": "^17.0.10",
     "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.13.10",

diff --git a/packages/core/src/components/binding/binding.test.tsx b/packages/core/src/components/binding/binding.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { Binding } from './binding'
 
@@ -9,18 +9,20 @@ describe('binding', () => {
     render(<Binding point={[0, 0]} type={'anchor'} />)
   })
   test('validate attributes rendered properly for anchor binding type', () => {
-    const { container } = render(<Binding point={[10, 20]} type={'anchor'} />)
-    const use = container.querySelector('use')
-    expect(use?.getAttribute('href')).toBe('#cross')
-    expect(use?.getAttribute('x')).toBe('10')
-    expect(use?.getAttribute('y')).toBe('20')
+    render(<Binding point={[10, 20]} type={'anchor'} />)
+
+    const use = screen.getByLabelText('binding cross')
+    expect(use).toHaveAttribute('href', '#cross')
+    expect(use).toHaveAttribute('x', '10')
+    expect(use).toHaveAttribute('y', '20')
   })
   test('validate attributes rendered properly for center binding type', () => {
-    const { container } = render(<Binding point={[10, 20]} type={'center'} />)
-    const circle = container.querySelector('circle')
-    expect(circle?.getAttribute('cx')).toBe('10')
-    expect(circle?.getAttribute('cy')).toBe('20')
-    expect(circle?.getAttribute('r')).toBe('8')
+    render(<Binding point={[10, 20]} type={'center'} />)
+
+    const circle = screen.getByLabelText('binding circle')
+    expect(circle).toHaveAttribute('cx', '10')
+    expect(circle).toHaveAttribute('cy', '20')
+    expect(circle).toHaveAttribute('r', '8')
   })
   test('validate no children should be rendered for pin binding type', () => {
     const { container } = render(<Binding point={[10, 20]} type={'pin'} />)

diff --git a/packages/core/src/components/binding/binding.tsx b/packages/core/src/components/binding/binding.tsx
@@ -8,8 +8,12 @@ interface BindingProps {
 export function Binding({ point: [x, y], type }: BindingProps): JSX.Element {
   return (
     <g pointerEvents="none">
-      {type === 'center' && <circle className="tl-binding" cx={x} cy={y} r={8} />}
-      {type !== 'pin' && <use className="tl-binding" href="#cross" x={x} y={y} />}
+      {type === 'center' && (
+        <circle className="tl-binding" aria-label="binding circle" cx={x} cy={y} r={8} />
+      )}
+      {type !== 'pin' && (
+        <use className="tl-binding" aria-label="binding cross" href="#cross" x={x} y={y} />
+      )}
     </g>
   )
 }
diff --git a/packages/core/src/components/bounds/bounds-bg.test.tsx b/packages/core/src/components/bounds/bounds-bg.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { BoundsBg } from './bounds-bg'
+
+jest.spyOn(console, 'error').mockImplementation(() => void null)
+
+describe('BoundsBg', () => {
+  test('mounts component without crashing', () => {
+    render(
+      <BoundsBg
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        rotation={45}
+        isHidden={false}
+      />
+    )
+  })
+  test('validate attributes for a bounds bg', () => {
+    render(
+      <BoundsBg
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        rotation={45}
+        isHidden={false}
+      />
+    )
+    const boundsBg = screen.getByLabelText('bounds bg')
+    expect(boundsBg).toHaveAttribute('height', '100')
+    expect(boundsBg).toHaveAttribute('width', '100')
+    expect(boundsBg).toHaveAttribute('opacity', '1')
+  })
+})
diff --git a/packages/core/src/components/bounds/bounds-bg.tsx b/packages/core/src/components/bounds/bounds-bg.tsx
@@ -19,6 +19,7 @@ export const BoundsBg = React.memo(({ bounds, rotation, isHidden }: BoundsBgProp
       <SVGContainer>
         <rect
           className="tl-bounds-bg"
+          aria-label="bounds bg"
           width={bounds.width}
           height={bounds.height}
           opacity={isHidden ? 0 : 1}

diff --git a/packages/core/src/components/bounds/bounds.test.tsx b/packages/core/src/components/bounds/bounds.test.tsx
@@ -1,4 +1,5 @@
 import { renderWithContext } from '~test'
+import { screen } from '@testing-library/react'
 import * as React from 'react'
 import { Bounds } from './bounds'
 
@@ -18,4 +19,27 @@ describe('bounds', () => {
       />
     )
   })
+  test('validate all attributes of bounds commponent', () => {
+    renderWithContext(
+      <Bounds
+        zoom={1}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        rotation={0}
+        viewportWidth={1000}
+        isLocked={false}
+        isHidden={false}
+        hideBindingHandles={false}
+        hideCloneHandles={false}
+        hideRotateHandle={false}
+      />
+    )
+
+    expect(screen.getByLabelText('center handle')).toBeDefined()
+    expect(screen.getByLabelText('top_edge handle')).toBeDefined()
+    expect(screen.getByLabelText('bottom_edge handle')).toBeDefined()
+    expect(screen.getByLabelText('left_edge handle')).toBeDefined()
+    expect(screen.getByLabelText('right_edge handle')).toBeDefined()
+    expect(screen.getAllByLabelText('corner transparent').length).toBe(4)
+    expect(screen.getAllByLabelText('corner handle').length).toBe(4)
+  })
 })
diff --git a/packages/core/src/components/bounds/center-handle.test.tsx b/packages/core/src/components/bounds/center-handle.test.tsx
@@ -23,11 +23,11 @@ describe('CenterHandle', () => {
       />
     )
     const centerHandle = screen.getByLabelText('center handle')
-    expect(centerHandle?.getAttribute('height')).toBe('102')
-    expect(centerHandle?.getAttribute('width')).toBe('102')
-    expect(centerHandle?.getAttribute('opacity')).toBe('1')
-    expect(centerHandle?.getAttribute('x')).toBe('-1')
-    expect(centerHandle?.getAttribute('y')).toBe('-1')
+    expect(centerHandle).toHaveAttribute('height', '102')
+    expect(centerHandle).toHaveAttribute('width', '102')
+    expect(centerHandle).toHaveAttribute('x', '-1')
+    expect(centerHandle).toHaveAttribute('y', '-1')
+    expect(centerHandle).toHaveAttribute('opacity', '1')
   })
   test('validate attributes for a hidden center handle', () => {
     render(
@@ -38,10 +38,10 @@ describe('CenterHandle', () => {
       />
     )
     const centerHandle = screen.getByLabelText('center handle')
-    expect(centerHandle?.getAttribute('height')).toBe('102')
-    expect(centerHandle?.getAttribute('width')).toBe('102')
-    expect(centerHandle?.getAttribute('opacity')).toBe('0')
-    expect(centerHandle?.getAttribute('x')).toBe('-1')
-    expect(centerHandle?.getAttribute('y')).toBe('-1')
+    expect(centerHandle).toHaveAttribute('height', '102')
+    expect(centerHandle).toHaveAttribute('width', '102')
+    expect(centerHandle).toHaveAttribute('x', '-1')
+    expect(centerHandle).toHaveAttribute('y', '-1')
+    expect(centerHandle).toHaveAttribute('opacity', '0')
   })
 })
diff --git a/packages/core/src/components/bounds/corner-handle.test.tsx b/packages/core/src/components/bounds/corner-handle.test.tsx
@@ -0,0 +1,108 @@
+import { renderWithContext } from '~test'
+import { screen } from '@testing-library/react'
+import * as React from 'react'
+import { CornerHandle } from './corner-handle'
+import { TLBoundsCorner } from '~types'
+
+jest.spyOn(console, 'error').mockImplementation(() => void null)
+
+describe('CenterHandle', () => {
+  test('mounts component without crashing', () => {
+    renderWithContext(
+      <CornerHandle
+        size={10}
+        targetSize={20}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        corner={TLBoundsCorner.TopLeft}
+      />
+    )
+  })
+  test('top left corner > validate attributes', () => {
+    renderWithContext(
+      <CornerHandle
+        size={10}
+        targetSize={20}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        corner={TLBoundsCorner.TopLeft}
+      />
+    )
+    const cornerTransparent = screen.getByLabelText('corner transparent')
+    const cornerHandle = screen.getByLabelText('corner handle')
+
+    expect(cornerTransparent).toHaveAttribute('height', '40')
+    expect(cornerTransparent).toHaveAttribute('width', '40')
+    expect(cornerTransparent).toHaveAttribute('x', '-21')
+    expect(cornerTransparent).toHaveAttribute('y', '-21')
+
+    expect(cornerHandle).toHaveAttribute('height', '10')
+    expect(cornerHandle).toHaveAttribute('width', '10')
+    expect(cornerHandle).toHaveAttribute('x', '-6')
+    expect(cornerHandle).toHaveAttribute('y', '-6')
+  })
+  test('top right corner > validate attributes', () => {
+    renderWithContext(
+      <CornerHandle
+        size={10}
+        targetSize={20}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        corner={TLBoundsCorner.TopRight}
+      />
+    )
+    const cornerTransparent = screen.getByLabelText('corner transparent')
+    const cornerHandle = screen.getByLabelText('corner handle')
+
+    expect(cornerTransparent).toHaveAttribute('height', '40')
+    expect(cornerTransparent).toHaveAttribute('width', '40')
+    expect(cornerTransparent).toHaveAttribute('x', '81')
+    expect(cornerTransparent).toHaveAttribute('y', '-21')
+
+    expect(cornerHandle).toHaveAttribute('height', '10')
+    expect(cornerHandle).toHaveAttribute('width', '10')
+    expect(cornerHandle).toHaveAttribute('x', '96')
+    expect(cornerHandle).toHaveAttribute('y', '-6')
+  })
+  test('bottom left corner > validate attributes', () => {
+    renderWithContext(
+      <CornerHandle
+        size={10}
+        targetSize={20}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        corner={TLBoundsCorner.BottomLeft}
+      />
+    )
+    const cornerTransparent = screen.getByLabelText('corner transparent')
+    const cornerHandle = screen.getByLabelText('corner handle')
+
+    expect(cornerTransparent).toHaveAttribute('height', '40')
+    expect(cornerTransparent).toHaveAttribute('width', '40')
+    expect(cornerTransparent).toHaveAttribute('x', '-21')
+    expect(cornerTransparent).toHaveAttribute('y', '81')
+
+    expect(cornerHandle).toHaveAttribute('height', '10')
+    expect(cornerHandle).toHaveAttribute('width', '10')
+    expect(cornerHandle).toHaveAttribute('x', '-6')
+    expect(cornerHandle).toHaveAttribute('y', '96')
+  })
+  test('bottom right corner > validate attributes', () => {
+    renderWithContext(
+      <CornerHandle
+        size={10}
+        targetSize={20}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        corner={TLBoundsCorner.BottomRight}
+      />
+    )
+    const cornerTransparent = screen.getByLabelText('corner transparent')
+    const cornerHandle = screen.getByLabelText('corner handle')
+
+    expect(cornerTransparent).toHaveAttribute('height', '40')
+    expect(cornerTransparent).toHaveAttribute('width', '40')
+    expect(cornerTransparent).toHaveAttribute('x', '81')
+    expect(cornerTransparent).toHaveAttribute('y', '81')
+
+    expect(cornerHandle).toHaveAttribute('height', '10')
+    expect(cornerHandle).toHaveAttribute('width', '10')
+    expect(cornerHandle).toHaveAttribute('x', '96')
+    expect(cornerHandle).toHaveAttribute('y', '96')
+  })
+})
diff --git a/packages/core/src/components/bounds/corner-handle.tsx b/packages/core/src/components/bounds/corner-handle.tsx
@@ -28,6 +28,7 @@ export const CornerHandle = React.memo(
       <g opacity={isHidden ? 0 : 1}>
         <rect
           className={'tl-transparent ' + (isHidden ? '' : cornerBgClassnames[corner])}
+          aria-label="corner transparent"
           x={(isLeft ? -1 : bounds.width + 1) - targetSize}
           y={(isTop ? -1 : bounds.height + 1) - targetSize}
           width={targetSize * 2}
@@ -37,6 +38,7 @@ export const CornerHandle = React.memo(
         />
         <rect
           className="tl-corner-handle"
+          aria-label="corner handle"
           x={(isLeft ? -1 : bounds.width + 1) - size / 2}
           y={(isTop ? -1 : bounds.height + 1) - size / 2}
           width={size}

diff --git a/packages/core/src/components/bounds/edge-handle.test.tsx b/packages/core/src/components/bounds/edge-handle.test.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { renderWithContext } from '~test'
+import { screen } from '@testing-library/react'
+import { EdgeHandle } from './edge-handle'
+import { TLBoundsEdge } from '~types'
+
+jest.spyOn(console, 'error').mockImplementation(() => void null)
+
+describe('EdgeHandle', () => {
+  test('mounts component without crashing', () => {
+    renderWithContext(
+      <EdgeHandle
+        targetSize={20}
+        size={10}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        edge={TLBoundsEdge.Top}
+        isHidden={false}
+      />
+    )
+  })
+  test('top edge > validate attributes', () => {
+    renderWithContext(
+      <EdgeHandle
+        targetSize={20}
+        size={10}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        edge={TLBoundsEdge.Top}
+        isHidden={false}
+      />
+    )
+    const edgeHandle = screen.getByLabelText('top_edge handle')
+
+    expect(edgeHandle).toHaveAttribute('height', '10')
+    expect(edgeHandle).toHaveAttribute('width', '91')
+    expect(edgeHandle).toHaveAttribute('x', '5')
+    expect(edgeHandle).toHaveAttribute('y', '-6')
+  })
+  test('bottom edge > validate attributes', () => {
+    renderWithContext(
+      <EdgeHandle
+        targetSize={20}
+        size={10}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        edge={TLBoundsEdge.Bottom}
+        isHidden={false}
+      />
+    )
+    const edgeHandle = screen.getByLabelText('bottom_edge handle')
+
+    expect(edgeHandle).toHaveAttribute('height', '10')
+    expect(edgeHandle).toHaveAttribute('width', '91')
+    expect(edgeHandle).toHaveAttribute('x', '5')
+    expect(edgeHandle).toHaveAttribute('y', '96')
+  })
+  test('left edge > validate attributes', () => {
+    renderWithContext(
+      <EdgeHandle
+        targetSize={20}
+        size={10}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        edge={TLBoundsEdge.Left}
+        isHidden={false}
+      />
+    )
+    const edgeHandle = screen.getByLabelText('left_edge handle')
+
+    expect(edgeHandle).toHaveAttribute('height', '91')
+    expect(edgeHandle).toHaveAttribute('width', '10')
+    expect(edgeHandle).toHaveAttribute('x', '-6')
+    expect(edgeHandle).toHaveAttribute('y', '5')
+  })
+  test('right edge > validate attributes', () => {
+    renderWithContext(
+      <EdgeHandle
+        targetSize={20}
+        size={10}
+        bounds={{ minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }}
+        edge={TLBoundsEdge.Right}
+        isHidden={false}
+      />
+    )
+    const edgeHandle = screen.getByLabelText('right_edge handle')
+
+    expect(edgeHandle).toHaveAttribute('height', '91')
+    expect(edgeHandle).toHaveAttribute('width', '10')
+    expect(edgeHandle).toHaveAttribute('x', '96')
+    expect(edgeHandle).toHaveAttribute('y', '5')
+  })
+})
diff --git a/packages/core/src/components/bounds/edge-handle.tsx b/packages/core/src/components/bounds/edge-handle.tsx
@@ -30,6 +30,7 @@ export const EdgeHandle = React.memo(
       <rect
         pointerEvents={isHidden ? 'none' : 'all'}
         className={'tl-transparent tl-edge-handle ' + (isHidden ? '' : edgeClassnames[edge])}
+        aria-label={`${edge} handle`}
         opacity={isHidden ? 0 : 1}
         x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
         y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}

diff --git a/packages/core/src/components/bounds/link-handle.tsx b/packages/core/src/components/bounds/link-handle.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useBoundsHandleEvents, useTLContext } from '~hooks'
+import { useBoundsHandleEvents } from '~hooks'
 import type { TLBounds } from '~types'
 
 interface LinkHandleProps {