From d8d2dea5ddd18b1cdd0fe63b7ea58145ac1972bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 16 Oct 2024 17:15:13 +0300 Subject: [PATCH] feat: updated tests for filters --- .../SideBar/FilterSearch/__tests__/index.tsx | 194 ++++-------------- 1 file changed, 39 insertions(+), 155 deletions(-) diff --git a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx index c09d6a4c2..051c2e162 100644 --- a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx +++ b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx @@ -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' @@ -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()]) + ;(useFeatureFlagStore as jest.Mock).mockReturnValue({ fastFiltersFeatureFlag: true }) + ;(getSchemaAll as jest.Mock).mockResolvedValue({ schemas: mockSchemaAll }) }) - const renderComponent = (showAllSchemas = false) => + const renderComponent = () => render( - + , ) - 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( - - - - - , - ) - - 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... })