Skip to content

Commit

Permalink
feat: updated tests for filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rassl
Rassl committed Oct 16, 2024
1 parent 723fb6b commit d8d2dea
Showing 1 changed file with 39 additions and 155 deletions.
194 changes: 39 additions & 155 deletions src/components/App/SideBar/FilterSearch/__tests__/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
/* eslint-disable padding-line-between-statements */
import { ThemeProvider } from '@mui/material'
import '@testing-library/jest-dom'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import React from 'react'
import { ThemeProvider as StyleThemeProvider } from 'styled-components'
import { getSchemaAll } from '~/network/fetchSourcesData'
import { useDataStore } from '~/stores/useDataStore'
import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
import { useSchemaStore } from '~/stores/useSchemaStore'
import { colors } from '~/utils/colors'
import { appTheme } from '../../../Providers'
import { FilterSearch } from '../index'
Expand All @@ -13,207 +15,89 @@ jest.mock('~/stores/useDataStore', () => ({
useDataStore: jest.fn(),
}))

jest.mock('~/stores/useSchemaStore', () => ({
useSchemaStore: jest.fn(),
}))

jest.mock('~/stores/useFeatureFlagStore', () => ({
useFeatureFlagStore: jest.fn(),
}))

jest.mock('~/network/fetchSourcesData', () => ({
getSchemaAll: jest.fn(),
}))

const mockSetFilters = jest.fn()
const mockSetShowAllSchemas = jest.fn()
const mockSetAnchorEl = jest.fn()
const mockFetchData = jest.fn()
const mockSetAbortRequests = jest.fn()
const mockOnClose = jest.fn()

const mockSchemaAll = [{ type: 'Type1' }, { type: 'Type2' }, { type: 'Type3' }, { type: 'Type4' }, { type: 'Type5' }]
const mockSchemaAll = [{ type: 'Type1' }, { type: 'Type2' }, { type: 'Type3' }]

