Add tests

.eslintrc.json

@@ -39,6 +39,7 @@
 			"rules": {
 				"indent": "off",
 				"max-len": [2, 120],
+				"import/prefer-default-export": "off",
 				"@typescript-eslint/indent": ["error", "tab"],
 				"@typescript-eslint/explicit-function-return-type": "off",
 				"@typescript-eslint/no-non-null-assertion": "off"

jest.config.js

@@ -0,0 +1,21 @@
+const reporters = ['default'];
+
+module.exports = {
+	moduleFileExtensions: ['js', 'ts'],
+	modulePaths: [
+		'test',
+	],
+	modulePathIgnorePatterns: ['dist'],
+	preset: 'ts-jest',
+	reporters,
+	testEnvironment: 'jsdom',
+	testEnvironmentOptions: {
+		url: 'http://localhost/',
+	},
+	testMatch: ['**/test/*.test.ts'],
+	transform: {
+		'^.+\\.[jt]s$': 'ts-jest',
+		'\\.(pug)$': 'jest-transform-pug',
+		'.+\\.(css)$': 'jest-transform-stub',
+	},
+};

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "start": "webpack-dev-server --mode=development --hot",
+    "test": "jest",
     "build": "webpack --mode=production",
     "deploy": "gh-pages -d dist"
   },
@@ -25,8 +26,11 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@babel/register": "^7.12.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@types/chartist": "^0.9.46",
     "@types/html-webpack-plugin": "^3.2.5",
+    "@types/jest": "^28.1.7",
     "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/pug": "^2.0.4",
     "@types/webpack": "^4.41.29",
@@ -43,6 +47,10 @@
     "eslint-webpack-plugin": "^2.5.4",
     "gh-pages": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-transform-pug": "github:drastus/jest-transform-pug",
+    "jest-transform-stub": "^2.0.0",
     "mini-css-extract-plugin": "^1.2.1",
     "postcss": "^8.2.15",
     "postcss-import": "^12.0.1",
@@ -53,6 +61,7 @@
     "stylelint": "^13.7.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-webpack-plugin": "^2.1.1",
+    "ts-jest": "^28.0.8",
     "typescript": "^4.0.5",
     "webpack": "^4.44.2",
     "webpack-cli": "^4.9.2",

src/index.ts

@@ -11,7 +11,7 @@ const handleCalculateButtonClick = (event: Event) => {
 	calculate();
 };
 
