github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx (about)

     1  // Copyright 2020 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { assert } from "chai";
    13  import { mount, ReactWrapper } from "enzyme";
    14  import sinon, { SinonSpy } from "sinon";
    15  import Long from "long";
    16  
    17  import "src/enzymeInit";
    18  import { DiagnosticsView, EmptyDiagnosticsView } from "./diagnosticsView";
    19  import { Table } from "src/components";
    20  import { connectedMount } from "src/test-utils";
    21  import { cockroach } from "src/js/protos";
    22  import IStatementDiagnosticsReport = cockroach.server.serverpb.IStatementDiagnosticsReport;
    23  
    24  const sandbox = sinon.createSandbox();
    25  
    26  describe("DiagnosticsView", () => {
    27    let wrapper: ReactWrapper;
    28    let activateFn: SinonSpy;
    29    const statementFingerprint = "some-id";
    30  
    31    beforeEach(() => {
    32      sandbox.reset();
    33      activateFn = sandbox.spy();
    34    });
    35  
    36    describe("With Empty state", () => {
    37      beforeEach(() => {
    38        wrapper = mount(
    39          <DiagnosticsView
    40            statementFingerprint={statementFingerprint}
    41            activate={activateFn}
    42            hasData={false}
    43            diagnosticsReports={[]}
    44            dismissAlertMessage={() => {}}
    45          />);
    46      });
    47  
    48      it("renders EmptyDiagnosticsView component when no diagnostics data provided", () => {
    49        assert.isTrue(wrapper.find(EmptyDiagnosticsView).exists());
    50      });
    51  
    52      it("calls activate callback with statementId when click on Activate button", () => {
    53        const activateButtonComponent = wrapper.find(".crl-button").first();
    54        activateButtonComponent.simulate("click");
    55        activateFn.calledOnceWith(statementFingerprint);
    56      });
    57    });
    58  
    59    describe("With tracing data", () => {
    60      beforeEach(() => {
    61        const diagnosticsRequests: IStatementDiagnosticsReport[] = [
    62          generateDiagnosticsRequest(),
    63          generateDiagnosticsRequest(),
    64        ];
    65  
    66        wrapper = connectedMount(() => (
    67          <DiagnosticsView
    68            statementFingerprint={statementFingerprint}
    69            activate={activateFn}
    70            hasData={true}
    71            diagnosticsReports={diagnosticsRequests}
    72            dismissAlertMessage={() => {}}
    73          />),
    74        );
    75      });
    76  
    77      it("renders Table component when diagnostics data is provided", () => {
    78        assert.isTrue(wrapper.find(Table).exists());
    79      });
    80  
    81      it("calls activate callback with statementId when click on Activate button", () => {
    82        const activateButtonComponent = wrapper.find(".crl-button").first();
    83        activateButtonComponent.simulate("click");
    84        activateFn.calledOnceWith(statementFingerprint);
    85      });
    86  
    87      it("Activate button is hidden if diagnostics is requested and waiting query", () => {
    88        const diagnosticsRequests: IStatementDiagnosticsReport[] = [
    89          generateDiagnosticsRequest({ completed: false }),
    90          generateDiagnosticsRequest(),
    91        ];
    92        wrapper = connectedMount(() => (
    93          <DiagnosticsView
    94            statementFingerprint={statementFingerprint}
    95            activate={activateFn}
    96            hasData={true}
    97            diagnosticsReports={diagnosticsRequests}
    98            dismissAlertMessage={() => {}}
    99          />),
   100        );
   101  
   102        const activateButtonComponent = wrapper.find(".crl-statements-diagnostics-view__activate-button").first();
   103        assert.isFalse(activateButtonComponent.exists());
   104      });
   105    });
   106  });
   107  
   108  function generateDiagnosticsRequest(extendObject: Partial<IStatementDiagnosticsReport> = {}): IStatementDiagnosticsReport {
   109    const diagnosticsRequest = {
   110      statement_fingerprint: "SELECT * FROM table",
   111      completed: true,
   112      requested_at: {
   113        seconds: Long.fromNumber(Date.now()),
   114        nanos: Math.random() * 1000000,
   115      },
   116    };
   117    Object.assign(diagnosticsRequest, extendObject);
   118    return diagnosticsRequest;
   119  }