Skip to content

Commit

Permalink
tests
Browse files Browse the repository at this point in the history
  • Loading branch information
MarvinOehlerkingCap committed Nov 14, 2023
1 parent e9cf843 commit a128c52
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ToolConfigurationStatus,
} from "@/store/external-tool";
import { ContextExternalTool } from "@/store/external-tool/context-external-tool";
import { BusinessError } from "@/store/types/commons";
import { I18N_KEY } from "@/utils/inject";
import {
contextExternalToolFactory,
Expand All @@ -22,15 +23,13 @@ import {
} from "@data-external-tool";
import { createMock, DeepMocked } from "@golevelup/ts-jest";
import { mdiPuzzleOutline } from "@mdi/js";
import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
import { useSharedLastCreatedElement } from "@util-board";
import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
import Vue, { ref } from "vue";
import ExternalToolElement from "./ExternalToolElement.vue";
import { useSharedLastCreatedElement } from "@util-board";

jest.mock("@data-board");
jest.mock("@data-external-tool");
jest.mock("@ui-confirmation-dialog");
jest.mock("@util-board");

const EMPTY_TEST_ELEMENT: ExternalToolElementResponse = {
Expand All @@ -49,7 +48,7 @@ describe("ExternalToolElement", () => {
let useBoardFocusHandlerMock: DeepMocked<
ReturnType<typeof useBoardFocusHandler>
>;
let useSharedExternalToolElementDisplayStateMock: DeepMocked<
let useExternalToolElementDisplayStateMock: DeepMocked<
ReturnType<typeof useExternalToolElementDisplayState>
>;
let useExternalToolLaunchStateMock: DeepMocked<
Expand All @@ -64,7 +63,7 @@ describe("ExternalToolElement", () => {
createMock<ReturnType<typeof useContentElementState>>();
useBoardFocusHandlerMock =
createMock<ReturnType<typeof useBoardFocusHandler>>();
useSharedExternalToolElementDisplayStateMock =
useExternalToolElementDisplayStateMock =
createMock<ReturnType<typeof useExternalToolElementDisplayState>>();
useExternalToolLaunchStateMock =
createMock<ReturnType<typeof useExternalToolLaunchState>>();
Expand All @@ -77,7 +76,7 @@ describe("ExternalToolElement", () => {
jest.mocked(useBoardFocusHandler).mockReturnValue(useBoardFocusHandlerMock);
jest
.mocked(useExternalToolElementDisplayState)
.mockReturnValue(useSharedExternalToolElementDisplayStateMock);
.mockReturnValue(useExternalToolElementDisplayStateMock);
jest
.mocked(useExternalToolLaunchState)
.mockReturnValue(useExternalToolLaunchStateMock);
Expand All @@ -99,14 +98,9 @@ describe("ExternalToolElement", () => {
) => {
document.body.setAttribute("data-app", "true");

const useDeleteConfirmationDialogReturnValue =
createMock<ReturnType<typeof useDeleteConfirmationDialog>>();
jest
.mocked(useDeleteConfirmationDialog)
.mockReturnValue(useDeleteConfirmationDialogReturnValue);

useContentElementStateMock.modelValue = ref(props.element.content);
useSharedExternalToolElementDisplayStateMock.displayData = ref(displayData);
useExternalToolElementDisplayStateMock.displayData = ref(displayData);
useExternalToolElementDisplayStateMock.error = ref(undefined);
useSharedLastCreatedElementMock.lastCreatedElementId = ref(undefined);

const wrapper: Wrapper<Vue> = shallowMount(
Expand All @@ -130,7 +124,6 @@ describe("ExternalToolElement", () => {

return {
wrapper,
useDeleteConfirmationDialogReturnValue,
};
};

Expand All @@ -157,7 +150,7 @@ describe("ExternalToolElement", () => {
await Vue.nextTick();

expect(
useSharedExternalToolElementDisplayStateMock.fetchDisplayData
useExternalToolElementDisplayStateMock.fetchDisplayData
).toHaveBeenCalledWith("contextExternalToolId");
});

Expand Down Expand Up @@ -234,7 +227,7 @@ describe("ExternalToolElement", () => {
await Vue.nextTick();

expect(
useSharedExternalToolElementDisplayStateMock.fetchDisplayData
useExternalToolElementDisplayStateMock.fetchDisplayData
).not.toHaveBeenCalled();
});

Expand Down Expand Up @@ -463,7 +456,7 @@ describe("ExternalToolElement", () => {
const setup = () => {
const contextExternalToolId = "context-external-tool-id";

useSharedExternalToolElementDisplayStateMock.isLoading = ref(true);
useExternalToolElementDisplayStateMock.isLoading = ref(true);

const { wrapper } = getWrapper({
element: {
Expand Down Expand Up @@ -491,7 +484,7 @@ describe("ExternalToolElement", () => {
const setup = () => {
const contextExternalToolId = "context-external-tool-id";

useSharedExternalToolElementDisplayStateMock.isLoading = ref(false);
useExternalToolElementDisplayStateMock.isLoading = ref(false);

const { wrapper } = getWrapper(
{
Expand Down Expand Up @@ -639,7 +632,7 @@ describe("ExternalToolElement", () => {
await Vue.nextTick();

expect(
useSharedExternalToolElementDisplayStateMock.fetchDisplayData
useExternalToolElementDisplayStateMock.fetchDisplayData
).toHaveBeenCalledWith(savedTool.id);
});
});
Expand Down Expand Up @@ -675,4 +668,52 @@ describe("ExternalToolElement", () => {
});
});
});

describe("Alert", () => {
describe("when there is an error or the tool is outdated", () => {
const setup = () => {
const error: BusinessError = {
statusCode: 418,
message: "Loading error",
};

const { wrapper } = getWrapper(
{
element: EMPTY_TEST_ELEMENT,
isEditMode: true,
},
externalToolDisplayDataFactory.build({
status: ToolConfigurationStatus.Outdated,
})
);

useExternalToolElementDisplayStateMock.error.value = error;

return {
wrapper,
error,
};
};

it("should display an outdated alert", async () => {
const { wrapper } = setup();

const alert = wrapper.find(
'[data-testid="board-external-tool-element-alert"]'
);

expect(alert.props("isToolOutdated")).toEqual(true);
});

it("should display an error alert", async () => {
const { wrapper, error } = setup();

const alert = wrapper.find(
'[data-testid="board-external-tool-element-alert"]'
);

expect(alert.props("error")).toEqual(error);
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
<ExternalToolElementAlert
:error="error"
:is-tool-outdated="isToolOutdated"
data-testid="board-external-tool-element-alert"
/>
<ExternalToolElementConfigurationDialog
:is-open="isConfigurationDialogOpen"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import { BusinessError } from "@/store/types/commons";
import { I18N_KEY } from "@/utils/inject";
import { i18nMock } from "@@/tests/test-utils";
import createComponentMocks from "@@/tests/test-utils/componentMocks";
import { useBoardPermissions } from "@data-board";
import { createMock, DeepMocked } from "@golevelup/ts-jest";
import { WarningAlert } from "@ui-alert";
import { mount, MountOptions, Wrapper } from "@vue/test-utils";
import Vue from "vue";
import ExternalToolElementAlert from "./ExternalToolElementAlert.vue";

jest.mock("@data-board");

describe("ExternalToolElementAlert", () => {
let useBoardPermissionsMock: DeepMocked<
ReturnType<typeof useBoardPermissions>
>;

beforeEach(() => {
useBoardPermissionsMock =
createMock<ReturnType<typeof useBoardPermissions>>();

jest.mocked(useBoardPermissions).mockReturnValue(useBoardPermissionsMock);
});

afterEach(() => {
jest.clearAllMocks();
});

const getWrapper = (propsData: {
error?: BusinessError;
isToolOutdated?: boolean;
}) => {
document.body.setAttribute("data-app", "true");

const wrapper: Wrapper<Vue> = mount(
ExternalToolElementAlert as MountOptions<Vue>,
{
...createComponentMocks({
i18n: true,
}),
propsData,
provide: {
[I18N_KEY.valueOf()]: i18nMock,
},
}
);

return {
wrapper,
};
};

afterEach(() => {
jest.resetAllMocks();
});

describe("when an error exists", () => {
describe("when the user is a teacher", () => {
const setup = () => {
const error: BusinessError = {
statusCode: 418,
message: "Loading error",
};

useBoardPermissionsMock.isTeacher = true;

const { wrapper } = getWrapper({ error });

return {
wrapper,
};
};

it("should display a teacher friendly error message", () => {
const { wrapper } = setup();

const alerts = wrapper.findAllComponents(WarningAlert);

expect(alerts).toHaveLength(1);
expect(alerts.at(0).text()).toEqual(
"feature-board-external-tool-element.alert.error.teacher"
);
});
});

describe("when the user is a student", () => {
const setup = () => {
const error: BusinessError = {
statusCode: 418,
message: "Loading error",
};

useBoardPermissionsMock.isTeacher = false;

const { wrapper } = getWrapper({ error });

return {
wrapper,
};
};

it("should display a student friendly error message", () => {
const { wrapper } = setup();

const alerts = wrapper.findAllComponents(WarningAlert);

expect(alerts).toHaveLength(1);
expect(alerts.at(0).text()).toEqual(
"feature-board-external-tool-element.alert.error.student"
);
});
});
});

describe("when the tool is outdated", () => {
describe("when the user is a teacher", () => {
const setup = () => {
useBoardPermissionsMock.isTeacher = true;

const { wrapper } = getWrapper({ isToolOutdated: true });

return {
wrapper,
};
};

it("should display a teacher friendly message", () => {
const { wrapper } = setup();

const alerts = wrapper.findAllComponents(WarningAlert);

expect(alerts).toHaveLength(1);
expect(alerts.at(0).text()).toEqual(
"feature-board-external-tool-element.alert.outdated.teacher"
);
});
});

describe("when the user is a student", () => {
const setup = () => {
useBoardPermissionsMock.isTeacher = false;

const { wrapper } = getWrapper({ isToolOutdated: true });

return {
wrapper,
};
};

it("should display a student friendly message", () => {
const { wrapper } = setup();

const alerts = wrapper.findAllComponents(WarningAlert);

expect(alerts).toHaveLength(1);
expect(alerts.at(0).text()).toEqual(
"feature-board-external-tool-element.alert.outdated.student"
);
});
});
});
});

0 comments on commit a128c52

Please sign in to comment.