1125-fesso-add-status-dropdown (#1207)

* 1125-fesso-add-status-dropdown

* 1125-fesso-add-status-dropdown

* 1125-fesso-add-status-dropdown

* 1125-fesso-add-status-dropdown

* 1125-fesso-add-status-dropdown

* 1125-fesso-add-status-dropdown

web/usuaris/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.15.0] - 2024-05-08
+
+### Added
+
+- Added Status filter
+
 ## [0.14.0] - 2024-05-06
 
 ### Added

web/usuaris/package.json

@@ -1,7 +1,7 @@
 {
   "name": "web_usuaris",
   "private": true,
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.0.0",
     "@itacademy/schemas": "^0.3.0",
-    "@itacademy/ui": "^0.31.6",
+    "@itacademy/ui": "^0.31.7",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",
     "@tanstack/react-table": "^8.13.2",

web/usuaris/src/__mocks__/handlers.ts

@@ -1,17 +1,20 @@
 import { HttpResponse, http } from 'msw'
 import { urls } from '../constants'
+import { UserStatus } from '../types'
 
 export const handlers = [
   http.get(urls.getUsers, ({ request }) => {
     const url = new URL(request.url)
     const itinerarySlug = url.searchParams.get('itinerarySlug')
+    const status = url.searchParams.get('status')
     const startDate = url.searchParams.get('startDate')
     const endDate = url.searchParams.get('endDate')
     const name = url.searchParams.get('name')
     const dni = url.searchParams.get('dni')
 
     if (
       itinerarySlug === 'frontend-react' &&
+      status === UserStatus.ACTIVE &&
       ((startDate &&
         startDate <= '2023/11/06 00:00:00.000' &&
         endDate &&
@@ -34,6 +37,7 @@ export const handlers = [
         { status: 200 }
       )
     }
+
     return HttpResponse.json(
       [
         {

web/usuaris/src/__tests__/hooks/useGetUsers.test.tsx

@@ -3,6 +3,7 @@ import { useGetUsers } from '../../hooks/useGetUsers'
 import { renderHook, waitFor } from '../test-utils'
 import { queryClient } from '../setup'
 import { type TFilters } from '../../types'
+import { UserStatus } from '../../types'
 
 describe('useGetUsers', () => {
   it('fetches users successfully', async () => {
@@ -63,7 +64,7 @@ describe('useGetUsers', () => {
   it('handles filters correctly', async () => {
     const filters: TFilters = {
       itinerarySlug: 'example-slug',
-      status: 'ACTIVE',
+      status: UserStatus.ACTIVE,
       startDate: '2023-03-05T00:00:00.000Z',
       endDate: '2026-03-05T00:00:00.000Z',
       name: 'John Doe',

web/usuaris/src/__tests__/hooks/useUpdateUser.test.tsx

@@ -5,6 +5,7 @@ import { setupServer } from 'msw/node'
 import { useUpdateUser } from '../../hooks'
 import { queryClient } from '../setup'
 import { handlers } from '../../__mocks__/handlers'
+import { UserStatus } from '../../types'
 
 const server = setupServer(...handlers)
 beforeEach(() => {
@@ -50,7 +51,7 @@ describe('useUpdateUser hook', () => {
     act(() => {
       result.current.changeUserStatus.mutate({
         id: '1',
-        status: 'BLOCKED',
+        status: UserStatus.BLOCKED,
       })
     })
     await waitFor(() => {

web/usuaris/src/__tests__/molecules/StatusDropdown.test.tsx

@@ -0,0 +1,40 @@
+import { vi } from 'vitest'
+import { fireEvent, render, screen } from '../test-utils'
+import { StatusDropdown } from '../../components/molecules'
+import { UserStatus } from '../../types'
+
+const mockHandleClick = vi.fn()
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('StatusDropdown', () => {
+  it('renders correctly', () => {
+    render(<StatusDropdown handleStatus={mockHandleClick} />)
+
+    expect(screen.getByText(/estat/i)).toBeInTheDocument()
+
+    expect(screen.getByTitle(/obre/i)).toBeInTheDocument()
+  })
+
+  it('renders all status with icon and returns selected option to parent', async () => {
+    render(<StatusDropdown handleStatus={mockHandleClick} />)
+
+    const dropdownHeader = screen.getByTestId('dropdown-header')
+    expect(dropdownHeader).toHaveTextContent(/estat/i)
+
+    fireEvent.click(dropdownHeader)
+
+    const activeStatus = screen.getByTestId('ACTIVE')
+    expect(activeStatus).toBeInTheDocument()
+    expect(screen.getByText(/pendent/i)).toBeInTheDocument()
+    expect(screen.getByText(/bloquejat/i)).toBeInTheDocument()
+
+    fireEvent.click(activeStatus)
+
+    expect(dropdownHeader).toHaveTextContent(/actiu/i)
+
+    expect(mockHandleClick).toHaveBeenCalledWith(UserStatus.ACTIVE)
+  })
+})

web/usuaris/src/__tests__/organisms/FiltersWidget.test.tsx

@@ -1,5 +1,6 @@
-import { fireEvent, render, screen, waitFor } from '../test-utils'
+import { fireEvent, render, screen, waitFor, within } from '../test-utils'
 import { FiltersWidget } from '../../components/organisms'
+import { UserStatus } from '../../types'
 
 const mockSetFilters = vi.fn()
 
@@ -20,18 +21,21 @@ describe('FiltersWidget', () => {
       expect(screen.getByText(/especialitat/i)).toBeInTheDocument()
     )
 
-    const dropdownHeader = screen.getByTestId('dropdown-header')
+    const itineraryDropdown = screen.getByTestId('itinerary-dropdown')
 
-    expect(dropdownHeader).toHaveTextContent(/especialitat/i)
+    const itineraryDropdownHeader =
+      within(itineraryDropdown).getByTestId('dropdown-header')
 
-    fireEvent.click(dropdownHeader)
+    expect(itineraryDropdownHeader).toHaveTextContent(/especialitat/i)
 
-    const reactOption = screen.getByText('Frontend React')
+    fireEvent.click(itineraryDropdownHeader)
+
+    const reactOption = screen.getByTestId('1')
     expect(reactOption).toBeInTheDocument()
 
     fireEvent.click(reactOption)
 
-    expect(dropdownHeader).toHaveTextContent('Frontend React')
+    expect(itineraryDropdown).toHaveTextContent('Frontend React')
     expect(screen.queryByText(/especialitat/i)).not.toBeInTheDocument()
 
     expect(mockSetFilters).toHaveBeenCalledWith({
@@ -42,7 +46,7 @@ describe('FiltersWidget', () => {
   it('deletes itinerary deselected and sends other filters to parent', async () => {
     render(
       <FiltersWidget
-        filters={{ status: 'ACTIVE' }}
+        filters={{ status: UserStatus.ACTIVE }}
         setFilters={mockSetFilters}
       />
     )
@@ -51,30 +55,101 @@ describe('FiltersWidget', () => {
       expect(screen.getByText(/especialitat/i)).toBeInTheDocument()
     )
 
-    const dropdownHeader = screen.getByTestId('dropdown-header')
+    const itineraryDropdown = screen.getByTestId('itinerary-dropdown')
+
+    const itineraryDropdownHeader =
+      within(itineraryDropdown).getByTestId('dropdown-header')
+
+    expect(itineraryDropdownHeader).toHaveTextContent(/especialitat/i)
 
-    fireEvent.click(dropdownHeader)
+    fireEvent.click(itineraryDropdownHeader)
 
-    const reactOption = screen.getByText('Frontend React')
+    const reactOption = screen.getByTestId('1')
     expect(reactOption).toBeInTheDocument()
 
     fireEvent.click(reactOption)
 
-    expect(dropdownHeader).toHaveTextContent('Frontend React')
+    expect(itineraryDropdownHeader).toHaveTextContent('Frontend React')
 
     expect(mockSetFilters).toHaveBeenCalledWith({
       itinerarySlug: 'react',
-      status: 'ACTIVE',
+      status: UserStatus.ACTIVE,
+    })
+
+    const deselectReact = within(itineraryDropdownHeader).getByTestId(
+      'deselect-1'
+    )
+
+    fireEvent.click(deselectReact)
+
+    expect(mockSetFilters).toHaveBeenCalledWith({
+      status: UserStatus.ACTIVE,
+    })
+  })
+
+  it('shows status selected in dropdown and sends it to parent', async () => {
+    render(<FiltersWidget filters={{}} setFilters={mockSetFilters} />)
+
+    const statusDropdown = screen.getByTestId('status-dropdown')
+
+    const statusDropdownHeader =
+      within(statusDropdown).getByTestId('dropdown-header')
+
+    expect(statusDropdownHeader).toHaveTextContent(/estat/i)
+
+    fireEvent.click(statusDropdownHeader)
+
+    const activeOption = screen.getByTestId('ACTIVE')
+    expect(activeOption).toBeInTheDocument()
+
+    fireEvent.click(activeOption)
+
+    expect(statusDropdownHeader).toHaveTextContent('Actiu')
+    expect(screen.queryByText(/estat/i)).not.toBeInTheDocument()
+
+    expect(mockSetFilters).toHaveBeenCalledWith({
+      status: UserStatus.ACTIVE,
+    })
+  })
+
+  it('deletes status deselected and sends other filters to parent', () => {
+    render(
+      <FiltersWidget
+        filters={{ itinerarySlug: 'frontend-react' }}
+        setFilters={mockSetFilters}
+      />
+    )
+
+    const statusDropdown = screen.getByTestId('status-dropdown')
+
+    const statusDropdownHeader =
+      within(statusDropdown).getByTestId('dropdown-header')
+
+    expect(statusDropdownHeader).toHaveTextContent(/estat/i)
+
+    fireEvent.click(statusDropdownHeader)
+
+    const activeOption = screen.getByTestId('ACTIVE')
+    expect(activeOption).toBeInTheDocument()
+
+    fireEvent.click(activeOption)
+
+    expect(statusDropdownHeader).toHaveTextContent('Actiu')
+
+    expect(mockSetFilters).toHaveBeenCalledWith({
+      itinerarySlug: 'frontend-react',
+      status: UserStatus.ACTIVE,
     })
 
-    fireEvent.click(dropdownHeader)
+    fireEvent.click(statusDropdownHeader)
 
-    const deselectReact = screen.getAllByTestId('deselect-1')
+    const deselectActive =
+      within(statusDropdownHeader).getByTestId('deselect-ACTIVE')
 
-    fireEvent.click(deselectReact[0])
+    fireEvent.click(deselectActive)
 
     expect(mockSetFilters).toHaveBeenCalledWith({
-      status: 'ACTIVE',
+      itinerarySlug: 'frontend-react',
     })
   })
 
@@ -97,7 +172,7 @@ describe('FiltersWidget', () => {
   it('deletes search value when closing search and updates filters accordingly', () => {
     render(
       <FiltersWidget
-        filters={{ status: 'ACTIVE' }}
+        filters={{ status: UserStatus.ACTIVE }}
         setFilters={mockSetFilters}
       />
     )
@@ -107,7 +182,7 @@ describe('FiltersWidget', () => {
 
     waitFor(() =>
       expect(mockSetFilters).toHaveBeenCalledWith({
-        status: 'ACTIVE',
+        status: UserStatus.ACTIVE,
         name: 'marc',
         dni: 'marc',
       })
@@ -146,7 +221,7 @@ describe('FiltersWidget', () => {
   it('deletes dates when closing dates inputs and updates filters accordingly', () => {
     render(
       <FiltersWidget
-        filters={{ status: 'ACTIVE' }}
+        filters={{ status: UserStatus.ACTIVE }}
         setFilters={mockSetFilters}
       />
     )

web/usuaris/src/__tests__/organisms/UsersTable.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen, waitFor } from '../test-utils'
 import { UsersTable } from '../../components/organisms'
 import { errorHandlers } from '../../__mocks__/handlers'
 import { server } from '../../__mocks__/server'
+import { UserStatus } from '../../types'
 
 afterEach(() => {
   server.resetHandlers()
@@ -59,6 +60,7 @@ describe('UsersTable', () => {
       <UsersTable
         filtersSelected={{
           itinerarySlug: 'frontend-react',
+          status: UserStatus.ACTIVE,
           startDate: '2023/11/06 00:00:00.000',
           endDate: '2023/11/06 00:00:00.000',
           name: 'marc',

web/usuaris/src/components/molecules/ItineraryDropdown.tsx

@@ -91,6 +91,7 @@ export const ItineraryDropdown: FC<TItineraryDropdown> = ({
       openText={t('Abrir')}
       closeText={t('Cerrar')}
       deselectText={t('Deseleccionar')}
+      data-testid="itinerary-dropdown"
     />
   ) : null
 }