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`] = `
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}`
+ );
+ });
+ });
});