Merge pull request #482 from photoview/fix-415

Refactor tests + fix 415

ui/package.json

@@ -61,8 +61,8 @@
     "lint": "npm run lint:types & npm run lint:eslint",
     "lint:eslint": "eslint ./src --max-warnings 0 --cache --config .eslintrc.js",
     "lint:types": "tsc --noemit",
-    "jest": "craco test",
-    "jest:ci": "CI=true craco test --verbose --ci --coverage",
+    "jest": "craco test --setupFilesAfterEnv ./testing/setupTests.ts",
+    "jest:ci": "CI=true craco test --setupFilesAfterEnv ./testing/setupTests.ts --verbose --ci --coverage",
     "genSchemaTypes": "npx apollo client:codegen --target=typescript --globalTypesFile=src/__generated__/globalTypes.ts",
     "extractTranslations": "i18next -c i18next-parser.config.js",
     "prepare": "(cd .. && npx husky install)"

ui/src/Pages/PeoplePage/FaceCircleImage.test.tsx

@@ -1,12 +1,8 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import FaceCircleImage from './FaceCircleImage'
 import { myFaces_myFaceGroups_imageFaces } from './__generated__/myFaces'
 
-require('../../localization').setupLocalization()
-
 test('face circle image', () => {
   const imageFace: myFaces_myFaceGroups_imageFaces = {
     __typename: 'ImageFace',

ui/src/Pages/PeoplePage/PeoplePage.test.tsx

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import PeoplePage, {
@@ -11,8 +9,6 @@ import { MockedProvider } from '@apollo/client/testing'
 import { MemoryRouter } from 'react-router'
 import { myFaces_myFaceGroups } from './__generated__/myFaces'
 
-require('../../localization').setupLocalization()
-
 jest.mock('../../hooks/useScrollPagination')
 
 describe('PeoplePage component', () => {

ui/src/Pages/PeoplePage/SingleFaceGroup/SingleFaceGroup.test.tsx

@@ -1,12 +1,8 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import { MockedProvider } from '@apollo/client/testing'
 import SingleFaceGroup, { SINGLE_FACE_GROUP } from './SingleFaceGroup'
 
-require('../../../localization').setupLocalization()
-
 jest.mock('../../../hooks/useScrollPagination')
 
 test('single face group', async () => {

ui/src/Pages/SettingsPage/Users/AddUserRow.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import AddUserRow, {
+  CREATE_USER_MUTATION,
+  USER_ADD_ROOT_PATH_MUTATION,
+} from './AddUserRow'
+import { MockedProvider } from '@apollo/client/testing'
+
+const gqlMock = [
+  {
+    request: {
+      query: CREATE_USER_MUTATION,
+      variables: { username: 'testuser', admin: false },
+    },
+    result: {
+      data: {
+        createUser: {
+          id: '123',
+          username: 'testuser',
+          admin: false,
+          __typename: 'User',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ADD_ROOT_PATH_MUTATION,
+      variables: { id: '123', rootPath: '/tmp' },
+    },
+    result: { data: { userAddRootPath: { id: '567', __typename: 'Album' } } },
+  },
+]
+
+test('Add user with username and path', async () => {
+  const userAdded = jest.fn()
+  const setShow = jest.fn()
+
+  render(
+    <MockedProvider addTypename={true} mocks={gqlMock}>
+      <table>
+        <tbody>
+          <AddUserRow onUserAdded={userAdded} setShow={setShow} show={true} />
+        </tbody>
+      </table>
+    </MockedProvider>
+  )
+
+  const usernameInput = screen.getByPlaceholderText('Username')
+  const pathInput = screen.getByPlaceholderText('/path/to/photos')
+  const addUserBtn = screen.getByText('Add user')
+
+  fireEvent.change(usernameInput, { target: { value: 'testuser' } })
+  fireEvent.change(pathInput, { target: { value: '/tmp' } })
+  fireEvent.click(addUserBtn)
+
+  await waitFor(() => {
+    expect(userAdded).toHaveBeenCalledTimes(1)
+  })
+
+  expect(setShow).not.toHaveBeenCalled()
+})
+
+test('Add user with only username', async () => {
+  const userAdded = jest.fn()
+  const setShow = jest.fn()
+
+  render(
+    <MockedProvider addTypename={true} mocks={gqlMock}>
+      <table>
+        <tbody>
+          <AddUserRow onUserAdded={userAdded} setShow={setShow} show={true} />
+        </tbody>
+      </table>
+    </MockedProvider>
+  )
+
+  const usernameInput = screen.getByPlaceholderText('Username')
+  const addUserBtn = screen.getByText('Add user')
+
+  // don't set path
+  // const pathInput = screen.getByPlaceholderText('/path/to/photos')
+  // fireEvent.change(pathInput, { target: { value: '/tmp' } })
+
+  fireEvent.change(usernameInput, { target: { value: 'testuser' } })
+  fireEvent.click(addUserBtn)
+
+  await waitFor(() => {
+    expect(userAdded).toHaveBeenCalledTimes(1)
+  })
+
+  expect(setShow).not.toHaveBeenCalled()
+})

ui/src/Pages/SettingsPage/Users/AddUserRow.tsx

@@ -5,7 +5,7 @@ import Checkbox from '../../../primitives/form/Checkbox'
 import { TextField, Button, ButtonGroup } from '../../../primitives/form/Input'
 import { TableRow, TableCell } from '../../../primitives/Table'
 
-const CREATE_USER_MUTATION = gql`
+export const CREATE_USER_MUTATION = gql`
   mutation createUser($username: String!, $admin: Boolean!) {
     createUser(username: $username, admin: $admin) {
       id
@@ -41,16 +41,19 @@ const AddUserRow = ({ setShow, show, onUserAdded }: AddUserRowProps) => {
   const { t } = useTranslation()
   const [state, setState] = useState(initialState)
 
+  const finished = () => {
+    setState(initialState)
+    onUserAdded()
+  }
+
   const [addRootPath, { loading: addRootPathLoading }] = useMutation(
     USER_ADD_ROOT_PATH_MUTATION,
     {
       onCompleted: () => {
-        setState(initialState)
-        onUserAdded()
+        finished()
       },
       onError: () => {
-        setState(initialState)
-        onUserAdded()
+        finished()
       },
     }
   )
@@ -67,7 +70,7 @@ const AddUserRow = ({ setShow, show, onUserAdded }: AddUserRowProps) => {
             },
           })
         } else {
-          setState(initialState)
+          finished()
         }
       },
     }

ui/src/Pages/SharePage/SharePage.test.js

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { MockedProvider } from '@apollo/client/testing'
@@ -18,8 +16,6 @@ import SharePage, {
 import { SIDEBAR_DOWNLOAD_QUERY } from '../../components/sidebar/SidebarDownload'
 import { SHARE_ALBUM_QUERY } from './AlbumSharePage'
 
-require('../../localization').setupLocalization()
-
 describe('load correct share page, based on graphql query', () => {
   const token = 'TOKEN123'
 

ui/src/components/layout/Layout.test.js

@@ -1,10 +1,7 @@
-import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 import Layout from './Layout'
 
-require('../../localization').setupLocalization()
-
 test('Layout component', async () => {
   render(
     <Layout>

ui/src/components/layout/MainMenu.test.tsx

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { MockedProvider } from '@apollo/client/testing'
 import { render, screen } from '@testing-library/react'
@@ -9,8 +7,6 @@ import { ADMIN_QUERY } from './Layout'
 import { MemoryRouter } from 'react-router-dom'
 import MainMenu, { MAPBOX_QUERY } from './MainMenu'
 
-require('../../localization').setupLocalization()
-
 jest.mock('../../helpers/authentication.ts')
 
 const authTokenMock = authentication.authToken as jest.MockedFunction<

ui/src/components/photoGallery/PhotoGallery.test.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 
 import React from 'react'
@@ -6,8 +5,6 @@ import { MediaType } from '../../__generated__/globalTypes'
 import PhotoGallery from './PhotoGallery'
 import { PhotoGalleryState } from './photoGalleryReducer'
 
-require('../../localization').setupLocalization()
-
 jest.mock('./photoGalleryMutations', () => ({
   useMarkFavoriteMutation: () => [jest.fn()],
 }))

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 
 import React from 'react'

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

@@ -1,6 +1,3 @@
-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'

ui/src/components/routes/AuthorizedRoute.test.js

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import AuthorizedRoute from './AuthorizedRoute'
 import { render, screen } from '@testing-library/react'

ui/src/components/routes/Routes.test.js

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 
 import Routes from './Routes'
@@ -14,8 +12,6 @@ jest.mock('../../Pages/LoginPage/LoginPage.tsx', () => () => (
   <div>mocked login page</div>
 ))
 
-require('../../localization').setupLocalization()
-
 describe('routes', () => {
   test('unauthorized root path should navigate to login page', async () => {
     render(

ui/src/components/sidebar/MediaSidebar.test.js

@@ -1,11 +1,7 @@
-import '@testing-library/jest-dom'
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { MetadataInfo } from './MediaSidebar'
 
-require('../../localization').setupLocalization()
-
 describe('MetadataInfo', () => {
   test('without EXIF information', async () => {
     const media = {

ui/testing/setupTests.ts

@@ -0,0 +1,9 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'
+import '@testing-library/user-event'
+
+// setup localization to make it easier to select elements by text
+require('../src/localization').setupLocalization()