feat: #73 - Add user page

packages/smb/src/components/pages/users/__tests__/users.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+import { MockedProvider } from '@apollo/react-testing'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { Users, UsersProps } from '../users'
+
+describe('Users', () => {
+  describe('Users', () => {
+    it('should match a snapshot', () => {
+      const mockProps: UsersProps = {}
+      const wrapper = mount(
+        <Router>
+          <MockedProvider mocks={[]} addTypename={true}>
+            <Users {...mockProps} />
+          </MockedProvider>
+        </Router>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

packages/smb/src/components/pages/users/index.ts

@@ -0,0 +1,2 @@
+import Users from './users'
+export default Users

packages/smb/src/components/pages/users/users.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { H3, FlexContainerBasic, FlexContainerResponsive } from '@reapit/elements'
+import UserList from '@/components/ui/user-list'
+
+export type UsersProps = {}
+
+export const Users: React.FC<UsersProps> = () => {
+  return (
+    <FlexContainerBasic hasPadding hasBackground>
+      <FlexContainerResponsive flexColumn hasPadding hasBackground>
+        <H3>Users</H3>
+        <UserList />
+      </FlexContainerResponsive>
+    </FlexContainerBasic>
+  )
+}
+
+export default Users

packages/smb/src/components/ui/user-list/__mocks__/users.ts

@@ -0,0 +1,81 @@
+import { UsersQueryResponse } from '../user-list'
+
+export const users: UsersQueryResponse = {
+  GetNegotiators: {
+    _embedded: [
+      {
+        id: 'MGL',
+        created: '2014-12-26T12:22:01.0000000Z',
+        modified: '2016-11-29T09:57:32.0000000Z',
+        name: 'Abel Robertson',
+        active: true,
+        officeId: 'NPG',
+        email: '[email protected]',
+        metadata: {},
+        _eTag: '"10109C0209C684789B72FFC53730E31C"',
+        _links: {
+          self: {
+            href: '/negotiators/MGL',
+          },
+          office: {
+            href: '/offices/NPG',
+          },
+        },
+      },
+      {
+        id: 'RPA',
+        created: '2017-02-07T12:08:53.0000000Z',
+        modified: '2017-02-07T12:09:41.0000000Z',
+        name: 'Accounts User',
+        active: true,
+        officeId: 'MCL',
+        _eTag: '"85A9DB571DB893A5FB734105AFF6B464"',
+        _links: {
+          self: {
+            href: '/negotiators/RPA',
+          },
+          office: {
+            href: '/offices/MCL',
+          },
+        },
+      },
+      {
+        id: 'KLB',
+        created: '2010-11-15T14:53:08.0000000Z',
+        modified: '2017-03-10T00:02:08.0000000Z',
+        name: 'Adele Small',
+        active: true,
+        officeId: 'NGL',
+        email: '[email protected]',
+        metadata: {},
+        _eTag: '"B28EE5CFF654DB22BF3247CA028C10C3"',
+        _links: {
+          self: {
+            href: '/negotiators/KLB',
+          },
+          office: {
+            href: '/offices/NGL',
+          },
+        },
+      },
+    ],
+    pageNumber: 1,
+    pageSize: 3,
+    pageCount: 3,
+    totalCount: 3,
+    _links: {
+      self: {
+        href: '/negotiators/?PageNumber=1&PageSize=3',
+      },
+      first: {
+        href: '/negotiators/?PageNumber=1&PageSize=3',
+      },
+      next: {
+        href: '/negotiators/?PageNumber=2&PageSize=3',
+      },
+      last: {
+        href: '/negotiators/?PageNumber=3&PageSize=3',
+      },
+    },
+  },
+}

packages/smb/src/components/ui/user-list/__tests__/user-list.test.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import { mount, shallow } from 'enzyme'
+import { MockedProvider } from '@apollo/react-testing'
+import { BrowserRouter as Router } from 'react-router-dom'
+import {
+  UserList,
+  UserListProps,
+  renderUserList,
+  RenderUserListParams,
+  getDataTable,
+  tableHeaders,
+  handleChangePage,
+} from '../user-list'
+import { GetUsers } from '../user-list.graphql'
+import { users } from '../__mocks__/users'
+import { error } from '@/graphql/__mocks__/error'
+import { getMockRouterProps } from '@/core/__mocks__/mock-router'
+
+const mockQueries = {
+  request: {
+    query: GetUsers,
+    variables: { pageSize: 100, pageNumber: 1 },
+  },
+  result: {
+    data: users,
+  },
+}
+
+describe('UserList', () => {
+  describe('UserList', () => {
+    it('should match a snapshot', () => {
+      const mockProps: UserListProps = getMockRouterProps({ params: {}, search: '?page=1' })
+      const wrapper = mount(
+        <Router>
+          <MockedProvider mocks={[mockQueries]} addTypename={false}>
+            <UserList {...mockProps} />
+          </MockedProvider>
+        </Router>,
+      )
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('renderUserList', () => {
+    it('should match snapshot', () => {
+      const mockParams: RenderUserListParams = {
+        loading: true,
+        error: undefined,
+        handleChangePage: jest.fn(),
+        dataTable: [],
+      }
+      const wrapper = shallow(<div>{renderUserList(mockParams)}</div>)
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot', () => {
+      const mockParams: RenderUserListParams = {
+        loading: false,
+        error,
+        handleChangePage: jest.fn(),
+        dataTable: [],
+      }
+      const wrapper = shallow(<div>{renderUserList(mockParams)}</div>)
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot', () => {
+      const mockParams: RenderUserListParams = {
+        loading: false,
+        error: undefined,
+        handleChangePage: jest.fn(),
+        dataTable: getDataTable(users),
+      }
+      const wrapper = shallow(<div>{renderUserList(mockParams)}</div>)
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    describe('getDataTable', () => {
+      it('should run correctly', () => {
+        const dataTable = getDataTable(users)
+        expect(Array.isArray(dataTable)).toBe(true)
+        expect(dataTable.length).toBe(3)
+        expect(dataTable[0]).toEqual(tableHeaders)
+      })
+    })
+
+    describe('handleChangePage', () => {
+      it('should run correctly', () => {
+        const mockParams = { history: { push: jest.fn() } }
+        const fn = handleChangePage(mockParams)
+        fn(2)
+        expect(mockParams.history.push).toBeCalledWith({ search: 'page=2' })
+      })
+    })
+  })
+})

packages/smb/src/components/ui/user-list/index.ts

@@ -0,0 +1,2 @@
+import UserList from './user-list'
+export default UserList

packages/smb/src/components/ui/user-list/user-list.graphql

@@ -0,0 +1,21 @@
+#import "../../../graphql/fragments/negotiator.graphql"
+
+query GetUsers(
+  $id: [String!],
+  $name: String,
+  $officeId: [String!],
+  $pageSize: Int,
+  $pageNumber: Int,
+  $sortBy: String
+  ) {
+  GetNegotiators(id: $id, name: $name, officeId: $officeId, pageSize: $pageSize, pageNumber: $pageNumber, sortBy: $sortBy) {
+    _embedded {
+      ...Negotiator
+    }
+    pageNumber
+    pageSize
+    pageCount
+    totalCount
+    _links
+  }
+}