test: add tests for ts types (#1784)

mg901 · Feb 11, 2024 · a1a8e1e · a1a8e1e
1 parent ff80dcd
commit a1a8e1e
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 21 deletions.
diff --git a/.github/workflows/check-branch.yml b/.github/workflows/check-branch.yml
@@ -29,7 +29,7 @@ jobs:
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
-      - name: Coveralls
+      - name: Upload coverage reports to Coveralls
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

diff --git a/styled-breakpoints/create-styled-breakpoints-theme/index.types.ts b/styled-breakpoints/create-styled-breakpoints-theme/index.types.ts
@@ -57,37 +57,76 @@ describe('createStyledBreakpointsTheme', () => {
       type Max = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
       describe('up', () => {
-        // Act and Assert
-        expectTypeOf(theme.breakpoints.up).parameters.toMatchTypeOf<
-          [min: Min, orientation?: Orientation]
-        >();
+        it('accepts correct types', () => {
+          // Act and Assert
+          expectTypeOf(theme.breakpoints.up).parameters.toMatchTypeOf<
+            [min: Min, orientation?: Orientation]
+          >();
 
-        // @ts-expect-error
-        assertType(theme.breakpoints.up('42'));
+          // @ts-expect-error
+          assertType(theme.breakpoints.up('42'));
+        });
+
+        it('returns correct types', () => {
+          // Arrange
+          const result = theme.breakpoints.up('xs');
+
+          // Act and Assert
+          expectTypeOf(result).toBeString();
+
+          // @ts-expect-error
+          assertType(expectTypeOf(result).toBeUndefined());
+        });
       });
 
       describe('down', () => {
-        // Act and Assert
-        expectTypeOf(theme.breakpoints.down).parameters.toMatchTypeOf<
-          [max: Max, orientation?: Orientation]
-        >();
+        it('accepts correct type', () => {
+          // Act and Assert
+          expectTypeOf(theme.breakpoints.down).parameters.toMatchTypeOf<
+            [max: Max, orientation?: Orientation]
+          >();
 
-        // @ts-expect-error
-        assertType(theme.breakpoints.down('xs'));
+          // @ts-expect-error
+          assertType(theme.breakpoints.down('xs'));
+        });
+
+        it('returns correct type', () => {
+          // Arrange
+          const result = theme.breakpoints.down('md');
+
+          // Act and Assert
+          expectTypeOf(result).toBeString();
+
+          // @ts-expect-error
+          assertType(expectTypeOf(result).toBeUndefined());
+        });
       });
 
       describe('only', () => {
-        // Act and Assert
-        expectTypeOf(theme.breakpoints.only).parameters.toMatchTypeOf<
-          [key: Min, orientation?: Orientation]
-        >();
+        it('accepts correct type', () => {
+          // Act and Assert
+          expectTypeOf(theme.breakpoints.only).parameters.toMatchTypeOf<
+            [key: Min, orientation?: Orientation]
+          >();
 
-        // @ts-expect-error
-        assertType(theme.breakpoints.only('42'));
+          // @ts-expect-error
+          assertType(theme.breakpoints.only('42'));
+        });
+
+        it('returns correct type', () => {
+          // Arrange
+          const result = theme.breakpoints.only('md');
+
+          // Act and Assert
+          expectTypeOf(result).toBeString();
+
+          // @ts-expect-error
+          assertType(expectTypeOf(result).toBeUndefined());
+        });
       });
 
       describe('between', () => {
-        it('infers default breakpoints correctly', () => {
+        it('accepts correct types', () => {
           // Act and Assert
           expectTypeOf(theme.breakpoints.between).parameters.toMatchTypeOf<
             [min: Min, max: Max, orientation?: Orientation]
@@ -96,6 +135,17 @@ describe('createStyledBreakpointsTheme', () => {
           // @ts-expect-error
           assertType(theme.breakpoints.between('xs', 'xs'));
         });
+
+        it('returns correct type', () => {
+          // Arrange
+          const result = theme.breakpoints.between('sm', 'md');
+
+          // Act and Assert
+          expectTypeOf(result).toBeString();
+
+          // @ts-expect-error
+          assertType(expectTypeOf(result).toBeUndefined());
+        });
       });
     });
 

diff --git a/use-media-query/index.browser.spec.js b/use-media-query/index.browser.spec.js
@@ -28,6 +28,11 @@ describe('useMediaQuery hook', () => {
     }));
   });
 
+  it('should be a function', () => {
+    // Act and Assert
+    expect(useMediaQuery).toBeInstanceOf(Function);
+  });
+
   it('returns true if media query matches', () => {
     // Act
     const { result, unmount } = renderHook(() =>

diff --git a/use-media-query/index.types.ts b/use-media-query/index.types.ts
@@ -5,12 +5,29 @@ import { useMediaQuery } from './index';
 
 describe('useMediaQuery hook', () => {
   it('should be a function', () => {
+    // Act and Assert
     expectTypeOf(useMediaQuery).toBeFunction();
 
     // @ts-expect-error
     assertType(expectTypeOf(useMediaQuery).toBeUndefined());
+  });
+
+  it('accepts a string type', () => {
+    // Act and Assert
+    expectTypeOf(useMediaQuery).parameter(0).toMatchTypeOf<string>();
+
+    // @ts-expect-error
+    expectTypeOf(useMediaQuery(42));
+  });
+
+  it('returns a boolean type', () => {
+    // Arrange
+    const MEDIA_QUERY = '@media (min-width: 600px)';
+
+    // Act and Assert
+    expectTypeOf(useMediaQuery(MEDIA_QUERY)).toBeBoolean();
 
     // @ts-expect-error
-    assertType(useMediaQuery(42));
+    assertType(expectTypeOf(useMediaQuery(MEDIA_QUERY)).toBeString());
   });
 });