@pingux/astro 1.8.0-alpha.0 → 1.8.0-alpha.1

package/lib/components/Image/Image.test.js

@@ -1,18 +1,62 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
+import { act } from '@testing-library/react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Image from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var testSrc = 'test-src';
+var testFallbackSrc = 'test-fallback-src';
+var skeletonImageId = 'skeleton-image';
+var defaultProps = {
+  src: testSrc,
+  fallbackImage: testFallbackSrc
+};
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Image, props));
+  return render(___EmotionJSX(Image, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
 axeTest(getComponent);
+var fallbackImageObj = null;
+jest.mock('../../hooks/useFallbackImage', function () {
+  return function (props) {
+    fallbackImageObj = _objectSpread({}, props);
+    return [];
+  };
+});
 test('an image is rendered', function () {
   getComponent();
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  var img = screen.getByRole('img');
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});
+test('an image is rendered with no fallback', function () {
+  getComponent({
+    fallbackImage: null
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
@@ -21,6 +65,79 @@ test('image shows disabled status', function () {
   getComponent({
     isDisabled: true
   });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
+});
+describe('test Image component with useFallbackImage hook', function () {
+  test('image component will use src if loaded correctly', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('image component will use fallbackImg if src loaded with error', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageError();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('image component will use fallbackImg if src timed out', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('if image loads after timeout src still be the fallback', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+      fallbackImageObj.onImageLoad();
+    });
+    var img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', testFallbackSrc);
+  });
+  test('if image loads before timeout src still be the the origin one', function () {
+    getComponent();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+      fallbackImageObj.onFallbackTimeout();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('the skeleton loading will appear if no fallback image is given', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+    act(function () {
+      fallbackImageObj.onImageLoad();
+    });
+    expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  });
+  test('the skeleton will be shown instead of img if no fallback image is given and image load failed', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    act(function () {
+      fallbackImageObj.onImageError();
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+  });
+  test('the skeleton will be shown instead of img if no fallback image is given and image load timed out', function () {
+    getComponent({
+      fallbackImage: null
+    });
+    act(function () {
+      fallbackImageObj.onFallbackTimeout();
+    });
+    expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
+  });
 });

package/lib/components/Image/imageConstants.js

@@ -0,0 +1,2 @@
+export var pingImg = 'data:image/png;base64,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';
+export var chiefIdentityChampions = 'https://images.pingidentity.com/image/upload/f_auto,q_auto,w_auto,c_scale/ping_dam/content/dam/ping-6-2-assets/images/company/our-company/chief-identity-champions.png';

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

@@ -7,15 +7,21 @@ 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 imageUploadNoImagePreview = 'image-upload-no-image-preview';
+jest.mock('../Image', function () {
+  return function (props) {
+    return ___EmotionJSX("img", _extends({
+      alt: "mock"
+    }, props));
+  };
+});
 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'
 });
@@ -185,10 +191,16 @@ test('should change image if the corresponding menu option clicked', /*#__PURE__
               files: [file]
             }
           });
-          expect(imagePreview).toBeInTheDocument();
+          _context4.t0 = expect;
+          _context4.next = 14;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 14:
+          _context4.t1 = _context4.sent;
+          (0, _context4.t0)(_context4.t1).toBeInTheDocument();
           expect(imagePreview).toHaveAttribute('src');
 
-        case 13:
+        case 17:
         case "end":
           return _context4.stop();
       }
@@ -228,12 +240,18 @@ test('should call onRemove cb (when provided) when a file is uploaded', /*#__PUR
         case 5:
           imagePreview = _context5.sent;
           userEvent.click(screen.getByTestId(testButtonId));
-          expect(imagePreview).toBeInTheDocument();
+          _context5.t0 = expect;
+          _context5.next = 10;
+          return screen.findByTestId(imageUploadImagePreview);
+
+        case 10:
+          _context5.t1 = _context5.sent;
+          (0, _context5.t0)(_context5.t1).toBeInTheDocument();
           userEvent.click(screen.getByText('Remove Image'));
           expect(imagePreview).not.toBeInTheDocument();
           expect(testOnRemove).toHaveBeenCalledTimes(1);
 
-        case 11:
+        case 15:
         case "end":
           return _context5.stop();
       }
@@ -372,7 +390,9 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
 })));
 test('should render node element if passed as default image', function () {
   getComponent({
-    defaultPreviewImage: ___EmotionJSX(Image, null)
+    defaultPreviewImage: ___EmotionJSX("img", {
+      alt: "mock"
+    })
   });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);

package/lib/hooks/index.js

@@ -10,4 +10,5 @@ export { default as useNavBarPress } from './useNavBarPress';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';
 export { default as useStatusClasses } from './useStatusClasses';
-export { default as useDebounce } from './useDebounce';
+export { default as useDebounce } from './useDebounce';
+export { default as useFallbackImage } from './useFallbackImage';

package/lib/hooks/useFallbackImage/index.js

@@ -0,0 +1 @@
+export { default } from './useFallbackImage';

package/lib/hooks/useFallbackImage/useFallbackImage.js

@@ -0,0 +1,32 @@
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import { useEffect, useMemo } from 'react';
+
+var useFallbackImage = function useFallbackImage(_ref) {
+  var imageSrc = _ref.src,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      fallbackTimeout = _ref.fallbackTimeout,
+      onFallbackTimeout = _ref.onFallbackTimeout;
+  var displayImage = useMemo(function () {
+    return document.createElement('img');
+  }, []);
+  useEffect(function () {
+    displayImage.src = imageSrc;
+    displayImage.onload = onImageLoad;
+    displayImage.onerror = onImageError;
+    return function () {
+      displayImage.onload = null;
+      displayImage.onerror = null;
+    };
+  }, []);
+  useEffect(function () {
+    var timeoutId = 0;
+    timeoutId = _setTimeout(onFallbackTimeout, fallbackTimeout);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, []);
+  return displayImage;
+};
+
+export default useFallbackImage;

package/lib/hooks/useFallbackImage/useFallbackImage.test.js

@@ -0,0 +1,51 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { renderHook } from '@testing-library/react-hooks';
+import useFallbackImage from './useFallbackImage';
+var defaultProps = {
+  src: 'test-src',
+  fallbackImage: 'test-fallback-src',
+  onImageLoad: jest.fn(),
+  onImageError: jest.fn(),
+  fallbackTimeout: 5,
+  onFallbackTimeout: jest.fn()
+};
+test('should return node if all props are correct ', function () {
+  var _renderHook = renderHook(function () {
+    return useFallbackImage(defaultProps);
+  }),
+      current = _renderHook.result.current;
+
+  expect(current).toBeInstanceOf(HTMLImageElement);
+});
+test('should not trigger onImageLoad if no fallback passed', function () {
+  renderHook(function () {
+    return useFallbackImage(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  });
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});
+test('should not trigger onImageLoad if component unmounted', function () {
+  var _renderHook2 = renderHook(function () {
+    return useFallbackImage(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  }),
+      unmount = _renderHook2.unmount;
+
+  unmount();
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.8.0-alpha.0",
+  "version": "1.8.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -136,6 +136,7 @@
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
     "prism-react-renderer": "1.2.1",
+    "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",