describe('FilterSearch Component', () => {
beforeEach(() => {
jest.clearAllMocks()

//
;(useDataStore as jest.Mock).mockReturnValue({
setFilters: mockSetFilters,
fetchData: mockFetchData,
setAbortRequests: mockSetAbortRequests,
onClose: mockOnClose,
})
;(useSchemaStore as jest.Mock).mockReturnValue([mockSchemaAll, jest.fn()])

Check failure on line 47 in src/components/App/SideBar/FilterSearch/__tests__/index.tsx

View workflow job for this annotation

GitHub Actions / eslint-run 

Expected blank line before this statement
;(useFeatureFlagStore as jest.Mock).mockReturnValue({ fastFiltersFeatureFlag: true })

Check failure on line 48 in src/components/App/SideBar/FilterSearch/__tests__/index.tsx

View workflow job for this annotation

GitHub Actions / eslint-run 

Expected blank line before this statement
;(getSchemaAll as jest.Mock).mockResolvedValue({ schemas: mockSchemaAll })

Check failure on line 49 in src/components/App/SideBar/FilterSearch/__tests__/index.tsx

View workflow job for this annotation

GitHub Actions / eslint-run 

Expected blank line before this statement
})

const renderComponent = (showAllSchemas = false) =>
const renderComponent = () =>
render(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<FilterSearch
anchorEl={document.createElement('div')}
onClose={mockOnClose}
schemaAll={mockSchemaAll}
setAnchorEl={mockSetAnchorEl}
setShowAllSchemas={mockSetShowAllSchemas}
showAllSchemas={showAllSchemas}
/>
<FilterSearch anchorEl={document.createElement('div')} onClose={mockOnClose} setAnchorEl={mockSetAnchorEl} />
</StyleThemeProvider>
</ThemeProvider>,
)

it('should highlight node_type if selected and allow multiple selections', () => {
it('should fetch and display schema types', async () => {
renderComponent()

const type1Pill = screen.getByText('Type1')
const type2Pill = screen.getByText('Type2')

fireEvent.click(type1Pill)
fireEvent.click(type2Pill)

expect(type1Pill).toHaveStyle(`background: ${colors.white}`)
expect(type1Pill).toHaveStyle(`color: ${colors.black}`)
expect(type2Pill).toHaveStyle(`background: ${colors.white}`)
expect(type2Pill).toHaveStyle(`color: ${colors.black}`)
await waitFor(() => {
mockSchemaAll.forEach((schema) => {
expect(screen.getByText(schema.type)).toBeInTheDocument()
})
})
})

it('should ensure node_type gets added to the request', async () => {
it('should highlight selected schema type when clicked', async () => {
renderComponent()

const type1Pill = screen.getByText('Type1')

fireEvent.click(type1Pill)

const showResultsButton = screen.getByText('Show Results')

fireEvent.click(showResultsButton)

await waitFor(() => {
expect(mockSetFilters).toHaveBeenCalledWith(
expect.objectContaining({
node_type: ['Type1'],
}),
)
})
expect(type1Pill).toHaveStyle(`background: ${colors.white}`)
expect(type1Pill).toHaveStyle(`color: ${colors.black}`)
})

it('should ensure all selected params in the filter get added correctly to the request', async () => {
it('should apply filters when "Show Results" is clicked', async () => {
renderComponent()

const type1Pill = screen.getByText('Type1')

fireEvent.click(type1Pill)

const hopsCheckbox = screen.getByLabelText('2 hops away')

fireEvent.click(hopsCheckbox)

const maxResultsSlider = screen.getByTestId('max-results-slider')
fireEvent.mouseDown(maxResultsSlider)
fireEvent.mouseUp(maxResultsSlider, { clientX: 50 })

const sourceNodesSlider = screen.getByTestId('source-nodes-slider')
fireEvent.mouseDown(sourceNodesSlider)
fireEvent.mouseUp(sourceNodesSlider, { clientX: 20 })

const showResultsButton = screen.getByText('Show Results')

fireEvent.click(showResultsButton)

waitFor(() => {
await waitFor(() => {
expect(mockSetFilters).toHaveBeenCalledWith({
node_type: ['Type1'],
limit: '50',
depth: '2',
top_node_count: '20',
limit: 30,
depth: '1',
top_node_count: '10',
})
})
})

it('should ensure slider is calculated from left to right correctly', () => {
renderComponent()

const maxResultsSlider = screen.getByTestId('max-results-slider')
fireEvent.mouseDown(maxResultsSlider)
fireEvent.mouseUp(maxResultsSlider, { clientX: 50 })
waitFor(() => {
expect(maxResultsSlider).toHaveValue(50)
})
})

it('should ensure only 1 on the Hops item can be selected at once (default should be 1)', () => {
renderComponent()

const directRelationshipCheckbox = screen.getByLabelText('Direct relationship')
const twoHopsAwayCheckbox = screen.getByLabelText('2 hops away')

expect(directRelationshipCheckbox).toBeChecked()
expect(twoHopsAwayCheckbox).not.toBeChecked()

fireEvent.click(twoHopsAwayCheckbox)

expect(directRelationshipCheckbox).not.toBeChecked()
expect(twoHopsAwayCheckbox).toBeChecked()
})

it('should ensure the "View More" button works correctly', () => {
renderComponent()

const viewMoreButton = screen.getByText('View More')
fireEvent.click(viewMoreButton)

expect(mockSetShowAllSchemas).toHaveBeenCalledWith(true)
})

it('should ensure the "Clear" button works correctly', async () => {
renderComponent()

const type1Pill = screen.getByText('Type1')
fireEvent.click(type1Pill)

const clearButton = screen.getByText('Clear')
fireEvent.click(clearButton)

waitFor(() => {
expect(screen.getByText('0')).toBeInTheDocument()
expect(type1Pill).toHaveStyle(`background: ${colors.BUTTON1_PRESS}`)
expect(type1Pill).toHaveStyle(`color: ${colors.white}`)
})
})

it('should ensure the modal opens and closes correctly', () => {
const { rerender } = renderComponent(true)

expect(screen.getByText('Type')).toBeInTheDocument()

rerender(
<ThemeProvider theme={appTheme}>
<StyleThemeProvider theme={appTheme}>
<FilterSearch
anchorEl={null}
onClose={mockOnClose}
schemaAll={mockSchemaAll}
setAnchorEl={mockSetAnchorEl}
setShowAllSchemas={mockSetShowAllSchemas}
showAllSchemas
/>
</StyleThemeProvider>
</ThemeProvider>,
)

expect(screen.queryByText('Type')).not.toBeInTheDocument()
})

it('should reset Source Nodes, Hops, and Max Results to default values when "Clear" button is clicked', async () => {
renderComponent()

const type1Pill = screen.getByText('Type1')
fireEvent.click(type1Pill)

const hopsCheckbox = screen.getByLabelText('2 hops away')
fireEvent.click(hopsCheckbox)

const maxResultsSlider = screen.getByTestId('max-results-slider')
fireEvent.mouseDown(maxResultsSlider)
fireEvent.mouseUp(maxResultsSlider, { clientX: 50 })

const sourceNodesSlider = screen.getByTestId('source-nodes-slider')
fireEvent.mouseDown(sourceNodesSlider)
fireEvent.mouseUp(sourceNodesSlider, { clientX: 20 })

const clearButton = screen.getByText('Clear')
fireEvent.click(clearButton)

waitFor(() => {
expect(screen.getByLabelText('Direct relationship')).toBeChecked()
expect(screen.getByTestId('max-results-slider')).toHaveValue(30)
expect(screen.getByTestId('source-nodes-slider')).toHaveValue(10)
})
})
// Add more specific tests as needed...
})

0 comments on commit d8d2dea

Please sign in to comment.