add e2e test

frontend/src/e2e-test/pages/employee/units/unit.ts

@@ -50,12 +50,28 @@ export class UnitPage {
   #groupsTab: Element
   #calendarTab: Element
   #applicationProcessTab: Element
+  serviceWorkerNote: {
+    addButton: Element
+    editButton: Element
+    saveButton: Element
+    removeButton: Element
+    content: Element
+    input: TextInput
+  }
 
   constructor(private readonly page: Page) {
     this.#unitInfoTab = page.findByDataQa('unit-info-tab')
     this.#groupsTab = page.findByDataQa('groups-tab')
     this.#calendarTab = page.findByDataQa('calendar-tab')
     this.#applicationProcessTab = page.findByDataQa('application-process-tab')
+    this.serviceWorkerNote = {
+      addButton: page.findByDataQa('note-add-btn'),
+      editButton: page.findByDataQa('note-edit-btn'),
+      saveButton: page.findByDataQa('note-save-btn'),
+      removeButton: page.findByDataQa('note-remove-btn'),
+      content: page.findByDataQa('service-worker-note'),
+      input: new TextInput(page.findByDataQa('note-input'))
+    }
   }
 
   static async openUnit(page: Page, id: string): Promise<UnitPage> {

frontend/src/e2e-test/specs/5_employee/unit-service-worker-note.spec.ts

@@ -0,0 +1,60 @@
+// SPDX-FileCopyrightText: 2017-2022 City of Espoo
+//
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
+import LocalDate from 'lib-common/local-date'
+import LocalTime from 'lib-common/local-time'
+
+import { Fixture } from '../../dev-api/fixtures'
+import { resetServiceState } from '../../generated/api-clients'
+import { DevCareArea, DevDaycare, DevEmployee } from '../../generated/api-types'
+import { UnitPage } from '../../pages/employee/units/unit'
+import { Page } from '../../utils/page'
+import { employeeLogin } from '../../utils/user'
+
+const mockedTime = LocalDate.of(2022, 12, 1).toHelsinkiDateTime(
+  LocalTime.of(12, 0)
+)
+
+let area: DevCareArea
+let daycare: DevDaycare
+let serviceWorker: DevEmployee
+let page: Page
+
+beforeEach(async () => {
+  await resetServiceState()
+  area = await Fixture.careArea().save()
+  daycare = await Fixture.daycare({ areaId: area.id }).save()
+  serviceWorker = await Fixture.employee().serviceWorker().save()
+
+  page = await Page.open({ mockedTime })
+})
+
+describe('Employee - Unit - Service worker note', () => {
+  test('happy path', async () => {
+    await employeeLogin(page, serviceWorker)
+    const unitPage = new UnitPage(page)
+    await unitPage.navigateToUnit(daycare.id)
+
+    await unitPage.serviceWorkerNote.addButton.waitUntilVisible()
+    await unitPage.serviceWorkerNote.content.waitUntilHidden()
+
+    await unitPage.serviceWorkerNote.addButton.click()
+    const text1 = 'Väistötiloissa joulukuussa, esteellinen sijainti'
+    await unitPage.serviceWorkerNote.input.fill(text1)
+    await unitPage.serviceWorkerNote.saveButton.click()
+    await unitPage.serviceWorkerNote.saveButton.waitUntilHidden()
+    await unitPage.serviceWorkerNote.content.assertTextEquals(text1)
+
+    await unitPage.serviceWorkerNote.editButton.click()
+    const text2 = 'Väistötiloissa marraskuussa 2025, esteellinen sijainti'
+    await unitPage.serviceWorkerNote.input.fill(text2)
+    await unitPage.serviceWorkerNote.saveButton.click()
+    await unitPage.serviceWorkerNote.saveButton.waitUntilHidden()
+    await unitPage.serviceWorkerNote.content.assertTextEquals(text2)
+
+    await unitPage.serviceWorkerNote.removeButton.click()
+    await unitPage.serviceWorkerNote.addButton.waitUntilVisible()
+    await unitPage.serviceWorkerNote.content.waitUntilHidden()
+  })
+})

frontend/src/employee-frontend/components/unit/UnitServiceWorkerNote.tsx

@@ -44,7 +44,7 @@ export default React.memo(function UnitServiceWorkerNote({
     <FixedSpaceColumn>
       {editing ? (
         <>
-          <InputField value={text} onChange={setText} />
+          <InputField value={text} onChange={setText} data-qa="note-input" />
           <FixedSpaceRow>
             <MutateButton
               appearance="inline"
@@ -55,6 +55,7 @@ export default React.memo(function UnitServiceWorkerNote({
                 body: { note: text.trim() }
               })}
               onSuccess={closeEditor}
+              data-qa="note-save-btn"
             />
             <Button
               appearance="inline"
@@ -69,18 +70,24 @@ export default React.memo(function UnitServiceWorkerNote({
           text={i18n.unit.serviceWorkerNote.add}
           icon={faPlus}
           onClick={() => startEditing('')}
+          data-qa="note-add-btn"
         />
       ) : (
         <>
           <div>
-            <AlertBox message={note.trim()} noMargin />
+            <AlertBox
+              message={note.trim()}
+              noMargin
+              data-qa="service-worker-note"
+            />
           </div>
           <FixedSpaceRow>
             <Button
               appearance="inline"
               text={i18n.common.edit}
               icon={faPen}
               onClick={() => startEditing(note)}
+              data-qa="note-edit-btn"
             />
             <MutateButton
               appearance="inline"
@@ -89,6 +96,7 @@ export default React.memo(function UnitServiceWorkerNote({
               mutation={unitServiceWorkerNoteMutation}
               onClick={() => ({ daycareId: unitId, body: { note: '' } })}
               onSuccess={closeEditor}
+              data-qa="note-remove-btn"
             />
           </FixedSpaceRow>
         </>