Apply objectFit styling correctly (wojtekmaj#530)

alexandernanberg · Mar 14, 2019 · 0ba14a5 · 0ba14a5
1 parent 2a84b0c
commit 0ba14a5
Show file tree

Hide file tree

Showing 4 changed files with 581 additions and 264 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
-    "jest": "^24.1.0",
+    "jest": "^24.5.0",
     "jest-fetch-mock": "^2.1.1",
     "lint-staged": "^8.1.4",
     "mock-fs": "^4.8.0",

diff --git a/src/elements/Image.js b/src/elements/Image.js
@@ -138,7 +138,7 @@ class Image extends Base {
 
     if (this.image.data) {
       const { width, height, xOffset, yOffset } = resolveObjectFit(
-        this.props.style.objectFit,
+        this.style.objectFit,
         this.width - padding.left - padding.right,
         this.height - padding.top - padding.bottom,
         this.image.width,

diff --git a/tests/image.test.js b/tests/image.test.js
@@ -2,13 +2,15 @@ import fs from 'fs';
 import path from 'path';
 
 import root from './utils/dummyRoot';
+import Page from '../src/elements/Page';
 import Image from '../src/elements/Image';
 import warning from '../src/utils/warning';
 import {
   IMAGE_CACHE,
   getAbsoluteLocalPath,
   isDangerousLocalPath,
 } from '../src/utils/image';
+import * as objectFit from '../src/utils/objectFit';
 
 let dummyRoot;
 
@@ -252,6 +254,75 @@ describe('Image', () => {
     expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
   });
 
+  test('Should correctly resolve objectFit styles given a flat `style` prop', async () => {
+    const resolveObjectFitSpy = jest.spyOn(objectFit, 'resolveObjectFit');
+    resolveObjectFitSpy.mockClear();
+
+    const page = new Page(dummyRoot, {});
+    const image = new Image(dummyRoot, {
+      style: {
+        objectFit: 'contain',
+        objectPositionX: 42,
+        objectPositionY: 49,
+      },
+    });
+    image.width = 350;
+    image.height = 150;
+    image.image = {
+      data: 'mock image data',
+      width: 200,
+      height: 100,
+    };
+    page.appendChild(image);
+
+    image.applyProps();
+    await image.render();
+
+    expect(resolveObjectFitSpy).toHaveBeenCalledTimes(1);
+    expect(resolveObjectFitSpy.mock.calls[0][0]).toBe('contain');
+
+    expect(dummyRoot.instance.image.mock.calls).toHaveLength(1);
+    expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
+    expect(dummyRoot.instance.image.mock.calls[0][1]).toBe(42);
+    expect(dummyRoot.instance.image.mock.calls[0][2]).toBe(49);
+  });
+
+  test('Should correctly resolve objectFit styles given an array `style` prop', async () => {
+    const resolveObjectFitSpy = jest.spyOn(objectFit, 'resolveObjectFit');
+    resolveObjectFitSpy.mockClear();
+
+    const page = new Page(dummyRoot, {});
+    const image = new Image(dummyRoot, {
+      style: [
+        {
+          objectFit: 'contain',
+          objectPositionX: 42,
+          objectPositionY: 49,
+        },
+        undefined,
+      ],
+    });
+    image.width = 350;
+    image.height = 150;
+    image.image = {
+      data: 'mock image data',
+      width: 200,
+      height: 100,
+    };
+    page.appendChild(image);
+
+    image.applyProps();
+    await image.render();
+
+    expect(resolveObjectFitSpy).toHaveBeenCalledTimes(1);
+    expect(resolveObjectFitSpy.mock.calls[0][0]).toBe('contain');
+
+    expect(dummyRoot.instance.image.mock.calls).toHaveLength(1);
+    expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
+    expect(dummyRoot.instance.image.mock.calls[0][1]).toBe(42);
+    expect(dummyRoot.instance.image.mock.calls[0][2]).toBe(49);
+  });
+
   test('Should render background when render', async () => {
     const drawBackgroundColor = jest.fn();
     const image = new Image(dummyRoot, {