-const bindActions = () => {
+export const bindActions = (): void => {
 	document
 		.querySelector('#calculate-button')!
 		.addEventListener('click', handleCalculateButtonClick);

src/templates/content.pug

@@ -1,3 +1,5 @@
+h1.main-heading Kalkulator mandatów w wyborach do Sejmu
+
 p.
 	Kalkulator zwraca szacowany rozkład mandatów w Sejmie na podstawie wyników sondażowych.
 	Obliczenia są dokonywane zgodnie z obowiązującą w Polsce ordynacją wyborczą, tj. stosując
@@ -18,7 +20,6 @@ ol.updates
 		#[a(href='https://biqdata.wyborcza.pl/biqdata/7,159116,26083709,analiza-przeplywow-wyborcow-za-duda-tylko-pis-lewicowcy-nie.html') #[i Analiza przepływów wyborców]] z 29 czerwca 2020 roku.
 
 
-
 form#support-form
 	button#calculate-button Oblicz
 

src/templates/index.pug

@@ -13,6 +13,5 @@ html(lang='pl')
 			gtag('config', 'UA-151698411-1');
 	body
 		div.container
-			h1.main-heading Kalkulator mandatów w wyborach do Sejmu
 
 			include content.pug

test/calculate.test.ts

@@ -0,0 +1,15 @@
+import calculateMandates from '../src/mandates';
+
+test('calculates correct results (1)', () => {
+	const support = [43.59, 27.4, 12.56, 8.55, 6.81, 0];
+	const mandates = calculateMandates(support);
+
+	expect(mandates).toEqual([235, 134, 49, 30, 11, 0, 1]);
+});
+
+test('calculates correct results (2)', () => {
+	const support = [30, 25, 10, 8, 6, 12];
+	const mandates = calculateMandates(support);
+
+	expect(mandates).toEqual([182, 133, 40, 34, 12, 58, 1]);
+});

test/calculateDisplay.test.ts

@@ -0,0 +1,70 @@
+import {
+	configure, fireEvent, screen, waitFor,
+} from '@testing-library/dom';
+import '@testing-library/jest-dom';
+import './matchMedia.mock';
+import {generateTable} from '../src/display';
+import {bindActions} from '../src/index';
+import html from '../src/templates/content.pug';
+
+configure({
+	testIdAttribute: 'id',
+});
+
+beforeEach(() => {
+	document.body.innerHTML = html();
+	generateTable();
+	bindActions();
+});
+
+test('validate total support higher than 0', async () => {
+	const button = screen.getByRole('button');
+	fireEvent.click(button);
+	const firstNumberInput = screen.getAllByRole('spinbutton')[0];
+
+	await waitFor(() => expect(firstNumberInput).toBeInvalid());
+	await waitFor(() => expect(screen.getByTestId('support-bar-chart')).toBeEmptyDOMElement());
+	await waitFor(() => expect(screen.getByTestId('division-pie-chart')).toBeEmptyDOMElement());
+});
+
+test('validate total support not higher than 100', async () => {
+	const numberInputs = screen.getAllByRole('spinbutton');
+	const firstNumberInput = numberInputs[0];
+	const secondNumberInput = numberInputs[1];
+	(firstNumberInput as HTMLInputElement).value = '60';
+	(secondNumberInput as HTMLInputElement).value = '45';
+	fireEvent.click(screen.getByRole('button'));
+
+	await waitFor(() => expect(firstNumberInput).toBeInvalid());
+	await waitFor(() => expect(screen.getByTestId('support-bar-chart')).toBeEmptyDOMElement());
+	await waitFor(() => expect(screen.getByTestId('division-pie-chart')).toBeEmptyDOMElement());
+});
+
+test('validate support not less than 0', async () => {
+	const numberInputs = screen.getAllByRole('spinbutton');
+	const firstNumberInput = numberInputs[0];
+	const secondNumberInput = numberInputs[1];
+	(firstNumberInput as HTMLInputElement).value = '30';
+	(secondNumberInput as HTMLInputElement).value = '-25';
+	fireEvent.click(screen.getByRole('button'));
+
+	await waitFor(() => expect(firstNumberInput).toBeValid());
+	await waitFor(() => expect(secondNumberInput).toBeInvalid());
+	await waitFor(() => expect(screen.getByTestId('support-bar-chart')).toBeEmptyDOMElement());
+	await waitFor(() => expect(screen.getByTestId('division-pie-chart')).toBeEmptyDOMElement());
+});
+
+test('displays results', async () => {
+	const numberInputs = screen.getAllByRole('spinbutton');
+	const firstNumberInput = numberInputs[0];
+	const secondNumberInput = numberInputs[1];
+	(firstNumberInput as HTMLInputElement).value = '30';
+	(secondNumberInput as HTMLInputElement).value = '25';
+	const button = screen.getByRole('button');
+	fireEvent.click(button);
+
+	await waitFor(() => expect(firstNumberInput).toBeValid());
+	await waitFor(() => expect(secondNumberInput).toBeValid());
+	await waitFor(() => expect(screen.getByTestId('support-bar-chart')).not.toBeEmptyDOMElement());
+	await waitFor(() => expect(screen.getByTestId('division-pie-chart')).not.toBeEmptyDOMElement());
+});

test/initialDisplay.test.ts

@@ -0,0 +1,21 @@
+import {screen} from '@testing-library/dom';
+import '@testing-library/jest-dom';
+import {generateTable} from '../src/display';
+import html from '../src/templates/content.pug';
+
+beforeEach(() => {
+	document.body.innerHTML = html();
+	generateTable();
+});
+
+test('display number inputs for electoral data', () => {
+	const numberOfCommitees = 6;
+
+	const numberInputs = screen.getAllByRole('spinbutton');
+	expect(numberInputs).toHaveLength(numberOfCommitees);
+});
+
+test('display button', () => {
+	const button = screen.getByRole('button');
+	expect(button).toBeDefined();
+});

test/matchMedia.mock.ts

@@ -0,0 +1,7 @@
+window.matchMedia = jest.fn().mockImplementation((query) => ({
+	matches: false,
+	media: query,
+	onchange: null,
+	addListener: jest.fn(),
+	removeListener: jest.fn(),
+}));