loader and tests

src/React/components/Input.jsx

@@ -27,6 +27,7 @@ const Input = (props) => {
         {capitalizeFirstLetter(props.forAndId)}
       </InputLabel>
       <InputStyle
+        data-testid={props.forAndId}
         type={props.inputType}
         id={props.forAndId}
         value={props.value}

src/React/components/Loader.jsx

@@ -0,0 +1,38 @@
+// IMPORTS // ______________________________________________________________
+
+import React from 'react'
+// styles imports
+import { LoaderContainer, LoaderWrapper } from '../../styles/components/loader'
+
+// JSX // _________________________________________________________________
+
+/**
+ * Loader component to display a loader while loading data
+ * @name Loader
+ * @returns {?JSX}
+ */
+
+const Loader = () => {
+  return (
+    <LoaderWrapper data-testid='loader'>
+      <LoaderContainer>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </LoaderContainer>
+    </LoaderWrapper>
+  )
+}
+
+// EXPORT // ______________________________________________________________
+
+export default Loader

src/React/components/Select.jsx

@@ -26,6 +26,7 @@ const Select = (props) => {
       <SelectStyle
         name={props.forAndId}
         id={props.forAndId}
+        data-testid={props.forAndId}
         value={props.value}
         onChange={props.onChange}
       >

src/React/pages/EmployeesList.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 // components imports
 import TableWithSortingSearchAndPagination from '../components/TableWithSortingSearchAndPagination/TableWithSortingSearchAndPagination'
+import Loader from '../components/Loader'
 // datas imports
 import entriesQuantity from '../../datas/entriesQuantity'
 import keys from '../../datas/keys'
@@ -24,11 +25,20 @@ const EmployeesList = () => {
   entries = entriesQuantity
   keysToDisplay = keys
 
+  const isLoading = useSelector((state) => state.getEmployees.isLoading)
 
   return (
     <>
       <h2 className="sr-only">Current employees</h2>
-      <TableWithSortingSearchAndPagination list={data} entriesNumber={entries} keysToDisplay={keysToDisplay} />
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <TableWithSortingSearchAndPagination
+          list={data}
+          entriesNumber={entries}
+          keysToDisplay={keysToDisplay}
+        />
+      )}
     </>
   )
 }

src/React/pages/Homepage.jsx

