github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/emailSubscriptionForm/emailSubscriptionForm.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 "src/enzymeInit";
    16  import { EmailSubscriptionForm } from "./index";
    17  
    18  const sandbox = sinon.createSandbox();
    19  
    20  describe("EmailSubscriptionForm", () => {
    21    let wrapper: ReactWrapper;
    22    let onSubmitHandler: SinonSpy;
    23  
    24    beforeEach(() => {
    25      sandbox.reset();
    26      onSubmitHandler = sandbox.spy();
    27      wrapper = mount(<EmailSubscriptionForm onSubmit={onSubmitHandler} />);
    28    });
    29  
    30    describe("when correct email", () => {
    31      it("provides entered email on submit callback", () => {
    32        const emailAddress = "foo@bar.com";
    33        const inputComponent = wrapper.find("input.crl-text-input").first();
    34        inputComponent.simulate("change", { target: { value: emailAddress } });
    35        const buttonComponent = wrapper.find("button.crl-button").first();
    36        buttonComponent.simulate("click");
    37  
    38        onSubmitHandler.calledOnceWith(emailAddress);
    39      });
    40    });
    41  
    42    describe("when invalid email", () => {
    43      beforeEach(() => {
    44        const emailAddress = "foo";
    45        const inputComponent = wrapper.find("input.crl-text-input").first();
    46        inputComponent.simulate("change", { target: { value: emailAddress } });
    47        inputComponent.simulate("blur");
    48      });
    49  
    50      it("doesn't call onSubmit callback", () => {
    51        const buttonComponent = wrapper.find("button.crl-button").first();
    52        buttonComponent.simulate("click");
    53        assert.isTrue(onSubmitHandler.notCalled);
    54      });
    55  
    56      it("submit button is disabled", () => {
    57        const buttonComponent = wrapper.find("button.crl-button.crl-button--disabled").first();
    58        assert.isTrue(buttonComponent.exists());
    59      });
    60  
    61      it("validation message is shown", () => {
    62        const validationMessageWrapper = wrapper.find(".crl-text-input__error-message").first();
    63        assert.isTrue(validationMessageWrapper.exists());
    64        assert.equal(validationMessageWrapper.text(), "Invalid email address.");
    65      });
    66    });
    67  });