Skip to content

Commit 5b874bd

Browse files
author
Rajat Sancheti
committed
add tests
1 parent e79630f commit 5b874bd

File tree

4 files changed

+2057
-123
lines changed

4 files changed

+2057
-123
lines changed

jest.config.js

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
// For a detailed explanation regarding each configuration property, visit:
2+
// https://jestjs.io/docs/en/configuration.html
3+
4+
module.exports = {
5+
// All imported modules in your tests should be mocked automatically
6+
// automock: false,
7+
8+
// Stop running tests after the first failure
9+
// bail: false,
10+
11+
// Respect "browser" field in package.json when resolving modules
12+
// browser: false,
13+
14+
// The directory where Jest should store its cached dependency information
15+
// cacheDirectory: "/var/folders/xp/bp966jvd70j25zc1cz6sd905psfs4r/T/jest_ueoec8",
16+
17+
// Automatically clear mock calls and instances between every test
18+
clearMocks: true,
19+
20+
// Indicates whether the coverage information should be collected while executing the test
21+
// collectCoverage: false,
22+
23+
// An array of glob patterns indicating a set of files for which coverage information should be collected
24+
// collectCoverageFrom: null,
25+
26+
// The directory where Jest should output its coverage files
27+
coverageDirectory: 'coverage',
28+
29+
// An array of regexp pattern strings used to skip coverage collection
30+
// coveragePathIgnorePatterns: [
31+
// "/node_modules/"
32+
// ],
33+
34+
// A list of reporter names that Jest uses when writing coverage reports
35+
// coverageReporters: [
36+
// "json",
37+
// "text",
38+
// "lcov",
39+
// "clover"
40+
// ],
41+
42+
// An object that configures minimum threshold enforcement for coverage results
43+
// coverageThreshold: null,
44+
45+
// Make calling deprecated APIs throw helpful error messages
46+
// errorOnDeprecated: false,
47+
48+
// Force coverage collection from ignored files usin a array of glob patterns
49+
// forceCoverageMatch: [],
50+
51+
// A path to a module which exports an async function that is triggered once before all test suites
52+
// globalSetup: null,
53+
54+
// A path to a module which exports an async function that is triggered once after all test suites
55+
// globalTeardown: null,
56+
57+
// A set of global variables that need to be available in all test environments
58+
// globals: {},
59+
60+
// An array of directory names to be searched recursively up from the requiring module's location
61+
// moduleDirectories: [
62+
// "node_modules"
63+
// ],
64+
65+
// An array of file extensions your modules use
66+
// moduleFileExtensions: [
67+
// "js",
68+
// "json",
69+
// "jsx",
70+
// "node"
71+
// ],
72+
73+
// A map from regular expressions to module names that allow to stub out resources with a single module
74+
// moduleNameMapper: {},
75+
76+
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
77+
// modulePathIgnorePatterns: [],
78+
79+
// Activates notifications for test results
80+
// notify: false,
81+
82+
// An enum that specifies notification mode. Requires { notify: true }
83+
// notifyMode: "always",
84+
85+
// A preset that is used as a base for Jest's configuration
86+
preset: 'ts-jest',
87+
88+
// Run tests from one or more projects
89+
// projects: null,
90+
91+
// Use this configuration option to add custom reporters to Jest
92+
// reporters: undefined,
93+
94+
// Automatically reset mock state between every test
95+
// resetMocks: false,
96+
97+
// Reset the module registry before running each individual test
98+
// resetModules: false,
99+
100+
// A path to a custom resolver
101+
// resolver: null,
102+
103+
// Automatically restore mock state between every test
104+
// restoreMocks: false,
105+
106+
// The root directory that Jest should scan for tests and modules within
107+
// rootDir: null,
108+
109+
// A list of paths to directories that Jest should use to search for files in
110+
// roots: [
111+
// "<rootDir>"
112+
// ],
113+
114+
// Allows you to use a custom runner instead of Jest's default test runner
115+
// runner: "jest-runner",
116+
117+
// The paths to modules that run some code to configure or set up the testing environment before each test
118+
// setupFiles: [],
119+
120+
// The path to a module that runs some code to configure or set up the testing framework before each test
121+
// setupTestFrameworkScriptFile: null,
122+
123+
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
124+
// snapshotSerializers: [],
125+
126+
// The test environment that will be used for testing
127+
testEnvironment: 'jsdom',
128+
129+
// Options that will be passed to the testEnvironment
130+
// testEnvironmentOptions: {},
131+
132+
// Adds a location field to test results
133+
// testLocationInResults: false,
134+
135+
// The glob patterns Jest uses to detect test files
136+
// testMatch: [
137+
// "**/__tests__/**/*.js?(x)",
138+
// "**/?(*.)+(spec|test).js?(x)"
139+
// ],
140+
141+
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
142+
// testPathIgnorePatterns: [
143+
// "/node_modules/"
144+
// ],
145+
146+
// The regexp pattern Jest uses to detect test files
147+
// testRegex: "",
148+
149+
// This option allows the use of a custom results processor
150+
// testResultsProcessor: null,
151+
152+
// This option allows use of a custom test runner
153+
// testRunner: "jasmine2",
154+
155+
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
156+
// testURL: "http://localhost",
157+
158+
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
159+
// timers: "real",
160+
161+
// A map from regular expressions to paths to transformers
162+
// transform: null,
163+
164+
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
165+
// transformIgnorePatterns: [
166+
// "/node_modules/"
167+
// ],
168+
169+
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
170+
// unmockedModulePathPatterns: undefined,
171+
172+
// Indicates whether each individual test should be reported during the run
173+
// verbose: null,
174+
175+
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
176+
// watchPathIgnorePatterns: [],
177+
178+
// Whether to use watchman for file crawling
179+
// watchman: true,
180+
};

package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"lint:fix": "yarn lint --fix",
1515
"prettier:check": "prettier --check 'src/**/*'",
1616
"prettify": "prettier --write 'src/**/*'",
17-
"ts-check": "tsc -p tsconfig.json --noEmit"
17+
"ts-check": "tsc -p tsconfig.json --noEmit",
18+
"test": "jest"
1819
},
1920
"repository": {
2021
"type": "git",
@@ -57,11 +58,15 @@
5758
"eslint-plugin-react": "^7.15.0",
5859
"husky": ">=1",
5960
"lint-staged": ">=8",
61+
"@testing-library/react": "^9.2.0",
62+
"@types/jest": "^24.0.18",
63+
"jest": "^24.9.0",
6064
"microbundle": "^0.11.0",
6165
"prettier": "1.18.2",
6266
"react": "^16.10.1",
6367
"react-docgen-typescript-loader": "^3.2.1",
6468
"react-dom": "^16.10.1",
69+
"ts-jest": "^24.1.0",
6570
"typescript": "^3.6.3"
6671
},
6772
"dependencies": {

src/__tests__/index.test.tsx

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import React from 'react';
2+
import { render, cleanup } from '@testing-library/react'
3+
import InfiniteScroll from '../index';
4+
5+
describe('React Infinite Scroll Component', () => {
6+
7+
afterEach(cleanup)
8+
9+
it('renders .infinite-scroll-component', () => {
10+
const { container } = render(
11+
<InfiniteScroll
12+
dataLength={4}
13+
loader={"Loading..."}
14+
hasMore={false}
15+
next={() => {}}
16+
>
17+
<div />
18+
</InfiniteScroll>
19+
);
20+
expect(container.querySelectorAll('.infinite-scroll-component').length).toBe(1)
21+
});
22+
23+
it('renders custom class', () => {
24+
const { container } = render(
25+
<InfiniteScroll
26+
dataLength={4}
27+
loader={"Loading..."}
28+
className="custom-class"
29+
hasMore={false}
30+
next={() => {}}
31+
>
32+
<div />
33+
</InfiniteScroll>
34+
);
35+
expect(container.querySelectorAll('.custom-class').length).toBe(1);
36+
});
37+
38+
it('renders children when passed in', () => {
39+
const { container } = render(
40+
<InfiniteScroll
41+
dataLength={4}
42+
loader={"Loading..."}
43+
hasMore={false}
44+
next={() => {}}
45+
>
46+
<div className="child" />
47+
</InfiniteScroll>
48+
);
49+
expect(container.querySelectorAll('.child').length).toBe(1)
50+
});
51+
52+
it('calls scroll handler if provided, when user scrolls', () => {
53+
jest.useFakeTimers();
54+
const onScrollMock = jest.fn();
55+
56+
const { container } = render(
57+
<InfiniteScroll
58+
onScroll={onScrollMock}
59+
dataLength={4}
60+
loader={"Loading..."}
61+
height={100}
62+
hasMore={false}
63+
next={() => {}}
64+
>
65+
<div />
66+
</InfiniteScroll>
67+
);
68+
69+
const scrollEvent = new Event('scroll');
70+
const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
71+
72+
node.dispatchEvent(scrollEvent);
73+
jest.runOnlyPendingTimers();
74+
expect(setTimeout).toHaveBeenCalledTimes(1);
75+
expect(onScrollMock).toHaveBeenCalled();
76+
});
77+
78+
describe('When user scrolls to the bottom', () => {
79+
80+
it('does not show loader if hasMore is false', () => {
81+
const { container, queryByText } = render(
82+
<InfiniteScroll
83+
dataLength={4}
84+
loader={"Loading..."}
85+
hasMore={false}
86+
scrollThreshold={0}
87+
next={() => {}}
88+
>
89+
<div />
90+
</InfiniteScroll>
91+
);
92+
93+
const scrollEvent = new Event('scroll');
94+
const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
95+
node.dispatchEvent(scrollEvent);
96+
expect(queryByText('Loading...')).toBeFalsy();
97+
});
98+
99+
it('shows loader if hasMore is true', () => {
100+
const { container, getByText } = render(
101+
<InfiniteScroll
102+
dataLength={4}
103+
loader={"Loading..."}
104+
hasMore={true}
105+
scrollThreshold={0}
106+
next={() => {}}
107+
height={100}
108+
>
109+
<div />
110+
</InfiniteScroll>
111+
);
112+
113+
const scrollEvent = new Event('scroll');
114+
const node = container.querySelector('.infinite-scroll-component') as HTMLElement;
115+
node.dispatchEvent(scrollEvent);
116+
expect(getByText('Loading...')).toBeTruthy();
117+
});
118+
119+
});
120+
121+
it('shows end message', () => {
122+
const { queryByText } = render(
123+
<InfiniteScroll
124+
dataLength={4}
125+
loader={"Loading..."}
126+
endMessage={"Reached end."}
127+
hasMore={false}
128+
next={() => {}}
129+
>
130+
<div />
131+
</InfiniteScroll>
132+
);
133+
expect(queryByText('Reached end.')).toBeTruthy();
134+
});
135+
});

0 commit comments

Comments
 (0)