From bd4e33d583c82e24fad26e72d6c27f90e65ac15d Mon Sep 17 00:00:00 2001 From: AsimKhan2019 Date: Wed, 10 Aug 2022 19:49:53 +0500 Subject: [PATCH 1/2] Finished testing --- package-lock.json | 89 ++++++++++- package.json | 3 +- .../__snapshots__/calculator.test.js.snap | 140 ++++++++++++++++++ src/__tests__/calculate.test.js | 31 ++++ src/__tests__/calculator.test.js | 54 +++++++ src/__tests__/operate.test.js | 11 ++ 6 files changed, 320 insertions(+), 8 deletions(-) create mode 100644 src/__tests__/__snapshots__/calculator.test.js.snap create mode 100644 src/__tests__/calculate.test.js create mode 100644 src/__tests__/calculator.test.js create mode 100644 src/__tests__/operate.test.js diff --git a/package-lock.json b/package-lock.json index 6e6e078..672455e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "big.js": "^6.2.1", "react": "^18.2.0", @@ -24,6 +23,7 @@ "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/preset-env": "^7.18.10", "@babel/preset-react": "^7.18.6", + "@testing-library/react": "^13.3.0", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.26.0", @@ -31,6 +31,7 @@ "eslint-plugin-no-mixed-operators": "^1.1.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "react-test-renderer": "^18.2.0", "stylelint": "^13.13.1", "stylelint-config-standard": "^21.0.0", "stylelint-csstree-validator": "^1.9.0", @@ -3546,6 +3547,7 @@ "version": "13.3.0", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", "@testing-library/dom": "^8.5.0", @@ -3953,7 +3955,8 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true }, "node_modules/@types/q": { "version": "1.5.5", @@ -3974,6 +3977,7 @@ "version": "18.0.15", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz", "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3984,6 +3988,7 @@ "version": "18.0.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "dev": true, "dependencies": { "@types/react": "*" } @@ -4004,7 +4009,8 @@ "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "node_modules/@types/serve-index": { "version": "1.9.1", @@ -6339,7 +6345,8 @@ "node_modules/csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -15372,6 +15379,39 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-shallow-renderer": { + "version": "16.15.0", + "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", + "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==", + "dev": true, + "dependencies": { + "object-assign": "^4.1.1", + "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-test-renderer": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", + "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==", + "dev": true, + "dependencies": { + "react-is": "^18.2.0", + "react-shallow-renderer": "^16.15.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-test-renderer/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -21192,6 +21232,7 @@ "version": "13.3.0", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5", "@testing-library/dom": "^8.5.0", @@ -21541,7 +21582,8 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true }, "@types/q": { "version": "1.5.5", @@ -21562,6 +21604,7 @@ "version": "18.0.15", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz", "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -21572,6 +21615,7 @@ "version": "18.0.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "dev": true, "requires": { "@types/react": "*" } @@ -21592,7 +21636,8 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "@types/serve-index": { "version": "1.9.1", @@ -23287,7 +23332,8 @@ "csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true }, "damerau-levenshtein": { "version": "1.0.8", @@ -29642,6 +29688,35 @@ } } }, + "react-shallow-renderer": { + "version": "16.15.0", + "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", + "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" + } + }, + "react-test-renderer": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", + "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==", + "dev": true, + "requires": { + "react-is": "^18.2.0", + "react-shallow-renderer": "^16.15.0", + "scheduler": "^0.23.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true + } + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index f36d1ce..9bbd1d3 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "big.js": "^6.2.1", "react": "^18.2.0", @@ -43,6 +42,7 @@ "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/preset-env": "^7.18.10", "@babel/preset-react": "^7.18.6", + "@testing-library/react": "^13.3.0", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.26.0", @@ -50,6 +50,7 @@ "eslint-plugin-no-mixed-operators": "^1.1.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "react-test-renderer": "^18.2.0", "stylelint": "^13.13.1", "stylelint-config-standard": "^21.0.0", "stylelint-csstree-validator": "^1.9.0", diff --git a/src/__tests__/__snapshots__/calculator.test.js.snap b/src/__tests__/__snapshots__/calculator.test.js.snap new file mode 100644 index 0000000..6bb1cf8 --- /dev/null +++ b/src/__tests__/__snapshots__/calculator.test.js.snap @@ -0,0 +1,140 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Calculator Renders Calculator 1`] = ` +
+
+ 0 +
+
+ + + +
+
+ + + + + +
+
+ + + + + + + + + + + +
+
+`; diff --git a/src/__tests__/calculate.test.js b/src/__tests__/calculate.test.js new file mode 100644 index 0000000..2f19249 --- /dev/null +++ b/src/__tests__/calculate.test.js @@ -0,0 +1,31 @@ +import calculator from '../logic/calculate'; + +describe('AC Button Click', () => { + test('Test AC to clear', () => { + const data = { total: 0, next: null, operation: null, }; + const show = { total: 0, next: null, operation: null, }; + const result = calculator(data, 'AC'); + expect(result).toEqual(show); + }); + + test('Test AC with null', () => { + const data = { total: null, next: null, operation: null, }; + const show = { total: 0, next: null, operation: null, }; + const result = calculator(data, 'AC'); + expect(result).toEqual(show); + }); + + test('Adding numbers', () => { + const data = { total: '3', next: '2', operation: '+', }; + const show = { total: '5', next: null, operation: null, }; + const result = calculator(data, '='); + expect(result).toEqual(show); + }); + + test('Subtracting numbers', () => { + const data = { total: '9', next: '6', operation: '-', }; + const show = { total: '3', next: null, operation: null, }; + const result = calculator(data, '='); + expect(result).toEqual(show); + }); +}); \ No newline at end of file diff --git a/src/__tests__/calculator.test.js b/src/__tests__/calculator.test.js new file mode 100644 index 0000000..56fd04f --- /dev/null +++ b/src/__tests__/calculator.test.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import Calculator from '../components/calculator'; +import Renderer from 'react-test-renderer'; + +describe('Calculator', () => { + it('Renders Calculator', () => { + const renderobject = Renderer.create().toJSON(); + expect(renderobject).toMatchSnapshot(); + }); + + it('Adding two numbers', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: '7'})); + fireEvent.click(screen.getByRole('button', { name: '+'})); + fireEvent.click(screen.getByRole('button', { name: '6'})); + fireEvent.click(screen.getByRole('button', { name: '='})); + + expect(screen.getByText('13')).toBeTruthy(); + }); + + it('Subtracting two numbers', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: '2'})); + fireEvent.click(screen.getByRole('button', { name: '6'})); + fireEvent.click(screen.getByRole('button', { name: '-'})); + fireEvent.click(screen.getByRole('button', { name: '6'})); + fireEvent.click(screen.getByRole('button', { name: '='})); + + expect(screen.getByText('20')).toBeTruthy(); + }); + + it('Multiplying two numbers', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: '2'})); + fireEvent.click(screen.getByRole('button', { name: 'x'})); + fireEvent.click(screen.getByRole('button', { name: '6'})); + fireEvent.click(screen.getByRole('button', { name: '='})); + + expect(screen.getByText('12')).toBeTruthy(); + }); + + it('Dividing two numbers', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: '1'})); + fireEvent.click(screen.getByRole('button', { name: '0'})); + fireEvent.click(screen.getByRole('button', { name: '÷'})); + fireEvent.click(screen.getByRole('button', { name: '5'})); + fireEvent.click(screen.getByRole('button', { name: '='})); + + expect(screen.getAllByText('2')).toBeTruthy(); + }); + +}); \ No newline at end of file diff --git a/src/__tests__/operate.test.js b/src/__tests__/operate.test.js new file mode 100644 index 0000000..ac4abae --- /dev/null +++ b/src/__tests__/operate.test.js @@ -0,0 +1,11 @@ +import operate from '../logic/operate'; + +describe('Testing Multiple Operations', () => { + test('Multiplying numbers', () => { + expect(operate(6, 4, 'x')).toBe('24'); + }); + + test('Modulus numbers', () => { + expect(operate(444, 5, '%')).toBe('4'); + }); +}); \ No newline at end of file From c80660791cade49b821b059cc5bf10907c537b22 Mon Sep 17 00:00:00 2001 From: AsimKhan2019 Date: Wed, 10 Aug 2022 19:55:00 +0500 Subject: [PATCH 2/2] Fixed ESLinter errors --- src/__tests__/calculate.test.js | 18 +++++------ src/__tests__/calculator.test.js | 51 ++++++++++++++++---------------- src/__tests__/operate.test.js | 2 +- 3 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/__tests__/calculate.test.js b/src/__tests__/calculate.test.js index 2f19249..f584f31 100644 --- a/src/__tests__/calculate.test.js +++ b/src/__tests__/calculate.test.js @@ -2,30 +2,30 @@ import calculator from '../logic/calculate'; describe('AC Button Click', () => { test('Test AC to clear', () => { - const data = { total: 0, next: null, operation: null, }; - const show = { total: 0, next: null, operation: null, }; + const data = { total: 0, next: null, operation: null }; + const show = { total: 0, next: null, operation: null }; const result = calculator(data, 'AC'); expect(result).toEqual(show); }); test('Test AC with null', () => { - const data = { total: null, next: null, operation: null, }; - const show = { total: 0, next: null, operation: null, }; + const data = { total: null, next: null, operation: null }; + const show = { total: 0, next: null, operation: null }; const result = calculator(data, 'AC'); expect(result).toEqual(show); }); test('Adding numbers', () => { - const data = { total: '3', next: '2', operation: '+', }; - const show = { total: '5', next: null, operation: null, }; + const data = { total: '3', next: '2', operation: '+' }; + const show = { total: '5', next: null, operation: null }; const result = calculator(data, '='); expect(result).toEqual(show); }); test('Subtracting numbers', () => { - const data = { total: '9', next: '6', operation: '-', }; - const show = { total: '3', next: null, operation: null, }; + const data = { total: '9', next: '6', operation: '-' }; + const show = { total: '3', next: null, operation: null }; const result = calculator(data, '='); expect(result).toEqual(show); }); -}); \ No newline at end of file +}); diff --git a/src/__tests__/calculator.test.js b/src/__tests__/calculator.test.js index 56fd04f..7d9b014 100644 --- a/src/__tests__/calculator.test.js +++ b/src/__tests__/calculator.test.js @@ -1,54 +1,53 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; -import Calculator from '../components/calculator'; import Renderer from 'react-test-renderer'; +import Calculator from '../components/calculator'; describe('Calculator', () => { it('Renders Calculator', () => { - const renderobject = Renderer.create().toJSON(); + const renderobject = Renderer.create().toJSON(); expect(renderobject).toMatchSnapshot(); }); it('Adding two numbers', () => { - render(); - fireEvent.click(screen.getByRole('button', { name: '7'})); - fireEvent.click(screen.getByRole('button', { name: '+'})); - fireEvent.click(screen.getByRole('button', { name: '6'})); - fireEvent.click(screen.getByRole('button', { name: '='})); + render(); + fireEvent.click(screen.getByRole('button', { name: '7' })); + fireEvent.click(screen.getByRole('button', { name: '+' })); + fireEvent.click(screen.getByRole('button', { name: '6' })); + fireEvent.click(screen.getByRole('button', { name: '=' })); expect(screen.getByText('13')).toBeTruthy(); }); it('Subtracting two numbers', () => { - render(); - fireEvent.click(screen.getByRole('button', { name: '2'})); - fireEvent.click(screen.getByRole('button', { name: '6'})); - fireEvent.click(screen.getByRole('button', { name: '-'})); - fireEvent.click(screen.getByRole('button', { name: '6'})); - fireEvent.click(screen.getByRole('button', { name: '='})); + render(); + fireEvent.click(screen.getByRole('button', { name: '2' })); + fireEvent.click(screen.getByRole('button', { name: '6' })); + fireEvent.click(screen.getByRole('button', { name: '-' })); + fireEvent.click(screen.getByRole('button', { name: '6' })); + fireEvent.click(screen.getByRole('button', { name: '=' })); expect(screen.getByText('20')).toBeTruthy(); }); it('Multiplying two numbers', () => { - render(); - fireEvent.click(screen.getByRole('button', { name: '2'})); - fireEvent.click(screen.getByRole('button', { name: 'x'})); - fireEvent.click(screen.getByRole('button', { name: '6'})); - fireEvent.click(screen.getByRole('button', { name: '='})); + render(); + fireEvent.click(screen.getByRole('button', { name: '2' })); + fireEvent.click(screen.getByRole('button', { name: 'x' })); + fireEvent.click(screen.getByRole('button', { name: '6' })); + fireEvent.click(screen.getByRole('button', { name: '=' })); expect(screen.getByText('12')).toBeTruthy(); }); it('Dividing two numbers', () => { - render(); - fireEvent.click(screen.getByRole('button', { name: '1'})); - fireEvent.click(screen.getByRole('button', { name: '0'})); - fireEvent.click(screen.getByRole('button', { name: '÷'})); - fireEvent.click(screen.getByRole('button', { name: '5'})); - fireEvent.click(screen.getByRole('button', { name: '='})); + render(); + fireEvent.click(screen.getByRole('button', { name: '1' })); + fireEvent.click(screen.getByRole('button', { name: '0' })); + fireEvent.click(screen.getByRole('button', { name: '÷' })); + fireEvent.click(screen.getByRole('button', { name: '5' })); + fireEvent.click(screen.getByRole('button', { name: '=' })); expect(screen.getAllByText('2')).toBeTruthy(); }); - -}); \ No newline at end of file +}); diff --git a/src/__tests__/operate.test.js b/src/__tests__/operate.test.js index ac4abae..64c11c5 100644 --- a/src/__tests__/operate.test.js +++ b/src/__tests__/operate.test.js @@ -8,4 +8,4 @@ describe('Testing Multiple Operations', () => { test('Modulus numbers', () => { expect(operate(444, 5, '%')).toBe('4'); }); -}); \ No newline at end of file +});