diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap index ebe3e8573a9..d704ed4b835 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap @@ -211,6 +211,7 @@ exports[`Overview view matches snapshot 1`] = ` @@ -219,6 +220,7 @@ exports[`Overview view matches snapshot 1`] = ` cx={2} cy={2} r={2} + role="circle" /> diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx index abce1702b59..81bcc3456eb 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx @@ -11,7 +11,7 @@ import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon'; import * as Metrics from 'components/common/Metrics'; import TagStyled from 'components/common/Tag/Tag.styled'; -interface Props extends Topic, TopicDetails { +export interface Props extends Topic, TopicDetails { clusterName: ClusterName; topicName: TopicName; clearTopicMessages( @@ -52,6 +52,7 @@ const Overview: React.FC = ({ label="URP" title="Under replicated partitions" isAlert + alertType={underReplicatedPartitions === 0 ? 'error' : 'success'} > {underReplicatedPartitions} diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx index 3bd9fd920a2..f0b8f58303b 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx @@ -1,9 +1,11 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { screen } from '@testing-library/react'; +import { render } from 'lib/testHelpers'; import Overview from 'components/Topics/Topic/Details/Overview/Overview'; +import theme from 'theme/theme'; describe('Overview', () => { - const mockInternal = false; const mockClusterName = 'local'; const mockTopicName = 'topic'; const mockClearTopicMessages = jest.fn(); @@ -23,13 +25,32 @@ describe('Overview', () => { }, ]; + const renderComponent = ({ + underReplicatedPartitions = 1, + inSyncReplicas = 1, + replicas = 1, + } = {}) => + render( + + ); + describe('when it has internal flag', () => { it('does not render the Action button a Topic', () => { const component = shallow( { { expect(componentEmpty.find('td').text()).toEqual('No Partitions found'); }); }); + + describe('should render circular alert', () => { + it('should be in document', () => { + renderComponent(); + const circles = screen.getAllByRole('circle'); + expect(circles.length).toEqual(2); + }); + + it('should be the appropriate color', () => { + renderComponent({ + underReplicatedPartitions: 0, + inSyncReplicas: 1, + replicas: 2, + }); + const circles = screen.getAllByRole('circle'); + expect(circles[0]).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); + expect(circles[1]).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); + }); + }); }); diff --git a/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx b/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx index 5b98b645287..3431b67394a 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/Indicator.tsx @@ -3,7 +3,7 @@ import { AlertType } from 'redux/interfaces'; import * as S from './Metrics.styled'; -interface Props { +export interface Props { fetching?: boolean; isAlert?: boolean; label: React.ReactNode; diff --git a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx index 8384e12aa3f..6feb0a3da93 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx @@ -78,6 +78,7 @@ export const RedText = styled.span` `; export const CircularAlertWrapper = styled.svg.attrs({ + role: 'svg', viewBox: '0 0 4 4', xmlns: 'http://www.w3.org/2000/svg', })` @@ -87,7 +88,12 @@ export const CircularAlertWrapper = styled.svg.attrs({ height: 4px; `; -export const CircularAlert = styled.circle.attrs({ cx: 2, cy: 2, r: 2 })<{ +export const CircularAlert = styled.circle.attrs({ + role: 'circle', + cx: 2, + cy: 2, + r: 2, +})<{ $type: AlertType; }>( ({ theme, $type }) => css` diff --git a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx index 10fcaa85675..07bb6f6853d 100644 --- a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx @@ -2,20 +2,61 @@ import React from 'react'; import { Indicator } from 'components/common/Metrics'; import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; +import { Props } from 'components/common/Metrics/Indicator'; +import theme from 'theme/theme'; const title = 'Test Title'; const label = 'Test Label'; const child = 'Child'; describe('Indicator', () => { - it('matches the snapshot', () => { + const setupComponent = (props: Partial = {}) => render( - + {child} ); + + it('renders indicator', () => { + setupComponent({ title, label }); expect(screen.getByTitle(title)).toBeInTheDocument(); expect(screen.getByText(label)).toBeInTheDocument(); expect(screen.getByText(child)).toBeInTheDocument(); }); + + describe('should render circular alert', () => { + it('should be in document', () => { + setupComponent({ title, label, isAlert: true }); + expect(screen.getByRole('svg')).toBeInTheDocument(); + expect(screen.getByRole('circle')).toBeInTheDocument(); + }); + + it('success alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'success' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${theme.circularAlert.color.success}` + ); + }); + + it('error alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'error' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${theme.circularAlert.color.error}` + ); + }); + + it('warning alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'warning' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${theme.circularAlert.color.warning}` + ); + }); + + it('info alert', () => { + setupComponent({ title, label, isAlert: true, alertType: 'info' }); + expect(screen.getByRole('circle')).toHaveStyle( + `fill: ${theme.circularAlert.color.info}` + ); + }); + }); });