Add more test cases

.github/workflows/build.yml

@@ -1,12 +1,9 @@
-name: Build
+name: Build & Deploy
 
 on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main
 
 jobs:
   build:
@@ -36,10 +33,9 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4.0.1
+        uses: codecov/codecov-action@v4.1.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          slug: code-slide/ui
 
       - name: Run Build 
         run: npm run build

.github/workflows/test.yml

@@ -1,9 +1,9 @@
-name: Test
+name: Build & Test
 
 on:
   push:
-    branches:
-      - '!main'
+    branches-ignore:
+      - main
 
 jobs:
   build:
@@ -28,7 +28,9 @@ jobs:
         run: npm run test:ci
 
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4.0.1
+        uses: codecov/codecov-action@v4.1.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          slug: code-slide/ui
+
+      - name: Run Build 
+        run: npm run build

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
@@ -9,13 +9,14 @@
     "@marker.io/browser": "^0.18.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@svgdotjs/svg.js": "^3.1.1",
+    "@vitest/utils": "^0.34.6",
     "antd": "^5.15.4",
     "classnames": "^2.3.1",
     "connected-react-router": "6.9.3",
     "date-fns": "^2.28.0",
     "deep-object-diff": "^1.1.9",
     "file-saver": "^2.0.5",
-    "history": "^4.10.1",
+    "history": "4.7.2",
     "katex": "^0.16.8",
     "marked": "^4.1.0",
     "mousetrap": "1.6.5",
@@ -42,13 +43,14 @@
   "scripts": {
     "start": "vite",
     "start-local": "vite --mode local-server",
-    "test": "vitest --browser",
-    "test:ci": "vitest run --browser.name=firefox --browser.provider=playwright --browser.headless",
     "lint": "eslint src/**/*.ts[x]",
     "lint:fix": "eslint src/**/*.ts[x] --fix",
     "build": "tsc && vite build",
-    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test": "vitest --browser",
+    "test:cv": "vitest --coverage",
+    "test:ci": "vitest run --coverage --browser.name=chromium --browser.provider=playwright --browser.headless",
+    "storybook": "storybook dev -p 6006",
     "chromatic": "npx chromatic --project-token=chpt_fb075605340d316"
   },
   "devDependencies": {
@@ -58,12 +60,12 @@
     "@storybook/react": "^7.5.1",
     "@storybook/react-vite": "^7.5.1",
     "@types/file-saver": "^2.0.5",
-    "@types/history": "^4.7.11",
+    "@types/history": "^4.7.9",
     "@types/katex": "^0.16.3",
     "@types/lodash": "4.14.178",
     "@types/marked": "^4.0.7",
     "@types/mousetrap": "1.6.9",
-    "@types/node": "17.0.6",
+    "@types/node": "20.9.3",
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.48",
     "@types/react-color": "3.0.6",
@@ -77,6 +79,8 @@
     "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitest/browser": "^0.34.6",
+    "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/coverage-v8": "^0.34.6",
     "chromatic": "^7.4.0",
     "eslint": "^8.51.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -86,10 +90,12 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-storybook": "^0.6.15",
+    "jsdom": "^24.0.0",
     "sass": "^1.72.0",
     "storybook": "^7.5.1",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
+    "vite-plugin-pwa": "^0.17.0",
     "vitest": "^0.34.6",
     "webdriverio": "^8.16.10"
   }

src/const/texts.ts

