From af59ca53d4dfa7e6d80f37002ddcd4107d32b8fa Mon Sep 17 00:00:00 2001 From: srmukher <120183316+srmukher@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:48:04 +0530 Subject: [PATCH] Adding unit tests for donut chart (#27424) * Adding unit tests for donut chart * Adding unit tests for another culture * Adding colors utility unit tests and resolving PR comments * Rearranging test plan --- .../docs/TestPlans/Utilities/UnitTests.md | 16 ++++ .../src/utilities/UtilityUnitTests.test.ts | 93 +++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 packages/react-charting/docs/TestPlans/Utilities/UnitTests.md create mode 100644 packages/react-charting/src/utilities/UtilityUnitTests.test.ts diff --git a/packages/react-charting/docs/TestPlans/Utilities/UnitTests.md b/packages/react-charting/docs/TestPlans/Utilities/UnitTests.md new file mode 100644 index 0000000000000..8458cf765f1e5 --- /dev/null +++ b/packages/react-charting/docs/TestPlans/Utilities/UnitTests.md @@ -0,0 +1,16 @@ +# Unit test plan for Donut Chart + +This test plan contains the list of unit testable functions which are used as a part of the Donut Chart component. + +Identify the functions that can be unit tested (example, functions having calculations or getting values from Utils, etc). + +- If required, extract the unit testable portions out of the functions which can be independently unit tested without any requirement of DOM elements. +- Alternatively, mock the sections that cannot be unit tested. + +| Functions | Can it be unit tested | Reason | +| ----------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| a. `convertToLocaleString()` | Yes | | +| b.`getAccessibleDataObject()` | Yes | | +| c. `_valueInsideDonut()` | No | private function which can only be tested by rendering the donut chart component. | +| d. `wrapTextInsideDonut()` | No | cannot be unit tested as it requires the tspan length to be calculated using Browser Functions like getComputedTextLength(). | +| e. `_computeTotalValue()` | No | depends on the data prop passed down from the DonutChart.base to Pie during component rendering. Also since this is a private function, it can only be tested via component rendering. | diff --git a/packages/react-charting/src/utilities/UtilityUnitTests.test.ts b/packages/react-charting/src/utilities/UtilityUnitTests.test.ts new file mode 100644 index 0000000000000..447310067d295 --- /dev/null +++ b/packages/react-charting/src/utilities/UtilityUnitTests.test.ts @@ -0,0 +1,93 @@ +import * as utils from './utilities'; +import * as colors from './colors'; + +// Reference to the test plan: packages\react-charting\docs\TestPlans\Utilities\UnitTests.md + +describe('Unit test to convert data to localized string', () => { + test('Should return undefined when data provided is undefined', () => { + expect(utils.convertToLocaleString(undefined)).toBeUndefined(); + }); + + test('Should return the localised data in the given culture when input data is a string', () => { + expect(utils.convertToLocaleString('text', 'en-GB')).toBe('text'); + expect(utils.convertToLocaleString('text', 'ar-SY')).toBe('text'); + }); + + test('Should return the localised data in the given culture when the input data is a number', () => { + expect(utils.convertToLocaleString(10, 'en-GB')).toBe('10'); + expect(utils.convertToLocaleString(2560, 'ar-SY')).toBe('٢٬٥٦٠'); + }); + + test('Should return the localised data when the input data is a string containing a number', () => { + expect(utils.convertToLocaleString('10', 'en-GB')).toBe('10'); + expect(utils.convertToLocaleString('1234', 'ar-SY')).toBe('١٬٢٣٤'); + }); +}); + +describe('Unit test to return the accessible data object', () => { + test('Should return the appropriate accessible data object no parameters are provided as input', () => { + expect(utils.getAccessibleDataObject()).toEqual({ + role: 'text', + 'data-is-focusable': true, + 'aria-label': undefined, + 'aria-labelledby': undefined, + 'aria-describedby': undefined, + }); + }); + + test('Should return the appropriate accessible data object only role is provided as input', () => { + expect(utils.getAccessibleDataObject(undefined, 'button')).toEqual({ + role: 'button', + 'data-is-focusable': true, + 'aria-label': undefined, + 'aria-labelledby': undefined, + 'aria-describedby': undefined, + }); + }); + + test('Should return the accessible data when both role and isDataFocusable is provided as input', () => { + expect(utils.getAccessibleDataObject(undefined, 'text', false)).toEqual({ + role: 'text', + 'data-is-focusable': false, + 'aria-label': undefined, + 'aria-labelledby': undefined, + 'aria-describedby': undefined, + }); + }); + + test('Should return the appropriate accessible data object when all parameters are provided as input', () => { + const accessibleData = { + ariaLabel: 'Start button', + ariaLabelledBy: 'Button', + ariaDescribedBy: 'This is a start button', + }; + expect(utils.getAccessibleDataObject(accessibleData, 'button', false)).toEqual({ + role: 'button', + 'data-is-focusable': false, + 'aria-label': 'Start button', + 'aria-labelledby': 'Button', + 'aria-describedby': 'This is a start button', + }); + }); +}); + +describe('Unit test for getting colors from token and returning the theme specific color', () => { + test('Should return the token itself when the token is not from DataVizPallette', () => { + expect(colors.getColorFromToken('blue')).toEqual('blue'); + }); + test('Should return the color code when the token is from DataVizPallette', () => { + expect(colors.getColorFromToken('qualitative.1')).toEqual('#637cef'); + }); + + test('Should return the first color when dark theme is disabled and length of colors list is more than 1', () => { + expect(colors.getColorFromToken('qualitative.11', false)).toEqual('#3c51b4'); + }); + + test('Should return the first color when dark theme is enabled and length of colors list is equal to 1', () => { + expect(colors.getColorFromToken('qualitative.1', true)).toEqual('#637cef'); + }); + + test('Should return the second color when dark theme is enabled and length of colors list is more than 1', () => { + expect(colors.getColorFromToken('qualitative.11', true)).toEqual('#93a4f4'); + }); +});