From bf6ce54ae079333aca8e9f501f2d9e79801e05cb Mon Sep 17 00:00:00 2001 From: KevinLanvin Date: Thu, 11 Jul 2024 16:54:24 +0200 Subject: [PATCH] wip --- _dev/jest.config.js | 3 ++ _dev/launch.json | 18 +++++++ _dev/package-lock.json | 2 +- _dev/package.json | 2 +- _dev/src/core-logic/store/zoneStore.ts | 5 +- .../src/core-logic/tests/addComponent.test.ts | 36 +++++++++---- _dev/src/core-logic/tests/finder.test.ts | 18 ++++++- _dev/src/core-logic/usecases/addComponent.ts | 50 ++++++++----------- _dev/src/core-logic/utils/finder.ts | 16 ++++++ _dev/yarn.lock | 2 +- 10 files changed, 105 insertions(+), 47 deletions(-) create mode 100644 _dev/launch.json diff --git a/_dev/jest.config.js b/_dev/jest.config.js index a498e413..32ab9870 100644 --- a/_dev/jest.config.js +++ b/_dev/jest.config.js @@ -8,4 +8,7 @@ module.exports = { }, testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$", moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], + errorOnDeprecated: true, + verbose: true, + forceExit: false, }; diff --git a/_dev/launch.json b/_dev/launch.json new file mode 100644 index 00000000..cb6099a8 --- /dev/null +++ b/_dev/launch.json @@ -0,0 +1,18 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Debug Jest Tests", + "type": "node", + "request": "launch", + "runtimeArgs": [ + "--inspect-brk", + "${workspaceRoot}/node_modules/.bin/jest", + "--runInBand" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen", + "port": 9229 + } + ] +} diff --git a/_dev/package-lock.json b/_dev/package-lock.json index 9da007cc..11d0e35a 100644 --- a/_dev/package-lock.json +++ b/_dev/package-lock.json @@ -31,7 +31,7 @@ "devDependencies": { "@pinia/testing": "^0.1.3", "@types/jest": "^29.5.12", - "jest": "^29.7.0", + "jest": "^29.6.2", "ts-jest": "^29.1.2", "typescript": "^5.4.5", "vue-feather": "2" diff --git a/_dev/package.json b/_dev/package.json index c6c6fb8f..5a168fef 100644 --- a/_dev/package.json +++ b/_dev/package.json @@ -34,7 +34,7 @@ "devDependencies": { "@pinia/testing": "^0.1.3", "@types/jest": "^29.5.12", - "jest": "^29.7.0", + "jest": "^29.6.2", "ts-jest": "^29.1.2", "typescript": "^5.4.5", "vue-feather": "2" diff --git a/_dev/src/core-logic/store/zoneStore.ts b/_dev/src/core-logic/store/zoneStore.ts index fd9c71d8..d7f320a8 100644 --- a/_dev/src/core-logic/store/zoneStore.ts +++ b/_dev/src/core-logic/store/zoneStore.ts @@ -32,9 +32,8 @@ export const useZoneStore = defineStore("zone", { deleteBlock(blockIndex: number) { deleteBlock(this, blockIndex); }, - addComponent(blockIndex: number, componentId: string) { - console.debug("Hello"); - addComponent(this, blockIndex, componentId); + addComponent(blockId: string, root: string, componentId: string) { + addComponent(this, blockId, root, componentId); }, }, }); diff --git a/_dev/src/core-logic/tests/addComponent.test.ts b/_dev/src/core-logic/tests/addComponent.test.ts index 79ab2db5..cc755956 100644 --- a/_dev/src/core-logic/tests/addComponent.test.ts +++ b/_dev/src/core-logic/tests/addComponent.test.ts @@ -10,11 +10,11 @@ import { useZoneStore } from "../store/zoneStore"; describe("Add Component", () => { const newColumnBlock: BlockContent = { - id: "some_random_id", + id: "block_id", block_id: "columnBlock", fields: [ { - id: "some_random_id", + id: "title", type: "text" as PrimitiveFieldType.TEXT, label: "Column block title", content: { @@ -22,13 +22,13 @@ describe("Add Component", () => { }, }, { - id: "some_random_id", + id: "banner", component_id: "banner", type: "component", label: "Banner", fields: [ { - id: "some_random_id", + id: "banner_image", type: "text" as PrimitiveFieldType.TEXT, label: "Image", content: { @@ -36,7 +36,7 @@ describe("Add Component", () => { }, }, { - id: "some_random_id", + id: "banner_intro", type: "text" as PrimitiveFieldType.TEXT, label: "Intro", content: { @@ -46,7 +46,7 @@ describe("Add Component", () => { ], }, { - id: "columnComponentId", + id: "column", component_id: "column", type: "repeater", label: "Columns", @@ -73,7 +73,20 @@ describe("Add Component", () => { (zoneStore.content[0].fields[2] as Repeater) .sub_elements ).toHaveLength(0); - zoneStore.addComponent(0, "undefinedId"); + zoneStore.addComponent("block_id", "column", "undefinedId"); + expect( + (zoneStore.content[0].fields[2] as Repeater) + .sub_elements + ).toHaveLength(0); + }); + + it("does not change state if root does not exist", () => { + const zoneStore = useZoneStore(); + expect( + (zoneStore.content[0].fields[2] as Repeater) + .sub_elements + ).toHaveLength(0); + zoneStore.addComponent("block_id", "undefinedRoot", "card"); expect( (zoneStore.content[0].fields[2] as Repeater) .sub_elements @@ -82,16 +95,17 @@ describe("Add Component", () => { it("adds a new component at indicated place", () => { const zoneStore = useZoneStore(); - zoneStore.addComponent(0, "column"); + zoneStore.addComponent("block_id", "column", "column"); expect( (zoneStore.content[0].fields[2] as Repeater) .sub_elements ).toHaveLength(1); + // expect(1).toEqual(1); }); - it("adds component fields to new component", () => {}); + // it("adds component after existing components", () => {}); - it("adds component after existing components", () => {}); + // it("adds sub-components", () => {}); - it("adds sub-components", () => {}); + // it("adds recursively nested components", () => {}); }); diff --git a/_dev/src/core-logic/tests/finder.test.ts b/_dev/src/core-logic/tests/finder.test.ts index 5dc7f964..e135e91b 100644 --- a/_dev/src/core-logic/tests/finder.test.ts +++ b/_dev/src/core-logic/tests/finder.test.ts @@ -1,11 +1,17 @@ +import { findComponentById, findComponentStructure } from "../utils/finder"; + import { BlockContent } from "../entities/BlockContent"; +import { BlockStructure } from "../entities/BlockStructure"; +import columnStructure from "./columnStructure.json"; import filledColumnContent from "./filledColumnContentWithId.json"; -import { findComponentById } from "../utils/finder"; describe("Component finder", () => { let blockContent: BlockContent; + let blockStructure: BlockStructure; + beforeAll(() => { blockContent = filledColumnContent as BlockContent; + blockStructure = columnStructure as BlockStructure; }); it("finds block id", () => { @@ -43,4 +49,14 @@ describe("Component finder", () => { const component = findComponentById(blockContent, "field_2_1_1_0_0"); expect(component.parent.id).toEqual("field_2_1_1_0"); }); + + it("finds a 1st level component structure", () => { + const componentStructure = findComponentStructure(blockStructure, "banner"); + expect(componentStructure.label).toEqual("Banner"); + }); + + it("finds a repeated nested component structure", () => { + const componentStructure = findComponentStructure(blockStructure, "card"); + expect(componentStructure.label).toEqual("Cards"); + }); }); diff --git a/_dev/src/core-logic/usecases/addComponent.ts b/_dev/src/core-logic/usecases/addComponent.ts index 783ecc8a..78cfe04e 100644 --- a/_dev/src/core-logic/usecases/addComponent.ts +++ b/_dev/src/core-logic/usecases/addComponent.ts @@ -1,61 +1,53 @@ +import { ComponentContent, FieldContent } from "../entities/ComponentContent"; import { ComponentFieldStructure, ComponentStructure, } from "../entities/ComponentStructure"; +import { findComponentById, findComponentStructure } from "../utils/finder"; import { BlockContent } from "../entities/BlockContent"; import { BlockStructure } from "../entities/BlockStructure"; -import { ComponentContent } from "../entities/ComponentContent"; import { Repeater } from "../entities/Repeater"; import { buildNewSingleComponentFromStructure } from "../utils/builder"; export const addComponent = ( zoneStore, - blockIndex: number, - componentId: string + blockId: string, + rootId: string, + componentStructureId: string ) => { - console.debug("Coucou"); - const blockStructure: BlockStructure = zoneStore.getBlockStructure( - zoneStore.content[blockIndex].block_id + console.debug("coucou"); + const blockIndex = zoneStore.content.findIndex( + (block: BlockContent) => block.id === blockId ); const blockContent: BlockContent = zoneStore.content[blockIndex]; - const componentStructure: ComponentStructure = findBlockStructure( + const blockStructure: BlockStructure = zoneStore.getBlockStructure(blockId); + const componentStructure: ComponentStructure = findComponentStructure( blockStructure, - componentId + componentStructureId ); - console.debug("Structure found : " + componentStructure); const componentContent: ComponentContent | Repeater = buildNewSingleComponentFromStructure(componentStructure); const newBlockContent = insertNewComponent( blockContent, componentContent, - componentId + rootId ); zoneStore.content[blockIndex] = newBlockContent; -}; - -const findBlockStructure = ( - structure: BlockStructure | ComponentStructure, - componentId: string -): ComponentStructure => { - return Object.values(structure.fields).find( - (field: ComponentFieldStructure) => { - if (field.type !== "component") return false; - return field.id === componentId; - } - ) as ComponentStructure; + return 2; }; const insertNewComponent = ( content: BlockContent | ComponentContent, newComponentContent: ComponentContent, - componentId: string + rootId: string ): BlockContent | ComponentContent => { - const repeater = content.fields.find((field) => { - if (field.type !== "repeater") return false; - field.component_id === componentId; - }) as Repeater; - repeater.sub_elements.push(newComponentContent); - console.debug(content); + const { node: foundComponent } = findComponentById(content, rootId); + if ((foundComponent as FieldContent).type !== "repeater") + throw new Error("Cannot insert component into non repeater parent"); + (foundComponent as Repeater).sub_elements.push( + newComponentContent + ); + console.log(content); return content; }; diff --git a/_dev/src/core-logic/utils/finder.ts b/_dev/src/core-logic/utils/finder.ts index cfe1d6bc..7cf58e12 100644 --- a/_dev/src/core-logic/utils/finder.ts +++ b/_dev/src/core-logic/utils/finder.ts @@ -1,6 +1,11 @@ import { ComponentContent, FieldContent } from "../entities/ComponentContent"; +import { + ComponentFieldStructure, + ComponentStructure, +} from "../entities/ComponentStructure"; import { BlockContent } from "../entities/BlockContent"; +import { BlockStructure } from "../entities/BlockStructure"; import { Repeater } from "../entities/Repeater"; export type SearchComponentResult = { @@ -46,3 +51,14 @@ const findComponentByIdInRepeater = ( if (foundElement) return foundElement; } }; + +export const findComponentStructure = ( + structure: BlockStructure | ComponentStructure, + componentId: string +): ComponentStructure => { + for (const field of Object.values(structure.fields)) { + if (field.type !== "component") continue; + if (field.id === componentId) return field; + if (field.repeatable) return findComponentStructure(field, componentId); + } +}; diff --git a/_dev/yarn.lock b/_dev/yarn.lock index 918f85f8..d0b7de2b 100644 --- a/_dev/yarn.lock +++ b/_dev/yarn.lock @@ -2037,7 +2037,7 @@ jest-worker@^29.7.0: merge-stream "^2.0.0" supports-color "^8.0.0" -jest@^29.0.0, jest@^29.7.0: +jest@^29.0.0, jest@^29.6.2: version "29.7.0" resolved "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz" integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==