From 913b8921b435b59bdfedf75446ad31b56eb8ae23 Mon Sep 17 00:00:00 2001 From: Mgrdich <46796009+Mgrdich@users.noreply.github.com> Date: Wed, 30 Mar 2022 17:33:38 +0400 Subject: [PATCH] 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 --- .../Topics/shared/Form/TimeToRetainBtn.tsx | 4 +- .../Topics/shared/Form/TimeToRetainBtns.tsx | 2 +- .../Topics/shared/Form/TopicForm.styled.ts | 2 +- .../Form/__tests__/TimeToRetainBtn.spec.tsx | 75 +++++++++++++++++++ .../Form/__tests__/TimeToRetainBtns.spec.tsx | 32 ++++++++ 5 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx create mode 100644 kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx index f6b745f98f..2364d90516 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx +++ b/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 = ({ inputName, text, value }) => { return ( setValue(inputName, value)} > diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx index e48392d6e4..53376876e4 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx +++ b/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; } diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts index 8d17bdc7cc..fc46d8d939 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts +++ b/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 diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx new file mode 100644 index 0000000000..dcc991b507 --- /dev/null +++ b/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 {children}; + }; + const SetUpComponent = (props: Partial = {}) => { + const { inputName, text, value } = props; + render( + + + + ); + }; + + 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}` + ); + }); + }); +}); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx new file mode 100644 index 0000000000..b41793f6e4 --- /dev/null +++ b/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 {children}; + }; + const SetUpComponent = (props: Props = defaultProps) => { + const { name, value } = props; + + render( + + + + ); + }; + + it('should test the normal view rendering of the component', () => { + SetUpComponent(); + expect(screen.getAllByRole('button')).toHaveLength(5); + }); +});