From 37e528f625a6c4df525f0c80e0e4781cfc83a247 Mon Sep 17 00:00:00 2001 From: Tina Taylor <49009626+longevitytina@users.noreply.github.com> Date: Fri, 8 Dec 2023 14:20:03 -0800 Subject: [PATCH 1/2] Updated config.yml --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 9cafcd40..d88e5393 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -32,7 +32,7 @@ jobs: command: yarn build deploy: docker: - - image: cimg/node:20.4 + - image: cimg/node:21.4 steps: - checkout - node/install-packages From 06a3430df7e47e03ebaf122e2dbb32a0c0762fe4 Mon Sep 17 00:00:00 2001 From: Tina Taylor Date: Wed, 29 Nov 2023 13:28:10 -0800 Subject: [PATCH 2/2] fix: updates background component to merge props --- src/react-imgix-bg.jsx | 6 ++- test/unit/imgix-provider.test.jsx | 82 +++++++++++++++++++++---------- 2 files changed, 62 insertions(+), 26 deletions(-) diff --git a/src/react-imgix-bg.jsx b/src/react-imgix-bg.jsx index a6467616..7b3bf2fb 100644 --- a/src/react-imgix-bg.jsx +++ b/src/react-imgix-bg.jsx @@ -6,6 +6,7 @@ import constructUrl from "./constructUrl"; import extractQueryParams from "./extractQueryParams"; import findClosest from "./findClosest"; import targetWidths from "./targetWidths"; +import { mergeComponentPropsHOF, processPropsHOF } from "./HOFs"; const findNearestWidth = (actualWidth) => findClosest(actualWidth, targetWidths); @@ -188,6 +189,9 @@ class BackgroundImpl extends React.Component { ); } } -const Background = withContentRect("bounds")(BackgroundImpl); + +const Background = mergeComponentPropsHOF( + processPropsHOF(withContentRect("bounds")(BackgroundImpl)) +); export { Background, BackgroundImpl as __BackgroundImpl }; diff --git a/test/unit/imgix-provider.test.jsx b/test/unit/imgix-provider.test.jsx index f80bf194..5ffe0e33 100644 --- a/test/unit/imgix-provider.test.jsx +++ b/test/unit/imgix-provider.test.jsx @@ -1,6 +1,6 @@ import { mount, shallow } from "enzyme"; import React from "react"; -import ReactImgix, { ImgixProvider } from "../../src/index"; +import ReactImgix, { ImgixProvider, Background } from "../../src/index"; const providerProps = { domain: "sdk-test.imgix.net", @@ -17,43 +17,57 @@ describe("ImgixProvider", () => { const wrappedComponent = ( + ); - const expectedProps = { - children: ( - - ), - value: {}, - }; - const renderedComponent = shallow(wrappedComponent); - expect(renderedComponent.props()).toEqual(expectedProps); + + // Inspect the rendered children directly + const renderedChildren = renderedComponent.children(); + + expect(renderedChildren.length).toBe(2); // Assuming you have two children + expect(renderedChildren.at(0).props()).toEqual({ + src: 'https://assets.imgix.net/examples/pione.jpg', + sizes: imageProps.sizes, + }); + + expect(renderedChildren.at(1).props()).toEqual({ + src: 'https://assets.imgix.net/examples/pione.jpg', + sizes: imageProps.sizes, + }); + + expect(renderedComponent.prop('value')).toEqual({}); }); test("should set the context value to the Provider props", () => { const wrappedComponent = ( + ); - // ensure Provider value correctly set + const renderedComponent = shallow(wrappedComponent); + + // Inspect the rendered children directly + const renderedChildren = renderedComponent.children(); + const expectedProps = { - children: ( - - ), value: { domain: "sdk-test.imgix.net", sizes: "100vw" }, }; - const renderedComponent = shallow(wrappedComponent); - expect(renderedComponent.props()).toEqual(expectedProps); + expect(renderedChildren.length).toBe(2); // Assuming you have two children + expect(renderedChildren.at(0).props()).toEqual({ + src: 'https://assets.imgix.net/examples/pione.jpg', + sizes: '50vw', + }); + expect(renderedChildren.at(1).props()).toEqual({ + src: 'https://assets.imgix.net/examples/pione.jpg', + sizes: '50vw', + }); + + expect(renderedComponent.prop('value')).toEqual(expectedProps.value); }); test("should merge the Provider and Child props", () => { @@ -66,12 +80,12 @@ describe("ImgixProvider", () => { const wrappedComponent = ( + ); // ensure Provider and Child props are merged as intended const expectedProps = { - disableSrcSet: false, domain: "sdk-test.imgix.net", height: undefined, imgixParams: undefined, @@ -79,20 +93,38 @@ describe("ImgixProvider", () => { sizes: null, src: "https://sdk-test.imgix.net/examples/pione.jpg", width: undefined, - }; + }; + + const expectedReactImgixProps = { + ...expectedProps, + disableSrcSet: false, + }; + + const expectedBgProps = { + ...expectedProps, + }; // The order of the childAt() needs to update if number of HOCs change. - const renderedComponent = mount(wrappedComponent); + const renderedComponent = mount(wrappedComponent); //ImgixProvider + const renderedProps = renderedComponent .childAt(0) // mergePropsHOF .childAt(0) // processPropsHOF .childAt(0) // shouldComponentUpdateHOC .childAt(0) // ChildComponent .props(); + + const renderedBackgroundProps = renderedComponent + .childAt(1) // mergePropsHOF + .childAt(0) // processPropsHOF + .childAt(0) // withContentRect + .props(); + // remove noop function that breaks tests renderedProps.onMounted = undefined; - expect(renderedProps).toEqual(expectedProps); + expect(renderedProps).toEqual(expectedReactImgixProps); + expect(renderedBackgroundProps).toEqual(expectedBgProps); }); test("should log error when has no consumers", () => {