WIP Polish

lib/KImg/__tests__/KImg.spec.js

@@ -1,32 +1,26 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import KImg from '../';
 
-describe('KImg component', () => {
-  let wrapper;
-  let img;
-
-  const DEFAULT_PROPS = {
-    src: 'https://learningequality.org/static/img/le-logo.svg',
-    altText: "Learning Equality's logo",
-  };
+describe('KImg', () => {
+  function makeWrapper({ propsData = {} } = {}) {
+    return shallowMount(KImg, { propsData } );
+  }
+  const findImage = wrapper => wrapper.find('img')
 
-  function makeWrapper(newProps = {}) {
-    wrapper = mount(KImg, {
-      propsData: { ...DEFAULT_PROPS, ...newProps },
+  it(`Renders without any errors when a valid 'src' and 'altText' are provided`, () => {
+    const wrapper = makeWrapper({ 
+      propsData: { src: '/le-logo.svg', altText: 'LE logo'}
     });
-    img = wrapper.find('img');
-  }
+    const img = findImage(wrapper);
 
-  it('Renders without any errors when a valid src and altText are provided', () => {
-    makeWrapper();
     expect(wrapper.exists()).toBe(true);
     expect(img.exists()).toBe(true);
 
-    expect(img.attributes('src')).toBe(DEFAULT_PROPS.src);
-    expect(img.attributes('alt')).toBe(DEFAULT_PROPS.altText);
+    expect(img.attributes('src')).toBe('/le-logo.svg');
+    expect(img.attributes('alt')).toBe('LE logo');
   });
 
-  it('Throws an error when no altText is provided', () => {
+  /* it('Throws an error when no altText is provided', () => {
     expect(() => makeWrapper({ altText: undefined })).toThrow();
   });
 
@@ -37,6 +31,24 @@ describe('KImg component', () => {
     expect(img.attributes('alt')).toBe('');
   });
 
+  it(`Throws an error when 'aspectRatio' has an invalid format`, () => {
+    expect(() => makeWrapper({ aspectRatio: '16/9' })).toThrow();
+  })
+
+
+  it(`Doesn't throw an error when 'aspectRatio' has a valid format`, () => {
+    expect(() => makeWrapper({ aspectRatio: '16:9' })).not.toThrow();
+  })
+
+  it(`Throws an error when 'scaleType' is not supported`, () => {
+    let wrapper = makeWrapper({ scaleType: 'randomScaleType' })
+    expect(wrapper).toThrow();
+  })
+
+  it(`Doesn't throw an error when 'scaleType' is supported`, () => {
+    expect(() => makeWrapper({ scaleType: 'contain' })).not.toThrow();
+  })
+
   it('Emits an `error` event when there is an error in loading the image', () => {
     makeWrapper({
       src: 'invalid-src.jpg',
@@ -49,5 +61,5 @@ describe('KImg component', () => {
     const emittedEvent = wrapper.emitted().error;
     expect(emittedEvent).toBeTruthy();
     expect(emittedEvent[0][0]).toBeInstanceOf(Event);
-  });
+  }); */
 });

lib/KImg/index.vue

@@ -117,64 +117,63 @@
        */
       height: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * Sets the width of the image container
        */
       width: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * Sets the maximum height of the image container
        */
       maxHeight: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * Sets the minimum height of the image container
        */
       minHeight: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * Sets the maximum width of the image container
        */
       maxWidth: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * 	Sets the minimum width of the image container
        */
       minWidth: {
         type: [Number, String],
-        default: undefined,
+        default: null,
       },
       /**
        * Sets the ratio of the width(w) to the height(h)
        * of the image container. The required format is `w:h`.
        */
       aspectRatio: {
         type: String,
-        default: undefined,
+        default: null,
         validator: isValidAspectRatio,
       },
       /**
        * Specifies how an image should be scaled within the container.
        * Can be one of  `'centerInside'` (default), `'contain'`, or `'fitXY'`.
-       * See the documentation examples.
        */
       scaleType: {
         type: String,
         default: 'centerInside', // needs to be duplicated rather than using ScaleTypes.CENTER_INSIDE, otherwise it doesn't render correctly in the auto-generated Props documentation
         validator: isValidScaleType,
       },
       /**
-       * A color to be displayed instead or behind an image.
+       * A color to be displayed instead or behind the image.
        * It creates a background area which respects the dimensions
        * set on the container.
        *
@@ -193,16 +192,14 @@
       },
       /**
        * The border radius of an image or its placeholder area
-       * as a standard CSS 'border-radius' value.
        */
       borderRadius: {
         type: String,
         required: false,
         default: null,
       },
       /**
-       * Accepts a Vue dynamic styles object to override the default styles to modify the appearance of the component.
-       * It's attributes always take precedence over any specified styling (internal component's styles, styles calculated from props etc.)
+       * Dynamic styles object that overrides the default styles
        */
       appearanceOverrides: {
         type: Object,
@@ -246,6 +243,11 @@
           },
         };
       },
+      /**
+       * Returns all styles related to the logic
+       * that controls how the image scales within
+       * the image container
+       */
       scaleStyles() {
         const scaleKind = isValidScaleType(this.scaleType) ? this.scaleType : ScaleTypes.CONTAIN;
         const scaleStyles = {
@@ -287,6 +289,10 @@
         };
         return scaleStyles[scaleKind];
       },
+      /**
+       * Returns all styles related to the logic
+       * that controls the image ratio
+       */
       ratioStyles() {
         if (!this.aspectRatio) {
           return {
@@ -295,6 +301,7 @@
             img: {},
           };
         }
+        // https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
         const paddingTopInPercent = (this.ratio.y / this.ratio.x) * 100;
         return {
           rootContainer: {},