Merge pull request #72 from phun-ky/tests/17

Tests/17

.github/workflows/check.yml

@@ -30,8 +30,8 @@ on:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
+  # This workflow contains a single job called "check"
+  check:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
@@ -51,5 +51,16 @@ jobs:
           npm i
       - name: Build # Build all packages
         run: npm run build
+      - name: Test
+        run: npm test
+  notify:
+    name: Notify failed check
+    needs: check
+    if: failure() && github.event.pull_request == null
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jayqi/failed-build-issue-action@v1
+        with:
+          github-token: ${{ secrets.GH_TOKEN }}
 
 

jest.config.ts

@@ -0,0 +1,21 @@
+const config = {
+  preset: 'ts-jest',
+  displayName: 'speccer',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|js)$': ['esbuild-jest']
+  },
+  projects: [
+    {
+      displayName: 'speccer/utils',
+      testMatch: ['<rootDir>/src/utils/__tests__/**/*.[jt]s?(x)'],
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      transform: {
+        '^.+\\.(ts|js)$': ['esbuild-jest']
+      }
+    }
+  ]
+};
+
+export default config;

package.json

@@ -7,7 +7,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "rollup": "rollup -c",
     "prerollup:dev": "npm run clean && npm run styles",
     "rollup:dev": "rollup -c -w",
@@ -72,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "cssnano": "^5.0.4",
+    "esbuild-jest": "^0.5.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
@@ -82,7 +83,8 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "git-cz": "^4.9.0",
-    "jest": "^26.6.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.7.0",
     "network-information-types": "^0.1.1",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
@@ -94,6 +96,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.35.0",
     "stylus": "^0.60.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.25.2",
     "typedoc-plugin-frontmatter": "^0.0.2",

src/types/interfaces/classnames.ts

@@ -1,11 +1,9 @@
 /**
- * Interface representing a map of attributes with string keys and boolean values.
- *
- * This interface defines a structure for a map of attributes, where the keys are
- * strings (attribute names) and the values are boolean (attribute values).
- * It can be used to define the structure of objects that store attributes in
- * key-value pairs.
+ * Type for the optional properties object with boolean values.
  */
-export interface ClassNamesObjectMapInterface {
-  [key: string]: boolean;
-}
+export type ClassNamesSecondArgType = undefined | Record<string, boolean>;
+
+/**
+ * Type for the first argument of the cx function which can be either a string or `ClassNamesSecondArgType`.
+ */
+export type ClassNamesFirstArgType = string | ClassNamesSecondArgType;

src/utils/__tests__/angle.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from '@jest/globals';
+
+import { angle } from '../angle';
+
+describe('angle', () => {
+  it('should calculate the angle between two points', () => {
+    const angleValue = angle(0, 0, 3, 4);
+
+    // The angle between (0,0) and (3,4) is 53.13 degrees.
+    expect(angleValue).toBeCloseTo(53.13, 2); // Allowing for small floating-point imprecision
+  });
+
+  it('should normalize negative angles', () => {
+    const angleValue = angle(0, 0, -3, -4);
+
+    // The angle between (0,0) and (-3,-4) is -126.87 degrees, normalized to 233.13 degrees.
+    expect(angleValue).toBeCloseTo(233.13, 2);
+  });
+
+  it('should throw a SyntaxError when missing input', () => {
+    expect(() => {
+      // @ts-expect-error testing wrong argument type
+      angle();
+    }).toThrow(SyntaxError);
+  });
+});

src/utils/__tests__/area.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from '@jest/globals';
+
+import {
+  getAreasFromString,
+  isLeftArea,
+  isRightArea,
+  isTopArea,
+  isBottomArea,
+  isFullArea,
+  isEncloseArea,
+  isHeightArea,
+  isWidthArea,
+  useSVG,
+  isCurly
+} from '../area'; // Replace with the correct path to your module
+
+describe('area', () => {
+  describe('getAreasFromString', () => {
+    it('should split area string into an array', () => {
+      const areas = getAreasFromString('left right top');
+
+      expect(areas).toEqual(['left', 'right', 'top']);
+    });
+  });
+
+  describe('isLeftArea', () => {
+    it('should return true if "left" is in the area string', () => {
+      expect(isLeftArea('left')).toBe(true);
+      expect(isLeftArea('top left bottom')).toBe(true);
+      expect(isLeftArea('right top')).toBe(false);
+    });
+  });
+
+  describe('isRightArea', () => {
+    it('should return true if "right" is in the area string', () => {
+      expect(isRightArea('right')).toBe(true);
+      expect(isRightArea('bottom left right')).toBe(true);
+      expect(isRightArea('top left')).toBe(false);
+    });
+  });
+
+  describe('isTopArea', () => {
+    it('should return true if "top" is in the area string', () => {
+      expect(isTopArea('top')).toBe(true);
+      expect(isTopArea('top right bottom')).toBe(true);
+      expect(isTopArea('left right')).toBe(false);
+    });
+  });
+
+  describe('isBottomArea', () => {
+    it('should return true if "bottom" is in the area string', () => {
+      expect(isBottomArea('bottom')).toBe(true);
+      expect(isBottomArea('left right bottom top')).toBe(true);
+      expect(isBottomArea('left right')).toBe(false);
+    });
+  });
+
+  describe('isFullArea', () => {
+    it('should return true if "full" is in the area string', () => {
+      expect(isFullArea('full')).toBe(true);
+      expect(isFullArea('top full left')).toBe(true);
+      expect(isFullArea('left right')).toBe(false);
+    });
+  });
+
+  describe('isEncloseArea', () => {
+    it('should return true if "enclose" is in the area string', () => {
+      expect(isEncloseArea('enclose')).toBe(true);
+      expect(isEncloseArea('left right enclose top')).toBe(true);
+      expect(isEncloseArea('left right')).toBe(false);
+    });
+  });
+
+  describe('isHeightArea', () => {
+    it('should return true if "height" is in the area string', () => {
+      expect(isHeightArea('height')).toBe(true);
+      expect(isHeightArea('top height bottom')).toBe(true);
+      expect(isHeightArea('left right')).toBe(false);
+    });
+  });
+
+  describe('isWidthArea', () => {
+    it('should return true if "width" is in the area string', () => {
+      expect(isWidthArea('width')).toBe(true);
+      expect(isWidthArea('left right width top')).toBe(true);
+      expect(isWidthArea('left right')).toBe(false);
+    });
+  });
+
+  describe('useSVG', () => {
+    it('should return true if SVG-related areas are in the area string', () => {
+      expect(useSVG('svg')).toBe(true);
+      expect(useSVG('full curly')).toBe(true);
+      expect(useSVG('left right')).toBe(false);
+    });
+  });
+
+  describe('isCurly', () => {
+    it('should return true if both "curly" and "full" are in the area string', () => {
+      expect(isCurly('curly full')).toBe(true);
+      expect(isCurly('full curly right')).toBe(true);
+      expect(isCurly('curly top')).toBe(false);
+    });
+  });
+});

