chore: add non-working test mock for IntersectionObserver #1542

h2oai · Oct 23, 2022 · 81d8b23 · 81d8b23
1 parent 7f47f68
commit 81d8b23
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/ui/src/image.test.tsx b/ui/src/image.test.tsx
@@ -27,9 +27,25 @@ const
 
 describe('Image.tsx', () => {
 
+  beforeEach(() => { jest.clearAllMocks() })
+
+  beforeAll(() => {
+    const mockIntersectionObserver = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    }
+    // @ts-ignore
+    window.IntersectionObserver = jest.fn(() => mockIntersectionObserver)
+  })
+
   it('Renders data-test attr', () => {
     const { queryByTestId } = render(<View {...imageProps} />)
     expect(queryByTestId(name)).toBeInTheDocument()
   })
 
+  it('Opens image lightbox after clicking on image', () => {
+    const { queryByTestId } = render(<View {...imageProps} />)
+    expect(queryByTestId('lightbox')).toBeInTheDocument()
+  })
+
 })
diff --git a/ui/src/parts/lightbox.tsx b/ui/src/parts/lightbox.tsx
@@ -159,11 +159,11 @@ export const Lightbox = ({ images, defaultImageIdx }: LightboxProps) => {
     if (isGallery && imageNavRef.current) {
       const
         navRef = imageNavRef.current,
-        half = (navRef.clientWidth / 2) - 62,
-        imageScroll = activeImageIdx * 124
+        scrollLeftMiddle = (navRef.clientWidth / 2) - 62,
+        scrollLeftActiveImage = activeImageIdx * 124
       if (activeImageIdx === 0) navRef.scrollLeft = 0
       else if (activeImageIdx === images.length - 1) navRef.scrollLeft = navRef.scrollWidth - navRef?.clientWidth
-      else if (imageScroll > half) navRef.scrollTo({ left: imageScroll - half, behavior: 'smooth' })
+      else if (scrollLeftActiveImage > scrollLeftMiddle) navRef.scrollTo({ left: scrollLeftActiveImage - scrollLeftMiddle, behavior: 'smooth' })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeImageIdx, images.length])