@automattic/simple-components/cjs/button/test/index.js

React components, as used on WordPress.com

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _chai = require("chai");

var _enzyme = require("enzyme");

var _gridicons = _interopRequireDefault(require("gridicons"));

var _react = _interopRequireDefault(require("react"));

var _ = _interopRequireDefault(require("../"));

/** @format */

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
describe('Button', function () {
  describe('renders', function () {
    test('with modifiers', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        scary: true,
        primary: true,
        borderless: true,
        compact: true
      }));
      (0, _chai.expect)(button).to.have.className('is-compact');
      (0, _chai.expect)(button).to.have.className('is-primary');
      (0, _chai.expect)(button).to.have.className('is-scary');
      (0, _chai.expect)(button).to.have.className('is-borderless');
    });
    test('without modifiers', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, null));
      (0, _chai.expect)(button).to.have.className('button');
      (0, _chai.expect)(button).to.not.have.className('is-compact');
      (0, _chai.expect)(button).to.not.have.className('is-primary');
      (0, _chai.expect)(button).to.not.have.className('is-scary');
      (0, _chai.expect)(button).to.not.have.className('is-borderless');
    });
    test('disabled', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        disabled: true
      }));
      (0, _chai.expect)(button).to.be.disabled;
    });
    test('with child', function () {
      var iconType = 'arrow-left';

      var icon = _react.default.createElement(_gridicons.default, {
        size: 18,
        icon: iconType
      });

      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, null, icon));
      (0, _chai.expect)(button).to.contain(icon);
      (0, _chai.expect)(button.find(_gridicons.default)).to.have.prop('icon').equal(iconType);
    });
  });
  describe('with href prop', function () {
    test('renders as a link', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        href: "https://wordpress.com/"
      }));
      (0, _chai.expect)(button).to.match('a');
      (0, _chai.expect)(button).to.have.prop('href').equal('https://wordpress.com/');
    });
    test('ignores type prop and renders a link without type attribute', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        href: "https://wordpress.com/",
        type: "submit"
      }));
      (0, _chai.expect)(button).to.not.have.prop('type');
    });
    test('including target and rel props renders a link with target and rel attributes', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        href: "https://wordpress.com/",
        target: "_blank",
        rel: "noopener noreferrer"
      }));
      (0, _chai.expect)(button).to.have.prop('target').equal('_blank');
      (0, _chai.expect)(button).to.have.prop('rel').match(/\bnoopener\b/);
      (0, _chai.expect)(button).to.have.prop('rel').match(/\bnoreferrer\b/);
    });
    test('adds noopener noreferrer rel if target is specified', function () {
      var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        href: "https://wordpress.com/",
        target: "_blank"
      }));
      (0, _chai.expect)(button).to.have.prop('target').equal('_blank');
      (0, _chai.expect)(button).to.have.prop('rel').match(/\bnoopener\b/);
      (0, _chai.expect)(button).to.have.prop('rel').match(/\bnoreferrer\b/);
    });
  });
  describe('without href prop', function () {
    var button = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
      target: "_blank",
      rel: "noopener noreferrer"
    }));
    test('renders as a button', function () {
      (0, _chai.expect)(button).to.match('button');
      (0, _chai.expect)(button).to.not.have.prop('href');
    });
    test('renders button with type attribute set to "button" by default', function () {
      (0, _chai.expect)(button).to.have.prop('type').equal('button');
    });
    test('renders button with type attribute set to type prop if specified', function () {
      var typeProp = 'submit';
      var submitButton = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
        target: "_blank",
        rel: "noopener noreferrer",
        type: typeProp
      }));
      (0, _chai.expect)(submitButton).to.have.prop('type').equal(typeProp);
    });
    test('renders button without rel and target attributes', function () {
      (0, _chai.expect)(button).to.not.have.prop('target');
      (0, _chai.expect)(button).to.not.have.prop('rel');
    });
  });
});