src/utils/__tests__/attributes.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from '@jest/globals';
+
+import { setAttributes, removeAttributes } from '../attributes';
+
+describe('Attribute-related functions', () => {
+  let testElement;
+
+  beforeEach(() => {
+    // Create a test element for each test case
+    testElement = document.createElement('div');
+    document.body.appendChild(testElement);
+  });
+
+  afterEach(() => {
+    // Clean up the test element after each test case
+    testElement.remove();
+  });
+
+  describe('setAttributes', () => {
+    it('should set attributes on an HTML element', () => {
+      setAttributes(testElement, {
+        class: 'active',
+        'data-value': '123'
+      });
+
+      expect(testElement.getAttribute('class')).toBe('active');
+      expect(testElement.getAttribute('data-value')).toBe('123');
+    });
+
+    it('should handle empty input gracefully', () => {
+      setAttributes(testElement); // No attributes provided
+
+      expect(testElement.hasAttributes()).toBe(false);
+    });
+  });
+
+  describe('removeAttributes', () => {
+    beforeEach(() => {
+      // Set attributes for testing removal
+      testElement.setAttribute('class', 'active');
+      testElement.setAttribute('data-value', '123');
+    });
+
+    it('should remove attributes from an HTML element', () => {
+      removeAttributes(testElement, ['class', 'data-value']);
+
+      expect(testElement.getAttribute('class')).toBe(null);
+      expect(testElement.getAttribute('data-value')).toBe(null);
+    });
+
+    it('should handle empty input gracefully', () => {
+      removeAttributes(testElement); // No attributes provided
+
+      expect(testElement.getAttribute('class')).toBe('active');
+      expect(testElement.getAttribute('data-value')).toBe('123');
+    });
+  });
+});

src/utils/__tests__/bezier.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from '@jest/globals';
+
+import {
+  createBezierCurveCoordinates,
+  getCurlySVGPath,
+  getSVGPath,
+  getPositionsForSVGPath,
+  getPositionsForCurlySVGPath
+} from '../bezier';
+
+describe('Bezier Functions', () => {
+  it('createBezierCurveCoordinates should calculate coordinates for a Bezier curve', () => {
+    const coordinates = createBezierCurveCoordinates(
+      { x1: 0, x2: 100, y1: 0, y2: 100 },
+      { direct: true, firstSet: true, direction: 'west' }
+    );
+    const { firstPoint, lastPoint, firstControl, lastControl } = coordinates;
+
+    expect(firstControl.x).toEqual(-32);
+    expect(firstControl.y).toEqual(-8);
+    expect(firstPoint.x).toEqual(0);
+    expect(firstPoint.y).toEqual(0);
+    expect(lastPoint.x).toEqual(100);
+    expect(lastPoint.y).toEqual(100);
+    expect(lastControl.x).toEqual(132);
+    expect(lastControl.y).toEqual(100);
+  });
+
+  it('getCurlySVGPath should generate an SVG path for a curved line', async () => {
+    const startEl = document.createElement('div');
+    const stopEl = document.createElement('div');
+    const svgPath = await getCurlySVGPath(startEl, stopEl, {
+      pos1: 'top',
+      pos2: 'bottom',
+      firstSet: true,
+      direction: 'south'
+    });
+
+    expect(svgPath).toEqual('M 0 0C -8 32, 0 -40, 0 -8');
+  });
+
+  it('getSVGPath should generate an SVG path for a straight line', async () => {
+    const startEl = document.createElement('div');
+    const stopEl = document.createElement('div');
+    const svgPath = await getSVGPath(startEl, stopEl, {
+      pos1: 'bottom',
+      pos2: 'top'
+    });
+
+    expect(svgPath).toEqual('M 0 0C 0 0, 0 0, 0 0');
+  });
+
+  it('getPositionsForSVGPath should return positions based on cardinal direction', () => {
+    const positions = getPositionsForSVGPath('east');
+    const { pos1, pos2 } = positions;
+
+    expect(pos1).toEqual('right');
+    expect(pos2).toEqual('left');
+  });
+
+  it('getPositionsForCurlySVGPath should return positions for a curved SVG path based on cardinal direction', () => {
+    const positions = getPositionsForCurlySVGPath('west');
+    const { path1pos1, path1pos2, path2pos1, path2pos2 } = positions;
+
+    expect(path1pos1).toEqual('left-top');
+    expect(path1pos2).toEqual('right-center');
+    expect(path2pos1).toEqual('left-bottom');
+    expect(path2pos2).toEqual('right-center');
+  });
+});