smengcl commented on code in PR #11417: URL: https://github.com/apache/ozone/pull/11417#discussion_r4210535277
########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/__tests__/containers/Containers.test.tsx: ########## @@ -0,0 +1,222 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { http, HttpResponse } from 'msw'; +import { vi } from 'vitest'; + +import Containers from '@/v2/pages/containers/containers'; +import * as commonUtils from '@/utils/common'; +import { ClusterState } from '@tests/mocks/overviewMocks/overviewResponseMocks'; +import { containersServer } from '@tests/mocks/containerMocks/containersServer'; +import * as containerMocks from '@tests/mocks/containerMocks/containerResponseMocks'; +import { containerLocators, searchInputLocator } from '@tests/locators/locators'; +import { waitForContainerRows } from '@tests/utils/containers.utils'; + +vi.spyOn(commonUtils, 'showDataFetchError'); + +vi.mock('@/components/autoReloadPanel/autoReloadPanel', () => ({ + default: () => <div data-testid="auto-reload-panel" />, +})); +vi.mock('@/v2/components/select/multiSelect.tsx', () => ({ + default: ({ onChange }: { onChange: Function }) => ( + <select data-testid="multi-select" onChange={(e) => onChange(e.target.value)}> + <option value="containerID">Container ID</option> + <option value="pipelineID">Pipeline ID</option> + </select> + ), +})); + +vi.mock('@/v2/hooks/useAPIData.hook', async (importOriginal) => { + const actual = await importOriginal<typeof import('@/v2/hooks/useAPIData.hook')>(); + return { + ...actual, + useApiData: <T,>(url: string, defaultValue: T, options = {}) => { + if (url === '/api/v1/clusterState') { + return { + data: ClusterState as T, + loading: false, + error: null, + lastUpdated: Date.now(), + success: true, + execute: vi.fn(), + refetch: vi.fn(() => Promise.resolve({ data: ClusterState })), + clearError: vi.fn(), + reset: vi.fn(), + }; + } + return actual.useApiData(url, defaultValue, { + ...options, + retryAttempts: 0, + retryDelay: 0, + }); + }, + }; +}); + +function getEnabledSearchInput() { + const inputs = screen.getAllByTestId(searchInputLocator); + return inputs.find((el) => !(el as HTMLInputElement).disabled) ?? inputs[0]; +} + +async function debouncedSearch() { + await new Promise((r) => { setTimeout(r, 310); }); +} + +describe('Containers Component', () => { + beforeEach(() => { + vi.mocked(commonUtils.showDataFetchError).mockClear(); + }); + beforeAll(() => containersServer.listen()); + afterEach(() => containersServer.resetHandlers()); + afterAll(() => containersServer.close()); + + test('renders component correctly', async () => { + render(<Containers />); + + expect(screen.getByText('Containers')).toBeInTheDocument(); + expect(screen.getByTestId('auto-reload-panel')).toBeInTheDocument(); + expect(screen.getByTestId('multi-select')).toBeInTheDocument(); + expect(screen.getByText('Highlights')).toBeInTheDocument(); + expect(screen.getByRole('tab', { name: 'Missing' })).toBeInTheDocument(); + + await waitForContainerRows(); + expect(getEnabledSearchInput()).toBeInTheDocument(); + }); + + test('Loads data on mount', async () => { + render(<Containers />); + + const rows = await waitForContainerRows(); + expect(rows[0]).toHaveTextContent('101'); + expect(screen.getByTestId(containerLocators.containerTableRow(102))).toBeInTheDocument(); + }); + + test('loads missing containers on mount and updates highlights', async () => { + render(<Containers />); + + await waitForContainerRows(); + + const highlightsCard = screen.getByText('Highlights').closest('.ant-card'); + expect(highlightsCard).toHaveTextContent(String(ClusterState.containers)); + expect(highlightsCard).toHaveTextContent('25'); + expect(highlightsCard).toHaveTextContent('2'); + }); + + test('Renders table with correct number of rows', async () => { + render(<Containers />); + + const rows = await waitForContainerRows(); + expect(rows).toHaveLength(3); + }); + + test('Displays no data message if the missing containers API returns an empty array', async () => { + containersServer.use( + http.get('/api/v1/containers/unhealthy/MISSING', () => + HttpResponse.json(containerMocks.EmptyUnhealthyResponse)) + ); + + render(<Containers />); + + await waitFor(() => expect(screen.getByText('No Data')).toBeInTheDocument()); Review Comment: [P2] Wait for loading to finish before checking the empty state. `No Data` already appears while the request is in flight, so this assertion can pass before the response is processed. The suite still passes if an empty response incorrectly produces a row. ```suggestion const { container } = render(<Containers />); await waitFor(() => { expect(container.querySelector('.ant-spin-spinning')).not.toBeInTheDocument(); expect(screen.getByText('No Data')).toBeInTheDocument(); }); ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/__tests__/containers/Containers.test.tsx: ########## @@ -0,0 +1,222 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { http, HttpResponse } from 'msw'; +import { vi } from 'vitest'; + +import Containers from '@/v2/pages/containers/containers'; +import * as commonUtils from '@/utils/common'; +import { ClusterState } from '@tests/mocks/overviewMocks/overviewResponseMocks'; +import { containersServer } from '@tests/mocks/containerMocks/containersServer'; +import * as containerMocks from '@tests/mocks/containerMocks/containerResponseMocks'; +import { containerLocators, searchInputLocator } from '@tests/locators/locators'; +import { waitForContainerRows } from '@tests/utils/containers.utils'; + +vi.spyOn(commonUtils, 'showDataFetchError'); + +vi.mock('@/components/autoReloadPanel/autoReloadPanel', () => ({ + default: () => <div data-testid="auto-reload-panel" />, +})); +vi.mock('@/v2/components/select/multiSelect.tsx', () => ({ + default: ({ onChange }: { onChange: Function }) => ( + <select data-testid="multi-select" onChange={(e) => onChange(e.target.value)}> + <option value="containerID">Container ID</option> + <option value="pipelineID">Pipeline ID</option> + </select> + ), +})); + +vi.mock('@/v2/hooks/useAPIData.hook', async (importOriginal) => { + const actual = await importOriginal<typeof import('@/v2/hooks/useAPIData.hook')>(); + return { + ...actual, + useApiData: <T,>(url: string, defaultValue: T, options = {}) => { + if (url === '/api/v1/clusterState') { + return { + data: ClusterState as T, + loading: false, + error: null, + lastUpdated: Date.now(), + success: true, + execute: vi.fn(), + refetch: vi.fn(() => Promise.resolve({ data: ClusterState })), + clearError: vi.fn(), + reset: vi.fn(), + }; + } + return actual.useApiData(url, defaultValue, { + ...options, + retryAttempts: 0, + retryDelay: 0, + }); + }, + }; +}); + +function getEnabledSearchInput() { + const inputs = screen.getAllByTestId(searchInputLocator); + return inputs.find((el) => !(el as HTMLInputElement).disabled) ?? inputs[0]; +} + +async function debouncedSearch() { + await new Promise((r) => { setTimeout(r, 310); }); +} + +describe('Containers Component', () => { + beforeEach(() => { + vi.mocked(commonUtils.showDataFetchError).mockClear(); + }); + beforeAll(() => containersServer.listen()); + afterEach(() => containersServer.resetHandlers()); + afterAll(() => containersServer.close()); + + test('renders component correctly', async () => { + render(<Containers />); + + expect(screen.getByText('Containers')).toBeInTheDocument(); + expect(screen.getByTestId('auto-reload-panel')).toBeInTheDocument(); + expect(screen.getByTestId('multi-select')).toBeInTheDocument(); + expect(screen.getByText('Highlights')).toBeInTheDocument(); + expect(screen.getByRole('tab', { name: 'Missing' })).toBeInTheDocument(); + + await waitForContainerRows(); + expect(getEnabledSearchInput()).toBeInTheDocument(); + }); + + test('Loads data on mount', async () => { + render(<Containers />); + + const rows = await waitForContainerRows(); + expect(rows[0]).toHaveTextContent('101'); + expect(screen.getByTestId(containerLocators.containerTableRow(102))).toBeInTheDocument(); + }); + + test('loads missing containers on mount and updates highlights', async () => { + render(<Containers />); + + await waitForContainerRows(); + + const highlightsCard = screen.getByText('Highlights').closest('.ant-card'); + expect(highlightsCard).toHaveTextContent(String(ClusterState.containers)); + expect(highlightsCard).toHaveTextContent('25'); + expect(highlightsCard).toHaveTextContent('2'); Review Comment: [P2] Check the Quasi Closed value directly. The whole-card match for `2` also matches `20` or `25`. Replacing the Quasi Closed value with `N/A` still leaves all tests passing. This checks the exact value and waits for its separate request to update the highlight. ```suggestion const quasiClosed = screen.getByText('Quasi Closed', { selector: '.highlight-content' }); await waitFor(() => expect(quasiClosed.querySelector('.highlight-content-value')).toHaveTextContent(/^2$/)); ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/__tests__/containers/Containers.test.tsx: ########## @@ -0,0 +1,222 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { http, HttpResponse } from 'msw'; +import { vi } from 'vitest'; + +import Containers from '@/v2/pages/containers/containers'; +import * as commonUtils from '@/utils/common'; +import { ClusterState } from '@tests/mocks/overviewMocks/overviewResponseMocks'; +import { containersServer } from '@tests/mocks/containerMocks/containersServer'; +import * as containerMocks from '@tests/mocks/containerMocks/containerResponseMocks'; +import { containerLocators, searchInputLocator } from '@tests/locators/locators'; +import { waitForContainerRows } from '@tests/utils/containers.utils'; + +vi.spyOn(commonUtils, 'showDataFetchError'); + +vi.mock('@/components/autoReloadPanel/autoReloadPanel', () => ({ + default: () => <div data-testid="auto-reload-panel" />, +})); +vi.mock('@/v2/components/select/multiSelect.tsx', () => ({ + default: ({ onChange }: { onChange: Function }) => ( + <select data-testid="multi-select" onChange={(e) => onChange(e.target.value)}> + <option value="containerID">Container ID</option> + <option value="pipelineID">Pipeline ID</option> + </select> + ), +})); + +vi.mock('@/v2/hooks/useAPIData.hook', async (importOriginal) => { + const actual = await importOriginal<typeof import('@/v2/hooks/useAPIData.hook')>(); + return { + ...actual, + useApiData: <T,>(url: string, defaultValue: T, options = {}) => { + if (url === '/api/v1/clusterState') { + return { + data: ClusterState as T, + loading: false, + error: null, + lastUpdated: Date.now(), + success: true, + execute: vi.fn(), + refetch: vi.fn(() => Promise.resolve({ data: ClusterState })), + clearError: vi.fn(), + reset: vi.fn(), + }; + } + return actual.useApiData(url, defaultValue, { + ...options, + retryAttempts: 0, + retryDelay: 0, + }); + }, + }; +}); + +function getEnabledSearchInput() { + const inputs = screen.getAllByTestId(searchInputLocator); + return inputs.find((el) => !(el as HTMLInputElement).disabled) ?? inputs[0]; +} + +async function debouncedSearch() { + await new Promise((r) => { setTimeout(r, 310); }); +} + +describe('Containers Component', () => { + beforeEach(() => { + vi.mocked(commonUtils.showDataFetchError).mockClear(); + }); + beforeAll(() => containersServer.listen()); + afterEach(() => containersServer.resetHandlers()); + afterAll(() => containersServer.close()); + + test('renders component correctly', async () => { + render(<Containers />); + + expect(screen.getByText('Containers')).toBeInTheDocument(); + expect(screen.getByTestId('auto-reload-panel')).toBeInTheDocument(); + expect(screen.getByTestId('multi-select')).toBeInTheDocument(); + expect(screen.getByText('Highlights')).toBeInTheDocument(); + expect(screen.getByRole('tab', { name: 'Missing' })).toBeInTheDocument(); + + await waitForContainerRows(); + expect(getEnabledSearchInput()).toBeInTheDocument(); + }); + + test('Loads data on mount', async () => { + render(<Containers />); + + const rows = await waitForContainerRows(); + expect(rows[0]).toHaveTextContent('101'); + expect(screen.getByTestId(containerLocators.containerTableRow(102))).toBeInTheDocument(); + }); + + test('loads missing containers on mount and updates highlights', async () => { + render(<Containers />); + + await waitForContainerRows(); + + const highlightsCard = screen.getByText('Highlights').closest('.ant-card'); + expect(highlightsCard).toHaveTextContent(String(ClusterState.containers)); + expect(highlightsCard).toHaveTextContent('25'); + expect(highlightsCard).toHaveTextContent('2'); + }); + + test('Renders table with correct number of rows', async () => { + render(<Containers />); + + const rows = await waitForContainerRows(); + expect(rows).toHaveLength(3); + }); + + test('Displays no data message if the missing containers API returns an empty array', async () => { + containersServer.use( + http.get('/api/v1/containers/unhealthy/MISSING', () => + HttpResponse.json(containerMocks.EmptyUnhealthyResponse)) + ); + + render(<Containers />); + + await waitFor(() => expect(screen.getByText('No Data')).toBeInTheDocument()); + }); + + test('lazy-loads data when switching to under-replicated tab', async () => { + render(<Containers />); + await waitForContainerRows(); + + await userEvent.click(screen.getByRole('tab', { name: 'Under-Replicated' })); + + await waitFor(() => + expect(screen.getByTestId(containerLocators.containerTableRow(201))).toBeInTheDocument()); + }); + + test('lazy-loads data when switching to over-replicated tab', async () => { + render(<Containers />); + await waitForContainerRows(); + + await userEvent.click(screen.getByRole('tab', { name: 'Over-Replicated' })); + + await waitFor(() => + expect(screen.getByTestId(containerLocators.containerTableRow(301))).toBeInTheDocument()); + }); + + test('lazy-loads quasi closed containers when switching tabs', async () => { + render(<Containers />); + await waitForContainerRows(); + + await userEvent.click(screen.getByRole('tab', { name: 'Quasi Closed' })); + + await waitFor(() => + expect(screen.getByTestId(containerLocators.containerTableRow(401))).toBeInTheDocument()); + }); Review Comment: [P2] Verify when each tab's data is fetched. These tests still pass with eager fetching on mount or fetching on every tab switch. Checking the request count before activation, after activation, and after revisiting would catch both regressions. The quasi-closed `limit=0` request only fetches the highlight count, so it should be excluded. ```diff @@ -23,6 +23,7 @@ import { vi } from 'vitest'; import Containers from '@/v2/pages/containers/containers'; +import * as apiData from '@/v2/hooks/useAPIData.hook'; import * as commonUtils from '@/utils/common'; import { ClusterState } from '@tests/mocks/overviewMocks/overviewResponseMocks'; import { containersServer } from '@tests/mocks/containerMocks/containersServer'; @@ -141,29 +142,27 @@ - test('lazy-loads data when switching to under-replicated tab', async () => { - render(<Containers />); - await waitForContainerRows(); - - await userEvent.click(screen.getByRole('tab', { name: 'Under-Replicated' })); - - await waitFor(() => - expect(screen.getByTestId(containerLocators.containerTableRow(201))).toBeInTheDocument()); - }); - - test('lazy-loads data when switching to over-replicated tab', async () => { - render(<Containers />); - await waitForContainerRows(); - - await userEvent.click(screen.getByRole('tab', { name: 'Over-Replicated' })); - - await waitFor(() => - expect(screen.getByTestId(containerLocators.containerTableRow(301))).toBeInTheDocument()); - }); - - test('lazy-loads quasi closed containers when switching tabs', async () => { - render(<Containers />); - await waitForContainerRows(); - - await userEvent.click(screen.getByRole('tab', { name: 'Quasi Closed' })); - - await waitFor(() => - expect(screen.getByTestId(containerLocators.containerTableRow(401))).toBeInTheDocument()); + test.each([ + { tab: 'Under-Replicated', endpoint: '/api/v1/containers/unhealthy/UNDER_REPLICATED', id: 201 }, + { tab: 'Over-Replicated', endpoint: '/api/v1/containers/unhealthy/OVER_REPLICATED', id: 301 }, + { tab: 'Quasi Closed', endpoint: '/api/v1/containers/quasiClosed', id: 401 }, + ])('lazy-loads $tab once on first activation', async ({ tab, endpoint, id }) => { + const requests = vi.spyOn(apiData, 'fetchData'); + const tableRequests = () => requests.mock.calls.filter( + ([url, , params]) => url === endpoint && params?.limit !== 0 + ); + + try { + render(<Containers />); + await waitForContainerRows(); + expect(tableRequests()).toHaveLength(0); + + await userEvent.click(screen.getByRole('tab', { name: tab })); + await waitFor(() => + expect(screen.getByTestId(containerLocators.containerTableRow(id))).toBeInTheDocument()); + expect(tableRequests()).toHaveLength(1); + + await userEvent.click(screen.getByRole('tab', { name: 'Missing' })); + await userEvent.click(screen.getByRole('tab', { name: tab })); + expect(tableRequests()).toHaveLength(1); + } finally { + requests.mockRestore(); + } }); ``` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
