Skip to content

Commit

Permalink
BC-7833 - Rename room translation keys (#3366)
Browse files Browse the repository at this point in the history 
* Renames course-rooms pages folder
* Adjusts AddContentModal tests to test for courses store usage
* Fixes some smaller code smells

---------

Co-authored-by: Odalys Adam <[email protected]>
Co-authored-by: odalys-dataport <[email protected]>
  • Loading branch information
@wolfganggreschus @odalys-dataport
3 people authored Aug 27, 2024
1 parent 1ab3ec7 commit 9e18e0f
Show file tree
Hide file tree
Showing 21 changed files with 366 additions and 240 deletions.
203 changes: 120 additions & 83 deletions src/components/lern-store/AddContentModal.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { VBtn, VSelect } from "vuetify/lib/components/index.mjs";
import { createStore } from "vuex";
import AddContentModal from "./AddContentModal.vue";

initializeAxios(createMock<AxiosInstance>());
const testProps = {
showCopyModal: true,
resource: {
Expand All @@ -25,6 +24,7 @@ const testProps = {
contentId: "Test content",
items: [],
};

const testPropsMultiple = {
showCopyModal: true,
resource: {
Expand Down Expand Up @@ -89,6 +89,8 @@ const lessons = {
],
};

initializeAxios(createMock<AxiosInstance>());

const createMockStore = () => {
const createStudentStub = jest.fn();
const mockStore = createStore({
Expand All @@ -104,104 +106,139 @@ const createMockStore = () => {
return { mockStore, createStudentStub };
};

const getWrapper: any = (props: object) => {
const { mockStore } = createMockStore();
return mount(AddContentModal, {
global: {
plugins: [createTestingVuetify(), createTestingI18n()],
mocks: {
$store: mockStore,
},
},
props,
});
};

describe("@/components/molecules/AddContentModal", () => {
beforeEach(() => {
const setup = (props: {
showCopyModal: boolean;
resource: {
title: string;
url: string;
client: string;
};
contentId: string;
items?: Array<{
title: string;
url: string;
client: string;
}>;
}) => {
setupStores({
contentModule: ContentModule,
});
});
const { mockStore } = createMockStore();

it("nothing selected submit should be disabled", async () => {
const wrapper = getWrapper(testProps);
const submitBtn = wrapper.findComponent('[data-testid="modal_submit_btn"]');
expect(wrapper.vm.isSendEnabled).toBe(false);
expect(submitBtn.exists()).toBe(true);
expect(submitBtn.attributes().disabled).toBe("");
});
const wrapper = mount(AddContentModal, {
global: {
plugins: [createTestingVuetify(), createTestingI18n()],
mocks: {
$store: mockStore,
},
},
props,
});

return { wrapper };
};

it("selected submit should be enabled", async () => {
const wrapper = getWrapper(testProps);
expect(wrapper.vm.isSendEnabled).toBe(false);
wrapper.setData({
selectedLesson: lessonsMock[0],
describe("Component Initialization", () => {
it("nothing selected submit should be disabled", async () => {
const { wrapper } = setup(testProps);
const submitBtn = wrapper.findComponent(
'[data-testid="modal_submit_btn"]'
);

expect(wrapper.vm.isSendEnabled).toBe(false);
expect(submitBtn.exists()).toBe(true);
expect(submitBtn.attributes().disabled).toBe("");
});
await wrapper.vm.$nextTick();
const submitBtn = wrapper.findComponent('[data-testid="modal_submit_btn"]');
expect(wrapper.vm.isSendEnabled).toBe(true);
expect(submitBtn.attributes().disabled).toBeUndefined();
});

it("create coursesOptions", async () => {
const wrapper = getWrapper(testProps);
const selection = wrapper.findComponent(VSelect);
expect(selection.props("items")).toBe(courseOptions);
});
it("selected submit should be enabled", async () => {
const { wrapper } = setup(testProps);
expect(wrapper.vm.isSendEnabled).toBe(false);

it("create lessonsOptions", async () => {
const wrapper = getWrapper(testProps);
contentModule.setLessons(lessons);
const lo = wrapper.vm.lessonsOptions;
expect(lo).toHaveLength(1);
expect(lo[0]._id).toBe(lessonsMock[0]._id);
expect(lo[0].name).toBe(lessonsMock[0].name);
});
wrapper.setData({
selectedLesson: lessonsMock[0],
});
await nextTick();
const submitBtn = wrapper.findComponent(
'[data-testid="modal_submit_btn"]'
);

it("submit modal action", async () => {
const wrapper = getWrapper(testProps);
wrapper.setData({
selectedLesson: lessonsMock[0],
expect(wrapper.vm.isSendEnabled).toBe(true);
expect(submitBtn.attributes().disabled).toBeUndefined();
});
expect(wrapper.vm.isSendEnabled).toBe(true);
await nextTick();
const submitBtn = wrapper.findComponent('[data-testid="modal_submit_btn"]');
await submitBtn.trigger("click");
expect(wrapper.emitted("update:show-copy-modal")).toHaveLength(1);
expect(wrapper.emitted("update:show-copy-modal")[0][0]).toBeFalsy();
});

it("submit modal action multiple items", async () => {
const wrapper = getWrapper(testPropsMultiple);
wrapper.setData({
selectedLesson: lessonsMock[0],
it("create coursesOptions", async () => {
const { wrapper } = setup(testProps);
const selection = wrapper.findComponent(VSelect);

expect(selection.props("items")).toBe(courseOptions);
});
expect(wrapper.vm.isSendEnabled).toBe(true);
await nextTick();
const submitBtn = wrapper.findComponent('[data-testid="modal_submit_btn"]');
await submitBtn.trigger("click");
expect(wrapper.emitted("update:show-copy-modal")).toHaveLength(1);
expect(wrapper.emitted("update:show-copy-modal")[0][0]).toBe(false);
});

it("cancel modal action", async () => {
const wrapper = getWrapper(testProps);
const cancelBtn = wrapper.findComponent(VBtn);
const courseSelection = wrapper.findAllComponents(VSelect)[0];
const lessonSelection = wrapper.findAllComponents(VSelect)[1];
it("create lessonsOptions", async () => {
const { wrapper } = setup(testProps);
contentModule.setLessons(lessons);
const lo = wrapper.vm.lessonsOptions;

expect(lo).toHaveLength(1);
expect(lo[0]._id).toBe(lessonsMock[0]._id);
expect(lo[0].name).toBe(lessonsMock[0].name);
});

it("submit modal action", async () => {
const { wrapper } = setup(testProps);
wrapper.setData({
selectedLesson: lessonsMock[0],
});

expect(wrapper.vm.isSendEnabled).toBe(true);

await nextTick();
const submitBtn = wrapper.findComponent(
'[data-testid="modal_submit_btn"]'
);
await submitBtn.trigger("click");

expect(wrapper.emitted("update:show-copy-modal")).toHaveLength(1);
expect(wrapper.emitted("update:show-copy-modal")?.[0][0]).toBe(false);
});

it("submit modal action multiple items", async () => {
const { wrapper } = setup(testPropsMultiple);
wrapper.setData({
selectedLesson: lessonsMock[0],
});

expect(wrapper.vm.isSendEnabled).toBe(true);

courseSelection.vm.$emit("update:modelValue", courseOptions[0]);
await nextTick();
lessonSelection.vm.$emit("update:modelValue", lessonsMock[0]);
await nextTick();
expect(lessonSelection.props("modelValue")).toEqual(lessonsMock[0]);
expect(courseSelection.props("modelValue")).toEqual(courseOptions[0]);
await nextTick();
const submitBtn = wrapper.findComponent(
'[data-testid="modal_submit_btn"]'
);
await submitBtn.trigger("click");

expect(wrapper.emitted("update:show-copy-modal")).toHaveLength(1);
expect(wrapper.emitted("update:show-copy-modal")?.[0][0]).toBe(false);
});

await cancelBtn.trigger("click");
it("cancel modal action", async () => {
const { wrapper } = setup(testProps);
const cancelBtn = wrapper.findComponent(VBtn);
const courseSelection = wrapper.findAllComponents(VSelect)[0];
const lessonSelection = wrapper.findAllComponents(VSelect)[1];

expect(wrapper.emitted("update:show-copy-modal", false)).toHaveLength(1);
expect(lessonSelection.props("modelValue")).toBeNull();
expect(courseSelection.props("modelValue")).toBeNull();
courseSelection.vm.$emit("update:modelValue", courseOptions[0]);
await nextTick();
lessonSelection.vm.$emit("update:modelValue", lessonsMock[0]);
await nextTick();

expect(lessonSelection.props("modelValue")).toEqual(lessonsMock[0]);
expect(courseSelection.props("modelValue")).toEqual(courseOptions[0]);

await cancelBtn.trigger("click");

expect(wrapper.emitted("update:show-copy-modal")).toHaveLength(1);
expect(lessonSelection.props("modelValue")).toBeNull();
expect(courseSelection.props("modelValue")).toBeNull();
});
});
});
92 changes: 92 additions & 0 deletions src/components/lern-store/AddContentModalCourses.unit.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
// This test is necessary to ensure that the real Vuex course-store is functioning correctly.
// The course-store is only invoked at this point, making it crucial to test it here.
import AddContentModal from "./AddContentModal.vue";

import {
createTestingVuetify,
createTestingI18n,
} from "@@/tests/test-utils/setup";
import { VSelect } from "vuetify/lib/components/index.mjs";
import courses from "@/store/courses";
import { createStore } from "vuex";
import ContentModule from "@/store/content";
import setupStores from "@@/tests/test-utils/setupStores";
import { nextTick } from "vue";

const testProps = {
showCopyModal: true,
resource: {
title: "Test title",
url: "test url",
client: "test client",
},
contentId: "Test content",
items: [],
};

const courseOptions = [
{
_id: "id1",
name: "course1",
isArchived: false,
},
{
_id: "id2",
name: "course2",
isArchived: false,
},
];

const createMockStore = () => {
const mockStore = createStore({
modules: {
courses,
},
});
return { mockStore };
};

describe("AddContentModal with real Vuex courses-store", () => {
const setup = (props: {
showCopyModal: boolean;
resource: {
title: string;
url: string;
client: string;
};
contentId: string;
items?: Array<{
title: string;
url: string;
client: string;
}>;
}) => {
setupStores({
contentModule: ContentModule,
});
const { mockStore } = createMockStore();

const wrapper = mount(AddContentModal, {
global: {
plugins: [createTestingVuetify(), createTestingI18n()],
mocks: {
$store: mockStore,
},
},
props,
});

return { wrapper, mockStore };
};

it("should access the real courses store", async () => {
const { wrapper, mockStore } = setup(testProps);

mockStore.commit("courses/set", { items: courseOptions });
await nextTick();

const select = wrapper.findComponent(VSelect);
const items = select.props("items");
expect(items).toHaveLength(2);
});
});
Loading

0 comments on commit 9e18e0f

Please sign in to comment.