@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/CopyText/CopyText.test.js

@@ -0,0 +1,485 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _ = require("../..");
+
+var _2 = _interopRequireDefault(require("."));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context17, _context18; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context17 = ownKeys(Object(source), !0)).call(_context17, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context18 = ownKeys(Object(source))).call(_context18, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var testId = 'test-copy-text';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
+
+var defaultTest = function defaultTest() {
+  var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+};
+
+describe('Text mode', function () {
+  var defaultProps = {
+    'data-testid': testId
+  };
+  var textValue = 'Here is a value';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _testWrapper.render)((0, _react2.jsx)(_2["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Text, null, textValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  (0, _testAxe["default"])(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders on hover', function () {
+    getComponent();
+
+    var container = _testWrapper.screen.getByTestId(testId);
+
+    _testWrapper.fireEvent.mouseMove(container);
+
+    _testWrapper.fireEvent.mouseEnter(container);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+  });
+  test('copy button is focused with keyboard', function () {
+    getComponent();
+
+    var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
+
+    expect(copyBtn).not.toHaveFocus();
+
+    _userEvent["default"].tab();
+
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+    global.document.execCommand = jest.fn();
+    global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+    global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
+  });
+  test('click on text copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var button;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByText(textValue);
+            _context2.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+              return _regenerator["default"].wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      return _context.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var button;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context4.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+              return _regenerator["default"].wrap(function _callee3$(_context3) {
+                while (1) {
+                  switch (_context3.prev = _context3.next) {
+                    case 0:
+                      return _context3.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }
+              }, _callee3);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var textToCopy, button;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            textToCopy = 'This text is copied';
+            getComponent({
+              textToCopy: textToCopy
+            });
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context6.next = 5;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+              return _regenerator["default"].wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      return _context5.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 5:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textToCopy);
+
+          case 7:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  test('copying works in insecure origin', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var button;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context8.next = 5;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+              return _regenerator["default"].wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      return _context7.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+
+          case 5:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+
+          case 7:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  test('if copying is failed, a warning shows in the console', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var spy, button;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            global.document.execCommand.mockReturnValue(false);
+
+            global.console.error = function () {
+              return jest.mock();
+            }; // eslint-disable-line no-console
+
+
+            getComponent();
+            spy = jest.spyOn(console, 'error');
+            expect(spy).not.toHaveBeenCalled();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context10.next = 9;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+              return _regenerator["default"].wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      return _context9.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 9:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+            expect(spy).toHaveBeenCalledWith(expect.stringMatching('Failed to copy:'), expect.any(Error));
+
+          case 12:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  test('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var button;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context12.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+              return _regenerator["default"].wrap(function _callee11$(_context11) {
+                while (1) {
+                  switch (_context11.prev = _context11.next) {
+                    case 0:
+                      return _context11.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context11.stop();
+                  }
+                }
+              }, _callee11);
+            })));
+
+          case 4:
+            expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+          case 6:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  test('tooltip renders with the text "Copied!" hides after delay', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var button;
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context14.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+              return _regenerator["default"].wrap(function _callee13$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                      return _context13.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+
+          case 4:
+            expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+            _context14.next = 8;
+            return (0, _testWrapper.waitForElementToBeRemoved)(_testWrapper.screen.queryByRole('tooltip'));
+
+          case 8:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee14);
+  })));
+});
+describe('Link mode', function () {
+  var defaultProps = {
+    'data-testid': testId,
+    mode: 'link'
+  };
+  var linkValue = 'https://a.url.com';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _testWrapper.render)((0, _react2.jsx)(_2["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Link, {
+      href: linkValue
+    }, linkValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  (0, _testAxe["default"])(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders only when the copy button is hovered', function () {
+    getComponent();
+
+    var container = _testWrapper.screen.getByTestId(testId);
+
+    _testWrapper.fireEvent.mouseMove(container);
+
+    _testWrapper.fireEvent.mouseEnter(container);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+    var button = _testWrapper.screen.getByLabelText('copy to clipboard');
+
+    _testWrapper.fireEvent.mouseMove(button);
+
+    _testWrapper.fireEvent.mouseEnter(button);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+  });
+  test('copy button is focused with keyboard', function () {
+    getComponent();
+
+    var copyBtn = _testWrapper.screen.getByLabelText('copy to clipboard');
+
+    expect(copyBtn).not.toHaveFocus();
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
+  });
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var button;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) {
+        switch (_context16.prev = _context16.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy to clipboard');
+            _context16.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+              return _regenerator["default"].wrap(function _callee15$(_context15) {
+                while (1) {
+                  switch (_context15.prev = _context15.next) {
+                    case 0:
+                      return _context15.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context15.stop();
+                  }
+                }
+              }, _callee15);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(linkValue);
+
+          case 6:
+          case "end":
+            return _context16.stop();
+        }
+      }
+    }, _callee16);
+  })));
+});

package/lib/cjs/components/CopyText/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CopyText["default"];
+  }
+});
+
+var _CopyText = _interopRequireDefault(require("./CopyText"));