@@ -89,7 +89,6 @@ export const texts = {
         savingDiagram: 'Saving presentation...',
         savingDiagramDone: 'Saving presentation completed successfully.',
         savingDiagramFailed: 'Saving presentation failed with internal error.',
-        savingDiagramDoneUrl: (fullUrl: string) => `Saving presentation completed under ${fullUrl}.`,
         sendBackwards: 'Send Backwards',
         sendToBack: 'Send to Back',
         settings: 'Settings',

src/core/utils/id-helper.spec.ts

@@ -0,0 +1,50 @@
+/*
+ * codeslide.net
+ *
+ * @license
+ * Forked from mydraft.cc by Sebastian Stehle
+ * Copyright (c) Do Duc Quan. All rights reserved.
+*/
+
+import { shapes } from '@app/const';
+import { IDHelper } from '@app/core/utils';
+import { Diagram, DiagramItem } from '@app/wireframes/model';
+
+describe('IDHelper', () => {
+    it('should instantiate', () => {
+        Object.values(shapes.id).map((renderer) => {
+            const diagram = Diagram.create();
+            const { id, count, newDiagram } = IDHelper.nextId(diagram, renderer);
+
+            expect(id).toBe(`${renderer}1`);
+            expect(count).toBe(1);
+            expect(newDiagram.nextIds.get(renderer)).toBe(1);
+        })
+    });
+
+    it('should generate next id', () => {
+        Object.values(shapes.id).map((renderer) => {
+            let diagram = Diagram.create();
+            diagram = diagram.addShape(DiagramItem.createShape({ renderer: renderer }, diagram));
+            const { id, count, newDiagram } = IDHelper.nextId(diagram, renderer);
+
+            expect(id).toBe(`${renderer}2`);
+            expect(count).toBe(2);
+            expect(newDiagram.nextIds.get(renderer)).toBe(2);
+        })
+    });
+
+    it('should adjust next id if existed', () => {
+        Object.values(shapes.id).map((renderer) => {
+            let diagram = Diagram.create();
+            diagram = diagram.addShape(DiagramItem.createShape({ id: `${renderer}1`,renderer: renderer }, diagram));
+            diagram = diagram.addShape(DiagramItem.createShape({ renderer: renderer }, diagram));
+
+            const { id, count, newDiagram } = IDHelper.nextId(diagram, renderer);
+
+            expect(id).toBe(`${renderer}3`);
+            expect(count).toBe(3);
+            expect(newDiagram.nextIds.get(renderer)).toBe(3);
+        })
+    });
+});

src/core/utils/math-helper.ts

@@ -15,7 +15,6 @@ export module MathHelper {
         return CURRENT_ID.toString();
     }
 
-
     export function nextCIId(isbegining:boolean, CURRENT_INSTANCE_ID?: any) {
         if (isbegining ) {
             CURRENT_INSTANCE_ID = 0;

src/wireframes/components/headers/IdHeader.tsx

@@ -26,11 +26,16 @@ export const IdHeader = () => {
     };
 
     const acceptUpdateId = () => {
-        try {
-            dispatch(replaceId(diagram!, id, newId));
-        } catch (e) {
-            if (e instanceof Error) messageApi.error(e.message);
+        dispatch(replaceId(diagram!, id, newId));
+        setIsUpdate(false);
+    };
+
+    const handleUpdateId = () => {
+        if (diagram!.items.has(newId)) {
+            messageApi.error(`Cannot change ID. ${newId} is assigning to another shape.`);
             cancelUpdateId();
+        } else {
+            acceptUpdateId();
         }
     };
 
@@ -52,7 +57,7 @@ export const IdHeader = () => {
                             className='shape-cta'
                             type='text'
                             icon={<CheckOutlined />}
-                            onClick={acceptUpdateId} />
+                            onClick={handleUpdateId} />
                         : <></>
                 }
             </Space.Compact>

src/wireframes/interface/index.spec.ts

@@ -0,0 +1,26 @@
+/*
+ * codeslide.net
+ *
+ * @license
+ * Forked from mydraft.cc by Sebastian Stehle
+ * Copyright (c) Do Duc Quan. All rights reserved.
+*/
+
+import { getPageLink, getPageLinkId, isPageLink } from "@app/wireframes/interface";
+
+describe('Inteface', () => {
+    const id = 'test';
+
+    it('should return correct link', () => {
+        expect(getPageLink(id)).toBe(`page://${id}`);
+    });
+
+    it('should return correct id', () => {
+        expect(getPageLinkId(`page://${id}`)).toBe(id);
+    });
+
+    it('should check if correct link is correct', () => {
+        expect(isPageLink(`page://${id}`)).toBeTruthy();
+        expect(isPageLink(`${id}`)).toBeFalsy();
+    });
+});

src/wireframes/model/actions/diagrams.spec.ts

@@ -9,7 +9,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
 import { Color, Vec2 } from '@app/core/utils';
-import { addDiagram, buildDiagrams, changeColor, changeSize, createClassReducer, Diagram, duplicateDiagram, EditorState, moveDiagram, removeDiagram, renameDiagram, selectDiagram, setDiagramMaster } from '@app/wireframes/model';
+import { addDiagram, buildDiagrams, changeColor, changeFrames, changeName, changeRevealConfig, changeScript, changeSize, createClassReducer, Diagram, duplicateDiagram, EditorState, moveDiagram, removeDiagram, renameDiagram, selectDiagram, setDiagramMaster, updateNextId } from '@app/wireframes/model';
 
 describe('DiagramReducer', () => {
     const state =
@@ -111,6 +111,95 @@ describe('DiagramReducer', () => {
         expect(state_2.diagrams.get('1')?.title).toEqual('New Title');
     });
 
+    it('should change script', () => {
+        const diagram = Diagram.create({ id: '1' });
+
+        const action = changeScript(diagram, 'New Script');
+
+        const state_1 = EditorState.create().addDiagram(diagram);
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.diagrams.get('1')?.script).toEqual('New Script');
+    });
+
+    it('should change frames', () => {
+        const diagram = Diagram.create({ id: '1' });
+
+        const action = changeFrames(diagram, [['Shape1']]);
+
+        const state_1 = EditorState.create().addDiagram(diagram);
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.diagrams.get('1')?.frames).toEqual([['Shape1']]);
+    });
+
+    it('should increase nextId', () => {
+        const diagram = Diagram.create({ id: '1' });
+        const renderer = 'Textbox';
+
+        const action = updateNextId(diagram, renderer, 10);
+
+        const state_1 = EditorState.create().addDiagram(diagram);
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.diagrams.get('1')?.nextIds.get(renderer)).toEqual(10);
+    });
+
+    it('should not decrease nextId', () => {
+        const diagram = Diagram.create({ id: '1' });
+        const renderer = 'Textbox';
+
+        const action1 = updateNextId(diagram, renderer, 10);
+        const action2 = updateNextId(diagram, renderer, 5);
+
+        const state_1 = EditorState.create().addDiagram(diagram);
+        const state_2 = reducer(state_1, action1);
+        const state_3 = reducer(state_2, action2);
+
+        expect(state_3.diagrams.get('1')?.nextIds.get(renderer)).toEqual(10);
+    });
+
+    it('should not assign negative number to nextId', () => {
+        const diagram = Diagram.create({ id: '1' });
+        const renderer = 'Textbox';
+
+        const action1 = updateNextId(diagram, renderer, -1);
+
+        const state_1 = EditorState.create().addDiagram(diagram);
+        const state_2 = reducer(state_1, action1);
+
+        expect(state_2.diagrams.get('1')?.nextIds.get(renderer)).toEqual(undefined);
+    });
+
+    it('should rename project', () => {
+        const action = changeName('New Name');
+
+        const state_1 = EditorState.create();
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.name).toEqual('New Name');
+    });
+
+    it('should change reveal config', () => {
+        const newConfig = JSON.stringify({ enabled: true, autoPlay: true, autoPlayDuration: 10 });
+        const action = changeRevealConfig(newConfig);
+
+        const state_1 = EditorState.create();
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.revealConfig).toEqual(newConfig);
+    });
+
+    it('should change reveal config', () => {
+        const newConfig = JSON.stringify({ enabled: true, autoPlay: true, autoPlayDuration: 10 });
+        const action = changeRevealConfig(newConfig);
+
+        const state_1 = EditorState.create();
+        const state_2 = reducer(state_1, action);
+
+        expect(state_2.revealConfig).toEqual(newConfig);
+    });
+
     it('should set master', () => {
         const diagram = Diagram.create({ id: '1' });
 

src/wireframes/model/actions/diagrams.ts

@@ -136,8 +136,18 @@ export function buildDiagrams(builder: ActionReducerMapBuilder<EditorState>) {
         .addCase(updateNextId, (state, action) => {
             const { diagramId, renderer, count } = action.payload;
 
+            const diagram = state.diagrams.get(diagramId);
+            if (count < (diagram?.nextIds.get(renderer) ?? 0)) {
+                return state;
+            }
+
             return state.updateDiagram(diagramId, diagram => diagram.updateNextId(renderer, count));
         })
+        .addCase(changeRevealConfig, (state, action) => {
+            const { config } = action.payload;
+
+            return state.changeReveal(config);
+        })
         .addCase(duplicateDiagram, (state, action) => {
             const { diagramId, index } = action.payload;