@@ -198,7 +198,7 @@ const Homepage = () => {
         />
 
         <DivButton>
-          <InputButton type="submit" value="Save" />
+          <InputButton type="submit" value="Save" data-testid="save" />
         </DivButton>
       </Form>
 

src/__tests__/employeesList.test.js

@@ -0,0 +1,8 @@
+import EmployeesList from '../React/pages/EmployeesList'
+import { render } from '../helpers/render'
+
+describe('EmployeesList', () => {
+  test('Should render without crashing', async () => {
+    render(<EmployeesList />)
+  })
+})

src/__tests__/header.test.js

@@ -0,0 +1,11 @@
+import Header from "../React/components/Header";
+import { render } from '../helpers/render'
+import { screen } from '@testing-library/react'
+
+
+describe('Header', () => {
+  test('Should render header', async () => {
+    render(<Header />)
+    expect(screen.getByText('HRnet')).toBeTruthy()
+  })
+})

src/__tests__/homepage.test.js

@@ -0,0 +1,86 @@
+import Homepage from '../React/pages/Homepage'
+import { render } from '../helpers/render'
+import { screen, fireEvent, waitFor } from '@testing-library/react'
+
+const setup = (id) => {
+  const utils = render(<Homepage />)
+  const input = screen.getByTestId(id)
+  return {
+    input,
+    ...utils,
+  }
+}
+
+describe('Homepage', () => {
+  test('Should render homepage', async () => {
+    render(<Homepage />)
+    expect(screen.getByText('Create employee')).toBeTruthy()
+  })
+  test('Should change firstName input value', async () => {
+    const { input } = setup('first-name')
+    fireEvent.change(input, { target: { value: 'Bob' } })
+    expect(input.value).toBe('Bob')
+  })
+  test('Should change lastName input value', async () => {
+    const { input } = setup('last-name')
+    fireEvent.change(input, { target: { value: 'Leponge' } })
+    expect(input.value).toBe('Leponge')
+  })
+  test('Should change birth date input value', async () => {
+    const { input } = setup('date-of-birth')
+    fireEvent.change(input, { target: { value: '1982-08-28' } })
+    expect(input.value).toBe('1982-08-28')
+  })
+  test('Should change start date input value', async () => {
+    const { input } = setup('start-date')
+    fireEvent.change(input, { target: { value: '2021-12-10' } })
+    expect(input.value).toBe('2021-12-10')
+  })
+  test('Should change street input value', async () => {
+    const { input } = setup('street')
+    fireEvent.change(input, { target: { value: '221B Baker street' } })
+    expect(input.value).toBe('221B Baker street')
+  })
+  test('Should change city input value', async () => {
+    const { input } = setup('city')
+    fireEvent.change(input, { target: { value: 'London' } })
+    expect(input.value).toBe('London')
+  })
+  test('Should change zip code input value', async () => {
+    const { input } = setup('zip-code')
+    fireEvent.change(input, { target: { value: 45856 } })
+    expect(input.value).toBe('45856')
+  })
+  test('Should change state select value', async () => {
+    const { input } = setup('state')
+    fireEvent.change(input, { target: { value: 'Alabama' } })
+    expect(input.value).toBe('AL')
+  })
+  test('Should change department select value', async () => {
+    const { input } = setup('department')
+    fireEvent.change(input, { target: { value: 'Sales' } })
+    expect(input.value).toBe('Sales')
+  })
+})
+
+describe('Modal', () => {
+  test('should open modal', async () => {
+    const { input } = setup('save')
+    fireEvent.click(input)
+    expect(screen.getByText('New employee created !')).toBeTruthy()
+  })
+  test('Should close modal on click', async () => {
+    const { input } = setup('save')
+    fireEvent.click(input)
+    const img = screen.getByAltText('close')
+    fireEvent.click(img)
+    await waitFor(() => expect(img).not.toBeInTheDocument())
+  })
+  test('should close modal on Escape key up', async () => {
+    const { input } = setup('save')
+    fireEvent.click(input)
+    const img = screen.getByAltText('close')
+    fireEvent.keyUp(document, { key: 'Escape' })
+    await waitFor(() => expect(img).not.toBeInTheDocument())
+  })
+})

src/__tests__/input.test.js

@@ -0,0 +1,21 @@
+import Input from '../React/components/Input'
+import { render } from '../helpers/render'
+import { screen } from '@testing-library/react'
+
+const handleChange = jest.fn()
+
+describe('Input', () => {
+  test('Should render input', async () => {
+    render(
+      <Input
+        direction={'row'}
+        forAndId={'first-name'}
+        inputType={'text'}
+        value={'Test'}
+        onChange={handleChange}
+        required={true}
+      />
+    )
+    expect(screen.getByDisplayValue('Test')).toBeTruthy()
+  })
+})

src/__tests__/loader.test.js

@@ -0,0 +1,10 @@
+import Loader from '../React/components/Loader'
+import { render } from '../helpers/render'
+import { screen } from '@testing-library/react'
+
+describe('Loader', () => {
+  test('Should render loader', async () => {
+    render(<Loader />)
+    expect(screen.getByTestId('loader')).toBeTruthy()
+  })
+})

src/__tests__/notFoundPage.test.js

@@ -0,0 +1,11 @@
+import NotFoundPage from '../React/pages/NotFoundPage'
+import { render } from '../helpers/render'
+import { screen } from '@testing-library/react'
+
+describe('NotFoundPage', () => {
+  test('Should render NotFoundPage', async () => {
+    render(<NotFoundPage />)
+    screen.debug()
+    expect(screen.getByText('Sorry, page not found')).toBeTruthy()
+  })
+})

src/helpers/render.js

@@ -0,0 +1,25 @@
+// IMPORTS // ______________________________________________________________
+
+import { configureStore } from "@reduxjs/toolkit"
+import { getEmployeesReducer } from "../Redux/reducers/getEmployeesReducer";
+import { MemoryRouter } from 'react-router';
+import { render as rtlRender } from '@testing-library/react'
+import { Provider } from 'react-redux'
+
+
+export function render(ui, options) {
+  const store = configureStore({
+    reducer: {
+      getEmployees: getEmployeesReducer,
+    }
+    })
+
+  function Wrapper({ children }) {
+      return (
+          <MemoryRouter {...options}>
+              <Provider store={store}>{children}</Provider>
+          </MemoryRouter>
+      )
+  }
+  rtlRender(ui, { wrapper: Wrapper })
+}

src/styles/components/loader.js

@@ -0,0 +1,87 @@
+import styled from 'styled-components'
+import colors from '../bases/colors'
+
+export const LoaderWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const LoaderContainer = styled.div`
+  color: ${colors.primary};
+  display: inline-block;
+  position: relative;
+  width: 5rem;
+  height: 5rem;
+  & div {
+    transform-origin: 40px 40px;
+    animation: lds-spinner 1.2s linear infinite;
+    @keyframes lds-spinner {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+    &:after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 3px;
+      left: 37px;
+      width: 6px;
+      height: 18px;
+      border-radius: 20%;
+      background: ${colors.primary};
+    }
+    &:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+    &:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+    &:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+    &:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+    &:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+    &:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+    &:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+    &:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+    &:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+    &:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+    &:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+    &:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+  }
+`