Amsterdam
diff --git a/‎e2e-tests/cypress/support/signal.d.ts
+1-1 b/‎e2e-tests/cypress/support/signal.d.ts
+1-1
diff --git a/‎jest.config.js
+1 b/‎jest.config.js
+1
diff --git a/‎package-lock.json
+240-82 b/‎package-lock.json
+240-82
diff --git a/‎package.json
+3-3 b/‎package.json
+3-3
diff --git a/‎src/components/AddNote/AddNote.test.tsx
+201 b/‎src/components/AddNote/AddNote.test.tsx
+201
@@ -16,7 +16,7 @@ declare namespace signal {
 
   export interface Geometrie {
     type: string;
-    coordinates: number[];
+    coordinates: [number, number];
   }
 
   export interface Address {
 
@@ -38,6 +38,7 @@ module.exports = {
     '<rootDir>/internals/testing/test-bundler.ts',
     '<rootDir>/internals/testing/jest-setup-msw.ts',
   ],
+  testTimeout: 10000,
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.(j|t)s(x?)$': [
 
@@ -47,7 +47,6 @@
     "@datapunt/leaflet-geojson-bbox-layer": "0.1.1",
     "@datapunt/matomo-tracker-js": "^0.5.1",
     "@sentry/browser": "^6.8.0",
-    "@types/mini-css-extract-plugin": "^2.3.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.9.1",
     "date-fns": "^2.19.0",
@@ -65,7 +64,7 @@
     "react-albus": "^2.0.0",
     "react-datepicker": "^3.6.0",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^6.15.5",
+    "react-hook-form": "^7.17.5",
     "react-markdown": "^6.0.2",
     "react-media": "^1.10.0",
     "react-reactive-form": "1.0.27",
@@ -106,6 +105,7 @@
     "@types/leaflet": "^1.7.0",
     "@types/leaflet.markercluster": "^1.4.4",
     "@types/lodash": "^4.14.168",
+    "@types/mini-css-extract-plugin": "^2.3.0",
     "@types/node": "^16.9.0",
     "@types/react": "^17.0.5",
     "@types/react-datepicker": "^3.1.8",
@@ -184,7 +184,7 @@
     "svg-url-loader": "^7.1.1",
     "ts-jest": "^27.0.3",
     "ts-loader": "^9.2.3",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.4",
     "typescript-plugin-styled-components": "^1.6.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.28.0",
 
@@ -0,0 +1,201 @@
+// SPDX-License-Identifier: MPL-2.0
+// Copyright (C) 2018 - 2021 Gemeente Amsterdam
+import { createRef } from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { withAppContext } from 'test/utils'
+
+import AddNote, { getAddNoteError } from '.'
+
+const ref = createRef<HTMLTextAreaElement>()
+
+describe('getNoteError', () => {
+  it('returns a max length error', () => {
+    const maxContentLength = 42
+    expect(getAddNoteError({ maxContentLength, text: '   ' })).toEqual(
+      'De notitie mag niet leeg zijn'
+    )
+    expect(
+      getAddNoteError({
+        maxContentLength,
+        text: Array(maxContentLength + 2).join('.'),
+      })
+    ).toEqual(
+      `Je hebt meer dan de maximale ${maxContentLength} tekens ingevoerd.`
+    )
+    expect(
+      getAddNoteError({ maxContentLength, text: 'Hic sunt dracones' })
+    ).toEqual('')
+
+    expect(
+      getAddNoteError({
+        maxContentLength,
+        text: '   ',
+        shouldContainAtLeastOneChar: false,
+      })
+    ).toEqual('')
+  })
+})
+
+describe('AddNote', () => {
+  it('shows the form ', () => {
+    render(withAppContext(<AddNote />))
+
+    expect(screen.getByTestId('addNoteNewNoteButton')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('addNoteSaveNoteButton')
+    ).not.toBeInTheDocument()
+
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+
+    expect(screen.getByTestId('addNoteSaveNoteButton')).toBeInTheDocument()
+    expect(screen.queryByTestId('addNoteNewNoteButton')).not.toBeInTheDocument()
+    expect(screen.getByTestId('addNoteCancelNoteButton')).toBeInTheDocument()
+
+    userEvent.click(screen.getByTestId('addNoteCancelNoteButton'))
+
+    expect(
+      screen.queryByTestId('addNoteSaveNoteButton')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('addNoteCancelNoteButton')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('addNoteNewNoteButton')).toBeInTheDocument()
+  })
+
+  it('focuses the textarea', () => {
+    const { unmount, rerender } = render(withAppContext(<AddNote />))
+
+    // no ref, no focus
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+    expect(screen.getByRole('textbox')).not.toHaveFocus()
+
+    unmount()
+
+    // not standalone, no focus
+    rerender(withAppContext(<AddNote ref={ref} isStandalone={false} />))
+    expect(screen.getByRole('textbox')).not.toHaveFocus()
+
+    unmount()
+
+    // standalone, setting focus on render
+    rerender(withAppContext(<AddNote ref={ref} />))
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('calls onChange', () => {
+    const onChange = jest.fn()
+
+    render(withAppContext(<AddNote onChange={onChange} />))
+
+    expect(onChange).not.toHaveBeenCalled()
+
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+
+    userEvent.type(screen.getByRole('textbox'), 'Here be text')
+
+    expect(onChange).toHaveBeenCalledTimes(12)
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({ value: 'Here be text' }),
+      })
+    )
+
+    // nothing should happen; onSubmit isn't passed as a prop
+    userEvent.click(screen.getByTestId('addNoteSaveNoteButton'))
+
+    expect(onChange).toHaveBeenCalledTimes(12)
+  })
+
+  it('calls onSubmit', () => {
+    const onSubmit = jest.fn()
+
+    const { rerender } = render(withAppContext(<AddNote onSubmit={onSubmit} />))
+
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+    userEvent.type(screen.getByRole('textbox'), 'Here be text 2')
+
+    expect(onSubmit).not.toHaveBeenCalled()
+
+    userEvent.click(screen.getByTestId('addNoteSaveNoteButton'))
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.anything(),
+      // the field's value will not be passed, because there is no ref to attach it to
+      undefined
+    )
+
+    rerender(withAppContext(<AddNote onSubmit={onSubmit} ref={ref} />))
+
+    userEvent.clear(screen.getByRole('textbox'))
+    userEvent.type(screen.getByRole('textbox'), 'Here be text 2')
+    userEvent.click(screen.getByTestId('addNoteSaveNoteButton'))
+
+    expect(onSubmit).toHaveBeenCalledTimes(2)
+    expect(onSubmit).toHaveBeenLastCalledWith(
+      expect.anything(),
+      'Here be text 2'
+    )
+  })
+
+  it('hides the form after submit', () => {
+    const submitWillNotHide = jest.fn(() => false)
+
+    const { rerender } = render(
+      withAppContext(<AddNote onSubmit={submitWillNotHide} />)
+    )
+
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+    userEvent.type(screen.getByRole('textbox'), 'Here be text 3')
+    userEvent.click(screen.getByTestId('addNoteSaveNoteButton'))
+
+    expect(submitWillNotHide).toHaveBeenCalledTimes(1)
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    const submitWillHide = jest.fn(() => true)
+
+    rerender(withAppContext(<AddNote onSubmit={submitWillHide} />))
+
+    userEvent.click(screen.getByTestId('addNoteSaveNoteButton'))
+
+    expect(submitWillHide).toHaveBeenCalledTimes(1)
+
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+
+  it('clears the textarea', () => {
+    render(withAppContext(<AddNote />))
+
+    const value = 'Here be a note'
+
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+
+    const addNoteTextArea = screen.getByRole('textbox') as HTMLTextAreaElement
+
+    userEvent.type(addNoteTextArea, value)
+
+    expect(screen.getByRole('textbox')).not.toBeEmptyDOMElement()
+
+    fireEvent.click(screen.getByTestId('addNoteCancelNoteButton')) // unmounts the component
+    userEvent.click(screen.getByTestId('addNoteNewNoteButton'))
+
+    expect(screen.getByRole('textbox')).toBeEmptyDOMElement()
+  })
+
+  it('renders the inline version', () => {
+    render(withAppContext(<AddNote isStandalone={false} />))
+
+    expect(screen.getByTestId('addNoteText')).toBeInTheDocument()
+    expect(screen.queryByTestId('addNoteNewNoteButton')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('addNoteSaveNoteButton')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('addNoteCancelNoteButton')
+    ).not.toBeInTheDocument()
+  })
+})
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ declare namespace signal {`
`16`	`16`
`17`	`17`	`export interface Geometrie {`
`18`	`18`	`type: string;`
`19`		`- coordinates: number[];`
	`19`	`+ coordinates: [number, number];`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`export interface Address {`