Add tests for PresentNavigationOverlay

ui/package-lock.json

@@ -55,6 +55,7 @@
         "@babel/preset-env": "^7.13.15",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^11.2.6",
+        "@testing-library/user-event": "^13.1.8",
         "@types/geojson": "^7946.0.7",
         "@types/jest": "^26.0.23",
         "@types/mapbox-gl": "^2.1.1",
@@ -2685,6 +2686,22 @@
         "react-dom": "*"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "13.1.8",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.8.tgz",
+      "integrity": "sha512-M04HgOlJvxILf5xyrkJaEQfFOtcvhy3usLldQIEg9zgFIYQofSmFGVfFlS7BWowqlBGLrItwGMlPXCoBgoHSiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
@@ -16334,6 +16351,15 @@
         "@testing-library/dom": "^7.28.1"
       }
     },
+    "@testing-library/user-event": {
+      "version": "13.1.8",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.8.tgz",
+      "integrity": "sha512-M04HgOlJvxILf5xyrkJaEQfFOtcvhy3usLldQIEg9zgFIYQofSmFGVfFlS7BWowqlBGLrItwGMlPXCoBgoHSiw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "@types/aria-query": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",

ui/package.json

@@ -68,6 +68,7 @@
     "@babel/preset-env": "^7.13.15",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.8",
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^26.0.23",
     "@types/mapbox-gl": "^2.1.1",
@@ -107,7 +108,12 @@
     "transform": {
       "^.+\\.(js|ts|tsx)$": "babel-jest",
       "^.+\\.svg$": "<rootDir>/testing/transform-svg.js"
-    }
+    },
+    "collectCoverage": true,
+    "coverageReporters": [
+      "json",
+      "html"
+    ]
   },
   "lint-staged": {
     "*.{ts,tsx,js,json,css,md,graphql}": "prettier --write",

ui/src/components/photoGallery/presentView/PresentNavigationOverlay.test.tsx

@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom'
+import '@testing-library/user-event'
+
+import React from 'react'
+import PresentNavigationOverlay from './PresentNavigationOverlay'
+import { fireEvent, render, screen, act } from '@testing-library/react'
+
+jest.useFakeTimers()
+
+describe('PresentNavigationOverlay component', () => {
+  test('simple render', () => {
+    const dispatchMedia = jest.fn()
+    render(<PresentNavigationOverlay dispatchMedia={dispatchMedia} />)
+
+    expect(screen.getByLabelText('Previous image')).toBeInTheDocument()
+    expect(screen.getByLabelText('Next image')).toBeInTheDocument()
+    expect(screen.getByLabelText('Exit presentation mode')).toBeInTheDocument()
+  })
+
+  test('click buttons', () => {
+    const dispatchMedia = jest.fn()
+    render(<PresentNavigationOverlay dispatchMedia={dispatchMedia} />)
+
+    expect(dispatchMedia).not.toHaveBeenCalled()
+
+    fireEvent.click(screen.getByLabelText('Next image'))
+    expect(dispatchMedia).lastCalledWith({ type: 'nextImage' })
+
+    fireEvent.click(screen.getByLabelText('Previous image'))
+    expect(dispatchMedia).lastCalledWith({ type: 'previousImage' })
+  })
+
+  test('mouse move, show and hide', () => {
+    const dispatchMedia = jest.fn()
+    const { container } = render(
+      <PresentNavigationOverlay dispatchMedia={dispatchMedia} />
+    )
+
+    expect(screen.getByLabelText('Next image')).toHaveClass('hide')
+
+    fireEvent.mouseMove(container.firstChild!)
+    expect(screen.getByLabelText('Next image')).not.toHaveClass('hide')
+
+    act(() => {
+      jest.advanceTimersByTime(3000)
+    })
+    expect(screen.getByLabelText('Next image')).toHaveClass('hide')
+  })
+})

ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx

@@ -100,6 +100,7 @@ const PresentNavigationOverlay = ({
     >
       {children}
       <NavigationButton
+        aria-label="Previous image"
         className={hide ? 'hide' : undefined}
         float="left"
         onClick={() => dispatchMedia({ type: 'previousImage' })}
@@ -107,6 +108,7 @@ const PresentNavigationOverlay = ({
         <PrevIcon />
       </NavigationButton>
       <NavigationButton
+        aria-label="Next image"
         className={hide ? 'hide' : undefined}
         float="right"
         onClick={() => dispatchMedia({ type: 'nextImage' })}
@@ -114,6 +116,7 @@ const PresentNavigationOverlay = ({
         <NextIcon />
       </NavigationButton>
       <ExitButton
+        aria-label="Exit presentation mode"
         className={hide ? 'hide' : undefined}
         onClick={() => {
           if (disableSaveCloseInHistory === true) {