Tests for issues (#146)

* Use github actions

* Try to fix

* Fix tests

* Fix prettier

* Remove version matrix

Author: ankeetmaini

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: react-infinite-scroll-component
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: install dependencies
+        run: yarn
+
+      - name: lint
+        run: yarn lint
+
+      - name: prettier
+        run: yarn prettier:check
+
+      - name: unit tests
+        run: yarn test
+
+      - name: ts type checks
+        run: yarn ts-check

.gitignore

@@ -4,4 +4,5 @@ npm-debug.log
 node_modules
 /lib
 .rts2_*
-dist
+dist
+.vscode

src/__tests__/index.test.tsx

@@ -1,30 +1,31 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react'
+import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
 describe('React Infinite Scroll Component', () => {
-
-  afterEach(cleanup)
+  afterEach(cleanup);
 
   it('renders .infinite-scroll-component', () => {
     const { container } = render(
-      <InfiniteScroll 
-        dataLength={4} 
-        loader={"Loading..."}
+      <InfiniteScroll
+        dataLength={4}
+        loader={'Loading...'}
         hasMore={false}
         next={() => {}}
       >
         <div />
       </InfiniteScroll>
     );
-    expect(container.querySelectorAll('.infinite-scroll-component').length).toBe(1)
+    expect(
+      container.querySelectorAll('.infinite-scroll-component').length
+    ).toBe(1);
   });
 
   it('renders custom class', () => {
     const { container } = render(
-      <InfiniteScroll 
-        dataLength={4} 
-        loader={"Loading..."}
+      <InfiniteScroll
+        dataLength={4}
+        loader={'Loading...'}
         className="custom-class"
         hasMore={false}
         next={() => {}}
@@ -38,26 +39,26 @@ describe('React Infinite Scroll Component', () => {
   it('renders children when passed in', () => {
     const { container } = render(
       <InfiniteScroll
-        dataLength={4} 
-        loader={"Loading..."}
+        dataLength={4}
+        loader={'Loading...'}
         hasMore={false}
         next={() => {}}
       >
         <div className="child" />
       </InfiniteScroll>
     );
-    expect(container.querySelectorAll('.child').length).toBe(1)
+    expect(container.querySelectorAll('.child').length).toBe(1);
   });
 
   it('calls scroll handler if provided, when user scrolls', () => {
     jest.useFakeTimers();
     const onScrollMock = jest.fn();
 
     const { container } = render(
-      <InfiniteScroll 
-        onScroll={onScrollMock} 
-        dataLength={4} 
-        loader={"Loading..."}
+      <InfiniteScroll
+        onScroll={onScrollMock}
+        dataLength={4}
+        loader={'Loading...'}
         height={100}
         hasMore={false}
         next={() => {}}
@@ -67,7 +68,9 @@ describe('React Infinite Scroll Component', () => {
     );
 
     const scrollEvent = new Event('scroll');
-    const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
+    const node = container.querySelector(
+      '.infinite-scroll-component'
+    ) as HTMLElement;
 
     node.dispatchEvent(scrollEvent);
     jest.runOnlyPendingTimers();
@@ -76,12 +79,11 @@ describe('React Infinite Scroll Component', () => {
   });
 
   describe('When user scrolls to the bottom', () => {
-
     it('does not show loader if hasMore is false', () => {
       const { container, queryByText } = render(
-        <InfiniteScroll 
-          dataLength={4} 
-          loader={"Loading..."}
+        <InfiniteScroll
+          dataLength={4}
+          loader={'Loading...'}
           hasMore={false}
           scrollThreshold={0}
           next={() => {}}
@@ -91,16 +93,18 @@ describe('React Infinite Scroll Component', () => {
       );
 
       const scrollEvent = new Event('scroll');
-      const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
+      const node = container.querySelector(
+        '.infinite-scroll-component'
+      ) as HTMLElement;
       node.dispatchEvent(scrollEvent);
       expect(queryByText('Loading...')).toBeFalsy();
     });
 
     it('shows loader if hasMore is true', () => {
       const { container, getByText } = render(
-        <InfiniteScroll 
-          dataLength={4} 
-          loader={"Loading..."}
+        <InfiniteScroll
+          dataLength={4}
+          loader={'Loading...'}
           hasMore={true}
           scrollThreshold={0}
           next={() => {}}
@@ -111,19 +115,20 @@ describe('React Infinite Scroll Component', () => {
       );
 
       const scrollEvent = new Event('scroll');
-      const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
+      const node = container.querySelector(
+        '.infinite-scroll-component'
+      ) as HTMLElement;
       node.dispatchEvent(scrollEvent);
       expect(getByText('Loading...')).toBeTruthy();
     });
-
   });
 
   it('shows end message', () => {
     const { queryByText } = render(
       <InfiniteScroll
-        dataLength={4} 
-        loader={"Loading..."}
-        endMessage={"Reached end."}
+        dataLength={4}
+        loader={'Loading...'}
+        endMessage={'Reached end.'}
         hasMore={false}
         next={() => {}}
       >
@@ -132,4 +137,4 @@ describe('React Infinite Scroll Component', () => {
     );
     expect(queryByText('Reached end.')).toBeTruthy();
   });
-});
+});