Merge pull request #11 from trurl-master/tsdx

Migrate to tsdx tooling and TypeScript

Author: trurl-master

.eslintrc.js

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/main.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/size.yml

@@ -1,6 +1,5 @@
+*.log
 .DS_Store
 node_modules
-dist
 .cache
-coverage
-.eslintcache
+dist

.gitignore

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Ivan Galiatin
+Copyright (c) 2021 Ivan Galiatin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.npmignore

@@ -1,4 +1,5 @@
 # jsdom-testing-mocks
+
 A set of tools for emulating browser behavior in jsdom environment
 
 ## Installation
@@ -7,39 +8,58 @@ A set of tools for emulating browser behavior in jsdom environment
 npm install --save-dev jsdom-testing-mocks
 ```
 
+or
+
+```sh
+yarn add -D jsdom-testing-mocks
+```
+
 ## Mock viewport
+
 Mocks `matchMedia`, allows testing of component's behavior depending on the viewport description (supports all of the [Media Features](http://www.w3.org/TR/css3-mediaqueries/#media1)). `mockViewport` must be called before rendering the component
 
 Example, using `React Testing Library`:
+
 ```jsx
-import { mockViewport } from 'jsdom-testing-mocks"
+import { mockViewport } from 'jsdom-testing-mocks';
 
 it('shows the right lines on desktop and mobile', () => {
-  const viewport = mockViewport({ width: '320px', height: '568px' })
+  const viewport = mockViewport({ width: '320px', height: '568px' });
 
-  const { getByText, queryByText } = render(<TestComponent />)
+  render(<TestComponent />);
 
-  expect(getByText('Content visible only on the phone')).toBeInTheDocument()
-  expect(queryByText('Content visible only on desktop')).not.toBeInTheDocument()
+  expect(
+    screen.getByText('Content visible only on small screens')
+  ).toBeInTheDocument();
+
+  expect(
+    screen.queryByText('Content visible only on small screens')
+  ).not.toBeInTheDocument();
 
   act(() => {
-    viewport.set({ width: '1440px', height: '900px' })
-  })
+    viewport.set({ width: '1440px', height: '900px' });
+  });
 
-  expect(queryByText('Content visible only on the phone')).not.toBeInTheDocument()
-  expect(getByText('Content visible only on desktop')).toBeInTheDocument()
+  expect(
+    screen.queryByText('Content visible only on small screens')
+  ).not.toBeInTheDocument();
 
-  viewport.cleanup()
-})
+  expect(
+    screen.getByText('Content visible only on small screens')
+  ).toBeInTheDocument();
+
+  viewport.cleanup();
+});
 ```
 
 Also, you can mock the viewport for a group of tests, using `mockViewportForTestGroup`:
+
 ```jsx
-import { mockViewportForTestGroup } from 'jsdom-testing-mocks"
+import { mockViewportForTestGroup } from 'jsdom-testing-mocks'
 
 describe('Desktop specific tests', () => {
   mockViewportForTestGroup({ width: '1440px', height: '900px' })
-  
+
   test('this', () = {
     // ...
   })
@@ -51,39 +71,42 @@ describe('Desktop specific tests', () => {
 ```
 
 ## Mock intersection observer
+
 Provides a way of triggering intersection observer events
 
 Example, using `React Testing Library`:
 
 ```jsx
-import { mockIntersectionObserver } from 'jsdom-testing-mocks"
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
 
-const intersectionObserver = mockIntersectionObserver()
+const intersectionObserver = mockIntersectionObserver();
 
 it('loads the image when the component is in the viewport', () => {
-  const { getByAltText, queryByAltText, container } =  render(<TestComponent />)
+  const { container } = render(<TestComponent />);
 
-  expect(queryByAltText('alt text')).not.toBeInTheDocument()
+  expect(screen.queryByAltText('alt text')).not.toBeInTheDocument();
 
   // when the component's root node is in the viewport - show the image
   act(() => {
-    intersectionObserver.enterNode(container.firstChild)
-  })
+    intersectionObserver.enterNode(container.firstChild);
+  });
 
-  expect(getByAltText('alt text')).toBeInTheDocument()
-})
+  expect(screen.getByAltText('alt text')).toBeInTheDocument();
+});
 ```
 
 ### API
 
 `mockIntersectionObserver` returns an object, that has several useful methods:
 
 #### .enterNode(node, desc) and .leaveNode(node, desc)
+
 Triggers the intersection observer callback with only one node
 and `isIntersected` set to `true` (for `enterNode`) or `false` (for `leaveNode`).
 Other `IntersectionObserverEntry` params can be passed as `desc` argument
 
 #### .enterAll(desc) and .leaveAll(desc)
+
 Triggers the intersection observer callback for all of the observed nodes
 and `isIntersected` set to `true` (for `enterAll`) or `false` (for `leaveAll`).
 Other `IntersectionObserverEntry` params can be passed as `desc` argument

.prettierrc

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist