test: setup jest for unit testing (#11)

* test: add test for utilities

* fix: `transformCount() range

* fix: update `transformPixelsToNumber()` regex to include negative values

* test: change test description

* chore: add test.yml for automation

* fix(test.yml): install deps before test

.github/workflows/test.yml

@@ -0,0 +1,15 @@
+name: test
+
+on:
+    push:
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v2
+              with:
+                  node-version: 12
+            - run: yarn
+            - run: yarn test

babel.config.ts

@@ -0,0 +1,7 @@
+module.exports = {
+	presets: [
+		'@babel/preset-env',
+		'@babel/preset-react',
+		'@babel/preset-typescript',
+	],
+}

jest.config.ts

@@ -0,0 +1,7 @@
+module.exports = {
+	preset: 'ts-jest',
+	transform: {
+		'^.+\\.(ts|tsx)?$': 'ts-jest',
+		'^.+\\.(js|jsx)$': 'babel-jest',
+	},
+}

package.json

@@ -3,7 +3,7 @@
 	"version": "1.2.0",
 	"description": "a github-inspired react contribution heatmap component",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
+		"test": "jest",
 		"lint": "prettier --write .",
 		"build": "rollup -c",
 		"build:major": "npm --no-git-tag-version version major && rollup -c",
@@ -35,17 +35,24 @@
 	},
 	"homepage": "https://github.com/KnowsCount/contribution-heatmap#readme",
 	"devDependencies": {
-		"@babel/core": "^7.17.2",
+		"@babel/core": "^7.17.7",
+		"@babel/preset-env": "^7.16.11",
+		"@babel/preset-react": "^7.16.7",
+		"@babel/preset-typescript": "^7.16.7",
 		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-node-resolve": "^13.1.3",
 		"@rollup/plugin-typescript": "^8.3.0",
 		"@storybook/addon-actions": "^6.4.19",
 		"@storybook/addon-essentials": "^6.4.19",
 		"@storybook/addon-links": "^6.4.19",
 		"@storybook/react": "^6.4.19",
+		"@testing-library/react": "^12.1.4",
+		"@types/jest": "^27.4.1",
 		"@types/react": "^17.0.39",
 		"@types/styled-components": "^5.1.24",
+		"babel-jest": "^27.5.1",
 		"babel-loader": "^8.2.3",
+		"jest": "^27.5.1",
 		"postcss": "^8.4.6",
 		"prettier": "^2.5.1",
 		"react": "^17.0.2",
@@ -55,6 +62,8 @@
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-terser": "^7.0.2",
+		"ts-jest": "^27.1.3",
+		"ts-node": "^10.7.0",
 		"tslib": "^2.3.1",
 		"typescript": "^4.5.5"
 	},

src/utils.test.ts

@@ -0,0 +1,37 @@
+import {
+	getRandomInt,
+	getRandomCount,
+	transformCount,
+	transformPixelsToNumber,
+} from './utils'
+
+test('getRandomInt() returns integers between the given range', () => {
+	let randomInt: number = getRandomInt(0, 10)
+	expect(randomInt).toBeGreaterThanOrEqual(0)
+	expect(randomInt).toBeLessThanOrEqual(10)
+})
+
+test('getRandomCount() returns an array of random integers between 0 and 25', () => {
+	let randomCount: number[] = getRandomCount(5)
+	expect(randomCount.length).toBe(5)
+	randomCount.forEach((count) => {
+		expect(count).toBeGreaterThanOrEqual(0)
+		expect(count).toBeLessThanOrEqual(25)
+	})
+})
+
+test('transformCount() returns the correct number of squares', () => {
+	expect(transformCount(0)).toBe(0)
+	expect(transformCount(10)).toBe(1)
+	expect(transformCount(15)).toBe(2)
+	expect(transformCount(20)).toBe(3)
+	expect(transformCount(25)).toBe(4)
+})
+
+test('transformPixelsToNumber() extracts the correct number (without unit)', () => {
+	expect(transformPixelsToNumber('0px')).toBe(0)
+	expect(transformPixelsToNumber('10rem')).toBe(10)
+	expect(transformPixelsToNumber('15em')).toBe(15)
+	expect(transformPixelsToNumber('-20px')).toBe(-20)
+	expect(transformPixelsToNumber('2520240394039304px')).toBe(2520240394039304)
+})

src/utils.ts

@@ -8,7 +8,7 @@ export const getRandomInt = (min: number, max: number): number => {
 export const getRandomCount = (squares: number) => {
 	let randomCount: number[] = []
 	for (let i = 0; i < squares; i++) {
-		randomCount.push(getRandomInt(0, 21))
+		randomCount.push(getRandomInt(0, 25))
 	}
 	return randomCount
 }
@@ -18,16 +18,16 @@ export const transformCount = (count: number) => {
 		return 0
 	} else if (count <= 10 && count !== 0) {
 		return 1
-	} else if (count >= 10 && count < 15) {
+	} else if (count > 10 && count <= 15) {
 		return 2
-	} else if (count >= 15 && count < 20) {
+	} else if (count > 15 && count <= 20) {
 		return 3
 	} else {
 		return 4
 	}
 }
 
 export const transformPixelsToNumber = (pixel: string) => {
-	let exp = /\d+/
+	let exp = /-?\d+/g
 	return parseInt(exp.exec(pixel.toString())[0])
 }