test: getExpandedStyle tests

Author: jscottsmith

src/components/ParallaxBanner/components/ParallaxBannerLayer.tsx

@@ -28,7 +28,7 @@ export const ParallaxBannerLayer = (
   } = rest;
 
   const imageStyle = getImageStyle(props);
-  const expandedStyle = getExpandedStyle(expanded, props);
+  const expandedStyle = expanded ? getExpandedStyle(props) : {};
   const parallax = useParallax<HTMLDivElement>({
     targetElement: props.targetElement,
     shouldDisableScalingTranslations: true,

src/components/ParallaxBanner/helpers/getExpandedStyle.test.ts

@@ -0,0 +1,38 @@
+import { BannerLayer } from '../types';
+import { getExpandedStyle } from './getExpandedStyle';
+
+describe('given getExpandedStyle', () => {
+  describe.each([
+    [{ translateY: [0, 100] } as BannerLayer, { top: '-500px', bottom: '0px' }],
+    [{ translateY: [0, 0] } as BannerLayer, { top: '0px', bottom: '0px' }],
+    [
+      { translateY: [10, -20] } as BannerLayer,
+      { top: '-100px', bottom: '-50px' },
+    ],
+    [
+      { translateY: ['-100%', '100%'] } as BannerLayer,
+      { top: '-500px', bottom: '-500px' },
+    ],
+    [
+      { translateY: ['-50%', '200%'] } as BannerLayer,
+      { top: '-1000px', bottom: '-250px' },
+    ],
+    [
+      { translateY: ['10px', '-20px'] } as BannerLayer,
+      { top: '-20px', bottom: '-10px' },
+    ],
+    [
+      { translateY: ['-10px', '20px'] } as BannerLayer,
+      { top: '-20px', bottom: '-10px' },
+    ],
+    [{ speed: -20 } as BannerLayer, { top: '-200px', bottom: '-200px' }],
+    [{ speed: 10 } as BannerLayer, { top: '-100px', bottom: '-100px' }],
+  ])('when props %s are given', (props, expected) => {
+    test('then it returns expected', () => {
+      const div = document.createElement('div');
+      div.getBoundingClientRect = jest.fn(() => ({ height: 500 } as DOMRect));
+      const targetElement = div;
+      expect(getExpandedStyle({ targetElement, ...props })).toEqual(expected);
+    });
+  });
+});

src/components/ParallaxBanner/helpers/getExpandedStyle.ts

@@ -1,19 +1,33 @@
 import { parseValueAndUnit } from 'parallax-controller';
 import { BannerLayer } from '../types';
 
-export function getExpandedStyle(expanded: boolean, layer: BannerLayer) {
-  if (!expanded) {
-    return {};
-  }
+const FALLBACK_RECT = {
+  height: 0,
+};
+
+export function getExpandedStyle(layer: BannerLayer) {
   if (Array.isArray(layer.translateY)) {
     const translateYStart = parseValueAndUnit(layer.translateY[0]);
     const translateYEnd = parseValueAndUnit(layer.translateY[1]);
+
     if (translateYStart.unit === 'px' && translateYEnd.unit === 'px') {
       return {
         top: `${Math.abs(translateYEnd.value) * -1}px`,
         bottom: `${Math.abs(translateYStart.value) * -1}px`,
       };
     }
+
+    if (translateYStart.unit === '%' && translateYEnd.unit === '%') {
+      const clientRect =
+        layer.targetElement?.getBoundingClientRect() || FALLBACK_RECT;
+      const top = Math.abs(clientRect.height * 0.01 * translateYEnd.value) * -1;
+      const bottom =
+        Math.abs(clientRect.height * 0.01 * translateYStart.value) * -1;
+      return {
+        top: `${top}px`,
+        bottom: `${bottom}px`,
+      };
+    }
   }
   if (layer.speed) {
     const speed = layer.speed || 0;
@@ -23,6 +37,5 @@ export function getExpandedStyle(expanded: boolean, layer: BannerLayer) {
       bottom: Math.abs(speed) * 10 * -1 + 'px',
     };
   }
-
   return {};
 }