@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -0,0 +1,306 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { Image, ImageUploadField, OverlayProvider } from '../../index';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/ImageUploadField',
+  component: ImageUploadField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    previewImage: {
+      control: {
+        type: 'text'
+      }
+    },
+    defaultPreviewImage: {
+      control: {
+        type: 'text'
+      }
+    },
+    fileTypes: {
+      control: {
+        type: 'array'
+      },
+      defaultValue: ['image']
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Upload Image'
+    },
+    onChange: {
+      control: {
+        type: 'none'
+      }
+    },
+    onRemove: {
+      control: {
+        type: 'none'
+      }
+    },
+    previewHeight: {
+      control: {
+        type: 'number'
+      },
+      defaultValue: 50
+    },
+    previewWidth: {
+      control: {
+        type: 'number'
+      },
+      defaultValue: 50
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    }
+  }
+};
+export var Default = function Default(args) {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, args))
+  );
+};
+export var CustomDefaultImage = function CustomDefaultImage() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
+      label: "Upload Image",
+      defaultPreviewImage: "https://picsum.photos/id/1056/200/300",
+      previewHeight: 150,
+      previewWidth: 150
+    }))
+  );
+};
+export var CustomItemText = function CustomItemText() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
+      label: "Upload Image",
+      previewHeight: 150,
+      previewWidth: 150,
+      uploadItemText: "Custom Upload String",
+      removeItemText: "Custom Remove String"
+    }))
+  );
+};
+export var ComponentAsDefaultImage = function ComponentAsDefaultImage() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
+      label: "Upload Image with component as default image",
+      previewHeight: 150,
+      previewWidth: 150,
+      defaultPreviewImage: ___EmotionJSX(Image, {
+        src: "data:image/png;base64,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"
+      })
+    }))
+  );
+};
+export var ExistingImage = function ExistingImage() {
+  var _useState = useState('https://picsum.photos/id/1025/200/300'),
+      _useState2 = _slicedToArray(_useState, 2),
+      previewImage = _useState2[0],
+      setPreviewImage = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1]; // When controlling the previewImage yourself, it's important to handle updating the state
+
+
+  var handleChange = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target;
+
+      var files, reader;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              // Clear errors
+              setError(undefined); // Turn on loading indicator
+
+              setIsLoading(true); // Handle setting the preview image
+
+              files = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.files[0];
+              reader = new FileReader();
+
+              reader.onload = function (_ref2) {
+                var result = _ref2.target.result;
+                setPreviewImage(result);
+              };
+
+              _context.prev = 5;
+              _context.next = 8;
+              return new _Promise(function (resolve) {
+                return _setTimeout(resolve, 3000);
+              });
+
+            case 8:
+              // Trigger the preview image callback
+              reader.readAsDataURL(files);
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](5);
+              setPreviewImage(undefined);
+              setError('There was an error...');
+
+            case 15:
+              // Unset loading indicator
+              setIsLoading(false);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[5, 11]]);
+    }));
+
+    return function handleChange(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
+      label: "Upload Image",
+      isLoading: isLoading,
+      onChange: handleChange,
+      previewImage: previewImage,
+      previewHeight: 150,
+      previewWidth: 150,
+      status: error ? 'error' : 'default',
+      helperText: error
+    }))
+  );
+};
+export var ErrorOnUpload = function ErrorOnUpload() {
+  var _useState7 = useState(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      shouldError = _useState8[0],
+      setShouldError = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      previewImage = _useState10[0],
+      setPreviewImage = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      error = _useState12[0],
+      setError = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isLoading = _useState14[0],
+      setIsLoading = _useState14[1];
+
+  var errorRef = useRef(shouldError); // When controlling the previewImage yourself, it's important to handle updating the state
+
+  var handler = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
+      var _e$target2;
+
+      var files, reader;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              // Clear errors
+              setError(undefined); // Turn on loading indicator
+
+              setIsLoading(true); // Handle setting the preview image
+
+              files = (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.files[0];
+              reader = new FileReader();
+
+              reader.onload = function (_ref4) {
+                var result = _ref4.target.result;
+                setPreviewImage(result);
+              };
+
+              _context2.prev = 5;
+              _context2.next = 8;
+              return new _Promise(function (resolve, reject) {
+                return _setTimeout(errorRef.current ? reject : resolve, 3000);
+              });
+
+            case 8:
+              // Trigger the preview image callback
+              reader.readAsDataURL(files);
+              _context2.next = 15;
+              break;
+
+            case 11:
+              _context2.prev = 11;
+              _context2.t0 = _context2["catch"](5);
+              setPreviewImage(null);
+              setError('There was an error...');
+
+            case 15:
+              // Unset loading indicator
+              setIsLoading(false);
+              errorRef.current = !shouldError;
+              setShouldError(function (current) {
+                return !current;
+              });
+
+            case 18:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[5, 11]]);
+    }));
+
+    return function handler(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
+      label: "Upload Image",
+      isLoading: isLoading,
+      onChange: handler,
+      previewImage: previewImage,
+      previewHeight: 150,
+      previewWidth: 150,
+      status: error ? 'error' : 'default',
+      helperText: error
+    }))
+  );
+};

