Cover Brokers page with tests #213 (#546)

* Cover Brokers page with tests #213

* Cover Brokers page with tests #213

* Cover Brokers page with tests #213

* Cover Brokers page with tests #213

kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Brokers from 'components/Brokers/Brokers';
+import { ClusterName } from 'redux/interfaces';
+import { StaticRouter } from 'react-router';
+import { ClusterStats } from 'generated-sources';
+
+interface Props extends ClusterStats {
+  isFetched: boolean;
+  fetchClusterStats: (clusterName: ClusterName) => void;
+  fetchBrokers: (clusterName: ClusterName) => void;
+}
+
+describe('Brokers Component', () => {
+  const pathname = `ui/clusters/local/brokers`;
+
+  describe('Brokers Empty', () => {
+    const setupEmptyComponent = (props: Partial<Props> = {}) => (
+      <StaticRouter location={{ pathname }} context={{}}>
+        <Brokers
+          brokerCount={0}
+          activeControllers={0}
+          zooKeeperStatus={0}
+          onlinePartitionCount={0}
+          offlinePartitionCount={0}
+          inSyncReplicasCount={0}
+          outOfSyncReplicasCount={0}
+          underReplicatedPartitionCount={0}
+          fetchClusterStats={jest.fn()}
+          fetchBrokers={jest.fn()}
+          diskUsage={undefined}
+          isFetched={false}
+          {...props}
+        />
+      </StaticRouter>
+    );
+    it('renders section', () => {
+      const component = mount(setupEmptyComponent());
+      expect(component.exists('.section')).toBeTruthy();
+    });
+
+    it('renders section with is-danger selector', () => {
+      const component = mount(setupEmptyComponent());
+      expect(component.exists('.is-danger')).toBeTruthy();
+    });
+
+    it('matches Brokers Empty snapshot', () => {
+      expect(mount(setupEmptyComponent())).toMatchSnapshot();
+    });
+  });
+
+  describe('Brokers', () => {
+    const setupComponent = (props: Partial<Props> = {}) => (
+      <StaticRouter location={{ pathname }} context={{}}>
+        <Brokers
+          brokerCount={1}
+          activeControllers={1}
+          zooKeeperStatus={1}
+          onlinePartitionCount={64}
+          offlinePartitionCount={0}
+          inSyncReplicasCount={64}
+          outOfSyncReplicasCount={0}
+          underReplicatedPartitionCount={0}
+          fetchClusterStats={jest.fn()}
+          fetchBrokers={jest.fn()}
+          diskUsage={[
+            {
+              brokerId: 1,
+              segmentCount: 64,
+              segmentSize: 60718,
+            },
+          ]}
+          isFetched
+          {...props}
+        />
+      </StaticRouter>
+    );
+
+    it('renders section with is-success selector', () => {
+      const component = mount(setupComponent());
+      expect(component.exists('.is-success')).toBeTruthy();
+    });
+
+    it('matches snapshot', () => {
+      expect(mount(setupComponent())).toMatchSnapshot();
+    });
+  });
+});

kafka-ui-react-app/src/components/Brokers/__test__/BrokersContainer.spec.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { containerRendersView } from 'lib/testHelpers';
+import Brokers from 'components/Brokers/Brokers';
+import BrokersContainer from 'components/Brokers/BrokersContainer';
+
+describe('BrokersContainer', () => {
+  containerRendersView(<BrokersContainer />, Brokers);
+});

kafka-ui-react-app/src/components/Brokers/__test__/__snapshots__/Brokers.spec.tsx.snap

