Issues/1738 Time to retain data rendenring Styling (#1780)

* TimeToRetainBtn Fix Styling during non active state + write test suites for these components

* TimeToRetainBtn Fix Style during initial render phase

* TimeToRetainBtn Spec suites changes

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx

@@ -4,7 +4,7 @@ import { MILLISECONDS_IN_WEEK } from 'lib/constants';
 
 import * as S from './TopicForm.styled';
 
-interface Props {
+export interface Props {
   inputName: string;
   text: string;
   value: number;
@@ -16,7 +16,7 @@ const TimeToRetainBtn: React.FC<Props> = ({ inputName, text, value }) => {
 
   return (
     <S.Button
-      isActive={watchedValue === value}
+      isActive={parseFloat(watchedValue) === value}
       type="button"
       onClick={() => setValue(inputName, value)}
     >

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import TimeToRetainBtn from './TimeToRetainBtn';
 
-interface Props {
+export interface Props {
   name: string;
   value: string;
 }

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts

@@ -30,7 +30,7 @@ export const Button = styled.button<{ isActive: boolean }>`
   background-color: ${({ theme, ...props }) =>
     props.isActive
       ? theme.button.primary.backgroundColor.active
-      : theme.button.primary.color};
+      : theme.button.primary.backgroundColor.normal};
   height: 32px;
   width: 46px;
   border: 1px solid

kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import TimeToRetainBtn, {
+  Props,
+} from 'components/Topics/shared/Form/TimeToRetainBtn';
+import { useForm, FormProvider } from 'react-hook-form';
+import theme from 'theme/theme';
+import userEvent from '@testing-library/user-event';
+
+describe('TimeToRetainBtn', () => {
+  const defaultProps: Props = {
+    inputName: 'defaultPropsInputName',
+    text: 'defaultPropsText',
+    value: 0,
+  };
+  const Wrapper: React.FC = ({ children }) => {
+    const methods = useForm();
+    return <FormProvider {...methods}>{children}</FormProvider>;
+  };
+  const SetUpComponent = (props: Partial<Props> = {}) => {
+    const { inputName, text, value } = props;
+    render(
+      <Wrapper>
+        <TimeToRetainBtn
+          inputName={inputName || defaultProps.inputName}
+          text={text || defaultProps.text}
+          value={value || defaultProps.value}
+        />
+      </Wrapper>
+    );
+  };
+
+  describe('Component rendering with its Default Props Setups', () => {
+    beforeEach(() => {
+      SetUpComponent();
+    });
+    it('should test the component rendering on the screen', () => {
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByText(defaultProps.text)).toBeInTheDocument();
+    });
+    it('should test the non active state of the button and its styling', () => {
+      const buttonElement = screen.getByRole('button');
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.normal}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.primary.color}`
+      );
+    });
+    it('should test the non active state with click becoming active', () => {
+      const buttonElement = screen.getByRole('button');
+      userEvent.click(buttonElement);
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.active}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.border.active}`
+      );
+    });
+  });
+
+  describe('Component rendering with its Default Props Setups', () => {
+    it('should test the active state of the button and its styling', () => {
+      SetUpComponent({ value: 604800000 });
+      const buttonElement = screen.getByRole('button');
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.active}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.border.active}`
+      );
+    });
+  });
+});

kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import TimeToRetainBtns, {
+  Props,
+} from 'components/Topics/shared/Form/TimeToRetainBtns';
+import { FormProvider, useForm } from 'react-hook-form';
+
+describe('TimeToRetainBtns', () => {
+  const defaultProps: Props = {
+    name: 'defaultPropsTestingName',
+    value: 'defaultPropsValue',
+  };
+  const Wrapper: React.FC = ({ children }) => {
+    const methods = useForm();
+    return <FormProvider {...methods}>{children}</FormProvider>;
+  };
+  const SetUpComponent = (props: Props = defaultProps) => {
+    const { name, value } = props;
+
+    render(
+      <Wrapper>
+        <TimeToRetainBtns name={name} value={value} />
+      </Wrapper>
+    );
+  };
+
+  it('should test the normal view rendering of the component', () => {
+    SetUpComponent();
+    expect(screen.getAllByRole('button')).toHaveLength(5);
+  });
+});