Add tests for mockViewportForTestGroup

Author: trurl-master

README.md

@@ -86,7 +86,7 @@ it('loads the image when the component is in the viewport', () => {
 
   expect(screen.queryByAltText('alt text')).not.toBeInTheDocument();
 
-  // when the component's root node is in the viewport - show the image
+  // when the component's observed node is in the viewport - show the image
   act(() => {
     intersectionObserver.enterNode(container.firstChild);
   });

src/mocks/intersection-observer.ts

@@ -121,6 +121,9 @@ function mockIntersectionObserver() {
 
       trigger(index);
     },
+    cleanup: () => {
+      window.IntersectionObserver = savedImplementation;
+    },
   };
 }
 

test/viewport.test.tsx

@@ -2,55 +2,81 @@ import React from 'react';
 import { render, act, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { mockViewport } from '../src/mocks/viewport';
+import { mockViewport, mockViewportForTestGroup } from '../src/mocks/viewport';
 
 import CustomUseMedia from '../example/viewport/custom-use-media/CustomUseMedia';
 
 const VIEWPORT_DESKTOP = { width: '1440px', height: '900px' };
 const VIEWPORT_MOBILE = { width: '320px', height: '568px' };
 
-describe('It renders correctly on server, desktop and mobile', () => {
-  it('works on the server', () => {
-    render(<CustomUseMedia />);
+describe('mockViewport', () => {
+  describe('It renders correctly on server, desktop and mobile', () => {
+    it('works on the server', () => {
+      render(<CustomUseMedia />);
 
-    expect(screen.getByText('server')).toBeInTheDocument();
-  });
+      expect(screen.getByText('server')).toBeInTheDocument();
+    });
 
-  it('works on desktop', () => {
-    const viewport = mockViewport(VIEWPORT_DESKTOP);
+    it('works on desktop', () => {
+      const viewport = mockViewport(VIEWPORT_DESKTOP);
 
-    render(<CustomUseMedia />);
+      render(<CustomUseMedia />);
 
-    expect(screen.getByText('desktop')).toBeInTheDocument();
+      expect(screen.getByText('desktop')).toBeInTheDocument();
 
-    viewport.cleanup();
-  });
+      viewport.cleanup();
+    });
 
-  it('works on mobile', () => {
-    const viewport = mockViewport(VIEWPORT_MOBILE);
+    it('works on mobile', () => {
+      const viewport = mockViewport(VIEWPORT_MOBILE);
 
-    render(<CustomUseMedia />);
+      render(<CustomUseMedia />);
 
-    expect(screen.getByText('not desktop')).toBeInTheDocument();
+      expect(screen.getByText('not desktop')).toBeInTheDocument();
 
-    viewport.cleanup();
-  });
+      viewport.cleanup();
+    });
+
+    it('works on desktop and mobile, even if we change the viewport description', () => {
+      const viewport = mockViewport(VIEWPORT_DESKTOP);
 
-  it('works on desktop and mobile, even if we change the viewport description', () => {
-    const viewport = mockViewport(VIEWPORT_DESKTOP);
+      render(<CustomUseMedia />);
 
-    render(<CustomUseMedia />);
+      expect(screen.getByText('desktop')).toBeInTheDocument();
+      expect(screen.queryByText('not desktop')).not.toBeInTheDocument();
 
-    expect(screen.getByText('desktop')).toBeInTheDocument();
-    expect(screen.queryByText('not desktop')).not.toBeInTheDocument();
+      act(() => {
+        viewport.set(VIEWPORT_MOBILE);
+      });
 
-    act(() => {
-      viewport.set(VIEWPORT_MOBILE);
+      expect(screen.getByText('not desktop')).toBeInTheDocument();
+      expect(screen.queryByText('desktop')).not.toBeInTheDocument();
+
+      viewport.cleanup();
     });
+  });
+});
+
+describe('mockViewportForTestGroup', () => {
+  describe('Desktop', () => {
+    mockViewportForTestGroup(VIEWPORT_DESKTOP);
+
+    it('works on desktop and mobile, even if we change the viewport description', () => {
+      render(<CustomUseMedia />);
+
+      expect(screen.getByText('desktop')).toBeInTheDocument();
+      expect(screen.queryByText('not desktop')).not.toBeInTheDocument();
+    });
+  });
 
-    expect(screen.getByText('not desktop')).toBeInTheDocument();
-    expect(screen.queryByText('desktop')).not.toBeInTheDocument();
+  describe('Mobile', () => {
+    mockViewportForTestGroup(VIEWPORT_MOBILE);
 
-    viewport.cleanup();
+    it('works on desktop and mobile, even if we change the viewport description', () => {
+      render(<CustomUseMedia />);
+
+      expect(screen.getByText('not desktop')).toBeInTheDocument();
+      expect(screen.queryByText('desktop')).not.toBeInTheDocument();
+    });
   });
 });