@@ -0,0 +1,731 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Brokers Component Brokers Empty matches Brokers Empty snapshot 1`] = `
+<StaticRouter
+  context={Object {}}
+  location={
+    Object {
+      "pathname": "ui/clusters/local/brokers",
+    }
+  }
+>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "ui/clusters/local/brokers",
+          "search": "",
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+    staticContext={Object {}}
+  >
+    <Brokers
+      activeControllers={0}
+      brokerCount={0}
+      fetchBrokers={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              undefined,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      fetchClusterStats={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              undefined,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      inSyncReplicasCount={0}
+      isFetched={false}
+      offlinePartitionCount={0}
+      onlinePartitionCount={0}
+      outOfSyncReplicasCount={0}
+      underReplicatedPartitionCount={0}
+      zooKeeperStatus={0}
+    >
+      <div
+        className="section"
+      >
+        <Breadcrumb>
+          <nav
+            aria-label="breadcrumbs"
+            className="breadcrumb"
+          >
+            <ul>
+              <li
+                className="is-active"
+              >
+                <span
+                  className=""
+                >
+                  Brokers overview
+                </span>
+              </li>
+            </ul>
+          </nav>
+        </Breadcrumb>
+        <MetricsWrapper
+          title="Uptime"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Uptime
+            </h5>
+            <div
+              className="level"
+            >
+              <Indicator
+                className="is-one-third"
+                label="Total Brokers"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Total Brokers"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Total Brokers
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Active Controllers"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Active Controllers"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Active Controllers
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Zookeeper Status"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Zookeeper Status"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Zookeeper Status
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      <span
+                        className="tag is-danger"
+                      >
+                        Offline
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+            </div>
+          </div>
+        </MetricsWrapper>
+        <MetricsWrapper
+          title="Partitions"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Partitions
+            </h5>
+            <div
+              className="level"
+            >
+              <Indicator
+                label="Online"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Online"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Online
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      <span
+                        className=""
+                      >
+                        0
+                      </span>
+                      <span
+                        className="subtitle has-text-weight-light"
+                      >
+                         
+                        of
+                        0
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="URP"
+                title="Under replicated partitions"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Under replicated partitions"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      URP
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="In Sync Replicas"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="In Sync Replicas"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      In Sync Replicas
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="Out of Sync Replicas"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Out of Sync Replicas"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Out of Sync Replicas
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+            </div>
+          </div>
+        </MetricsWrapper>
+        <MetricsWrapper
+          multiline={true}
+          title="Disk Usage"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Disk Usage
+            </h5>
+            <div
+              className="level level-multiline"
+            />
+          </div>
+        </MetricsWrapper>
+      </div>
+    </Brokers>
+  </Router>
+</StaticRouter>
+`;
+
+exports[`Brokers Component Brokers matches snapshot 1`] = `
+<StaticRouter
+  context={Object {}}
+  location={
+    Object {
+      "pathname": "ui/clusters/local/brokers",
+    }
+  }
+>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "ui/clusters/local/brokers",
+          "search": "",
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+    staticContext={Object {}}
+  >
+    <Brokers
+      activeControllers={1}
+      brokerCount={1}
+      diskUsage={
+        Array [
+          Object {
+            "brokerId": 1,
+            "segmentCount": 64,
+            "segmentSize": 60718,
+          },
+        ]
+      }
+      fetchBrokers={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              undefined,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      fetchClusterStats={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              undefined,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      inSyncReplicasCount={64}
+      isFetched={true}
+      offlinePartitionCount={0}
+      onlinePartitionCount={64}
+      outOfSyncReplicasCount={0}
+      underReplicatedPartitionCount={0}
+      zooKeeperStatus={1}
+    >
+      <div
+        className="section"
+      >
+        <Breadcrumb>
+          <nav
+            aria-label="breadcrumbs"
+            className="breadcrumb"
+          >
+            <ul>
+              <li
+                className="is-active"
+              >
+                <span
+                  className=""
+                >
+                  Brokers overview
+                </span>
+              </li>
+            </ul>
+          </nav>
+        </Breadcrumb>
+        <MetricsWrapper
+          title="Uptime"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Uptime
+            </h5>
+            <div
+              className="level"
+            >
+              <Indicator
+                className="is-one-third"
+                label="Total Brokers"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Total Brokers"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Total Brokers
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      1
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Active Controllers"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Active Controllers"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Active Controllers
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      1
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Zookeeper Status"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Zookeeper Status"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Zookeeper Status
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      <span
+                        className="tag is-success"
+                      >
+                        Online
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+            </div>
+          </div>
+        </MetricsWrapper>
+        <MetricsWrapper
+          title="Partitions"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Partitions
+            </h5>
+            <div
+              className="level"
+            >
+              <Indicator
+                label="Online"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Online"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Online
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      <span
+                        className=""
+                      >
+                        64
+                      </span>
+                      <span
+                        className="subtitle has-text-weight-light"
+                      >
+                         
+                        of
+                        64
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="URP"
+                title="Under replicated partitions"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Under replicated partitions"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      URP
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="In Sync Replicas"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="In Sync Replicas"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      In Sync Replicas
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      64
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                label="Out of Sync Replicas"
+              >
+                <div
+                  className="level-item"
+                >
+                  <div
+                    title="Out of Sync Replicas"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Out of Sync Replicas
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      0
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+            </div>
+          </div>
+        </MetricsWrapper>
+        <MetricsWrapper
+          multiline={true}
+          title="Disk Usage"
+        >
+          <div
+            className="box"
+          >
+            <h5
+              className="subtitle is-6"
+            >
+              Disk Usage
+            </h5>
+            <div
+              className="level level-multiline"
+            >
+              <Indicator
+                className="is-one-third"
+                label="Broker"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Broker"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Broker
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      1
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Segment Size"
+                title=""
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Segment Size"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Segment Size
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      <BytesFormatted
+                        value={60718}
+                      >
+                        <span>
+                          59KB
+                        </span>
+                      </BytesFormatted>
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+              <Indicator
+                className="is-one-third"
+                label="Segment count"
+              >
+                <div
+                  className="level-item is-one-third"
+                >
+                  <div
+                    title="Segment count"
+                  >
+                    <p
+                      className="heading"
+                    >
+                      Segment count
+                    </p>
+                    <p
+                      className="title has-text-centered"
+                    >
+                      64
+                    </p>
+                  </div>
+                </div>
+              </Indicator>
+            </div>
+          </div>
+        </MetricsWrapper>
+      </div>
+    </Brokers>
+  </Router>
+</StaticRouter>
+`;