package/lib/components/ImageUploadField/ImageUploadField.test.js

@@ -0,0 +1,380 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import ImageUploadField from './ImageUploadField';
+import { Image } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testLabel = 'test-label';
+var testButtonId = 'image-preview-button';
+var testHelperText = 'test-helper-text';
+var testImageURL = 'test-image-url';
+var testImageURL2 = 'test-image-url2';
+var imageUploadImagePreview = 'image-upload-image-preview';
+var imageUploadNoImagePreview = 'image-upload-no-image-preview';
+var file = new File(['(⌐□_□)'], 'chucknorris.png', {
+  type: 'image/png'
+});
+var notImageFileName = 'nice-song.mp3';
+var notImageFile = new File(['(⌐□_□)'], notImageFileName, {
+  type: 'audio/mpeg'
+});
+var originalValue = global.URL.createObjectURL;
+var defaultProps = {
+  label: testLabel,
+  helperText: testHelperText
+};
+beforeAll(function () {
+  global.URL.createObjectURL = jest.fn(function () {
+    return testImageURL;
+  });
+});
+afterAll(function () {
+  global.URL.createObjectURL = originalValue;
+});
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(ImageUploadField, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('should render image upload component by default', function () {
+  getComponent();
+  var imageUploadButton = screen.getByTestId(testButtonId);
+  expect(imageUploadButton).toBeInstanceOf(HTMLButtonElement);
+  expect(imageUploadButton).toBeInTheDocument();
+});
+test('should render div with icon when focused', function () {
+  getComponent();
+  var imageUploadButton = screen.getByTestId(testButtonId);
+  imageUploadButton.focus();
+  var hoveredPreview = screen.getByTestId('image-upload-hovered-preview');
+  expect(hoveredPreview).toBeInstanceOf(HTMLDivElement);
+  expect(hoveredPreview).toBeInTheDocument();
+  imageUploadButton.blur();
+  expect(hoveredPreview).not.toBeInTheDocument();
+});
+test('should upload a file', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var imageUploadButton, imageUploadInput, imagePreview;
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          imageUploadButton = screen.getByTestId(testButtonId);
+          userEvent.click(imageUploadButton);
+          imageUploadInput = screen.getByTestId('image-upload-input');
+          fireEvent.change(imageUploadInput, {
+            target: {
+              files: [file]
+            }
+          });
+          _context.next = 7;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should upload a file if label clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var imageUploadLabel, imageUploadInput, imagePreview;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          imageUploadLabel = screen.getByText(testLabel);
+          userEvent.click(imageUploadLabel);
+          imageUploadInput = screen.getByTestId('image-upload-input');
+          fireEvent.change(imageUploadInput, {
+            target: {
+              files: [file]
+            }
+          });
+          _context2.next = 7;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context2.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+  var imageUploadLabel, imagePreview;
+  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          getComponent();
+          imageUploadLabel = screen.getByText(testLabel);
+          fireEvent.change(screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+          _context3.next = 5;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 5:
+          imagePreview = _context3.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+          userEvent.click(imageUploadLabel);
+          expect(screen.getByText('Upload New Image')).toBeInTheDocument();
+          expect(screen.getByText('Remove Image')).toBeInTheDocument();
+
+        case 11:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee3);
+})));
+test('should change image if the corresponding menu option clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  var imagePreview;
+  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          getComponent();
+          fireEvent.change(screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+          _context4.next = 4;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 4:
+          imagePreview = _context4.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+          global.URL.createObjectURL.mockImplementationOnce(function () {
+            return testImageURL2;
+          });
+          userEvent.click(screen.getByTestId(testButtonId));
+          userEvent.click(screen.getByText('Upload New Image'));
+          fireEvent.change(screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 13:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));
+test('should call onChange cb (when provided) when a file is uploaded', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange
+  });
+  fireEvent.change(screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [file]
+    }
+  });
+  expect(testOnChange).toHaveBeenCalledTimes(1);
+});
+test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+  var testOnRemove, imagePreview;
+  return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          testOnRemove = jest.fn();
+          getComponent({
+            onRemove: testOnRemove
+          });
+          fireEvent.change(screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+          _context5.next = 5;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 5:
+          imagePreview = _context5.sent;
+          userEvent.click(screen.getByTestId(testButtonId));
+          expect(imagePreview).toBeInTheDocument();
+          userEvent.click(screen.getByText('Remove Image'));
+          expect(imagePreview).not.toBeInTheDocument();
+          expect(testOnRemove).toHaveBeenCalledTimes(1);
+
+        case 11:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee5);
+})));
+test('should not call onChange cb (when provided) if uploaded file is not allowed by fileTypes', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange,
+    fileTypes: ['audio']
+  });
+  fireEvent.change(screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [file]
+    }
+  });
+  expect(testOnChange).toHaveBeenCalledTimes(0);
+});
+test('should render helper text', function () {
+  getComponent();
+  expect(screen.getByText(testHelperText)).toBeInTheDocument();
+});
+test('should render the file name when file type is not image', function () {
+  getComponent({
+    fileTypes: ['audio']
+  });
+  fireEvent.change(screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [notImageFile]
+    }
+  });
+  expect(screen.getByText(notImageFileName)).toBeInTheDocument();
+});
+test('should render default preview image if defined initially', function () {
+  getComponent({
+    defaultPreviewImage: 'some-image'
+  });
+  expect(screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+});
+test('should render new preview image if defined later', function () {
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  expect(screen.queryByTestId(imageUploadNoImagePreview)).toBeInTheDocument();
+  expect(screen.queryByTestId(imageUploadImagePreview)).not.toBeInTheDocument();
+  getComponent({
+    defaultPreviewImage: 'some-image'
+  }, {
+    renderFn: rerender
+  });
+  expect(screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+});
+test('should render loader if isLoading prop is true', function () {
+  var _getComponent2 = getComponent(),
+      rerender = _getComponent2.rerender;
+
+  expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  getComponent({
+    isLoading: true
+  }, {
+    renderFn: rerender
+  });
+  expect(screen.queryByRole('progressbar')).toBeInTheDocument();
+});
+test('should render loader if isLoading prop is true', function () {
+  var _getComponent3 = getComponent(),
+      rerender = _getComponent3.rerender;
+
+  expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  getComponent({
+    isLoading: true
+  }, {
+    renderFn: rerender
+  });
+  expect(screen.queryByRole('progressbar')).toBeInTheDocument();
+});
+test('should render image preview and menu when previewImage prop is supplied', function () {
+  getComponent({
+    previewImage: 'test'
+  });
+  expect(screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(screen.queryByTestId(imageUploadImagePreview)).toHaveAttribute('src', 'test');
+  expect(screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+  userEvent.click(screen.getByTestId(testButtonId));
+  expect(screen.getByText('Upload New Image')).toBeInTheDocument();
+  expect(screen.getByText('Remove Image')).toBeInTheDocument();
+});
+test('loader size can be changed via the prop', function () {
+  var testLoaderSize = 17;
+  getComponent({
+    isLoading: true,
+    loaderSize: testLoaderSize
+  });
+  expect(screen.getByTestId('image-preview-button__loader')).toHaveStyle({
+    'font-size': "".concat(testLoaderSize, "px")
+  });
+});
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+  var customUploadProp, customRemoveProp, imageUploadLabel, imagePreview;
+  return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+    while (1) {
+      switch (_context6.prev = _context6.next) {
+        case 0:
+          customUploadProp = 'Custom Upload';
+          customRemoveProp = 'Custom Remove';
+          getComponent({
+            uploadItemText: customUploadProp,
+            removeItemText: customRemoveProp
+          });
+          imageUploadLabel = screen.getByText(testLabel);
+          fireEvent.change(screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+          _context6.next = 7;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context6.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+          userEvent.click(imageUploadLabel);
+          expect(screen.getByText(customUploadProp)).toBeInTheDocument();
+          expect(screen.getByText(customRemoveProp)).toBeInTheDocument();
+
+        case 13:
+        case "end":
+          return _context6.stop();
+      }
+    }
+  }, _callee6);
+})));
+test('should render node element if passed as default image', function () {
+  getComponent({
+    defaultPreviewImage: ___EmotionJSX(Image, null)
+  });
+  var img = screen.getByRole('img');
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});