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

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;
 }

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 = <div className="child" />;
+
+  const component = mount(
+    <StaticRouter>
+      <Breadcrumb links={links}>{child}</Breadcrumb>
+    </StaticRouter>
+  );
+
+  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(
+      <StaticRouter>
+        <Breadcrumb links={links}>{child}</Breadcrumb>
+      </StaticRouter>
+    );
+    expect(shallowComponent).toMatchSnapshot();
+  });
+});

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`] = `
+<Router
+  history={
+    Object {
+      "action": "POP",
+      "block": [Function],
+      "createHref": [Function],
+      "go": [Function],
+      "goBack": [Function],
+      "goForward": [Function],
+      "listen": [Function],
+      "location": Object {
+        "hash": "",
+        "pathname": "/",
+        "search": "",
+        "state": undefined,
+      },
+      "push": [Function],
+      "replace": [Function],
+    }
+  }
+  staticContext={Object {}}
+>
+  <Breadcrumb
+    links={
+      Array [
+        Object {
+          "href": "link1href",
+          "label": "link1",
+        },
+        Object {
+          "href": "link2href",
+          "label": "link2",
+        },
+        Object {
+          "href": "link3href",
+          "label": "link3",
+        },
+      ]
+    }
+  >
+    <div
+      className="child"
+    />
+  </Breadcrumb>
+</Router>
+`;

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<Props> = ({ value, precision = 0 }) => {
-  const formatedValue = React.useMemo(() => {
+  const formatedValue = React.useMemo((): string => {
-    const bytes = typeof value === 'string' ? parseInt(value, 10) : value;
+    try {
-
+      const bytes = typeof value === 'string' ? parseInt(value, 10) : value;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      if (Number.isNaN(bytes)) return `-Bytes`;
-    if (!bytes || bytes === 0) return [0, sizes[0]];
+      if (!bytes || bytes < 1024) return `${Math.ceil(bytes || 0)}${sizes[0]}`;
-
+      const pow = Math.floor(Math.log2(bytes) / 10);
-    if (bytes < 1024) return [Math.ceil(bytes), sizes[0]];
+      const multiplier = 10 ** (precision < 0 ? 0 : precision);
-
+      return (
-    const pow = Math.floor(Math.log2(bytes) / 10);
+        Math.round((bytes * multiplier) / 1024 ** pow) / multiplier + sizes[pow]
-    const multiplier = 10 ** (precision || 2);
+      );
-    return (
+    } catch (e) {
-      Math.round((bytes * multiplier) / 1024 ** pow) / multiplier + sizes[pow]
+      return `-Bytes`;
-    );
+    }
   }, [value]);
 
   return <span>{formatedValue}</span>;

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(<BytesFormatted value={666} />);
+    expect(component.text()).toEqual('666Bytes');
+  });
+
+  it('renders correct units', () => {
+    let value = 1;
+    sizes.forEach((unit) => {
+      const component = shallow(<BytesFormatted value={value} />);
+      expect(component.text()).toEqual(`1${unit}`);
+      value *= 1024;
+    });
+  });
+
+  it('renders correct precision', () => {
+    let component = shallow(<BytesFormatted value={2000} precision={100} />);
+    expect(component.text()).toEqual(`1.953125${sizes[1]}`);
+
+    component = shallow(<BytesFormatted value={10000} precision={5} />);
+    expect(component.text()).toEqual(`9.76563${sizes[1]}`);
+  });
+
+  it('correctly handles invalid props', () => {
+    let component = shallow(<BytesFormatted value={10000} precision={-1} />);
+    expect(component.text()).toEqual(`10${sizes[1]}`);
+
+    component = shallow(<BytesFormatted value="some string" />);
+    expect(component.text()).toEqual(`-${sizes[0]}`);
+
+    component = shallow(<BytesFormatted value={undefined} />);
+    expect(component.text()).toEqual(`0${sizes[0]}`);
+  });
+});

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(
+      <Indicator title="title" label="label">
+        {child}
+      </Indicator>
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

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(
+      <MetricsWrapper wrapperClassName={className} multiline />
+    );
+    expect(component.find(`.${className}`).exists()).toBeTruthy();
+    expect(component.find('.level-multiline').exists()).toBeTruthy();
+  });
+
+  it('correctly renders children', () => {
+    let component = shallow(<MetricsWrapper />);
+    expect(component.find('.subtitle').exists()).toBeFalsy();
+
+    const title = 'title';
+    component = shallow(<MetricsWrapper title={title} />);
+    expect(component.find('.subtitle').exists()).toBeTruthy();
+    expect(component.text()).toEqual(title);
+  });
+});

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`] = `
+<Indicator
+  label="label"
+  title="title"
+>
+  <div
+    className="level-item level-left"
+  >
+    <div
+      title="title"
+    >
+      <p
+        className="heading"
+      >
+        label
+      </p>
+      <p
+        className="title"
+      >
+        Child
+      </p>
+    </div>
+  </div>
+</Indicator>
+`;

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(<PageLoader />);
+    expect(component).toMatchSnapshot();
+  });
+});

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`] = `
+<PageLoader>
+  <section
+    className="hero is-fullheight-with-navbar"
+  >
+    <div
+      className="hero-body has-text-centered"
+      style={
+        Object {
+          "justifyContent": "center",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "width": 300,
+          }
+        }
+      >
+        <div
+          className="subtitle"
+        >
+          Loading...
+        </div>
+        <progress
+          className="progress is-small is-primary is-inline-block"
+          max="100"
+        />
+      </div>
+    </div>
+  </section>
+</PageLoader>
+`;