From 1a215865ef3b4332a4594decc959e579b4096ace Mon Sep 17 00:00:00 2001 From: Alexander Krivonosov <31561808+GneyHabub@users.noreply.github.com> Date: Tue, 9 Mar 2021 18:57:20 +0300 Subject: [PATCH] Testing common components (#225) * Create tests for the Breadcrumb component * Create tests for BytesFormatted component * Create tests for the Indicator component * Create tests for the MetricsWrapper component * Create tests for the PageLoader component --- .../common/Breadcrumb/Breadcrumb.tsx | 2 +- .../Breadcrumb/__tests__/Breadcrumb.spec.tsx | 48 ++++++++++++++++++ .../__snapshots__/Breadcrumb.spec.tsx.snap | 49 +++++++++++++++++++ .../common/BytesFormatted/BytesFormatted.tsx | 28 ++++++----- .../__tests__/BytesFormatted.spec.tsx | 38 ++++++++++++++ .../Dashboard/__tests__/Indicator.spec.tsx | 15 ++++++ .../__tests__/MetricsWrapper.spec.tsx | 24 +++++++++ .../__snapshots__/Indicator.spec.tsx.snap | 27 ++++++++++ .../PageLoader/__tests__/PageLoader.spec.tsx | 10 ++++ .../__snapshots__/PageLoader.spec.tsx.snap | 36 ++++++++++++++ 10 files changed, 263 insertions(+), 14 deletions(-) create mode 100644 kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/__snapshots__/Breadcrumb.spec.tsx.snap create mode 100644 kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/Dashboard/__tests__/Indicator.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/Dashboard/__tests__/__snapshots__/Indicator.spec.tsx.snap create mode 100644 kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/PageLoader/__tests__/__snapshots__/PageLoader.spec.tsx.snap diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx b/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx index b3b7a2c5c0..2e93e2a685 100644 --- a/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx +++ b/kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -interface Link { +export interface Link { label: string; href: string; } diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx new file mode 100644 index 0000000000..c8b3a58156 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx @@ -0,0 +1,48 @@ +import { mount, shallow } from 'enzyme'; +import React from 'react'; +import { StaticRouter } from 'react-router-dom'; +import Breadcrumb, { Link } from '../Breadcrumb'; + +describe('Breadcrumb component', () => { + const links: Link[] = [ + { + label: 'link1', + href: 'link1href', + }, + { + label: 'link2', + href: 'link2href', + }, + { + label: 'link3', + href: 'link3href', + }, + ]; + + const child =
; + + const component = mount( + + {child} + + ); + + it('renders the list of links', () => { + component.find(`NavLink`).forEach((link, idx) => { + expect(link.prop('to')).toEqual(links[idx].href); + expect(link.contains(links[idx].label)).toBeTruthy(); + }); + }); + it('renders the children', () => { + const list = component.find('ul').children(); + expect(list.last().containsMatchingElement(child)).toBeTruthy(); + }); + it('matches the snapshot', () => { + const shallowComponent = shallow( + + {child} + + ); + expect(shallowComponent).toMatchSnapshot(); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/__snapshots__/Breadcrumb.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/__snapshots__/Breadcrumb.spec.tsx.snap new file mode 100644 index 0000000000..b7696f3bb6 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/__snapshots__/Breadcrumb.spec.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumb component matches the snapshot 1`] = ` + + +
+ + +`; diff --git a/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx b/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx index 2334c8067a..9447f72402 100644 --- a/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx +++ b/kafka-ui-react-app/src/components/common/BytesFormatted/BytesFormatted.tsx @@ -5,20 +5,22 @@ interface Props { precision?: number; } +export const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const BytesFormatted: React.FC = ({ value, precision = 0 }) => { - const formatedValue = React.useMemo(() => { - const bytes = typeof value === 'string' ? parseInt(value, 10) : value; - - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - if (!bytes || bytes === 0) return [0, sizes[0]]; - - if (bytes < 1024) return [Math.ceil(bytes), sizes[0]]; - - const pow = Math.floor(Math.log2(bytes) / 10); - const multiplier = 10 ** (precision || 2); - return ( - Math.round((bytes * multiplier) / 1024 ** pow) / multiplier + sizes[pow] - ); + const formatedValue = React.useMemo((): string => { + try { + const bytes = typeof value === 'string' ? parseInt(value, 10) : value; + if (Number.isNaN(bytes)) return `-Bytes`; + if (!bytes || bytes < 1024) return `${Math.ceil(bytes || 0)}${sizes[0]}`; + const pow = Math.floor(Math.log2(bytes) / 10); + const multiplier = 10 ** (precision < 0 ? 0 : precision); + return ( + Math.round((bytes * multiplier) / 1024 ** pow) / multiplier + sizes[pow] + ); + } catch (e) { + return `-Bytes`; + } }, [value]); return {formatedValue}; diff --git a/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx b/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx new file mode 100644 index 0000000000..85ed10877b --- /dev/null +++ b/kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx @@ -0,0 +1,38 @@ +import { shallow } from 'enzyme'; +import React from 'react'; +import BytesFormatted, { sizes } from '../BytesFormatted'; + +describe('BytesFormatted', () => { + it('renders Bytes correctly', () => { + const component = shallow(); + expect(component.text()).toEqual('666Bytes'); + }); + + it('renders correct units', () => { + let value = 1; + sizes.forEach((unit) => { + const component = shallow(); + expect(component.text()).toEqual(`1${unit}`); + value *= 1024; + }); + }); + + it('renders correct precision', () => { + let component = shallow(); + expect(component.text()).toEqual(`1.953125${sizes[1]}`); + + component = shallow(); + expect(component.text()).toEqual(`9.76563${sizes[1]}`); + }); + + it('correctly handles invalid props', () => { + let component = shallow(); + expect(component.text()).toEqual(`10${sizes[1]}`); + + component = shallow(); + expect(component.text()).toEqual(`-${sizes[0]}`); + + component = shallow(); + expect(component.text()).toEqual(`0${sizes[0]}`); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/Dashboard/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/Indicator.spec.tsx new file mode 100644 index 0000000000..3709f9add1 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/Indicator.spec.tsx @@ -0,0 +1,15 @@ +import { mount } from 'enzyme'; +import React from 'react'; +import Indicator from '../Indicator'; + +describe('Indicator', () => { + it('matches the snapshot', () => { + const child = 'Child'; + const component = mount( + + {child} + + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx new file mode 100644 index 0000000000..73864385ff --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx @@ -0,0 +1,24 @@ +import { shallow } from 'enzyme'; +import React from 'react'; +import MetricsWrapper from '../MetricsWrapper'; + +describe('MetricsWrapper', () => { + it('correctly adds classes', () => { + const className = 'className'; + const component = shallow( + + ); + expect(component.find(`.${className}`).exists()).toBeTruthy(); + expect(component.find('.level-multiline').exists()).toBeTruthy(); + }); + + it('correctly renders children', () => { + let component = shallow(); + expect(component.find('.subtitle').exists()).toBeFalsy(); + + const title = 'title'; + component = shallow(); + expect(component.find('.subtitle').exists()).toBeTruthy(); + expect(component.text()).toEqual(title); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/Dashboard/__tests__/__snapshots__/Indicator.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/__snapshots__/Indicator.spec.tsx.snap new file mode 100644 index 0000000000..7cabd55e4f --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Dashboard/__tests__/__snapshots__/Indicator.spec.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Indicator matches the snapshot 1`] = ` + +
+
+

+ label +

+

+ Child +

+
+
+ +`; diff --git a/kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx b/kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx new file mode 100644 index 0000000000..ea34bb1942 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx @@ -0,0 +1,10 @@ +import { mount } from 'enzyme'; +import React from 'react'; +import PageLoader from '../PageLoader'; + +describe('PageLoader', () => { + it('matches the snapshot', () => { + const component = mount(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/PageLoader/__tests__/__snapshots__/PageLoader.spec.tsx.snap b/kafka-ui-react-app/src/components/common/PageLoader/__tests__/__snapshots__/PageLoader.spec.tsx.snap new file mode 100644 index 0000000000..10a9cf0631 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/PageLoader/__tests__/__snapshots__/PageLoader.spec.tsx.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageLoader matches the snapshot 1`] = ` + +
+
+
+
+ Loading... +
+ +
+
+
+ +`;