Added unit tests, bug fix in generateRandomString

.storybook/main.ts

@@ -8,6 +8,7 @@ module.exports = {
     '@storybook/preset-create-react-app',
     '@storybook/addon-a11y',
     'storybook-addon-designs',
+    '@storybook/addon-storyshots',
   ],
   features: {
     interactionDebugger: true,

README.md

@@ -24,12 +24,18 @@ npm run build-storybook
 
 Once the app is built, it is ready to be deployed.
 
-To run tests, use the following command:
+To run storybook tests, use the following command:
 
 ```bash
 npm run test-storybook
 ```
 
+To run unit tests, use the following command:
+
+```bash
+npm run test
+```
+
 To get the test coverage, use the following command:
 
 ```bash

package.json

@@ -16,6 +16,7 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
+    "ts-jest": "^29.1.0",
     "react-dom": "^18.2.0"
   },
   "scripts": {
@@ -26,7 +27,8 @@
     "test-storybook": "test-storybook",
     "chromatic": "chromatic --exit-zero-on-changes",
     "prepare": "husky install",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "jest"
   },
   "eslintConfig": {
     "extends": [

src/shared/util.ts

@@ -1,4 +1,2 @@
 export const generateRandomString = (length: number) =>
-  Math.random()
-    .toString(36)
-    .substring(2, length + 2);
+  Array.from({ length: length }, () => Math.random().toString(36)[2]).join('');

tests/styles.test.ts

@@ -0,0 +1,75 @@
+import { spacing, convertToSpacingUnit, pxToRem } from '../src/shared/styles';
+
+describe('testing spacing', () => {
+  test('No value given', () => {
+    expect(spacing()).toBe('0');
+  });
+
+  test('Empty array given', () => {
+    expect(spacing([])).toBe('');
+  });
+
+  test('Very big spacing', () => {
+    expect(spacing(500000)).toBe('250000rem');
+  });
+
+  test('Zero spacing', () => {
+    expect(spacing(0)).toBe('0');
+  });
+
+  test('Negative value', () => {
+    expect(spacing(-1)).toBe('-0.5rem');
+  });
+
+  test('Oversize array to maximum size of 4', () => {
+    expect(spacing([1, 2, 3, 4, 5])).toBe('0.5rem 1rem 1.5rem 2rem');
+  });
+
+  test('Array of 0,1,1,0', () => {
+    expect(spacing([0, 1, 1, 0])).toBe('0rem 0.5rem 0.5rem 0rem');
+  });
+});
+
+describe('testing convertToSpacingUnit', () => {
+  test('No value given', () => {
+    expect(convertToSpacingUnit()).toBe(0);
+  });
+
+  test('Zero value', () => {
+    expect(convertToSpacingUnit(0)).toBe(0);
+  });
+
+  test('Positive value', () => {
+    expect(convertToSpacingUnit(80)).toBe(10);
+  });
+
+  test('Negative value', () => {
+    expect(convertToSpacingUnit(-80)).toBe(-10);
+  });
+
+  test('Very large value', () => {
+    expect(convertToSpacingUnit(8000000)).toBe(1000000);
+  });
+});
+
+describe('testing pxToRem', () => {
+  test('No value given', () => {
+    expect(pxToRem()).toBe('0');
+  });
+
+  test('Zero value', () => {
+    expect(pxToRem(0)).toBe('0');
+  });
+
+  test('Positive value', () => {
+    expect(pxToRem(160)).toBe('10rem');
+  });
+
+  test('Negative value', () => {
+    expect(pxToRem(-160)).toBe('-10rem');
+  });
+
+  test('Very large value', () => {
+    expect(pxToRem(16000000)).toBe('1000000rem');
+  });
+});

tests/util.test.ts

@@ -0,0 +1,21 @@
+import { generateRandomString } from '../src/shared/util';
+
+describe('testing generateRandomString', () => {
+  test('Various lengths', () => {
+    for (let i = 0; i <= 100; i++) {
+      const str = generateRandomString(i);
+      expect(str.length).toBe(i);
+    }
+  });
+
+  test('Always correct length and only valid characters', () => {
+    for (let i = 0; i < 1000; i++) {
+      const str = generateRandomString(10);
+      expect(str.length).toBe(10);
+
+      const matched = str.match(/[^a-z]|[^0-9]/g); // a-z and 0-9
+      const validCharacterCount = (matched || '').length;
+      expect(validCharacterCount).toBe(10);
+    }
+  });
+});