diff --git a/src/modules/data/board/Board.store.ts b/src/modules/data/board/Board.store.ts index 5e0a96fa11..27adea0763 100644 --- a/src/modules/data/board/Board.store.ts +++ b/src/modules/data/board/Board.store.ts @@ -1,12 +1,8 @@ +import { envConfigModule } from "@/store"; import { Board } from "@/types/board/Board"; -import { nextTick, ref } from "vue"; +import { useSharedEditMode } from "@util-board"; import { defineStore } from "pinia"; -import { useBoardRestApi } from "./boardActions/boardRestApi.composable"; -import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable"; -import { useBoardFocusHandler } from "./BoardFocusHandler.composable"; -import { useSharedEditMode } from "./EditMode.composable"; -import { envConfigModule } from "@/store"; -import { useCardStore } from "./Card.store"; +import { nextTick, ref } from "vue"; import { CreateCardRequestPayload, CreateCardSuccessPayload, @@ -28,6 +24,10 @@ import { UpdateColumnTitleRequestPayload, UpdateColumnTitleSuccessPayload, } from "./boardActions/boardActionPayload"; +import { useBoardRestApi } from "./boardActions/boardRestApi.composable"; +import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable"; +import { useBoardFocusHandler } from "./BoardFocusHandler.composable"; +import { useCardStore } from "./Card.store"; import { DeleteCardSuccessPayload } from "./cardActions/cardActionPayload"; export const useBoardStore = defineStore("boardStore", () => { diff --git a/src/modules/data/board/Board.store.unit.ts b/src/modules/data/board/Board.store.unit.ts index d7c2d8a26b..3d073dc001 100644 --- a/src/modules/data/board/Board.store.unit.ts +++ b/src/modules/data/board/Board.store.unit.ts @@ -1,25 +1,28 @@ import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; +import { envConfigModule } from "@/store"; +import EnvConfigModule from "@/store/env-config"; import { ColumnMove } from "@/types/board/DragAndDrop"; +import { mockedPiniaStoreTyping } from "@@/tests/test-utils"; import { boardResponseFactory, cardSkeletonResponseFactory, columnResponseFactory, envsFactory, } from "@@/tests/test-utils/factory"; +import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; +import setupStores from "@@/tests/test-utils/setupStores"; +import { useCardStore, useSocketConnection } from "@data-board"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; -import { useBoardNotifier, useSharedLastCreatedElement } from "@util-board"; +import { + useBoardNotifier, + useSharedEditMode, + useSharedLastCreatedElement, +} from "@util-board"; import { createPinia, setActivePinia } from "pinia"; import { computed, ref } from "vue"; import { useBoardStore } from "./Board.store"; -import { useSharedEditMode } from "./EditMode.composable"; -import { envConfigModule } from "@/store"; -import EnvConfigModule from "@/store/env-config"; -import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; -import setupStores from "@@/tests/test-utils/setupStores"; -import { useCardStore, useSocketConnection } from "@data-board"; import { useBoardRestApi } from "./boardActions/boardRestApi.composable"; import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable"; -import { mockedPiniaStoreTyping } from "@@/tests/test-utils"; import { useCardSocketApi } from "./cardActions/cardSocketApi.composable"; jest.mock("./boardActions/boardSocketApi.composable"); @@ -28,10 +31,8 @@ const mockedUseBoardSocketApi = jest.mocked(useBoardSocketApi); jest.mock("./boardActions/boardRestApi.composable"); const mockedUseBoardRestApi = jest.mocked(useBoardRestApi); -jest.mock("./EditMode.composable"); -const mockedSharedEditMode = jest.mocked(useSharedEditMode); - jest.mock("@util-board"); +const mockedSharedEditMode = jest.mocked(useSharedEditMode); const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); const mockUseSharedLastCreatedElement = jest.mocked( useSharedLastCreatedElement @@ -89,6 +90,7 @@ describe("BoardStore", () => { mockedSharedEditMode.mockReturnValue({ setEditModeId, editModeId: ref(undefined), + isInEditMode: computed(() => true), }); mockUseSharedLastCreatedElement.mockReturnValue({ diff --git a/src/modules/data/board/BoardFocusHandler.composable.ts b/src/modules/data/board/BoardFocusHandler.composable.ts index ec6d71ba2d..69f302e609 100644 --- a/src/modules/data/board/BoardFocusHandler.composable.ts +++ b/src/modules/data/board/BoardFocusHandler.composable.ts @@ -1,6 +1,7 @@ import { BoardColumn } from "@/types/board/Board"; import { BoardCard } from "@/types/board/Card"; import { AnyContentElement } from "@/types/board/ContentElement"; +import { useInlineEditInteractionHandler } from "@util-board"; import { createSharedComposable, MaybeRefOrGetter, @@ -9,8 +10,6 @@ import { useFocusWithin, } from "@vueuse/core"; import { computed, nextTick, onMounted, onUnmounted, ref, Ref } from "vue"; -// WIP: InlineEditInteractionHandler needs to be extracted into it's own module... :: Feature-Modules have to be imported using the pattern '@feature-'eslint@typescript-eslint/no-restricted-imports -import { useInlineEditInteractionHandler } from "../../feature/board/shared/InlineEditInteractionHandler.composable"; declare type FocusableId = | BoardColumn["id"] diff --git a/src/modules/data/board/Card.store.ts b/src/modules/data/board/Card.store.ts index 32bb60395d..738bea8920 100644 --- a/src/modules/data/board/Card.store.ts +++ b/src/modules/data/board/Card.store.ts @@ -1,10 +1,11 @@ +import { CardResponse, ContentElementType } from "@/serverApi/v3"; +import { envConfigModule } from "@/store"; +import { useSharedEditMode, useSharedLastCreatedElement } from "@util-board"; import { defineStore } from "pinia"; import { nextTick, ref } from "vue"; -import { envConfigModule } from "@/store"; +import { CreateCardSuccessPayload } from "./boardActions/boardActionPayload"; import { useBoardFocusHandler } from "./BoardFocusHandler.composable"; -import { CardResponse, ContentElementType } from "@/serverApi/v3"; -import { CreateCardSuccessPayload } from "./boardActions/boardActionPayload"; import { CreateElementSuccessPayload, DeleteCardSuccessPayload, @@ -17,8 +18,6 @@ import { } from "./cardActions/cardActionPayload"; import { useCardRestApi } from "./cardActions/cardRestApi.composable"; import { useCardSocketApi } from "./cardActions/cardSocketApi.composable"; -import { useSharedLastCreatedElement } from "@util-board"; -import { useSharedEditMode } from "@data-board"; export const useCardStore = defineStore("cardStore", () => { const cards = ref>({}); diff --git a/src/modules/data/board/Card.store.unit.ts b/src/modules/data/board/Card.store.unit.ts index d9591728a4..8af3d55ca5 100644 --- a/src/modules/data/board/Card.store.unit.ts +++ b/src/modules/data/board/Card.store.unit.ts @@ -1,26 +1,29 @@ import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; -import { useBoardNotifier, useSharedLastCreatedElement } from "@util-board"; -import { useBoardApi } from "./BoardApi.composable"; -import { useSharedEditMode } from "./EditMode.composable"; -import { useI18n } from "vue-i18n"; -import { useSocketConnection, useCardStore } from "@data-board"; -import { useCardSocketApi } from "./cardActions/cardSocketApi.composable"; -import { useCardRestApi } from "./cardActions/cardRestApi.composable"; -import { DeepMocked, createMock } from "@golevelup/ts-jest"; -import { createPinia, setActivePinia } from "pinia"; -import setupStores from "@@/tests/test-utils/setupStores"; -import EnvConfigModule from "@/store/env-config"; -import { Ref, ref } from "vue"; +import { ContentElementType } from "@/serverApi/v3"; import { envConfigModule } from "@/store"; +import EnvConfigModule from "@/store/env-config"; import { envsFactory, richTextElementContentFactory, richTextElementResponseFactory, } from "@@/tests/test-utils"; import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; -import { ContentElementType } from "@/serverApi/v3"; import { drawingElementResponseFactory } from "@@/tests/test-utils/factory/drawingElementResponseFactory"; +import setupStores from "@@/tests/test-utils/setupStores"; +import { useCardStore, useSocketConnection } from "@data-board"; +import { createMock, DeepMocked } from "@golevelup/ts-jest"; +import { + useBoardNotifier, + useSharedEditMode, + useSharedLastCreatedElement, +} from "@util-board"; import { cloneDeep } from "lodash"; +import { createPinia, setActivePinia } from "pinia"; +import { computed, Ref, ref } from "vue"; +import { useI18n } from "vue-i18n"; +import { useBoardApi } from "./BoardApi.composable"; +import { useCardRestApi } from "./cardActions/cardRestApi.composable"; +import { useCardSocketApi } from "./cardActions/cardSocketApi.composable"; jest.mock("vue-i18n"); (useI18n as jest.Mock).mockReturnValue({ t: (key: string) => key }); @@ -34,10 +37,8 @@ const mockedUseCardSocketApi = jest.mocked(useCardSocketApi); jest.mock("./cardActions/cardRestApi.composable"); const mockedUseCardRestApi = jest.mocked(useCardRestApi); -jest.mock("./EditMode.composable"); -const mockedSharedEditMode = jest.mocked(useSharedEditMode); - jest.mock("@util-board"); +const mockedSharedEditMode = jest.mocked(useSharedEditMode); const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); const mockedSharedLastCreatedElement = jest.mocked(useSharedLastCreatedElement); @@ -99,6 +100,7 @@ describe("CardStore", () => { mockedSharedEditMode.mockReturnValue({ setEditModeId, editModeId, + isInEditMode: computed(() => true), }); }); diff --git a/src/modules/data/board/ContentElementState.unit.ts b/src/modules/data/board/ContentElementState.unit.ts index 6014c3fc7f..fc37685e57 100644 --- a/src/modules/data/board/ContentElementState.unit.ts +++ b/src/modules/data/board/ContentElementState.unit.ts @@ -1,17 +1,17 @@ import { ContentElementType, RichTextElementResponse } from "@/serverApi/v3"; -import { mountComposable } from "@@/tests/test-utils/mountComposable"; -import { useContentElementState } from "./ContentElementState.composable"; +import { envConfigModule } from "@/store"; +import EnvConfigModule from "@/store/env-config"; +import NotifierModule from "@/store/notifier"; import { NOTIFIER_MODULE_KEY } from "@/utils/inject"; import { createModuleMocks } from "@/utils/mock-store-module"; -import NotifierModule from "@/store/notifier"; -import { createTestingPinia } from "@pinia/testing"; -import { setActivePinia } from "pinia"; -import { envConfigModule } from "@/store"; import { envsFactory } from "@@/tests/test-utils"; +import { mountComposable } from "@@/tests/test-utils/mountComposable"; import setupStores from "@@/tests/test-utils/setupStores"; -import EnvConfigModule from "@/store/env-config"; +import { createTestingPinia } from "@pinia/testing"; +import { setActivePinia } from "pinia"; +import { useContentElementState } from "./ContentElementState.composable"; -jest.mock("@feature-board/shared/InlineEditInteractionHandler.composable"); +jest.mock("@util-board/InlineEditInteractionHandler.composable"); const notifierModule = createModuleMocks(NotifierModule); const TEST_ELEMENT: RichTextElementResponse = { diff --git a/src/modules/data/board/EditMode.composable.ts b/src/modules/data/board/EditMode.composable.ts deleted file mode 100644 index 33aef8ef2e..0000000000 --- a/src/modules/data/board/EditMode.composable.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { createSharedComposable } from "@vueuse/core"; -import { computed, ref, Ref } from "vue"; -import { useBoardPermissions } from "./BoardPermissions.composable"; - -/** - * Handles EditMode for a specific card. - * - * Use this to set a card to edit mode from **inside** a card scope. - */ -export const useEditMode = (id: string) => { - const { hasEditPermission } = useBoardPermissions(); - const { editModeId, setEditModeId } = useSharedEditMode(); - - const isEditMode = computed(() => { - if (!hasEditPermission) return false; - return editModeId.value !== undefined && id === editModeId.value; - }); - - const startEditMode = () => { - if (!hasEditPermission) return; - setEditModeId(id); - }; - - const stopEditMode = () => { - if (isEditMode.value === true) { - setEditModeId(undefined); - } - }; - - return { - isEditMode, - startEditMode, - stopEditMode, - }; -}; - -/** - * Handles the currently editable card across the whole Board. - * - * Use this to set a card to edit mode from **outside** a card scope. - */ -const sharedEditMode = () => { - const editModeId: Ref = ref(undefined); - - const setEditModeId = (id: string | undefined) => { - editModeId.value = id; - }; - - return { editModeId, setEditModeId }; -}; - -export const useSharedEditMode = createSharedComposable(sharedEditMode); diff --git a/src/modules/data/board/EditMode.composable.unit.ts b/src/modules/data/board/EditMode.composable.unit.ts deleted file mode 100644 index bc51075765..0000000000 --- a/src/modules/data/board/EditMode.composable.unit.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useEditMode } from "./EditMode.composable"; -import { useBoardPermissions } from "./BoardPermissions.composable"; -import { BoardPermissionChecks } from "@/types/board/Permissions"; - -jest.mock("./BoardPermissions.composable"); -const mockedUseBoardPermissions = jest.mocked(useBoardPermissions); - -describe("EditMode.composable", () => { - const fakeId = "testId"; - - const setup = (hasEditPermission: boolean) => { - mockedUseBoardPermissions.mockReturnValue({ - hasEditPermission, - } as BoardPermissionChecks); - return useEditMode(fakeId); - }; - - it("should set edit mode with permissions", () => { - const { isEditMode, startEditMode, stopEditMode } = setup(true); - expect(isEditMode.value).toBe(false); - startEditMode(); - expect(isEditMode.value).toBe(true); - stopEditMode(); - expect(isEditMode.value).toBe(false); - }); - - it("should not set edit mode without permissions ", () => { - const { isEditMode, startEditMode, stopEditMode } = setup(false); - - expect(isEditMode.value).toBe(false); - startEditMode(); - expect(isEditMode.value).toBe(false); - stopEditMode(); - expect(isEditMode.value).toBe(false); - }); -}); diff --git a/src/modules/data/board/boardActions/boardRestApi.composable.ts b/src/modules/data/board/boardActions/boardRestApi.composable.ts index 005efd0ce5..e2f10883bf 100644 --- a/src/modules/data/board/boardActions/boardRestApi.composable.ts +++ b/src/modules/data/board/boardActions/boardRestApi.composable.ts @@ -1,12 +1,11 @@ -import { useBoardStore } from "../Board.store"; -import { useBoardApi } from "../BoardApi.composable"; -import { useSharedEditMode } from "../EditMode.composable"; -import * as BoardActions from "./boardActions"; import { BoardObjectType, ErrorType, useErrorHandler, } from "@/components/error-handling/ErrorHandler.composable"; +import { useSharedEditMode } from "@util-board"; +import { useBoardStore } from "../Board.store"; +import { useBoardApi } from "../BoardApi.composable"; import { CreateCardRequestPayload, DeleteColumnRequestPayload, @@ -17,6 +16,7 @@ import { UpdateBoardVisibilityRequestPayload, UpdateColumnTitleRequestPayload, } from "./boardActionPayload"; +import * as BoardActions from "./boardActions"; export const useBoardRestApi = () => { const boardStore = useBoardStore(); diff --git a/src/modules/data/board/boardActions/boardRestApi.composable.unit.ts b/src/modules/data/board/boardActions/boardRestApi.composable.unit.ts index 21f679ea9c..24fea5c9c1 100644 --- a/src/modules/data/board/boardActions/boardRestApi.composable.unit.ts +++ b/src/modules/data/board/boardActions/boardRestApi.composable.unit.ts @@ -1,9 +1,7 @@ -import { setActivePinia } from "pinia"; -import { createTestingPinia } from "@pinia/testing"; -import { ref } from "vue"; +import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; import { envConfigModule } from "@/store"; import EnvConfigModule from "@/store/env-config"; -import setupStores from "@@/tests/test-utils/setupStores"; +import { ColumnMove } from "@/types/board/DragAndDrop"; import { boardResponseFactory, cardSkeletonResponseFactory, @@ -12,13 +10,15 @@ import { mockedPiniaStoreTyping, } from "@@/tests/test-utils"; import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; +import setupStores from "@@/tests/test-utils/setupStores"; +import { useBoardStore, useSocketConnection } from "@data-board"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; -import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; -import { useSocketConnection, useBoardStore } from "@data-board"; -import { useBoardRestApi } from "./boardRestApi.composable"; +import { createTestingPinia } from "@pinia/testing"; +import { useSharedEditMode } from "@util-board"; +import { setActivePinia } from "pinia"; +import { computed, ref } from "vue"; import { useBoardApi } from "../BoardApi.composable"; -import { useSharedEditMode } from "../EditMode.composable"; -import { ColumnMove } from "@/types/board/DragAndDrop"; +import { useBoardRestApi } from "./boardRestApi.composable"; jest.mock("@/components/error-handling/ErrorHandler.composable"); const mockedUseErrorHandler = jest.mocked(useErrorHandler); @@ -26,7 +26,7 @@ const mockedUseErrorHandler = jest.mocked(useErrorHandler); jest.mock("../BoardApi.composable"); const mockedUseBoardApi = jest.mocked(useBoardApi); -jest.mock("../EditMode.composable"); +jest.mock("@util-board/editMode.composable"); const mockedSharedEditMode = jest.mocked(useSharedEditMode); jest.mock("../socket/socket"); @@ -57,6 +57,7 @@ describe("boardRestApi", () => { mockedSharedEditMode.mockReturnValue({ setEditModeId, editModeId: ref(undefined), + isInEditMode: computed(() => true), }); }); diff --git a/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts b/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts index 0e1b672ba1..4a206ba1ab 100644 --- a/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts +++ b/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts @@ -11,8 +11,8 @@ import { import setupStores from "@@/tests/test-utils/setupStores"; import { useBoardStore, - useSocketConnection, useForceRender, + useSocketConnection, } from "@data-board"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; import { createTestingPinia } from "@pinia/testing"; @@ -49,7 +49,8 @@ const mockedUseBoardRestApi = jest.mocked(useBoardRestApi); jest.mock("vue-i18n"); (useI18n as jest.Mock).mockReturnValue({ t: (key: string) => key }); -jest.mock("@util-board"); +jest.mock("@util-board/BoardNotifier.composable"); +jest.mock("@util-board/LastCreatedElement.composable"); const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); const mockedSharedLastCreatedElement = jest.mocked(useSharedLastCreatedElement); diff --git a/src/modules/data/board/boardInactivity.composable.unit.ts b/src/modules/data/board/boardInactivity.composable.unit.ts index 4068bf7b40..03394d3c85 100644 --- a/src/modules/data/board/boardInactivity.composable.unit.ts +++ b/src/modules/data/board/boardInactivity.composable.unit.ts @@ -1,25 +1,25 @@ +import { envConfigModule } from "@/store"; +import EnvConfigModule from "@/store/env-config"; +import NotifierModule from "@/store/notifier"; +import { NOTIFIER_MODULE_KEY } from "@/utils/inject"; +import { createModuleMocks } from "@/utils/mock-store-module"; import { boardResponseFactory, envsFactory, mockedPiniaStoreTyping, mountComposable, } from "@@/tests/test-utils"; -import { - useBoardInactivity, - connectionOptions, -} from "./boardInactivity.composable"; -import { NOTIFIER_MODULE_KEY } from "@/utils/inject"; -import NotifierModule from "@/store/notifier"; -import { createModuleMocks } from "@/utils/mock-store-module"; -import { computed, nextTick } from "vue"; -import { setActivePinia } from "pinia"; -import { createTestingPinia } from "@pinia/testing"; +import setupStores from "@@/tests/test-utils/setupStores"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; +import { createTestingPinia } from "@pinia/testing"; import { useBoardNotifier, useSharedLastCreatedElement } from "@util-board"; -import setupStores from "@@/tests/test-utils/setupStores"; -import EnvConfigModule from "@/store/env-config"; -import { envConfigModule } from "@/store"; +import { setActivePinia } from "pinia"; +import { computed, nextTick } from "vue"; import { useBoardStore } from "./Board.store"; +import { + connectionOptions, + useBoardInactivity, +} from "./boardInactivity.composable"; import { useCardStore } from "./Card.store"; import { useSocketConnection } from "./socket/socket"; @@ -31,16 +31,15 @@ jest.mock("vue-i18n", () => ({ const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); -jest.mock("@util-board"); -const mockUseSharedLastCreatedElement = jest.mocked( - useSharedLastCreatedElement -); - jest.mock("./socket/socket"); const mockedUseSocketConnection = jest.mocked(useSocketConnection); jest.mock("@util-board/BoardNotifier.composable"); +jest.mock("@util-board/LastCreatedElement.composable"); const mockUseBoardNotifier = jest.mocked(useBoardNotifier); +const mockUseSharedLastCreatedElement = jest.mocked( + useSharedLastCreatedElement +); let mockBoardNotifierCalls: DeepMocked>; let boardStore: ReturnType; diff --git a/src/modules/data/board/cardActions/cardRestApi.composable.ts b/src/modules/data/board/cardActions/cardRestApi.composable.ts index e330a40fce..8322ad9f73 100644 --- a/src/modules/data/board/cardActions/cardRestApi.composable.ts +++ b/src/modules/data/board/cardActions/cardRestApi.composable.ts @@ -1,11 +1,15 @@ -import { useBoardApi } from "../BoardApi.composable"; -import { useSharedEditMode } from "../EditMode.composable"; import { ApiErrorHandlerFactory, BoardObjectType, ErrorType, useErrorHandler, } from "@/components/error-handling/ErrorHandler.composable"; +import { delay } from "@/utils/helpers"; +import { useBoardStore } from "@data-board"; +import { useSharedEditMode } from "@util-board"; +import { useBoardApi } from "../BoardApi.composable"; +import { useCardStore } from "../Card.store"; +import { useSharedCardRequestPool } from "../CardRequestPool.composable"; import { CreateElementRequestPayload, DeleteCardRequestPayload, @@ -16,10 +20,6 @@ import { UpdateCardTitleRequestPayload, UpdateElementRequestPayload, } from "./cardActionPayload"; -import { useCardStore } from "../Card.store"; -import { useSharedCardRequestPool } from "../CardRequestPool.composable"; -import { delay } from "@/utils/helpers"; -import { useBoardStore } from "@data-board"; export const useCardRestApi = () => { const boardStore = useBoardStore(); diff --git a/src/modules/data/board/cardActions/cardRestApi.composable.unit.ts b/src/modules/data/board/cardActions/cardRestApi.composable.unit.ts index ecb274efbc..6dc79649b1 100644 --- a/src/modules/data/board/cardActions/cardRestApi.composable.unit.ts +++ b/src/modules/data/board/cardActions/cardRestApi.composable.unit.ts @@ -1,28 +1,28 @@ -import { setActivePinia } from "pinia"; -import { ref } from "vue"; +import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; +import { ContentElementType, RichTextElementResponse } from "@/serverApi/v3"; +import { envConfigModule } from "@/store"; +import EnvConfigModule from "@/store/env-config"; import { envsFactory, mockedPiniaStoreTyping, richTextElementResponseFactory, } from "@@/tests/test-utils"; -import { createMock, DeepMocked } from "@golevelup/ts-jest"; -import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable"; -import { useSocketConnection, useCardStore, useBoardStore } from "@data-board"; -import { useCardRestApi } from "./cardRestApi.composable"; -import { useBoardApi } from "../BoardApi.composable"; -import { useSharedEditMode } from "../EditMode.composable"; +import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; import setupStores from "@@/tests/test-utils/setupStores"; -import EnvConfigModule from "@/store/env-config"; -import { envConfigModule } from "@/store"; +import { useBoardStore, useCardStore, useSocketConnection } from "@data-board"; +import { createMock, DeepMocked } from "@golevelup/ts-jest"; import { createTestingPinia } from "@pinia/testing"; +import { useSharedEditMode } from "@util-board"; +import { AxiosResponse } from "axios"; +import { setActivePinia } from "pinia"; +import { computed, ref } from "vue"; +import { useBoardApi } from "../BoardApi.composable"; +import { useSharedCardRequestPool } from "../CardRequestPool.composable"; import { UpdateCardHeightRequestPayload, UpdateCardTitleRequestPayload, } from "./cardActionPayload"; -import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFactory"; -import { useSharedCardRequestPool } from "../CardRequestPool.composable"; -import { ContentElementType, RichTextElementResponse } from "@/serverApi/v3"; -import { AxiosResponse } from "axios"; +import { useCardRestApi } from "./cardRestApi.composable"; jest.mock("@/components/error-handling/ErrorHandler.composable"); const mockedUseErrorHandler = jest.mocked(useErrorHandler); @@ -33,7 +33,7 @@ const mockedUseBoardApi = jest.mocked(useBoardApi); jest.mock("../CardRequestPool.composable"); const mockedSharedCardRequestPool = jest.mocked(useSharedCardRequestPool); -jest.mock("../EditMode.composable"); +jest.mock("@util-board/editMode.composable"); const mockedSharedEditMode = jest.mocked(useSharedEditMode); jest.mock("../socket/socket"); @@ -78,6 +78,7 @@ describe("useCardRestApi", () => { mockedSharedEditMode.mockReturnValue({ setEditModeId, editModeId: ref(undefined), + isInEditMode: computed(() => true), }); }); diff --git a/src/modules/data/board/cardActions/cardSocketApi.composable.unit.ts b/src/modules/data/board/cardActions/cardSocketApi.composable.unit.ts index a2b7ed8b4d..f53b25f0f4 100644 --- a/src/modules/data/board/cardActions/cardSocketApi.composable.unit.ts +++ b/src/modules/data/board/cardActions/cardSocketApi.composable.unit.ts @@ -42,7 +42,8 @@ const mockedUseSocketConnection = jest.mocked(useSocketConnection); jest.mock("@/components/error-handling/ErrorHandler.composable"); const mockedUseErrorHandler = jest.mocked(useErrorHandler); -jest.mock("@util-board"); +jest.mock("@util-board/BoardNotifier.composable"); +jest.mock("@util-board/LastCreatedElement.composable"); const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); const mockUseSharedLastCreatedElement = jest.mocked( useSharedLastCreatedElement diff --git a/src/modules/data/board/index.ts b/src/modules/data/board/index.ts index a2a0c8d797..797d472c6f 100644 --- a/src/modules/data/board/index.ts +++ b/src/modules/data/board/index.ts @@ -1,15 +1,14 @@ -import { useBoardPermissions } from "./BoardPermissions.composable"; import { useBoardStore } from "./Board.store"; -import { useSharedBoardPageInformation } from "./BoardPageInformation.composable"; -import { useBoardFocusHandler } from "./BoardFocusHandler.composable"; -import { useContentElementState } from "./ContentElementState.composable"; -import { useEditMode, useSharedEditMode } from "./EditMode.composable"; import * as boardActions from "./boardActions/boardActions"; -import * as cardActions from "./cardActions/cardActions"; -import { useSocketConnection } from "./socket/socket"; -import { useCardStore } from "./Card.store"; +import { useBoardFocusHandler } from "./BoardFocusHandler.composable"; import { useBoardInactivity } from "./boardInactivity.composable"; +import { useSharedBoardPageInformation } from "./BoardPageInformation.composable"; +import { useBoardPermissions } from "./BoardPermissions.composable"; +import { useCardStore } from "./Card.store"; +import * as cardActions from "./cardActions/cardActions"; +import { useContentElementState } from "./ContentElementState.composable"; import { useForceRender } from "./fixSamePositionDnD.composable"; +import { useSocketConnection } from "./socket/socket"; export { boardActions, @@ -20,9 +19,7 @@ export { useBoardPermissions, useCardStore, useContentElementState, - useEditMode, useForceRender, - useSharedEditMode, useSharedBoardPageInformation, useSocketConnection, }; diff --git a/src/modules/feature/board-text-element/RichTextContentElement.unit.ts b/src/modules/feature/board-text-element/RichTextContentElement.unit.ts index ec3b7f1410..f24fd8253c 100644 --- a/src/modules/feature/board-text-element/RichTextContentElement.unit.ts +++ b/src/modules/feature/board-text-element/RichTextContentElement.unit.ts @@ -2,14 +2,16 @@ import { ContentElementType, RichTextElementResponse } from "@/serverApi/v3"; import NotifierModule from "@/store/notifier"; import { NOTIFIER_MODULE_KEY } from "@/utils/inject"; import { createModuleMocks } from "@/utils/mock-store-module"; -import { mount } from "@vue/test-utils"; -import RichTextContentElementComponent from "./RichTextContentElement.vue"; -import RichTextContentElementDisplayComponent from "./RichTextContentElementDisplay.vue"; -import RichTextContentElementEditComponent from "./RichTextContentElementEdit.vue"; import { createTestingI18n, createTestingVuetify, } from "@@/tests/test-utils/setup"; +import { mount } from "@vue/test-utils"; +import vueDompurifyHTMLPlugin from "vue-dompurify-html"; +import RichTextContentElementComponent from "./RichTextContentElement.vue"; +import RichTextContentElementDisplayComponent from "./RichTextContentElementDisplay.vue"; +import RichTextContentElementEditComponent from "./RichTextContentElementEdit.vue"; + jest.mock("@data-board", () => { return { useBoardFocusHandler: jest.fn(), @@ -23,7 +25,7 @@ jest.mock("@ui-confirmation-dialog", () => { }; }); -jest.mock("@feature-board", () => { +jest.mock("@util-board", () => { return { useInlineEditInteractionHandler: jest.fn(), }; @@ -52,8 +54,15 @@ describe("RichTextContentElement", () => { const wrapper = mount(RichTextContentElementComponent, { propsData: props, global: { - plugins: [createTestingVuetify(), createTestingI18n()], + plugins: [ + createTestingVuetify(), + createTestingI18n(), + vueDompurifyHTMLPlugin, + ], provide: { [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule }, + stubs: { + RichTextContentElementEdit: true, + }, }, }); diff --git a/src/modules/feature/board/board/Board.unit.ts b/src/modules/feature/board/board/Board.unit.ts index 8a93c14a6c..502c7ff497 100644 --- a/src/modules/feature/board/board/Board.unit.ts +++ b/src/modules/feature/board/board/Board.unit.ts @@ -8,10 +8,10 @@ import { } from "@/serverApi/v3"; import { envConfigModule } from "@/store"; import CopyModule from "@/store/copy"; +import CourseRoomDetailsModule from "@/store/course-room-details"; import EnvConfigModule from "@/store/env-config"; import LoadingStateModule from "@/store/loading-state"; import NotifierModule from "@/store/notifier"; -import CourseRoomDetailsModule from "@/store/course-room-details"; import ShareModule from "@/store/share"; import { Board } from "@/types/board/Board"; import { @@ -20,9 +20,9 @@ import { } from "@/types/board/Permissions"; import { COPY_MODULE_KEY, + COURSE_ROOM_DETAILS_MODULE_KEY, ENV_CONFIG_MODULE_KEY, NOTIFIER_MODULE_KEY, - COURSE_ROOM_DETAILS_MODULE_KEY, SHARE_MODULE_KEY, } from "@/utils/inject"; import { createModuleMocks } from "@/utils/mock-store-module"; @@ -39,19 +39,19 @@ import { } from "@@/tests/test-utils/setup"; import setupStores from "@@/tests/test-utils/setupStores"; import { + useBoardInactivity, useBoardPermissions, useBoardStore, useCardStore, - useEditMode, useSharedBoardPageInformation, - useSharedEditMode, - useBoardInactivity, } from "@data-board"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; import { createTestingPinia } from "@pinia/testing"; import { extractDataAttribute, useBoardNotifier, + useCourseBoardEditMode, + useSharedEditMode, useSharedLastCreatedElement, } from "@util-board"; import { mount } from "@vue/test-utils"; @@ -61,15 +61,20 @@ import BoardVue from "./Board.vue"; import BoardColumnVue from "./BoardColumn.vue"; import BoardHeaderVue from "./BoardHeader.vue"; -jest.mock("@util-board"); +jest.mock("@util-board/BoardNotifier.composable"); const mockedUseBoardNotifier = jest.mocked(useBoardNotifier); + +jest.mock("@util-board/LastCreatedElement.composable"); const mockUseSharedLastCreatedElement = jest.mocked( useSharedLastCreatedElement ); + +jest.mock("@util-board/extractDataAttribute.util"); const mockExtractDataAttribute = jest.mocked(extractDataAttribute); -jest.mock("@data-board/EditMode.composable"); +jest.mock("@util-board/editMode.composable"); const mockedUseSharedEditMode = jest.mocked(useSharedEditMode); +const mockedUseEditMode = jest.mocked(useCourseBoardEditMode); jest.mock("@data-board/BoardPageInformation.composable"); const mockedUseSharedBoardPageInformation = jest.mocked( @@ -86,9 +91,6 @@ jest.mock("@/utils/pageTitle", () => ({ jest.mock("@/composables/copy"); const mockUseCopy = jest.mocked(useCopy); -jest.mock("@data-board/EditMode.composable"); -const mockedUseEditMode = jest.mocked(useEditMode); - jest.mock("vue-router"); const useRouterMock = useRouter; const useRouteMock = useRoute; @@ -124,6 +126,7 @@ describe("Board", () => { mockedUseSharedEditMode.mockReturnValue({ editModeId: ref(undefined), setEditModeId: jest.fn(), + isInEditMode: computed(() => true), }); mockedUseSharedBoardPageInformation.mockReturnValue({ diff --git a/src/modules/feature/board/board/Board.vue b/src/modules/feature/board/board/Board.vue index 82964696b8..6440f709a4 100644 --- a/src/modules/feature/board/board/Board.vue +++ b/src/modules/feature/board/board/Board.vue @@ -104,25 +104,25 @@ import { CopyParamsTypeEnum } from "@/store/copy"; import { ColumnMove } from "@/types/board/DragAndDrop"; import { COPY_MODULE_KEY, + COURSE_ROOM_DETAILS_MODULE_KEY, ENV_CONFIG_MODULE_KEY, injectStrict, - COURSE_ROOM_DETAILS_MODULE_KEY, SHARE_MODULE_KEY, } from "@/utils/inject"; import { + useBoardInactivity, useBoardPermissions, useBoardStore, useCardStore, useSharedBoardPageInformation, - useSharedEditMode, - useBoardInactivity, } from "@data-board"; import { ConfirmationDialog } from "@ui-confirmation-dialog"; import { LightBox } from "@ui-light-box"; import { + BOARD_IS_LIST_LAYOUT, extractDataAttribute, useBoardNotifier, - BOARD_IS_LIST_LAYOUT, + useSharedEditMode, } from "@util-board"; import { useTouchDetection } from "@util-device-detection"; import { useDebounceFn } from "@vueuse/core"; diff --git a/src/modules/feature/board/board/BoardAddCardButton.vue b/src/modules/feature/board/board/BoardAddCardButton.vue index e1a3acc136..d32aca3e3d 100644 --- a/src/modules/feature/board/board/BoardAddCardButton.vue +++ b/src/modules/feature/board/board/BoardAddCardButton.vue @@ -23,8 +23,8 @@