v-model: 68 | +| @input (v-model) | replaced by **@update:model-value** | 10 | +| **left** and **right** | **start** and **end** | 10 | +| small, medium, large | combined to **size** prop | > 20 | +| **dense** prop | changed to **density** with variants default, comfortable, compact | 19 | +| @input (v-model) | replaced by **@update:model-value** | 10 | +| activator
v-on
v-bind | replace with #activator={ props }
replace v-bind attrs with v-bind="props" | activator: ~6
v-on: ~16
v-bind: ~35 | + + +## v-menu + +https://vuetifyjs.com/en/components/menus/ + +| | Changes | Files probably affected in our code | +| ------------------ | ------------------------ | ----------------------------------- | +| offset-y, offset-x | removed, use offset prop | 2 | + +```html + +
v-list-item-icon: 8 | +| v-list-item-content | removed, lists used CSS grid for layout now instead | | +| inactive prop | prop has been replaced with **:active="false" :link="false"** | 4 | +| v-subheader | renamed to **v-list-subheader** | 1 | + +## v-list-item + +```html +
-> values 'elevated', 'flat', 'tonal', 'outlined', 'plain' and 'text' | outlined: ~2
text: ~10 | + +> **⚠️ Upgrade Notes:** +>- v-alert types(`warning`, `error`) icons are different in vuetify 3 -> talk to UX +>- to achieve the same alert look we had before: add `variant="tonal"` (when `text` was used) +>- `transition` prop has been removed, have to wrap the component into transition component +>- transitions need condition: v-if or v-show, see: https://vuejs.org/guide/built-ins/transition.html + + +## v-btn + +| | Changes | Files probably affected in our code | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- | +| fab | no longer supported, use **icon** prop or apply **.rounded-circle class** | 10 | +| flat / outlined / text / plain | combined into a single variant | flat:0, outlined: ~10, plain: ~4 | +| depressed | renamed to **variant="flat"** | ~30 | +| disabled | uses **faded** variant of specified color instead of grey, $button-colored-disabled sass variable can be set to false to use grey instead. | | + +> **⚠️ Upgrade Notes:** +>- Disabled buttons use a faded variant of the specified color instead of grey (#15147) +The `$button-colored-disabled` sass variable can be set to false to use grey instead. +-> Talk to UX what we want to use + +## inputs + +| | Changes | Files probably affected in our code | +| ---------------------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------- | +| prepend (slots) | prepend and prepend-inner are the same | | +| append (slots) | renamed to append-inner | ~1 | +| append-outer (slots) | append | 0 | +| Variant props filled/outlined/solo | combined into variant prop
-> values 'underlined', 'outlined', 'filled', 'solo', 'plain' | filled: 3
outlined: 0
solo: 5 | +| success, success-messages | **removed** | | +| validate-on-blur | renamed to validate-on="blur" | 4 | + +### v-text-field/ v-select/ v-autocomplete +> **⚠️ Upgrade Notes:** +> - vuetify 2: `underlined` was default and primary color was added +> - vuetify 3: `filled` is default and no color, so we need to add `variant="underlined"` (if we want to use the old default/ no other variant is used) + `color="primary"` + + +## v-checkbox/v-radio/v-switch + +| | Changes | Files probably affected in our code | +| --------------------- | --------------------------------------------------------- | ----------------------------------- | +| input-value | renamed to model-value | ~2 | +| v-checkbox label slot | v-checkbox label slot should not longer contain a
-
-
-
-
- custom header
-
- Hello I'm a modal, do you like to close me? Then just click outside of my box or the button below.
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src/components/base/_globals.js b/src/components/base/_globals.js
deleted file mode 100644
index 048633ed6a..0000000000
--- a/src/components/base/_globals.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// Globally register all base components for convenience, because they
-// will be used very frequently. Components are registered using the
-// PascalCased version of their file name.
-
-import Vue from "vue";
-import upperFirst from "lodash/upperFirst";
-import camelCase from "lodash/camelCase";
-
-export const mountBaseComponents = (
- globalComponentFiles,
- getComponentConfig
-) => {
- for (const fileName of globalComponentFiles) {
- // Get Component Name
- const componentName = fileName.match(/(\w+).vue$/)[1];
- // Is naming scheme valid?
- if (componentName !== upperFirst(camelCase(componentName))) {
- throw new Error(`${fileName} is not in PascalCase.`);
- }
- // Is it a Entrypoint?
- const isEntrypoint =
- fileName.startsWith(`./${componentName}.vue`) || // standalone component
- fileName.startsWith(`./${componentName}/`); // or root component of folder
- // Globally register the component
- if (isEntrypoint) {
- const componentConfig = getComponentConfig(fileName);
- Vue.component(componentName, componentConfig.default || componentConfig);
- }
- }
-};
-
-const mountWithWebpack = () => {
- // https://webpack.js.org/guides/dependency-management/#require-context
- const requireComponent = require.context(
- // Look for files in the current directory
- ".",
- // Do not look in subdirectories
- true,
- // Only include "Base" prefixed .vue files
- /Base\w+\.vue$/
- );
-
- mountBaseComponents(requireComponent.keys(), (fileName) =>
- requireComponent(fileName)
- );
-};
-
-if (process.env.JEST_WORKER_ID === undefined) {
- // don't use for tests (jest)
- mountWithWebpack();
-}
diff --git a/src/components/base/components.js b/src/components/base/components.js
new file mode 100644
index 0000000000..f30cc36bf4
--- /dev/null
+++ b/src/components/base/components.js
@@ -0,0 +1,17 @@
+import BaseDialog from "@/components/base/BaseDialog/BaseDialog.vue";
+import BaseInput from "@/components/base/BaseInput/BaseInput.vue";
+import BaseInputCheckbox from "@/components/base/BaseInput/BaseInputCheckbox.vue";
+import BaseInputDefault from "@/components/base/BaseInput/BaseInputDefault.vue";
+import BaseLink from "@/components/base/BaseLink.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseQrCode from "@/components/base/BaseQrCode.vue";
+
+export const mountBaseComponents = (app) => {
+ app.component("BaseDialog", BaseDialog);
+ app.component("BaseInput", BaseInput);
+ app.component("BaseInputCheckbox", BaseInputCheckbox);
+ app.component("BaseInputDefault", BaseInputDefault);
+ app.component("BaseLink", BaseLink);
+ app.component("BaseModal", BaseModal);
+ app.component("BaseQrCode", BaseQrCode);
+};
diff --git a/src/components/copy-result-modal/CopyResultModal.unit.ts b/src/components/copy-result-modal/CopyResultModal.unit.ts
index ae04d86482..6e2bcc4e45 100644
--- a/src/components/copy-result-modal/CopyResultModal.unit.ts
+++ b/src/components/copy-result-modal/CopyResultModal.unit.ts
@@ -1,42 +1,44 @@
import { CopyApiResponseTypeEnum } from "@/serverApi/v3";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { mount, MountOptions } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
import CopyResultModal from "./CopyResultModal.vue";
-import Vue from "vue";
-import { envConfigModule } from "@/store";
import setupStores from "@@/tests/test-utils/setupStores";
import EnvConfigModule from "@/store/env-config";
+import { envConfigModule } from "@/store";
import { Envs } from "@/store/types/env-config";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
-const geoGebraItem = {
+const mockGeoGebraItem = {
title: "GeoGebra Element Title",
type: CopyApiResponseTypeEnum.LessonContentGeogebra,
};
-const etherpadItem = {
+const mockEtherpadItem = {
title: "Etherpad Element Title",
type: CopyApiResponseTypeEnum.LessonContentEtherpad,
};
-const nexboardItem = {
+const mockNexboardItem = {
title: "Nexboard Element Title",
type: CopyApiResponseTypeEnum.LessonContentNexboard,
};
-const courseGroupItem = {
+const mockCourseGroupItem = {
title: "CourseGroup Group Example",
type: CopyApiResponseTypeEnum.CoursegroupGroup,
};
-const fileItem = {
+const mockFileItem = {
title: "File Error Example",
type: CopyApiResponseTypeEnum.File,
};
const mockResultItems = (
elements = [
- geoGebraItem,
- etherpadItem,
- courseGroupItem,
- nexboardItem,
- fileItem,
+ mockGeoGebraItem,
+ mockEtherpadItem,
+ mockNexboardItem,
+ mockCourseGroupItem,
+ mockFileItem,
]
) => {
return [
@@ -50,25 +52,23 @@ const mockResultItems = (
];
};
-const getWrapper = (props?: any) => {
- const wrapper = mount(CopyResultModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isLoading: false,
- copyResultItems: mockResultItems(),
- ...props,
- },
- });
+describe("@/components/copy-result-modal/CopyResultModal", () => {
+ const createWrapper = (options = {}) => {
+ const wrapper = mount(CopyResultModal, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props: {
+ isOpen: false,
+ copyResultItems: mockResultItems(),
+ ...options,
+ },
+ });
- return wrapper;
-};
+ return wrapper;
+ };
-describe("@/components/copy-result-modal/CopyResultModal", () => {
beforeAll(() => {
- // Avoids console warnings "[Vuetify] Unable to locate target [data-app]"
- document.body.setAttribute("data-app", "true");
setupStores({
envConfigModule: EnvConfigModule,
});
@@ -80,7 +80,7 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
describe("basic functions", () => {
it("Should render component", () => {
- const wrapper = getWrapper();
+ const wrapper = createWrapper();
expect(wrapper.findComponent(CopyResultModal).exists()).toBe(true);
});
@@ -88,33 +88,42 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
describe("isOpen", () => {
it("should be closed by default", () => {
- const wrapper = getWrapper();
+ const wrapper = createWrapper();
+
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const title = dialog.findComponent('[data-testid="dialog-title"');
- expect(wrapper.find(".v-dialog__content").exists()).toBe(false);
+ expect(dialog.vm.isOpen).toBe(false);
+ expect(title.exists()).toBe(false);
});
it("should be open when is-open property is true", () => {
- const wrapper = getWrapper({ isOpen: true });
+ const wrapper = createWrapper({ isOpen: true });
+
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const title = dialog.findComponent('[data-testid="dialog-title"');
- expect(wrapper.find(".v-dialog__content").exists()).toBe(true);
+ expect(dialog.vm.isOpen).toBe(true);
+ expect(title.exists()).toBe(true);
});
});
describe("title", () => {
it("should show partial-title when copy was partially successful", () => {
- const wrapper = getWrapper({ isOpen: true });
+ const wrapper = createWrapper({ isOpen: true });
- const headline = wrapper.find('[data-testid="dialog-title"]').text();
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const headline = dialog
+ .findComponent('[data-testid="dialog-title"]')
+ .text();
- expect(headline).toContain(
- wrapper.vm.$i18n.t("components.molecules.copyResult.title.partial")
- );
+ expect(headline).toBe("components.molecules.copyResult.title.partial");
});
});
describe("dialog-closed", () => {
- it("should forward the dialog-closed event of the wrapped dialog", async () => {
- const wrapper = getWrapper({ isOpen: true });
+ it("should forward the dialog-closed event of the wrapped dialog", () => {
+ const wrapper = createWrapper({ isOpen: true });
const dialog = wrapper.findComponent(vCustomDialog);
dialog.vm.$emit("dialog-closed");
@@ -127,39 +136,41 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
it("should render coursefiles info if root item is a Course and has no failed file ", () => {
const copyResultItems = mockResultItems([]);
- const wrapper = getWrapper({
+ const wrapper = createWrapper({
isOpen: true,
copyResultItems,
copyResultRootItemType: CopyApiResponseTypeEnum.Course,
});
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(
- wrapper.vm.$i18n.t("components.molecules.copyResult.courseFiles.info")
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
+
+ expect(content).toContain(
+ "components.molecules.copyResult.courseFiles.info"
);
});
it("should render ctl tools info if root item is a Course and has no failed file ", () => {
const copyResultItems = mockResultItems([]);
envConfigModule.setEnvs({ FEATURE_CTL_TOOLS_TAB_ENABLED: true } as Envs);
- const wrapper = getWrapper({
+ const wrapper = createWrapper({
isOpen: true,
copyResultItems,
copyResultRootItemType: CopyApiResponseTypeEnum.Course,
});
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(
- wrapper.vm.$i18n.t("components.molecules.copyResult.ctlTools.info")
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
+
+ expect(content).toContain(
+ "components.molecules.copyResult.ctlTools.info"
);
});
describe("when root item is a Course, has no failed file and CTL_TOOLS_COPY feature flag is enabled", () => {
const setup = () => {
const copyResultItems = mockResultItems([]);
- const wrapper = getWrapper({
+ const wrapper = createWrapper({
isOpen: true,
copyResultItems,
copyResultRootItemType: CopyApiResponseTypeEnum.Course,
@@ -175,49 +186,50 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
} as Envs);
const { wrapper } = setup();
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(
- wrapper.vm.$i18n.t(
- "components.molecules.copyResult.ctlTools.withFeature.info"
- )
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
+
+ expect(content).toContain(
+ "components.molecules.copyResult.ctlTools.withFeature.info"
);
});
});
it("should merge file error and coursefiles info if root item is a Course and has a failed file ", () => {
- const copyResultItems = mockResultItems([fileItem]);
+ const copyResultItems = mockResultItems([mockFileItem]);
- const wrapper = getWrapper({
+ const wrapper = createWrapper({
isOpen: true,
copyResultItems,
copyResultRootItemType: CopyApiResponseTypeEnum.Course,
});
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(
- wrapper.vm.$i18n.t("components.molecules.copyResult.courseFiles.info") +
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
+
+ expect(content).toContain(
+ "components.molecules.copyResult.courseFiles.info" +
" " +
- wrapper.vm.$i18n.t("components.molecules.copyResult.fileCopy.error")
+ "components.molecules.copyResult.fileCopy.error"
);
});
it.each([[CopyApiResponseTypeEnum.Lesson], [CopyApiResponseTypeEnum.Task]])(
"should render file error info if root item is a %s and has a failed file",
(copyResultRootItemType) => {
- const copyResultItems = mockResultItems([fileItem]);
+ const copyResultItems = mockResultItems([mockFileItem]);
- const wrapper = getWrapper({
+ const wrapper = createWrapper({
isOpen: true,
copyResultItems,
copyResultRootItemType,
});
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(
- wrapper.vm.$i18n.t("components.molecules.copyResult.fileCopy.error")
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
+
+ expect(content).toContain(
+ "components.molecules.copyResult.fileCopy.error"
);
}
);
@@ -240,11 +252,12 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
},
];
- const wrapper = getWrapper({ isOpen: true, copyResultItems });
+ const wrapper = createWrapper({ isOpen: true, copyResultItems });
+
+ const dialog = wrapper.findComponent(vCustomDialog);
+ const content = dialog.findComponent(".v-card-text").text();
- expect(
- wrapper.find('[data-testid="copy-result-notifications"]').text()
- ).toContain(title);
+ expect(content).toContain(title);
});
});
});
diff --git a/src/components/copy-result-modal/CopyResultModal.vue b/src/components/copy-result-modal/CopyResultModal.vue
index a97d8c85e0..90fc81d507 100644
--- a/src/components/copy-result-modal/CopyResultModal.vue
+++ b/src/components/copy-result-modal/CopyResultModal.vue
@@ -7,15 +7,15 @@
:buttons="['close']"
@dialog-closed="onDialogClosed"
>
-
-
-
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
+
-
- {{ $t("components.molecules.copyResult.title.partial") }}
-
+
+
+ {{ $t("components.molecules.copyResult.title.partial") }}
+
+
-
+
-
+
{{ mdiAlert }}
@@ -24,7 +24,7 @@
-
+
(CopyResultModalList as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- stubs: {
- CopyResultModalListItem: true,
+const createWrapper = (props: object) => {
+ return mount(CopyResultModalList, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
- ...opts,
+ props,
});
};
describe("@/components/copy-result-modal/CopyResultModalList", () => {
it("Should render component", () => {
- const wrapper = getWrapper({ propsData: { items: mockItems } });
+ const wrapper = createWrapper({ items: mockItems });
expect(wrapper.findComponent(CopyResultModalList).exists()).toBe(true);
});
it("Should render the correct number of items", () => {
- const wrapper = getWrapper({ propsData: { items: mockItems } });
+ const wrapper = createWrapper({ items: mockItems });
expect(wrapper.findAllComponents(CopyResultModalListItem).length).toBe(2);
});
it("Should pass item props to the child components", () => {
- const wrapper = getWrapper({ propsData: { items: mockItems } });
+ const wrapper = createWrapper({ items: mockItems });
const itemWrappers = wrapper.findAllComponents(CopyResultModalListItem);
- expect(itemWrappers.at(0).props()).toEqual({ item: mockItems[0] });
- expect(itemWrappers.at(1).props()).toEqual({ item: mockItems[1] });
+ expect(itemWrappers[0].props()).toEqual({ item: mockItems[0] });
+ expect(itemWrappers[1].props()).toEqual({ item: mockItems[1] });
});
});
diff --git a/src/components/copy-result-modal/CopyResultModalListItem.unit.ts b/src/components/copy-result-modal/CopyResultModalListItem.unit.ts
index cb64bb9019..462360d895 100644
--- a/src/components/copy-result-modal/CopyResultModalListItem.unit.ts
+++ b/src/components/copy-result-modal/CopyResultModalListItem.unit.ts
@@ -1,9 +1,11 @@
import { CopyApiResponseTypeEnum } from "@/serverApi/v3";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import CopyResultModalListItem from "@/components/copy-result-modal/CopyResultModalListItem.vue";
import { CopyResultItem } from "@/components/copy-result-modal/types/CopyResultItem";
-import { mount, MountOptions } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const mockItem: CopyResultItem = {
type: CopyApiResponseTypeEnum.Lesson,
@@ -19,49 +21,53 @@ const mockItem: CopyResultItem = {
type: CopyApiResponseTypeEnum.LessonContentNexboard,
},
],
-
+
url: "/courses/courseId/topics/elementId/edit?returnUrl=rooms/courseId",
};
-const getWrapper = (props: object) => {
- return mount(CopyResultModalListItem as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: props,
- mocks: {},
+const createWrapper = (props: object) => {
+ return mount(CopyResultModalListItem, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props,
});
};
describe("@/components/copy-result-modal/CopyResultModalListItem", () => {
it("Should render component", () => {
- const wrapper = getWrapper({ item: mockItem });
+ const wrapper = createWrapper({ item: mockItem });
expect(wrapper.findComponent(CopyResultModalListItem).exists()).toBe(true);
});
it("should render the element with the correct element title", () => {
- const wrapper = getWrapper({ item: mockItem });
+ const wrapper = createWrapper({ item: mockItem });
+ // console.log(wrapper.html())
const elementTitle = wrapper.find("ul > li").text();
- expect(elementTitle).toContain("GeoGebra");
+ expect(elementTitle).toContain(
+ "components.molecules.copyResult.label.geogebra"
+ );
expect(elementTitle).toContain("Geogebra Element Title");
});
it("should render the elements with the correct element title", () => {
- const wrapper = getWrapper({ item: mockItem });
- const elementTitles = wrapper
- .findAll("ul > li")
- .wrappers.map((el) => el.text());
+ const wrapper = createWrapper({ item: mockItem });
+ const elementTitles = wrapper.findAll("ul > li").map((el) => el.text());
- expect(elementTitles[0]).toContain("GeoGebra");
+ expect(elementTitles[0]).toContain(
+ "components.molecules.copyResult.label.geogebra"
+ );
expect(elementTitles[0]).toContain("Geogebra Element Title");
- expect(elementTitles[1]).toContain("NeXboard");
+ expect(elementTitles[1]).toContain(
+ "components.molecules.copyResult.label.nexboard"
+ );
expect(elementTitles[1]).toContain("Nexboard Element Title");
});
it("should render the correct link", () => {
- const wrapper = getWrapper({ item: mockItem });
+ const wrapper = createWrapper({ item: mockItem });
const parentInfoLink = wrapper.find("a");
expect(parentInfoLink.text()).toBe("Lesson Title");
@@ -69,7 +75,7 @@ describe("@/components/copy-result-modal/CopyResultModalListItem", () => {
});
it("should translate types", () => {
- const wrapper = getWrapper({ item: mockItem });
+ const wrapper = createWrapper({ item: mockItem });
const map = [
[CopyApiResponseTypeEnum.Board, "common.words.learnContent"],
@@ -154,9 +160,7 @@ describe("@/components/copy-result-modal/CopyResultModalListItem", () => {
];
map.forEach(([constant, languageConstant]) => {
- expect(wrapper.vm.getElementTypeName(constant)).toBe(
- wrapper.vm.$i18n.t(languageConstant)
- );
+ expect(wrapper.vm.getElementTypeName(constant)).toBe(languageConstant);
});
});
});
diff --git a/src/components/copy-result-modal/CopyResultModalListItem.vue b/src/components/copy-result-modal/CopyResultModalListItem.vue
index bb18c07a5c..bc4bc665e2 100644
--- a/src/components/copy-result-modal/CopyResultModalListItem.vue
+++ b/src/components/copy-result-modal/CopyResultModalListItem.vue
@@ -1,12 +1,12 @@
{{ $t("components.molecules.copyResult.information") }}
- = mount(
- ExternalToolConfigurator as MountOptions,
- {
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- },
- propsData: {
- ...propsData,
- },
- }
- );
+ const wrapper = mount(ExternalToolConfigurator, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props,
+ });
return {
wrapper,
@@ -67,15 +58,13 @@ describe("ExternalToolConfigurator", () => {
templates: [template],
});
- const openSelect = async (wrapper: Wrapper) => {
+ const openSelect = async (wrapper: VueWrapper) => {
await wrapper
.find('[data-testId="configuration-select"]')
.trigger("click");
await wrapper
- .find(".menuable__content__active")
- .findAll(".v-list-item")
- .at(0)
+ .find(".menuable__content__active .v-list-item:firstChild")
.trigger("click");
};
@@ -130,7 +119,9 @@ describe("ExternalToolConfigurator", () => {
it("should disable the selection", async () => {
const { wrapper } = setup();
- const select = wrapper.find('[data-testId="configuration-select"]');
+ const select = wrapper
+ .findComponent('[data-testId="configuration-select"]')
+ .get("input");
expect(select.attributes("disabled")).toBeDefined();
});
@@ -138,11 +129,9 @@ describe("ExternalToolConfigurator", () => {
it("should display the edited tool in the selection", async () => {
const { wrapper, template } = setup();
- const selectionRow = wrapper.find(".row");
+ const selectionRow = wrapper.find(".v-autocomplete .v-list-item-title");
- expect(selectionRow.find("span").text()).toEqual(
- expect.stringContaining(template.name)
- );
+ expect(selectionRow.text()).toEqual(template.name);
});
});
});
@@ -155,7 +144,9 @@ describe("ExternalToolConfigurator", () => {
schoolExternalToolConfigurationTemplateFactory.buildList(1),
});
- await wrapper.find('[data-testId="cancel-button"]').vm.$emit("click");
+ await wrapper
+ .findComponent('[data-testId="cancel-button"]')
+ .trigger("click");
expect(wrapper.emitted("cancel")).toBeDefined();
});
@@ -171,8 +162,9 @@ describe("ExternalToolConfigurator", () => {
configuration: schoolExternalToolFactory.build(),
});
- wrapper.find('[data-testId="save-button"]').vm.$emit("click");
- await Vue.nextTick();
+ await wrapper
+ .findComponent('[data-testId="save-button"]')
+ .trigger("click");
expect(wrapper.emitted("save")).toBeDefined();
});
diff --git a/src/components/external-tools/configuration/ExternalToolConfigurator.vue b/src/components/external-tools/configuration/ExternalToolConfigurator.vue
index 46668524a5..b1e11484a4 100644
--- a/src/components/external-tools/configuration/ExternalToolConfigurator.vue
+++ b/src/components/external-tools/configuration/ExternalToolConfigurator.vue
@@ -1,32 +1,34 @@
@@ -47,29 +49,29 @@
v-model="parameterConfiguration"
/>
- {{ t(getBusinessErrorTranslationKey(error)) }}
+
+ {{ $t(getBusinessErrorTranslationKey(error)!) }}
- {{ t("common.actions.cancel") }}
+ {{ $t("common.actions.cancel") }}
{{
- isInEditMode ? t("common.actions.update") : t("common.actions.add")
+ isInEditMode ? $t("common.actions.update") : $t("common.actions.add")
}}
@@ -79,7 +81,6 @@
-
-
diff --git a/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.unit.ts b/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.unit.ts
index 67b028b3c7..b8e3a9c08c 100644
--- a/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.unit.ts
@@ -1,14 +1,13 @@
-import { I18N_KEY } from "@/utils/inject";
-import { fileElementResponseFactory, i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { ColorOverlay } from "@ui-color-overlay";
-import { shallowMount } from "@vue/test-utils";
+import { fileElementResponseFactory } from "@@/tests/test-utils";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
import PdfDisplay from "./PdfDisplay.vue";
describe("PdfDisplay", () => {
const setup = (props: { isEditMode: boolean }) => {
- document.body.setAttribute("data-app", "true");
-
const element = fileElementResponseFactory.build();
const propsData = {
src: "url/1/file-record #1.txt",
@@ -18,12 +17,12 @@ describe("PdfDisplay", () => {
isEditMode: props.isEditMode,
};
- const wrapper = shallowMount(PdfDisplay, {
+ const wrapper = mount(PdfDisplay, {
attachTo: document.body,
propsData,
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ stubs: { PreviewImage: true },
},
});
@@ -39,7 +38,7 @@ describe("PdfDisplay", () => {
it("should display image with correct props", () => {
const { wrapper, previewSrc, nameProp } = setup({ isEditMode: false });
- const image = wrapper.find("previewimage-stub");
+ const image = wrapper.find("preview-image-stub");
expect(image.exists()).toBe(true);
expect(image.attributes("src")).toBe(previewSrc);
@@ -49,23 +48,15 @@ describe("PdfDisplay", () => {
expect(image.attributes("aspectratio")).toBe("1.77777");
});
- it("should render color overlay with correct props", () => {
- const { wrapper } = setup({ isEditMode: false });
-
- const colorOverlay = wrapper.findComponent(ColorOverlay);
-
- expect(colorOverlay.exists()).toBe(true);
- expect(colorOverlay.props("color")).toBe("var(--v-black-base)");
- });
-
- describe("when color overlay emits on:action", () => {
+ describe("when div emits click", () => {
it("should call open function", () => {
const { wrapper, src } = setup({ isEditMode: false });
const windowOpenSpy = jest.spyOn(window, "open");
- const colorOverlay = wrapper.findComponent(ColorOverlay);
- colorOverlay.vm.$emit("on:action");
+ const image = wrapper.find("preview-image-stub");
+ expect(image.exists()).toBe(true);
+ image.trigger("click");
expect(windowOpenSpy).toHaveBeenCalledTimes(1);
expect(windowOpenSpy).toHaveBeenCalledWith(src, "_blank");
diff --git a/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.vue b/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.vue
index 09cd95ad28..dce17a7fd7 100644
--- a/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/pdf-display/PdfDisplay.vue
@@ -1,30 +1,27 @@
-
-
-
-
+
+
+
-
-
diff --git a/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.unit.ts b/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.unit.ts
index 77d377d295..c99527dc51 100644
--- a/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.unit.ts
@@ -3,19 +3,16 @@ import VideoDisplay from ".//VideoDisplay.vue";
describe("VideoDisplay", () => {
const setup = () => {
- document.body.setAttribute("data-app", "true");
-
const src = "test-source";
const name = "test-name";
const slotContent = "test-slot-content";
- const propsData = {
+ const props = {
src,
name,
};
const wrapper = mount(VideoDisplay, {
- attachTo: document.body,
- propsData,
+ props,
slots: {
default: slotContent,
},
@@ -41,7 +38,7 @@ describe("VideoDisplay", () => {
const video = wrapper.find("video");
expect(video.attributes("src")).toBe(src);
expect(video.attributes("alt")).toBe(name);
- expect(video.attributes("controls")).toBe("controls");
+ expect(video.attributes("controls")).toBe("");
expect(video.attributes("controlslist")).toBe("nodownload");
expect(video.attributes("loading")).toBe("lazy");
});
diff --git a/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue b/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue
index 0f50d14279..c92319d246 100644
--- a/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue
@@ -17,8 +17,8 @@
diff --git a/src/components/feature-board-link-element/components/LinkContentElementCreate.unit.ts b/src/components/feature-board-link-element/components/LinkContentElementCreate.unit.ts
index 80265ed49a..eadf6b07e1 100644
--- a/src/components/feature-board-link-element/components/LinkContentElementCreate.unit.ts
+++ b/src/components/feature-board-link-element/components/LinkContentElementCreate.unit.ts
@@ -1,139 +1,101 @@
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { createMock } from "@golevelup/ts-jest";
-import { mount, MountOptions } from "@vue/test-utils";
-import Vue, { nextTick } from "vue";
-import { createModuleMocks } from "@/utils/mock-store-module";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { envConfigModule } from "@/store";
import EnvConfigModule from "@/store/env-config";
-import { Envs } from "@/store/types/env-config";
import LinkContentElementCreate from "./LinkContentElementCreate.vue";
-
-const mockedEnvConfigModule = createModuleMocks(EnvConfigModule, {
- getEnv: createMock({
- FEATURE_COLUMN_BOARD_SUBMISSIONS_ENABLED: true,
- FEATURE_COLUMN_BOARD_LINK_ELEMENT_ENABLED: true,
- FEATURE_COLUMN_BOARD_EXTERNAL_TOOLS_ENABLED: true,
- }),
-});
+import {
+ createTestingVuetify,
+ createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import setupStores from "@@/tests/test-utils/setupStores";
+import { Envs } from "@/store/types/env-config";
const VALID_URL = "https://www.abc.de/my-article";
const INVALID_URL = "my-article";
-describe("LinkContentElementCreate", () => {
+describe(LinkContentElementCreate.name, () => {
+ beforeEach(() => {
+ setupStores({
+ envConfigModule: EnvConfigModule,
+ });
+ });
+
afterEach(() => {
jest.clearAllMocks();
});
const setup = () => {
- const wrapper = mount(LinkContentElementCreate as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- [ENV_CONFIG_MODULE_KEY.valueOf()]: mockedEnvConfigModule,
- },
- });
-
- const insertUrl = (url: string) => {
- const textAreaComponent = wrapper.findComponent({ name: "v-textarea" });
- textAreaComponent.vm.$emit("input", url);
- };
+ envConfigModule.setEnvs({
+ FEATURE_COLUMN_BOARD_LINK_ELEMENT_ENABLED: true,
+ } as Envs);
- const submitByClick = async () => {
- const button = wrapper.find("button");
- await button.trigger("click");
- await nextTick();
- };
-
- const submitByEnter = async () => {
- const textAreaComponent = wrapper.findComponent({ name: "v-textarea" });
- textAreaComponent.vm.$emit(
- "keydown",
- new KeyboardEvent("keydown", {
- key: "Enter",
- keyCode: 13,
- })
- );
- await nextTick();
- };
-
- const hasEmitted = (eventName: string): string | false => {
- const emitted = wrapper.emitted(eventName);
- return emitted ? emitted[0][0] : false;
- };
-
- const areRulesActive = () => {
- const rulesProperty = wrapper
- .findComponent({ name: "v-textarea" })
- .props("rules");
- return typeof rulesProperty === "function";
- };
+ const wrapper = mount(LinkContentElementCreate, {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ });
return {
wrapper,
- insertUrl,
- submitByClick,
- submitByEnter,
- hasEmitted,
- areRulesActive,
};
};
describe("when valid url was entered", () => {
describe("when enter is pressed", () => {
it("should not show error-message", async () => {
- const { wrapper, insertUrl, submitByClick } = setup();
+ const { wrapper } = setup();
- insertUrl(VALID_URL);
- await submitByClick();
+ await wrapper.findComponent({ name: "v-textarea" }).setValue(VALID_URL);
+ await wrapper.find("form").trigger("submit.prevent");
const alerts = wrapper.find('[role="alert"]');
- expect(alerts.exists()).toBe(false);
+ expect(alerts.text()).toBe("");
});
it("should emit create:url event", async () => {
- const { insertUrl, submitByEnter, hasEmitted } = setup();
+ const { wrapper } = setup();
- insertUrl(VALID_URL);
- await submitByEnter();
+ await wrapper.findComponent({ name: "v-textarea" }).setValue(VALID_URL);
+ await wrapper
+ .findComponent({ name: "v-textarea" })
+ .trigger("keydown.enter");
+ await nextTick();
- expect(hasEmitted("create:url")).toEqual(VALID_URL);
+ expect(wrapper.emitted("create:url")).toEqual([[VALID_URL]]);
});
});
});
describe("when invalid url was entered", () => {
it("should not be validated during input", async () => {
- const { wrapper, insertUrl } = setup();
+ const { wrapper } = setup();
- insertUrl(INVALID_URL);
+ await wrapper.findComponent({ name: "v-textarea" }).setValue(INVALID_URL);
await nextTick();
const alerts = wrapper.find('[role="alert"]');
- expect(alerts.exists()).toBe(false);
+ expect(alerts.text()).toBe("");
});
describe("when enter is pressed", () => {
it("should show invalid-url-error", async () => {
- const { wrapper, insertUrl, submitByEnter } = setup();
+ const { wrapper } = setup();
- insertUrl(INVALID_URL);
- await submitByEnter();
+ const textarea = await wrapper.findComponent({ name: "v-textarea" });
+ await textarea.setValue(INVALID_URL);
+ await textarea.trigger("keydown.enter");
const alerts = wrapper.find('[role="alert"]').text();
- expect(alerts).toEqual(
- expect.stringContaining("util-validators-invalid-url")
- );
+ expect(alerts).toEqual("util-validators-invalid-url");
});
it("should not emit create:url event", async () => {
- const { wrapper, insertUrl, submitByEnter } = setup();
+ const { wrapper } = setup();
- insertUrl(INVALID_URL);
- await submitByEnter();
+ const textarea = await wrapper.findComponent({ name: "v-textarea" });
+ await textarea.setValue(INVALID_URL);
+ await textarea.trigger("keydown.enter");
const emitted = wrapper.emitted("create:url");
expect(emitted).toBeUndefined();
@@ -144,23 +106,22 @@ describe("LinkContentElementCreate", () => {
describe("when url field is empty", () => {
describe("when submit button is clicked", () => {
it("should show required-error-message", async () => {
- const { wrapper, submitByEnter } = setup();
+ const { wrapper } = setup();
- await submitByEnter();
+ await wrapper.find("form").trigger("submit.prevent");
const alerts = wrapper.find('[role="alert"]').text();
- expect(alerts).toEqual(
- expect.stringContaining("common.validation.required2")
- );
+
+ expect(alerts).toEqual("common.validation.required2");
});
it("should not emit create:url event", async () => {
- const { wrapper, submitByClick } = setup();
+ const { wrapper } = setup();
- await submitByClick();
+ await wrapper.findComponent({ name: "v-textarea" }).setValue(VALID_URL);
+ await wrapper.find("form").trigger("submit.prevent");
- const emitted = wrapper.emitted("create:url");
- expect(emitted).toBeUndefined();
+ expect(wrapper.emitted("create:url")).toBeUndefined();
});
});
});
diff --git a/src/components/feature-board-link-element/components/LinkContentElementCreate.vue b/src/components/feature-board-link-element/components/LinkContentElementCreate.vue
index a7ea449780..8f89714aee 100644
--- a/src/components/feature-board-link-element/components/LinkContentElementCreate.vue
+++ b/src/components/feature-board-link-element/components/LinkContentElementCreate.vue
@@ -1,46 +1,45 @@
-
-
-
+
-
diff --git a/src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts b/src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts
index 9b80b8daf2..ae866e1c31 100644
--- a/src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts
+++ b/src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts
@@ -1,7 +1,5 @@
import * as useExternalToolUtilsComposable from "@/composables/external-tool-mappings.composable";
-import { mount, MountOptions, Wrapper } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import Vue from "vue";
+import { VueWrapper, mount } from "@vue/test-utils";
import {
schoolExternalToolConfigurationTemplateFactory,
schoolExternalToolFactory,
@@ -12,9 +10,12 @@ import {
} 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 { i18nMock } from "@@/tests/test-utils";
import ExternalToolConfigurator from "./ExternalToolConfigurator.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { VBtn } from "vuetify/lib/components/index.mjs";
describe("ExternalToolConfigurator", () => {
jest
@@ -24,28 +25,18 @@ describe("ExternalToolConfigurator", () => {
getBusinessErrorTranslationKey: () => "",
});
- const getWrapper = (propsData: {
+ const getWrapper = (props: {
templates: ExternalToolConfigurationTemplate[];
configuration?: SchoolExternalTool | ContextExternalTool;
error?: BusinessError;
loading?: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
-
- const wrapper: Wrapper
{{ elementTypeName }} ·
{{ breadcrumbTitle }}
- - {{ getElementType(e) }} · {{ getElementTitle(e) }} diff --git a/src/components/data-board/BoardPageInformation.composable.ts b/src/components/data-board/BoardPageInformation.composable.ts index 7f2c362788..9d1bc5018e 100644 --- a/src/components/data-board/BoardPageInformation.composable.ts +++ b/src/components/data-board/BoardPageInformation.composable.ts @@ -1,14 +1,9 @@ -import { useI18n } from "@/composables/i18n.composable"; -import { createTestableSharedComposable } from "@/utils/create-shared-composable"; import { buildPageTitle } from "@/utils/pageTitle"; import { ref, Ref } from "vue"; import { useBoardApi } from "./BoardApi.composable"; - -export type BoardBreadcrumb = { - text: string | undefined; - to?: string; - disabled?: boolean; -}; +import { useI18n } from "vue-i18n"; +import { Breadcrumb } from "../templates/default-wireframe.types"; +import { createSharedComposable } from "@vueuse/core"; const useBoardPageInformation = () => { const { t } = useI18n(); @@ -23,20 +18,22 @@ const useBoardPageInformation = () => { }; const pageTitle: Ref
+
+
+
- ;
const notifierModule = createModuleMocks(NotifierModule);
const setup = (props: {
element: RichTextElementResponse;
isEditMode: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
+ const wrapper = mount(RichTextContentElementComponent, {
+ propsData: props,
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: { [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule },
+ },
+ });
- wrapper = shallowMount(
- RichTextContentElementComponent as MountOptions,
- {
- ...createComponentMocks({}),
- propsData: props,
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
- },
- }
- );
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should render display if isEditMode is false", () => {
- setup({
+ const { wrapper } = setup({
element: TEST_ELEMENT,
isEditMode: false,
});
@@ -75,7 +72,7 @@ describe("RichTextContentElement", () => {
});
it("should render edit if isEditMode is true", () => {
- setup({
+ const { wrapper } = setup({
element: TEST_ELEMENT,
isEditMode: true,
});
@@ -85,7 +82,7 @@ describe("RichTextContentElement", () => {
});
it("should call deleteElement when it receives delete:element event from edit component", async () => {
- setup({
+ const { wrapper } = setup({
element: TEST_ELEMENT,
isEditMode: true,
});
@@ -95,10 +92,12 @@ describe("RichTextContentElement", () => {
);
richTextContentElementEditComponent.vm.$emit("delete:element");
await wrapper.vm.$nextTick();
- const emitted = wrapper.emitted()["delete:element"] ?? [];
+ const emitted = wrapper.emitted("delete:element");
- expect(emitted).toHaveLength(1);
- expect(emitted[0][0]).toStrictEqual("test-id");
+ if (emitted) {
+ expect(emitted).toHaveLength(1);
+ expect(emitted[0][0]).toStrictEqual("test-id");
+ }
});
});
});
diff --git a/src/components/feature-board-text-element/RichTextContentElement.vue b/src/components/feature-board-text-element/RichTextContentElement.vue
index 9f961cc680..2d37888841 100644
--- a/src/components/feature-board-text-element/RichTextContentElement.vue
+++ b/src/components/feature-board-text-element/RichTextContentElement.vue
@@ -66,7 +66,7 @@ export default defineComponent({
padding: 0.05px; // prevent margin collapse
}
-::v-deep {
+:deep() {
.ck.ck-editor__editable_inline {
padding: 0;
}
diff --git a/src/components/feature-board-text-element/RichTextContentElementDisplay.unit.ts b/src/components/feature-board-text-element/RichTextContentElementDisplay.unit.ts
index 44b7d1724d..1a39497b06 100644
--- a/src/components/feature-board-text-element/RichTextContentElementDisplay.unit.ts
+++ b/src/components/feature-board-text-element/RichTextContentElementDisplay.unit.ts
@@ -1,30 +1,33 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, mount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { RenderHTML } from "@feature-render-html";
+import { mount } from "@vue/test-utils";
+import vueDompurifyHTMLPlugin from "vue-dompurify-html";
import RichTextContentElementDisplay from "./RichTextContentElementDisplay.vue";
describe("RichTextContentElementDisplay", () => {
- let wrapper: Wrapper;
-
- const setup = (props: { value?: string }) => {
- document.body.setAttribute("data-app", "true");
- wrapper = mount(RichTextContentElementDisplay as MountOptions, {
- ...createComponentMocks({}),
- propsData: props,
+ const setup = (options: { value: string }) => {
+ const wrapper = mount(RichTextContentElementDisplay, {
+ props: {
+ ...options,
+ },
+ global: {
+ plugins: [vueDompurifyHTMLPlugin],
+ },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ value: "test value" });
- expect(
- wrapper.findComponent(RichTextContentElementDisplay).exists()
- ).toBe(true);
+ const { wrapper } = setup({ value: "test value" });
+ const content = wrapper.findComponent(RichTextContentElementDisplay);
+ expect(content.exists()).toBe(true);
});
it("should pass props to ck-editor component", () => {
- setup({ value: "test value" });
- expect(wrapper.text()).toStrictEqual("test value");
+ const { wrapper } = setup({ value: "test value" });
+ const editorComponent = wrapper.findComponent(RenderHTML);
+ expect(editorComponent.text()).toStrictEqual("test value");
});
});
});
diff --git a/src/components/feature-board-text-element/RichTextContentElementEdit.unit.ts b/src/components/feature-board-text-element/RichTextContentElementEdit.unit.ts
index a3acbeffef..ec75df1741 100644
--- a/src/components/feature-board-text-element/RichTextContentElementEdit.unit.ts
+++ b/src/components/feature-board-text-element/RichTextContentElementEdit.unit.ts
@@ -1,38 +1,42 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
import RichTextContentElementEdit from "./RichTextContentElementEdit.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
describe("RichTextContentElementEdit", () => {
- let wrapper: Wrapper;
-
- const setup = (props: { value: string; autofocus: boolean }) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(RichTextContentElementEdit as MountOptions, {
- ...createComponentMocks({}),
- propsData: props,
+ const setup = (options: { value: string; autofocus: boolean }) => {
+ const wrapper = mount(RichTextContentElementEdit, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props: {
+ ...options,
+ },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ value: "test value", autofocus: false });
- expect(wrapper.findComponent(RichTextContentElementEdit).exists()).toBe(
- true
- );
+ const { wrapper } = setup({ value: "test value", autofocus: false });
+ const content = wrapper.findComponent(RichTextContentElementEdit);
+ expect(content.exists()).toBe(true);
});
it("should pass props to ck-editor component", async () => {
- setup({ value: "test value", autofocus: true });
-
- const ckEditor = wrapper.findComponent({ name: "ck-editor" });
-
- expect(ckEditor.props("value")).toStrictEqual("test value");
+ const { wrapper } = setup({ value: "test value", autofocus: true });
+ const ckEditorComponent = wrapper.findComponent({ name: "ck-editor" });
+ const ckEditorValue = ckEditorComponent.findComponent({
+ name: "ckeditor",
+ }).vm.modelValue;
+ expect(ckEditorValue).toStrictEqual("test value");
});
it("should emit delete:element on CK editor keyboard delete event", async () => {
- setup({ value: "test value", autofocus: true });
-
+ const { wrapper } = setup({ value: "test value", autofocus: true });
const ckEditor = wrapper.findComponent({ name: "ck-editor" });
ckEditor.vm.$emit("keyboard:delete");
diff --git a/src/components/feature-board-text-element/RichTextContentElementEdit.vue b/src/components/feature-board-text-element/RichTextContentElementEdit.vue
index 3cf9503924..a1f991d3d8 100644
--- a/src/components/feature-board-text-element/RichTextContentElementEdit.vue
+++ b/src/components/feature-board-text-element/RichTextContentElementEdit.vue
@@ -3,9 +3,7 @@
{
+ return {
+ useBoardNotifier: jest.fn(),
+ useSharedLastCreatedElement: jest.fn(),
+ extractDataAttribute: jest.fn(() => "column-id"),
+ };
+});
const mockedUseBoardNotifier = jest.mocked(useBoardNotifier);
+const mockedUseCardState = jest.mocked(useCardState);
jest.mock("@/utils/pageTitle", () => ({
buildPageTitle: (pageTitle) => pageTitle ?? "",
}));
-const $route: Route = {
- params: {
- id: "a1b2c3",
- },
- path: "/rooms/a1b2c3/board",
- fullPath: "/rooms/a1b2c3/board",
- hash: "",
- query: {
- id: "a1b2c3",
- },
- matched: [],
-} as Route;
-
-const $router = { replace: jest.fn(), push: jest.fn(), afterEach: jest.fn() };
+const mockUseSharedLastCreatedElement = jest.mocked(
+ useSharedLastCreatedElement
+);
-describe("Board", () => {
- let wrapper: Wrapper;
+const envConfigModule: jest.Mocked = createModuleMocks(
+ EnvConfigModule,
+ {
+ getEnv: {
+ FEATURE_COLUMN_BOARD_SUBMISSIONS_ENABLED: true,
+ FEATURE_COLUMN_BOARD_LINK_ELEMENT_ENABLED: true,
+ FEATURE_COLUMN_BOARD_EXTERNAL_TOOLS_ENABLED: true,
+ } as Envs,
+ }
+);
+const mockedEditMode = jest.mocked(useEditMode);
- const cards = cardSkeletonResponseFactory.buildList(3);
- const oneColumn = columnResponseFactory.build({ cards });
- const boardWithOneColumn = boardResponseFactory.build({
- columns: [oneColumn],
- });
- const notifierModule = createModuleMocks(NotifierModule);
- let mockedBoardNotifierCalls: DeepMocked>;
- let mockedBoardStateCalls: DeepMocked>;
+describe("Board", () => {
+ const card = boardCardFactory.build();
- const setup = (options?: {
+ const mockRequiredParams = (options?: {
board?: Board;
isLoading?: boolean;
permissions?: Partial;
}) => {
- const { board, isLoading } = options ?? {};
+ mockedUseCardState.mockReturnValue({
+ fetchCard: jest.fn(),
+ updateTitle: jest.fn(),
+ deleteCard: jest.fn(),
+ updateCardHeight: jest.fn(),
+ addElement: jest.fn(),
+ addTextAfterTitle: jest.fn(),
+ moveElementDown: jest.fn(),
+ moveElementUp: jest.fn(),
+ deleteElement: jest.fn(),
+ card: card as unknown as Ref,
+ isLoading: ref(false),
+ notifyWithTemplateAndReload: jest.fn(),
+ });
+ const { board, isLoading = false } = options ?? {};
document.body.setAttribute("data-app", "true");
mockedBoardStateCalls = createMock>();
@@ -93,7 +116,7 @@ describe("Board", () => {
...options?.permissions,
});
mockedUseSharedEditMode.mockReturnValue({
- editModeId: ref(""),
+ editModeId: ref(undefined),
setEditModeId: jest.fn(),
});
mockedUseSharedBoardPageInformation.mockReturnValue({
@@ -102,43 +125,79 @@ describe("Board", () => {
pageTitle: ref("page-title"),
});
+ mockedEditMode.mockReturnValue({
+ isEditMode: computed(() => false),
+ startEditMode: jest.fn(),
+ stopEditMode: jest.fn(),
+ });
+
+ mockUseBoardFocusHandler.mockReturnValue({
+ isFocusContained: ref(false),
+ });
+
+ mockUseSharedLastCreatedElement.mockReturnValue({
+ lastCreatedElementId: computed(() => "element-id"),
+ resetLastCreatedElementId: jest.fn(),
+ });
+ };
+
+ const cards = cardSkeletonResponseFactory.buildList(3);
+ const oneColumn = columnResponseFactory.build({ cards });
+ const boardWithOneColumn = boardResponseFactory.build({
+ columns: [oneColumn],
+ });
+
+ const twoColumns = columnResponseFactory.buildList(2, { cards });
+ const boardWithTwoColumns = boardResponseFactory.build({
+ columns: twoColumns,
+ });
+ const notifierModule = createModuleMocks(NotifierModule);
+ let mockedBoardNotifierCalls: DeepMocked>;
+ let mockedBoardStateCalls: DeepMocked>;
+
+ const setup = (options?: {
+ board?: Board;
+ isLoading?: boolean;
+ permissions?: Partial;
+ }) => {
+ mockRequiredParams(options);
+
+ const { board } = options ?? {};
const boardId = board?.id ?? boardWithOneColumn.id;
- wrapper = shallowMount(BoardVue as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- mocks: {
- $router,
- $route,
+ const wrapper = mount(BoardVue, {
+ global: {
+ plugins: [createTestingI18n(), createTestingVuetify()],
+ provide: {
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+ },
},
propsData: { boardId },
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
- },
});
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should call 'useBoardState' composable", () => {
- setup();
+ const { wrapper } = setup();
expect(mockedUseBoardState).toHaveBeenCalled();
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
expect(wrapper.vm.board).toStrictEqual(boardWithOneColumn);
});
it("should be found in the dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(BoardVue).exists()).toBeTruthy();
});
- it("should fetch board from store and render it", () => {
- setup();
+ it("should fetch board from store and render it", async () => {
+ const { wrapper } = setup({ isLoading: false });
+
expect(wrapper.findComponent(BoardColumnVue).exists()).toBeTruthy();
});
it("should fetch board from store and render one column", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findAllComponents(BoardColumnVue)).toHaveLength(1);
});
@@ -147,7 +206,7 @@ describe("Board", () => {
const boardWithTwoColumns = boardResponseFactory.build({
columns: twoColumns,
});
- setup({ board: boardWithTwoColumns });
+ const { wrapper } = setup({ board: boardWithTwoColumns });
expect(wrapper.findAllComponents(BoardColumnVue)).toHaveLength(2);
});
@@ -157,13 +216,13 @@ describe("Board", () => {
const boardWithTwoColumns = boardResponseFactory.build({
columns: twoColumns,
});
- setup({ board: boardWithTwoColumns });
+ const { wrapper } = setup({ board: boardWithTwoColumns });
const boardColumnComponents = wrapper.findAllComponents({
name: "BoardColumn",
});
- expect(boardColumnComponents.at(0).props("columnCount")).toBe(2);
- expect(boardColumnComponents.at(1).props("columnCount")).toBe(2);
+ expect(boardColumnComponents[0].props("columnCount")).toBe(2);
+ expect(boardColumnComponents[1].props("columnCount")).toBe(2);
});
describe("Info message for teacher", () => {
@@ -186,7 +245,7 @@ describe("Board", () => {
describe("BoardColumnGhost component", () => {
describe("when user has create column permission", () => {
it("should not be rendered on DOM", () => {
- setup();
+ const { wrapper } = setup();
const ghostColumnComponent = wrapper.findComponent({
name: "BoardColumnGhost",
});
@@ -197,12 +256,14 @@ describe("Board", () => {
describe("when user doesn't have create column permission", () => {
it("should not be rendered on DOM", () => {
- setup({ permissions: { hasCreateColumnPermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasCreateColumnPermission: false },
+ });
const ghostColumnComponent = wrapper.findComponent({
name: "BoardColumnGhost",
});
- expect(ghostColumnComponent.vm).not.toBeDefined();
+ expect(ghostColumnComponent.exists()).toBe(false);
});
});
});
@@ -210,8 +271,8 @@ describe("Board", () => {
describe("when component is unMounted", () => {
it("should reset the notifier message", () => {
- setup();
- wrapper.destroy();
+ const { wrapper } = setup();
+ wrapper.unmount();
expect(mockedBoardNotifierCalls.resetNotifier).toHaveBeenCalled();
});
@@ -224,17 +285,19 @@ describe("Board", () => {
describe("when user is not permitted to move", () => {
it("should set drag-disabled", () => {
- setup({ permissions: { hasMovePermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ });
- const dndContainer = wrapper.findComponent({ name: "Container" });
- expect(dndContainer.element.outerHTML).toContain(".drag-disabled");
+ const dndContainer = wrapper.findComponent({ name: "Sortable" });
+ expect(dndContainer.vm.options.disabled).toBe(true);
});
});
describe("@onCreateCard", () => {
describe("when user is permitted to create card", () => {
it("should call the createCard method", () => {
- setup();
+ const { wrapper } = setup();
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -246,7 +309,9 @@ describe("Board", () => {
describe("when user is not permitted to create card", () => {
it("should not call the createCard method", () => {
- setup({ permissions: { hasCreateCardPermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasCreateCardPermission: false },
+ });
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -260,7 +325,7 @@ describe("Board", () => {
describe("@onCreateColumn", () => {
describe("when user is permitted to create a column", () => {
it("should call createColumn method", () => {
- setup();
+ const { wrapper } = setup();
const ghostColumnComponent = wrapper.findComponent({
name: "BoardColumnGhost",
});
@@ -271,24 +336,10 @@ describe("Board", () => {
});
});
- describe("@onCreateColumnWithCard", () => {
- describe("when user is permitted to create a column with card", () => {
- it("should call createColumn method", () => {
- setup();
- const ghostColumnComponent = wrapper.findComponent({
- name: "BoardColumnGhost",
- });
- ghostColumnComponent.vm.$emit("create:column-with-card");
-
- expect(mockedBoardStateCalls.createColumnWithCard).toHaveBeenCalled();
- });
- });
- });
-
describe("@onDeleteCard", () => {
describe("when user is permitted to delete a card", () => {
it("should call deleteCard method", () => {
- setup();
+ const { wrapper } = setup();
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -300,7 +351,9 @@ describe("Board", () => {
describe("when user is not permitted to delete a card", () => {
it("should not call deleteCard method", () => {
- setup({ permissions: { hasCreateCardPermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasCreateCardPermission: false },
+ });
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -314,7 +367,7 @@ describe("Board", () => {
describe("@onDeleteColumn", () => {
describe("when user is permitted to delete a column", () => {
it("should call deleteColumn method", () => {
- setup();
+ const { wrapper } = setup();
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -326,7 +379,9 @@ describe("Board", () => {
describe("when user is not permitted to delete a column", () => {
it("should not call deleteColumn method", () => {
- setup({ permissions: { hasDeletePermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasDeletePermission: false },
+ });
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -340,11 +395,18 @@ describe("Board", () => {
describe("@onDropColumn", () => {
describe("when user is permitted to move a column", () => {
it("should call moveColumn method", () => {
- setup();
- const containerComponent = wrapper.findComponent({
- name: "Container",
+ const { wrapper } = setup({ board: boardWithTwoColumns });
+ const containerComponent = wrapper.findAllComponents({
+ name: "Sortable",
});
- containerComponent.vm.$emit("drop");
+
+ const payload = {
+ item: document.createElement("div"),
+ newIndex: 1,
+ oldIndex: 0,
+ };
+
+ containerComponent[0].vm.$emit("end", payload);
expect(mockedBoardStateCalls.moveColumn).toHaveBeenCalled();
});
@@ -352,11 +414,14 @@ describe("Board", () => {
describe("when user is not permitted to move a column", () => {
it("should not call moveColumn method", () => {
- setup({ permissions: { hasMovePermission: false } });
- const containerComponent = wrapper.findComponent({
- name: "Container",
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ board: boardWithTwoColumns,
+ });
+ const containerComponent = wrapper.findAllComponents({
+ name: "Sortable",
});
- containerComponent.vm.$emit("drop");
+ containerComponent[0].vm.$emit("move");
expect(mockedBoardStateCalls.moveColumn).not.toHaveBeenCalled();
});
@@ -366,11 +431,11 @@ describe("Board", () => {
describe("@onMoveColumnLeft", () => {
describe("when user is permitted to move a column", () => {
it("should call moveColumn method", () => {
- setup();
- const boardColumnComponent = wrapper.findComponent({
+ const { wrapper } = setup({ board: boardWithTwoColumns });
+ const boardColumnComponent = wrapper.findAllComponents({
name: "BoardColumn",
});
- boardColumnComponent.vm.$emit("move:column-left");
+ boardColumnComponent[1].vm.$emit("move:column-left");
expect(mockedBoardStateCalls.moveColumn).toHaveBeenCalled();
});
@@ -378,11 +443,14 @@ describe("Board", () => {
describe("when user is not permitted to move a column", () => {
it("should not call moveColumn method", () => {
- setup({ permissions: { hasMovePermission: false } });
- const boardColumnComponent = wrapper.findComponent({
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ board: boardWithTwoColumns,
+ });
+ const boardColumnComponent = wrapper.findAllComponents({
name: "BoardColumn",
});
- boardColumnComponent.vm.$emit("move:column-left");
+ boardColumnComponent[1].vm.$emit("move:column-left");
expect(mockedBoardStateCalls.moveColumn).not.toHaveBeenCalled();
});
@@ -392,7 +460,7 @@ describe("Board", () => {
describe("@onMoveColumnRight", () => {
describe("when user is permitted to move a column", () => {
it("should call moveColumn method", () => {
- setup();
+ const { wrapper } = setup({ board: boardWithTwoColumns });
const boardColumnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -404,7 +472,10 @@ describe("Board", () => {
describe("when user is not permitted to move a column", () => {
it("should not call moveColumn method", () => {
- setup({ permissions: { hasMovePermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ board: boardWithTwoColumns,
+ });
const boardColumnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -418,7 +489,7 @@ describe("Board", () => {
describe("@onUpdateCardPosition", () => {
describe("when user is permitted to move a card", () => {
it("should call moveCardMock method", () => {
- setup();
+ const { wrapper } = setup();
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -430,7 +501,9 @@ describe("Board", () => {
describe("when user is not permitted to move a card", () => {
it("should not call moveCardMock method", () => {
- setup({ permissions: { hasMovePermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ });
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -444,7 +517,7 @@ describe("Board", () => {
describe("@onUpdateColumnTitle", () => {
describe("when user is permitted to edit", () => {
it("should call updateColumnTitle method", () => {
- setup();
+ const { wrapper } = setup();
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -456,7 +529,9 @@ describe("Board", () => {
describe("when user is not permitted to edit", () => {
it("should not call updateColumnTitle method", () => {
- setup({ permissions: { hasEditPermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasEditPermission: false },
+ });
const columnComponent = wrapper.findComponent({
name: "BoardColumn",
});
@@ -471,12 +546,12 @@ describe("Board", () => {
describe("@onReloadBoard", () => {
it("should reload the board", async () => {
- setup();
+ const { wrapper } = setup();
const boardColumnComponents = wrapper.findAllComponents({
name: "BoardColumn",
});
- boardColumnComponents.at(0).vm.$emit("reload:board");
+ boardColumnComponents.at(0)?.vm.$emit("reload:board");
await nextTick();
expect(mockedBoardStateCalls.reloadBoard).toHaveBeenCalled();
diff --git a/src/components/feature-board/board/Board.vue b/src/components/feature-board/board/Board.vue
index 280d93e978..6f4b075fdc 100644
--- a/src/components/feature-board/board/Board.vue
+++ b/src/components/feature-board/board/Board.vue
@@ -1,52 +1,68 @@
;
-
const setup = () => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardAddCardButton as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(BoardAddCardButton, {
+ global: {
+ plugins: [createTestingI18n(), createTestingVuetify()],
+ },
});
+ return wrapper;
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup();
+ const wrapper = setup();
expect(wrapper).toBeDefined();
});
});
diff --git a/src/components/feature-board/board/BoardAddCardButton.vue b/src/components/feature-board/board/BoardAddCardButton.vue
index 0844f2f521..994dc8a8b7 100644
--- a/src/components/feature-board/board/BoardAddCardButton.vue
+++ b/src/components/feature-board/board/BoardAddCardButton.vue
@@ -8,9 +8,8 @@
@click.stop="onAddCard"
@dblclick.stop="() => {}"
elevation="6"
- class="white"
+ class="bg-white"
icon
- large
v-if="!isEditMode"
>
{{ mdiPlus }}
@@ -58,4 +57,3 @@ export default defineComponent({
width: 380px;
}
-@data-board";
diff --git a/src/components/feature-board/board/BoardColumn.unit.ts b/src/components/feature-board/board/BoardColumn.unit.ts
index 1b13e8b568..78d110da52 100644
--- a/src/components/feature-board/board/BoardColumn.unit.ts
+++ b/src/components/feature-board/board/BoardColumn.unit.ts
@@ -1,36 +1,29 @@
-import { I18N_KEY } from "@/utils/inject";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import {
cardSkeletonResponseFactory,
columnResponseFactory,
} from "@@/tests/test-utils/factory";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import CardHost from "../card/CardHost.vue";
-import {
- useBoardPermissions,
- useEditMode,
- useSharedEditMode,
-} from "@data-board";
+import { shallowMount } from "@vue/test-utils";
+import { useBoardPermissions } from "@data-board";
import {
BoardPermissionChecks,
defaultPermissions,
} from "@/types/board/Permissions";
import BoardColumnVue from "./BoardColumn.vue";
import { useDragAndDrop } from "../shared/DragAndDrop.composable";
-import Vue, { computed, nextTick } from "vue";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { Container } = require("vue-dndrop");
+import { nextTick } from "vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { ENV_CONFIG_MODULE_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { envConfigModule, notifierModule } from "@/store";
const { isDragging, dragEnd } = useDragAndDrop();
jest.mock("@data-board");
const mockedUserPermissions = jest.mocked(useBoardPermissions);
-jest.mocked(useSharedEditMode);
-
describe("BoardColumn", () => {
- let wrapper: Wrapper;
-
const cards = cardSkeletonResponseFactory.buildList(3);
const column = columnResponseFactory.build({
cards,
@@ -45,84 +38,75 @@ describe("BoardColumn", () => {
...options?.permissions,
});
- const mockedUseEditMode = jest.mocked(useEditMode);
-
- const isEditMode = computed(() => true);
- mockedUseEditMode.mockReturnValue({
- isEditMode,
- startEditMode: jest.fn(),
- stopEditMode: jest.fn(),
- });
-
- wrapper = shallowMount(BoardColumnVue as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ const wrapper = shallowMount(BoardColumnVue, {
+ global: {
+ plugins: [createTestingI18n(), createTestingVuetify()],
+ provide: {
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+ },
},
propsData: { column, index: 1, columnCount: 1 },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(BoardColumnVue).exists()).toBe(true);
});
-
- it("should get props and render CarHost components", () => {
- setup();
- expect(wrapper.findAllComponents(CardHost)).toHaveLength(3);
- });
- });
-
- describe("when a card moved by key stroke", () => {
- it("should emit 'position-change-keyboard'", async () => {
- setup();
- const expectedEmitObject = {
- removedIndex: 0,
- addedIndex: 0,
- payload: column.cards[0],
- columnIndex: 0,
- };
-
- const cardHostComponent = wrapper.findComponent(CardHost);
- cardHostComponent.vm.$emit("move:card-keyboard", "ArrowLeft");
-
- const emitted = wrapper.emitted("update:card-position") || [[]];
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
-
- expect(emitted[0][0]).toStrictEqual(expectedEmitObject);
- });
});
describe("when a card moved ", () => {
it("should emit 'card-position-change'", async () => {
- setup();
+ const { wrapper } = setup();
+
const emitObject = {
- removedIndex: 0,
- addedIndex: 0,
- payload: column.cards[0],
- targetColumnId: column.id,
- columnId: column.id,
+ oldIndex: 0,
+ newIndex: 1,
+ item: {
+ dataset: {
+ cardId: "card-id",
+ },
+ },
+ to: {
+ dataset: {
+ columnId: "to-column-id",
+ },
+ },
+ from: {
+ dataset: {
+ columnId: "from-column-id",
+ },
+ },
};
- const containerComponent = wrapper.findComponent(Container);
- containerComponent.vm.$emit("drop", emitObject);
+ const expectedEmitObject = {
+ oldIndex: 0,
+ newIndex: 1,
+ cardId: "card-id",
+ fromColumnId: "from-column-id",
+ toColumnId: "to-column-id",
+ };
+
+ const containerComponent = wrapper.findComponent({ name: "Sortable" });
+ containerComponent.vm.$emit("end", emitObject);
const emitted = wrapper.emitted("update:card-position") || [[]];
- expect(emitted[0][0]).toStrictEqual(emitObject);
+ expect(emitted[0][0]).toStrictEqual(expectedEmitObject);
});
it("should not emit 'card-position-change'", async () => {
- setup();
+ const { wrapper } = setup();
const emitObject = {
removedIndex: null,
addedIndex: null,
payload: column.cards[0],
};
- const containerComponent = wrapper.findComponent(Container);
+ const containerComponent = wrapper.findComponent({ name: "Sortable" });
containerComponent.vm.$emit("drop", emitObject);
const emitted = wrapper.emitted("update:card-position");
@@ -137,14 +121,14 @@ describe("BoardColumn", () => {
});
describe("if payload has 'cardId'", () => {
it("should set 'isDragging' value to be true", () => {
- setup();
+ const { wrapper } = setup();
const emitObject = {
isSource: false,
payload: { cardId: "card-id", height: 100 },
willAcceptDrop: false,
};
- const containerComponent = wrapper.findComponent(Container);
- containerComponent.vm.$emit("drag-start", emitObject);
+ const containerComponent = wrapper.findComponent({ name: "Sortable" });
+ containerComponent.vm.$emit("start", emitObject);
expect(isDragging.value).toBe(true);
});
@@ -152,13 +136,13 @@ describe("BoardColumn", () => {
describe("if payload doesn't have 'cardId'", () => {
it("should not set 'isDragging' value to be true", () => {
- setup();
+ const { wrapper } = setup();
const emitObject = {
isSource: false,
payload: "12345",
willAcceptDrop: false,
};
- const containerComponent = wrapper.findComponent(Container);
+ const containerComponent = wrapper.findComponent({ name: "Sortable" });
containerComponent.vm.$emit("drag-start", emitObject);
expect(isDragging.value).toBe(false);
@@ -169,15 +153,19 @@ describe("BoardColumn", () => {
describe("user permissions", () => {
describe("when user is not permitted to move a column", () => {
it("should set drag-disabled", () => {
- setup({ permissions: { hasMovePermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasMovePermission: false },
+ });
- const dndContainer = wrapper.findComponent({ name: "Container" });
- expect(dndContainer.element.outerHTML).toContain(".drag-disabled");
+ const dndContainer = wrapper.findComponent({ name: "Sortable" });
+ expect(dndContainer.vm.options.disabled).toBe(true);
});
});
describe("when user is not permitted to create a card", () => {
it("should addCardComponent not be rendered on DOM", () => {
- setup({ permissions: { hasCreateColumnPermission: false } });
+ const { wrapper } = setup({
+ permissions: { hasCreateColumnPermission: false },
+ });
const addCardComponent = wrapper.findAllComponents({
name: "BoardAddCardButton",
@@ -188,39 +176,10 @@ describe("BoardColumn", () => {
});
});
- describe("when reload:board was triggered by a card", () => {
- it("should emit reload:board", async () => {
- setup();
-
- const cardComponents = wrapper.findAllComponents({
- name: "CardHost",
- });
- cardComponents.at(0).vm.$emit("reload:board");
- await nextTick();
-
- const emitted = wrapper.emitted("reload:board");
- expect(emitted).toHaveLength(1);
- });
- });
-
describe("when move was triggered by column header", () => {
- describe("when move:column-keyboard was triggered by column header", () => {
- it("should emit move:column-keyboard", async () => {
- setup();
-
- const columnHeader = wrapper.findComponent({
- name: "BoardColumnHeader",
- });
- columnHeader.vm.$emit("move:column-keyboard", "ArrowLeft");
- await nextTick();
-
- const emitted = wrapper.emitted("move:column-keyboard");
- expect(emitted).toHaveLength(1);
- });
- });
describe("when move:column-left was triggered by column header", () => {
it("should emit move:column-left", async () => {
- setup();
+ const { wrapper } = setup();
const columnHeader = wrapper.findComponent({
name: "BoardColumnHeader",
@@ -234,7 +193,7 @@ describe("BoardColumn", () => {
});
describe("when move:column-right was triggered by column header", () => {
it("should emit move:column-right", async () => {
- setup();
+ const { wrapper } = setup();
const columnHeader = wrapper.findComponent({
name: "BoardColumnHeader",
diff --git a/src/components/feature-board/board/BoardColumn.vue b/src/components/feature-board/board/BoardColumn.vue
index cace78ef71..a406aefc97 100644
--- a/src/components/feature-board/board/BoardColumn.vue
+++ b/src/components/feature-board/board/BoardColumn.vue
@@ -1,58 +1,72 @@
;
const { dragStart, dragEnd } = useDragAndDrop();
const setup = () => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardColumnGhost as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(BoardColumnGhost, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in the dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(BoardColumnGhost).exists()).toBe(true);
});
});
describe("when the new column button clicked", () => {
it("should emit 'add-empty-column'", () => {
- setup();
+ const { wrapper } = setup();
const headerComponent = wrapper.findComponent({
ref: "ghostColumnTitleRef",
@@ -37,57 +39,23 @@ describe("BoardColumnGhost", () => {
});
});
- describe("when a card dropped", () => {
- it("should emit 'add-column-with-card'", async () => {
- dragStart();
- setup();
- const movedCardObject = {
- removedIndex: null,
- addedIndex: 0,
- payload: { cardId: "123", height: 100 },
- };
- const containerComponent = wrapper.findComponent({
- name: "Container",
- });
- containerComponent.vm.$emit("drop", movedCardObject);
-
- const emitted = wrapper.emitted();
- expect(emitted["create:column-with-card"]).toBeDefined();
- });
-
- it("should not emit 'add-empty-column' if addedIndex equals null", () => {
- setup();
- const movedCardObject = {
- removedIndex: null,
- addedIndex: null,
- payload: { cardId: "123", height: 100 },
- };
- const containerComponent = wrapper.findComponent({
- name: "Container",
- });
- containerComponent.vm.$emit("drop", movedCardObject);
-
- const emitted = wrapper.emitted();
- expect(emitted["add-column-with-card"]).not.toBeDefined();
- });
- });
-
describe("Container component", () => {
it("should be found in DOM", () => {
dragStart();
- setup();
+ const { wrapper } = setup();
const containerComponent = wrapper.findComponent({
- name: "Container",
+ name: "Sortable",
});
expect(containerComponent.vm).toBeDefined();
});
+
it("should not be found in DOM", () => {
dragEnd();
- setup();
- const containerComponent = wrapper.findComponent({
- name: "Container",
+ const { wrapper } = setup();
+ const containerComponent = wrapper.findAllComponents({
+ name: "Sortable",
});
- expect(containerComponent.vm).not.toBeDefined();
+ expect(containerComponent.length).toBe(0);
});
});
});
diff --git a/src/components/feature-board/board/BoardColumnGhost.vue b/src/components/feature-board/board/BoardColumnGhost.vue
index c7bf0c7b3a..1471dd8ea4 100644
--- a/src/components/feature-board/board/BoardColumnGhost.vue
+++ b/src/components/feature-board/board/BoardColumnGhost.vue
@@ -1,49 +1,57 @@
-
+
+
+
-
+
+
+
diff --git a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
index fa6a4ffc65..fb42084e54 100644
--- a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
+++ b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
@@ -1,13 +1,14 @@
import { mountComposable } from "@@/tests/test-utils/mountComposable";
import { useSubmissionContentElementState } from "./SubmissionContentElementState.composable";
import { useSubmissionItemApi } from "./SubmissionItemApi.composable";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import { ref } from "vue";
import NotifierModule from "@/store/notifier";
import { createModuleMocks } from "@/utils/mock-store-module";
import { createMock, DeepMocked } from "@golevelup/ts-jest";
import { SubmissionsResponse } from "@/serverApi/v3";
-import { i18nMock, submissionsResponseFactory } from "@@/tests/test-utils";
+import { submissionsResponseFactory } from "@@/tests/test-utils";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
const notifierModule = createModuleMocks(NotifierModule);
@@ -38,8 +39,12 @@ describe("SubmissionContentElementState.composable", () => {
return mountComposable(
() => useSubmissionContentElementState(contentElementId, dueDate),
{
- [I18N_KEY.valueOf()]: i18nMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ global: {
+ plugins: [createTestingI18n()],
+ provide: {
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ },
+ },
}
);
};
diff --git a/src/components/feature-board-text-element/RichTextContentElement.unit.ts b/src/components/feature-board-text-element/RichTextContentElement.unit.ts
index 07803637e2..ec3b7f1410 100644
--- a/src/components/feature-board-text-element/RichTextContentElement.unit.ts
+++ b/src/components/feature-board-text-element/RichTextContentElement.unit.ts
@@ -1,13 +1,15 @@
import { ContentElementType, RichTextElementResponse } from "@/serverApi/v3";
import NotifierModule from "@/store/notifier";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+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";
jest.mock("@data-board", () => {
return {
useBoardFocusHandler: jest.fn(),
@@ -41,31 +43,26 @@ const TEST_ELEMENT: RichTextElementResponse = {
};
describe("RichTextContentElement", () => {
- let wrapper: Wrapper
+
-
-
-
+
+
+
-
-
-
+
-
+
{{ $t("pages.room.boardCard.label.courseBoard") }}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
-
+
+
+
-
- ;
-
const setup = () => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardColumnGhostHeader as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(BoardColumnGhostHeader, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
propsData: {
isColumnActive: true,
},
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in the dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(BoardColumnGhostHeader).exists()).toBe(true);
expect(wrapper.findComponent({ name: "VBtn" }).exists()).toBe(true);
});
@@ -27,7 +31,7 @@ describe("BoardColumnGhostHeader", () => {
describe("when 'add column' button clicked", () => {
it("should emit 'add-column'", () => {
- setup();
+ const { wrapper } = setup();
const button = wrapper.findComponent({ name: "VBtn" });
button.vm.$emit("click");
diff --git a/src/components/feature-board/board/BoardColumnGhostHeader.vue b/src/components/feature-board/board/BoardColumnGhostHeader.vue
index b372cc2db2..6a8acfc298 100644
--- a/src/components/feature-board/board/BoardColumnGhostHeader.vue
+++ b/src/components/feature-board/board/BoardColumnGhostHeader.vue
@@ -1,20 +1,18 @@
-
-
+
+
+
+
+
diff --git a/src/components/feature-board/board/BoardColumnGhostHeader.unit.ts b/src/components/feature-board/board/BoardColumnGhostHeader.unit.ts
index dfd5a24001..022cf133db 100644
--- a/src/components/feature-board/board/BoardColumnGhostHeader.unit.ts
+++ b/src/components/feature-board/board/BoardColumnGhostHeader.unit.ts
@@ -1,25 +1,29 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import BoardColumnGhostHeader from "./BoardColumnGhostHeader.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
describe("BoardColumnGhostHeader", () => {
- let wrapper: Wrapper
+
-
+
-
+ ;
-
const mockedUseEditMode = jest.mocked(useEditMode);
const setup = (options?: {
permissions?: Partial;
}) => {
- document.body.setAttribute("data-app", "true");
const isEditMode = computed(() => true);
mockedUseEditMode.mockReturnValue({
isEditMode,
@@ -42,10 +41,9 @@ describe("BoardColumnHeader", () => {
isFocusContained: undefined,
});
- wrapper = shallowMount(BoardColumnHeader as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ const wrapper = shallowMount(BoardColumnHeader, {
+ global: {
+ plugins: [createTestingI18n(), createTestingVuetify()],
},
propsData: {
title: "title-text",
@@ -53,18 +51,19 @@ describe("BoardColumnHeader", () => {
columnId: "abc123",
},
});
+ return wrapper;
};
describe("when component is mounted", () => {
it("should be found in the dom", () => {
- setup();
+ const wrapper = setup();
expect(wrapper.findComponent(BoardColumnHeader).exists()).toBe(true);
});
});
describe("when the title updated", () => {
it("should emit 'update:title'", () => {
- setup();
+ const wrapper = setup();
const titleInput = wrapper.findComponent(BoardAnyTitleInput);
titleInput.vm.$emit("update:value");
@@ -76,7 +75,7 @@ describe("BoardColumnHeader", () => {
describe("when the column should be moved to the left", () => {
it("should emit move:column-left", async () => {
- setup();
+ const wrapper = setup();
const moveLeftButton = wrapper.findComponent(BoardMenuActionMoveLeft);
moveLeftButton.vm.$emit("click");
@@ -88,7 +87,7 @@ describe("BoardColumnHeader", () => {
describe("when the column should be moved to the right", () => {
it("should emit move:column-right", async () => {
- setup();
+ const wrapper = setup();
const moveRightButton = wrapper.findComponent(BoardMenuActionMoveRight);
moveRightButton.vm.$emit("click");
@@ -101,7 +100,7 @@ describe("BoardColumnHeader", () => {
describe("user permissions", () => {
describe("when user is not permitted to delete a column", () => {
it("should not be rendered on DOM", () => {
- setup({
+ const wrapper = setup({
permissions: { hasDeletePermission: false },
});
diff --git a/src/components/feature-board/board/BoardColumnHeader.vue b/src/components/feature-board/board/BoardColumnHeader.vue
index fa7325d53d..56a0d1b0f6 100644
--- a/src/components/feature-board/board/BoardColumnHeader.vue
+++ b/src/components/feature-board/board/BoardColumnHeader.vue
@@ -7,11 +7,11 @@
>
+
{{ mdiPlus }}
{{ $t("components.board.column.ghost.placeholder") }}
-
diff --git a/src/components/feature-board/board/BoardColumnHeader.unit.ts b/src/components/feature-board/board/BoardColumnHeader.unit.ts
index 9bceaaeb24..900e7ffaa9 100644
--- a/src/components/feature-board/board/BoardColumnHeader.unit.ts
+++ b/src/components/feature-board/board/BoardColumnHeader.unit.ts
@@ -1,6 +1,5 @@
-import Vue, { computed } from "vue";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { computed } from "vue";
+import { shallowMount } from "@vue/test-utils";
import BoardColumnHeader from "./BoardColumnHeader.vue";
import BoardAnyTitleInput from "../shared/BoardAnyTitleInput.vue";
import {
@@ -12,22 +11,22 @@ import {
BoardPermissionChecks,
defaultPermissions,
} from "@/types/board/Permissions";
-import { I18N_KEY } from "@/utils/inject";
import { BoardMenuActionMoveLeft, BoardMenuActionMoveRight } from "@ui-board";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
jest.mock("@data-board");
const mockedUserPermissions = jest.mocked(useBoardPermissions);
const mockUseBoardFocusHandler = jest.mocked(useBoardFocusHandler);
describe("BoardColumnHeader", () => {
- let wrapper: Wrapper
- (false);
const columnHeader = ref(null);
- const { isFocusContained } = useBoardFocusHandler(
+ const { isFocusContained, isFocusedById } = useBoardFocusHandler(
columnId.value,
columnHeader
);
@@ -107,10 +107,21 @@ export default defineComponent({
stopEditMode();
};
- const onDelete = () => emit("delete:column", props.columnId);
+ const onDelete = async (confirmation: Promise) => {
+ const shouldDelete = await confirmation;
+ if (shouldDelete) {
+ emit("delete:column", props.columnId);
+ }
+ };
const onMoveColumnKeyboard = (event: KeyboardEvent) => {
- emit("move:column-keyboard", event.code);
+ if (event.code === "ArrowLeft") {
+ emit("move:column-left");
+ } else if (event.code === "ArrowRight") {
+ emit("move:column-right");
+ } else {
+ console.log("not supported key event");
+ }
};
const onMoveColumnLeft = () => {
@@ -140,11 +151,15 @@ export default defineComponent({
onMoveColumnLeft,
onMoveColumnRight,
onUpdateTitle,
+ isFocusedById,
};
},
});
diff --git a/src/components/feature-board/card/CardHostDetailView.unit.ts b/src/components/feature-board/card/CardHostDetailView.unit.ts
index 2f97d00428..5c16a31f8a 100644
--- a/src/components/feature-board/card/CardHostDetailView.unit.ts
+++ b/src/components/feature-board/card/CardHostDetailView.unit.ts
@@ -1,35 +1,34 @@
import { BoardCard } from "@/types/board/Card";
-import { I18N_KEY } from "@/utils/inject";
import {
boardCardFactory,
fileElementResponseFactory,
} from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import CardHostDetailView from "./CardHostDetailView.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const CARD_WITH_ELEMENTS: BoardCard = boardCardFactory.build({
elements: [fileElementResponseFactory.build()],
});
describe("CardHostDetailView", () => {
- let wrapper: Wrapper;
-
- const setup = (props: { card: BoardCard }) => {
+ const setup = (props: { card: BoardCard; isOpen: boolean }) => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(CardHostDetailView as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ const wrapper = shallowMount(CardHostDetailView, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
propsData: props,
});
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ card: CARD_WITH_ELEMENTS });
+ const { wrapper } = setup({ card: CARD_WITH_ELEMENTS, isOpen: true });
expect(wrapper.findComponent(CardHostDetailView).exists()).toBe(true);
});
});
diff --git a/src/components/feature-board/card/CardHostDetailView.vue b/src/components/feature-board/card/CardHostDetailView.vue
index 82fe26290a..1e045f1e03 100644
--- a/src/components/feature-board/card/CardHostDetailView.vue
+++ b/src/components/feature-board/card/CardHostDetailView.vue
@@ -1,9 +1,9 @@
{
- let wrapper: Wrapper;
-
const setup = (options: { isEditMode: boolean }) => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(CardHostInteractionHandlerVue as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(CardHostInteractionHandlerVue, {
propsData: { isEditMode: options?.isEditMode },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ isEditMode: false });
+ const { wrapper } = setup({ isEditMode: false });
expect(
wrapper.findComponent(CardHostInteractionHandlerVue).exists()
).toBe(true);
@@ -28,7 +25,7 @@ describe("CardHostInteractionHandler", () => {
it.each(["up", "down", "left", "right"])(
"should emit 'move:card-keyboard' with '%s' key stroke when not editing",
async (key) => {
- setup({ isEditMode: false });
+ const { wrapper } = setup({ isEditMode: false });
const eventHandle = await wrapper.find("[data-testid=event-handle]");
await eventHandle.trigger(`keydown.${key}`);
const emitted: KeyboardEvent[][] = wrapper.emitted(
@@ -42,7 +39,7 @@ describe("CardHostInteractionHandler", () => {
it.each(["up", "down", "left", "right"])(
"should not emit 'move:card-keyboard' with '%s' key stroke when editing",
async (key) => {
- setup({ isEditMode: true });
+ const { wrapper } = setup({ isEditMode: true });
const eventHandle = await wrapper.find("[data-testid=event-handle]");
await eventHandle.trigger(`keydown.${key}`);
const emitted: KeyboardEvent[][] = wrapper.emitted(
diff --git a/src/components/feature-board/card/CardHostInteractionHandler.vue b/src/components/feature-board/card/CardHostInteractionHandler.vue
index 90bf99f64b..cb53c6b16d 100644
--- a/src/components/feature-board/card/CardHostInteractionHandler.vue
+++ b/src/components/feature-board/card/CardHostInteractionHandler.vue
@@ -49,7 +49,6 @@ export default defineComponent({
const isCardHost = classNames?.split(" ").includes("card-host");
if (!props.isEditMode && isCardHost) {
emit("start-edit-mode");
- event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
diff --git a/src/components/feature-board/card/CardSkeleton.unit.ts b/src/components/feature-board/card/CardSkeleton.unit.ts
index fd659673e9..3935b0a103 100644
--- a/src/components/feature-board/card/CardSkeleton.unit.ts
+++ b/src/components/feature-board/card/CardSkeleton.unit.ts
@@ -1,22 +1,22 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import CardSkeleton from "./CardSkeleton.vue";
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
describe("CardSkeleton", () => {
- let wrapper: Wrapper;
-
- const setup = (props: object) => {
+ const setup = (props: { height: number }) => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(CardSkeleton as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(CardSkeleton, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
propsData: props,
});
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ height: 400 });
+ const { wrapper } = setup({ height: 400 });
expect(wrapper.findComponent(CardSkeleton).exists()).toBe(true);
});
});
diff --git a/src/components/feature-board/card/CardTitle.unit.ts b/src/components/feature-board/card/CardTitle.unit.ts
index f2c913f68b..c7dd85274e 100644
--- a/src/components/feature-board/card/CardTitle.unit.ts
+++ b/src/components/feature-board/card/CardTitle.unit.ts
@@ -1,20 +1,22 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import CardTitle from "./CardTitle.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const componentProps = {
value: "props value",
isFocused: true,
};
-describe(CardTitle.name, () => {
- let wrapper: Wrapper;
-
+describe("CardTitle", () => {
const setup = (options: { isEditMode: boolean }) => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(CardTitle as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(CardTitle, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
propsData: {
...componentProps,
isEditMode: options.isEditMode,
@@ -23,16 +25,18 @@ describe(CardTitle.name, () => {
CARD_HOST_INTERACTION_EVENT: undefined,
},
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({ isEditMode: false });
+ const { wrapper } = setup({ isEditMode: false });
expect(wrapper).toBeDefined();
});
it("should pass the value to its sub component", async () => {
- setup({ isEditMode: true });
+ const { wrapper } = setup({ isEditMode: true });
const anyTitleInput = wrapper.findComponent({
name: "BoardAnyTitleInput",
});
@@ -40,7 +44,7 @@ describe(CardTitle.name, () => {
});
it("should bubble enter event", async () => {
- setup({ isEditMode: true });
+ const { wrapper } = setup({ isEditMode: true });
const anyTitleInput = wrapper.findComponent({
name: "BoardAnyTitleInput",
});
diff --git a/src/components/feature-board/card/ContentElementList.unit.ts b/src/components/feature-board/card/ContentElementList.unit.ts
index a8d7c8cb66..823bcfa0fb 100644
--- a/src/components/feature-board/card/ContentElementList.unit.ts
+++ b/src/components/feature-board/card/ContentElementList.unit.ts
@@ -2,10 +2,8 @@ import { ContentElementType } from "@/serverApi/v3";
import EnvConfigModule from "@/store/env-config";
import { Envs } from "@/store/types/env-config";
import { AnyContentElement } from "@/types/board/ContentElement";
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
-import { i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import { DrawingContentElement } from "@feature-board-drawing-element";
import { ExternalToolElement } from "@feature-board-external-tool-element";
import { FileContentElement } from "@feature-board-file-element";
@@ -13,17 +11,18 @@ import { LinkContentElement } from "@feature-board-link-element";
import { SubmissionContentElement } from "@feature-board-submission-element";
import { RichTextContentElement } from "@feature-board-text-element";
import { createMock } from "@golevelup/ts-jest";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import ContentElementList from "./ContentElementList.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
describe("ContentElementList", () => {
- let wrapper: Wrapper;
-
const setup = (props: {
elements: AnyContentElement[];
isEditMode: boolean;
- cardId: string;
+ isDetailView: boolean;
}) => {
document.body.setAttribute("data-app", "true");
@@ -36,22 +35,25 @@ describe("ContentElementList", () => {
}),
});
- wrapper = shallowMount(ContentElementList as MountOptions, {
- ...createComponentMocks({}),
- propsData: { ...props },
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- [ENV_CONFIG_MODULE_KEY.valueOf()]: mockedEnvConfigModule,
+ const wrapper = shallowMount(ContentElementList, {
+ global: {
+ plugins: [createTestingI18n(), createTestingVuetify()],
+ provide: {
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: mockedEnvConfigModule,
+ },
},
+ props: { ...props },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in dom", () => {
- setup({
+ const { wrapper } = setup({
elements: [],
isEditMode: false,
- cardId: "cardId",
+ isDetailView: false,
});
expect(wrapper.findComponent(ContentElementList).exists()).toBe(true);
});
@@ -86,10 +88,10 @@ describe("ContentElementList", () => {
it.each(elementComponents)(
"should render $elementType-elements",
({ elementType, component }) => {
- setup({
+ const { wrapper } = setup({
elements: [{ type: elementType } as AnyContentElement],
isEditMode: false,
- cardId: "cardId",
+ isDetailView: false,
});
expect(wrapper.findComponent(component).exists()).toBe(true);
}
@@ -100,10 +102,10 @@ describe("ContentElementList", () => {
({ elementType, component }) => {
const isEditModeResult = true;
- setup({
+ const { wrapper } = setup({
elements: [{ type: elementType } as AnyContentElement],
isEditMode: isEditModeResult,
- cardId: "cardId",
+ isDetailView: false,
});
const childComponent = wrapper.findComponent(component);
diff --git a/src/components/feature-board/card/ContentElementList.vue b/src/components/feature-board/card/ContentElementList.vue
index 1ddc72cccc..15844c6a17 100644
--- a/src/components/feature-board/card/ContentElementList.vue
+++ b/src/components/feature-board/card/ContentElementList.vue
@@ -1,11 +1,7 @@
-
-
+
+
{
setupMocks();
- const wrapper: Wrapper = mount(
- AddElementDialog as MountOptions,
- {
- ...createComponentMocks({}),
+ const wrapper = mount(AddElementDialog, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
provide: {
[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
},
- }
- );
+ },
+ });
return { wrapper };
};
@@ -107,15 +109,15 @@ describe("ElementTypeSelection", () => {
const { isDialogOpen, elementTypeOptions, closeDialog } = setupMocks();
- const wrapper: Wrapper = mount(
- AddElementDialog as MountOptions,
- {
- ...createComponentMocks({}),
+ const wrapper = mount(AddElementDialog, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+
provide: {
[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
},
- }
- );
+ },
+ });
isDialogOpen.value = true;
await nextTick();
@@ -133,17 +135,10 @@ describe("ElementTypeSelection", () => {
const { elementTypeOptions, wrapper } = await setup();
for (const elementTypeOption of elementTypeOptions.value) {
- const button = wrapper.find(
- `[data-testId=${elementTypeOption.testId}]`
+ const button = wrapper.findComponent(
+ `[data-testid=${elementTypeOption.testId}]`
);
-
- const icon = button.find(".v-icon");
- icon.contains(elementTypeOption.icon);
- const label = button.find(".subtitle");
- label.contains(elementTypeOption.label);
-
await button.trigger("click");
-
await nextTick();
expect(elementTypeOption.action).toHaveBeenCalled();
@@ -153,7 +148,7 @@ describe("ElementTypeSelection", () => {
it("should close modal on close button click", async () => {
const { closeDialog, wrapper } = await setup();
- const closeButton = wrapper.find("[data-testId=dialog-close]");
+ const closeButton = wrapper.findComponent("[data-testId=dialog-close]");
await closeButton.trigger("click");
await nextTick();
diff --git a/src/components/feature-board/shared/AddElementDialog.vue b/src/components/feature-board/shared/AddElementDialog.vue
index 59ed665574..461d03314f 100644
--- a/src/components/feature-board/shared/AddElementDialog.vue
+++ b/src/components/feature-board/shared/AddElementDialog.vue
@@ -7,11 +7,13 @@
@dialog-closed="onCloseDialog"
:buttons="actionButtons"
>
-
+
-
+
@@ -41,8 +42,8 @@ import {
import { mdiPencilOutline, mdiTrashCanOutline } from "@mdi/js";
import {
BoardMenu,
- BoardMenuActionEdit,
BoardMenuActionDelete,
+ BoardMenuActionEdit,
BoardMenuActionMoveLeft,
BoardMenuActionMoveRight,
} from "@ui-board";
@@ -77,7 +78,6 @@ export default defineComponent({
},
emits: [
"delete:column",
- "move:column-keyboard",
"move:column-left",
"move:column-right",
"update:title",
@@ -91,7 +91,7 @@ export default defineComponent({
const isDeleteModalOpen = ref
- {{ $t("components.elementTypeSelection.dialog.title") }}
-
+
+
+ {{ $t("components.elementTypeSelection.dialog.title") }}
+
+
-
+
- {{ item.icon }}
+ {{ item.icon }}
{{ $t(item.label) }}
@@ -94,9 +96,6 @@ export default defineComponent({
});
-@data-board";
diff --git a/src/components/feature-board/shared/InlineEditInteractionHandler.unit.ts b/src/components/feature-board/shared/InlineEditInteractionHandler.unit.ts
index 8527b3461b..53406811b9 100644
--- a/src/components/feature-board/shared/InlineEditInteractionHandler.unit.ts
+++ b/src/components/feature-board/shared/InlineEditInteractionHandler.unit.ts
@@ -1,23 +1,24 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import InlineEditInteractionHandler from "./InlineEditInteractionHandler.vue";
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
describe("InlineEditInteractionHandler", () => {
- let wrapper: Wrapper;
-
const setup = () => {
document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(InlineEditInteractionHandler as MountOptions, {
- ...createComponentMocks({}),
+ const wrapper = shallowMount(InlineEditInteractionHandler, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
propsData: { isEditMode: false },
});
+
+ return { wrapper };
};
describe("when component is mounted", () => {
it("should be found in the dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(InlineEditInteractionHandler).exists()).toBe(
true
);
@@ -27,7 +28,7 @@ describe("InlineEditInteractionHandler", () => {
describe("when clicked outside", () => {
it("should emit 'end-edit-mode'", async () => {
const event = document.createEvent("MouseEvent");
- setup();
+ const { wrapper } = setup();
wrapper.setProps({ isEditMode: true });
await wrapper.vm.$nextTick();
@@ -41,8 +42,8 @@ describe("InlineEditInteractionHandler", () => {
describe("when double clicked", () => {
it("should emit 'start-edit-mode'", () => {
- setup();
- const divElement = wrapper.findComponent({ ref: "event-handle" });
+ const { wrapper } = setup();
+ const divElement = wrapper.find('[data-testid="event-handle"]');
divElement.trigger("dblclick");
const emitted = wrapper.emitted();
@@ -52,11 +53,11 @@ describe("InlineEditInteractionHandler", () => {
describe("when 'esc' keystoke", () => {
it("should emit 'end-edit-mode'", async () => {
- setup();
+ const { wrapper } = setup();
wrapper.setProps({ isEditMode: true });
await wrapper.vm.$nextTick();
- const divElement = wrapper.findComponent({ ref: "event-handle" });
+ const divElement = wrapper.find('[data-testid="event-handle"]');
divElement.trigger("keydown.escape");
const emitted = wrapper.emitted();
diff --git a/src/components/feature-board/shared/InlineEditInteractionHandler.vue b/src/components/feature-board/shared/InlineEditInteractionHandler.vue
index af7a1058fc..4bc8f745fc 100644
--- a/src/components/feature-board/shared/InlineEditInteractionHandler.vue
+++ b/src/components/feature-board/shared/InlineEditInteractionHandler.vue
@@ -33,28 +33,24 @@ export default defineComponent({
const interactionEvent = shallowRef<{ x: number; y: number } | undefined>();
provide(InlineEditInteractionEvent, interactionEvent);
- const isDatePicker = (target: HTMLElement): boolean | void => {
- if (target.className?.includes("v-picker--date")) {
- return true;
- }
+ const isDatePicker = (target: HTMLElement | SVGElement): boolean | void => {
+ return !!target.closest(".v-date-picker");
+ };
- if (
- target.className?.includes("v-menu__content") ||
- !target.parentElement
- ) {
- return false;
- } else {
- return isDatePicker(target.parentElement);
- }
+ const isListItem = (target: HTMLElement | SVGElement): boolean => {
+ if (target instanceof SVGElement) return false;
+
+ return target.className?.includes("v-list-item");
};
const isAllowedTarget = (event: MouseEvent): boolean => {
- if (!(event.target instanceof HTMLElement)) return true;
+ if (
+ !(event.target instanceof HTMLElement) &&
+ !(event.target instanceof SVGElement)
+ )
+ return true;
- return (
- !event.target?.className?.includes("v-list-item") &&
- !isDatePicker(event.target)
- );
+ return !isListItem(event.target) && !isDatePicker(event.target);
};
const onClickOutside = (event: MouseEvent) => {
diff --git a/src/components/feature-editor/CKEditor.unit.ts b/src/components/feature-editor/CKEditor.unit.ts
index a9c6e7d7d4..c1d0dcfc88 100644
--- a/src/components/feature-editor/CKEditor.unit.ts
+++ b/src/components/feature-editor/CKEditor.unit.ts
@@ -1,8 +1,5 @@
-import Vue from "vue";
-import { MountOptions, mount } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { shallowMount } from "@vue/test-utils";
import CkEditor from "./CKEditor.vue";
-import { I18N_KEY } from "@/utils/inject";
import {
boardToolbarSimple,
boardToolbarRegular,
@@ -10,6 +7,10 @@ import {
boardPlugins,
newsPlugins,
} from "./config";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
type CkEditorProps = {
value?: string;
@@ -32,30 +33,25 @@ class ResizeObserver {
}
describe("CKEditor", () => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- let wrapper: any;
-
const setup = (props: CkEditorProps = {}) => {
- document.body.setAttribute("data-app", "true");
- wrapper = mount(CkEditor as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: props,
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ const wrapper = shallowMount(CkEditor, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
+ props,
});
+
+ const editorMock = { editing: { view: { document: { on: jest.fn() } } } };
+
+ return { wrapper, editorMock };
};
beforeEach(() => {
- // Avoids console warnings "[Vuetify] Unable to locate target [data-app]"
- document.body.setAttribute("data-app", "true");
window.ResizeObserver = ResizeObserver;
});
it("should render component", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(CkEditor).exists()).toBe(true);
});
@@ -68,60 +64,62 @@ describe("CKEditor", () => {
});
it("should have reduced board toolbar items in simple mode", () => {
- setup({ mode: "simple" });
+ const { wrapper } = setup({ mode: "simple" });
expect(wrapper.vm.config.toolbar.items).toHaveLength(
boardToolbarSimple.length
);
});
it("should have all board plugins available in simple mode", () => {
- setup({ mode: "simple" });
+ const { wrapper } = setup({ mode: "simple" });
expect(wrapper.vm.config.plugins).toHaveLength(boardPlugins.length);
});
it("should have all boards toolbar items in regular mode", () => {
- setup({ mode: "regular" });
+ const { wrapper } = setup({ mode: "regular" });
expect(wrapper.vm.config.toolbar.items).toHaveLength(
boardToolbarRegular.length
);
});
it("should have all board plugins available in regular mode", () => {
- setup({ mode: "regular" });
+ const { wrapper } = setup({ mode: "regular" });
expect(wrapper.vm.config.plugins).toHaveLength(boardPlugins.length);
});
it("should have all news toolbar items in news mode", () => {
- setup({ mode: "news" });
+ const { wrapper } = setup({ mode: "news" });
expect(wrapper.vm.config.toolbar.items).toHaveLength(newsToolbar.length);
});
it("should have all news plugins available in news mode", () => {
- setup({ mode: "news" });
+ const { wrapper } = setup({ mode: "news" });
expect(wrapper.vm.config.plugins).toHaveLength(newsPlugins.length);
});
describe("events", () => {
it("should emit ready on editor ready", async () => {
- setup();
+ const { wrapper, editorMock } = setup();
const ck = wrapper.findComponent({
ref: "ck",
});
- ck.vm.$emit("ready", {});
+
+ ck.vm.$emit("ready", editorMock);
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted();
+ expect(editorMock.editing.view.document.on).toHaveBeenCalled();
expect(emitted["ready"]).toHaveLength(1);
});
it("should emit update:value on content changes", async () => {
- setup();
+ const { wrapper, editorMock } = setup();
const ck = wrapper.findComponent({
ref: "ck",
});
- ck.vm.$emit("input");
+ ck.vm.$emit("update:modelValue", editorMock);
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted();
@@ -129,12 +127,12 @@ describe("CKEditor", () => {
});
it("should emit focus on editor focus", async () => {
- setup();
+ const { wrapper } = setup();
const ck = wrapper.findComponent({
ref: "ck",
});
- ck.vm.$emit("focus");
+ ck.trigger("focus");
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted();
@@ -143,7 +141,7 @@ describe("CKEditor", () => {
it("should emit delayed blur on editor blur", async () => {
jest.useFakeTimers();
- setup();
+ const { wrapper } = setup();
const ck = wrapper.findComponent({
ref: "ck",
@@ -156,7 +154,7 @@ describe("CKEditor", () => {
});
it("should emit delete on delete event and empty text", async () => {
- setup();
+ const { wrapper } = setup();
// due to not accessing the editor instance in test setup, we test here with implementation details
expect(wrapper.vm.charCount).toEqual(0);
@@ -167,10 +165,9 @@ describe("CKEditor", () => {
});
it("should not emit delete on delete event and non-empty text", async () => {
- setup();
+ const { wrapper } = setup();
- await wrapper.setData({ charCount: 1 });
- expect(wrapper.vm.charCount).toEqual(1);
+ wrapper.vm.charCount = 1;
wrapper.vm.handleDelete();
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted();
diff --git a/src/components/feature-editor/CKEditor.vue b/src/components/feature-editor/CKEditor.vue
index 9771cc4ae0..dc6af45ddd 100644
--- a/src/components/feature-editor/CKEditor.vue
+++ b/src/components/feature-editor/CKEditor.vue
@@ -24,13 +24,14 @@ import {
} from "./config";
import { DeviceMediaQuery } from "@/types/enum/device-media-query.enum";
import { useMediaQuery, useVModel } from "@vueuse/core";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
-import CKEditor from "@ckeditor/ckeditor5-vue2";
+import CKEditor from "@ckeditor/ckeditor5-vue";
import CustomCKEditor from "@hpi-schul-cloud/ckeditor";
import "@hpi-schul-cloud/ckeditor/build/translations/en";
import "@hpi-schul-cloud/ckeditor/build/translations/es";
import "@hpi-schul-cloud/ckeditor/build/translations/uk";
import { defineComponent, computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
window.katex = require("katex");
export default defineComponent({
@@ -45,7 +46,7 @@ export default defineComponent({
default: "",
},
placeholder: {
- type: String,
+ type: [String, undefined],
default: "",
},
type: {
@@ -66,7 +67,7 @@ export default defineComponent({
},
},
setup(props, { emit }) {
- const i18n = injectStrict(I18N_KEY);
+ const { t, locale } = useI18n();
const ck = ref(null);
const modelValue = useVModel(props, "value", emit);
@@ -76,7 +77,6 @@ export default defineComponent({
: CustomCKEditor.BalloonEditor;
});
- const language = i18n.locale;
const charCount = ref(0);
const toolbarItems = {
@@ -113,7 +113,7 @@ export default defineComponent({
{
model: "dullPinkMarker",
class: "marker-dull-pink",
- title: i18n.t("components.editor.highlight.dullPink").toString(),
+ title: t("components.editor.highlight.dullPink"),
color: "var(--ck-highlight-marker-dull-pink)",
type: "marker",
},
@@ -127,9 +127,7 @@ export default defineComponent({
{
model: "dullYellowMarker",
class: "marker-dull-yellow",
- title: i18n
- .t("components.editor.highlight.dullYellow")
- .toString(),
+ title: t("components.editor.highlight.dullYellow"),
color: "var(--ck-highlight-marker-dull-yellow)",
type: "marker",
},
@@ -143,7 +141,7 @@ export default defineComponent({
{
model: "dullBlueMarker",
class: "marker-dull-blue",
- title: i18n.t("components.editor.highlight.dullBlue").toString(),
+ title: t("components.editor.highlight.dullBlue"),
color: "var(--ck-highlight-marker-dull-blue)",
type: "marker",
},
@@ -157,7 +155,7 @@ export default defineComponent({
{
model: "dullGreenMarker",
class: "marker-dull-green",
- title: i18n.t("components.editor.highlight.dullGreen").toString(),
+ title: t("components.editor.highlight.dullGreen"),
color: "var(--ck-highlight-marker-dull-green)",
type: "marker",
},
@@ -175,7 +173,7 @@ export default defineComponent({
charCount.value = stats.characters;
},
},
- language: language,
+ language: locale.value,
placeholder: props.placeholder,
};
});
@@ -252,6 +250,10 @@ export default defineComponent({
.marker-dull-green {
background-color: var(--ck-highlight-marker-dull-green);
}
+ ul,
+ ol {
+ padding-left: revert;
+ }
}
.ck-blurred {
diff --git a/src/components/molecules/FormActions.unit.js b/src/components/feature-news-form/FormActions.unit.js
similarity index 100%
rename from src/components/molecules/FormActions.unit.js
rename to src/components/feature-news-form/FormActions.unit.js
diff --git a/src/components/molecules/FormActions.vue b/src/components/feature-news-form/FormActions.vue
similarity index 100%
rename from src/components/molecules/FormActions.vue
rename to src/components/feature-news-form/FormActions.vue
diff --git a/src/components/organisms/FormNews.unit.ts b/src/components/feature-news-form/FormNews.unit.ts
similarity index 64%
rename from src/components/organisms/FormNews.unit.ts
rename to src/components/feature-news-form/FormNews.unit.ts
index a6ac84232e..2592fb3427 100644
--- a/src/components/organisms/FormNews.unit.ts
+++ b/src/components/feature-news-form/FormNews.unit.ts
@@ -1,6 +1,4 @@
-import Vue from "vue";
-import { MountOptions, mount, Wrapper } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mount } from "@vue/test-utils";
import FormNews from "./FormNews.vue";
import { notifierModule } from "@/store";
import EnvConfigModule from "@/store/env-config";
@@ -8,7 +6,11 @@ import NotifierModule from "@/store/notifier";
import { DATETIME_FORMAT } from "@/plugins/datetime";
import dayjs from "dayjs";
import setupStores from "@@/tests/test-utils/setupStores";
-import { I18N_KEY } from "@/utils/inject";
+import { createStore } from "vuex";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const testDate = dayjs("2022-07-05T09:00:00.000Z");
@@ -24,42 +26,44 @@ const testNews: News = {
displayAt: `${testDate.toISOString()}`,
};
-describe("FormNews", () => {
- let wrapper: Wrapper;
+const $store = createStore({
+ modules: {
+ news: {
+ state: "",
+ mutations: {},
+ actions: {},
+ getters: {
+ getStatus: () => "completed",
+ },
+ },
+ },
+});
+const $route = {
+ name: "news-id",
+ params: {
+ id: "randomId",
+ },
+ query: {},
+};
+
+describe("FormNews", () => {
const setup = (news: News) => {
- wrapper = mount(FormNews as MountOptions, {
- ...createComponentMocks({
- $route: {
- name: "news-id",
- params: {
- id: "randomId",
- },
- query: {},
+ const wrapper = mount(FormNews, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $route,
+ $store,
},
- i18n: true,
- user: true,
- stubs: {
- BaseInput: true,
- },
- store: {
- news: {
- state: "",
- mutations: {},
- actions: {},
- getters: {
- getStatus: () => "completed",
- },
- },
- },
- }),
- propsData: {
- news: news,
+ stubs: ["base-input", "base-dialog"],
},
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ props: {
+ news,
},
});
+
+ return { wrapper };
};
beforeEach(() => {
@@ -70,46 +74,42 @@ describe("FormNews", () => {
});
it("should render component", () => {
- setup(testNews);
+ const { wrapper } = setup(testNews);
expect(wrapper.findComponent(FormNews).exists()).toBe(true);
});
it("passes date and time to input fields", async () => {
- setup(testNews);
+ const { wrapper } = setup(testNews);
const dateInput = wrapper.find('[data-testid="news_date"]');
- expect(dateInput.attributes("vmodel")).toStrictEqual(
+
+ expect(dateInput.attributes("modelvalue")).toStrictEqual(
testDate.format(DATETIME_FORMAT.inputDate)
);
const timeInput = wrapper.find('[data-testid="news_time"]');
- expect(timeInput.attributes("vmodel")).toStrictEqual(
+ expect(timeInput.attributes("modelvalue")).toStrictEqual(
testDate.format(DATETIME_FORMAT.inputTime)
);
});
describe("save", () => {
it("emits save event on submit with correct payload", async () => {
- setup({ ...testNews });
+ const { wrapper } = setup({ ...testNews });
wrapper.find("form").trigger("submit");
await wrapper.vm.$nextTick();
- const emitted = wrapper.emitted();
- expect(emitted["save"]).toHaveLength(1);
-
- if (emitted["save"] === undefined) {
- throw new Error("Emitted should be defined");
- }
+ expect(wrapper.emitted()).toHaveProperty("save");
- const saveEventPayload = emitted["save"][0][0];
+ const saveEventPayload = wrapper.emitted("save")?.at(0)?.[0];
expect(saveEventPayload).toMatchObject(testNews);
});
it("shows validation error on empty title", async () => {
const notifierMock = jest.spyOn(notifierModule, "show");
- setup({ ...testNews, title: "" });
+ const { wrapper } = setup({ ...testNews, title: "" });
wrapper.find("form").trigger("submit");
expect(notifierMock).toHaveBeenCalled();
@@ -119,7 +119,7 @@ describe("FormNews", () => {
it("shows validation error on empty content", async () => {
const notifierMock = jest.spyOn(notifierModule, "show");
- setup({ ...testNews, content: "" });
+ const { wrapper } = setup({ ...testNews, content: "" });
wrapper.find("form").trigger("submit");
expect(notifierMock).toHaveBeenCalled();
@@ -127,7 +127,7 @@ describe("FormNews", () => {
});
it("does not emit save event on empty title", async () => {
- setup({ ...testNews, title: "" });
+ const { wrapper } = setup({ ...testNews, title: "" });
wrapper.find("form").trigger("submit");
@@ -136,7 +136,7 @@ describe("FormNews", () => {
});
it("does not emit save event on empty content", async () => {
- setup({ ...testNews, content: "" });
+ const { wrapper } = setup({ ...testNews, content: "" });
wrapper.find("form").trigger("submit");
diff --git a/src/components/organisms/FormNews.vue b/src/components/feature-news-form/FormNews.vue
similarity index 91%
rename from src/components/organisms/FormNews.vue
rename to src/components/feature-news-form/FormNews.vue
index 41e510e093..7aec1a8d43 100644
--- a/src/components/organisms/FormNews.vue
+++ b/src/components/feature-news-form/FormNews.vue
@@ -1,6 +1,6 @@
, {
- ...createComponentMocks({
- i18n: true,
- }),
+ const wrapper = mount(LernStoreGrid, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
});
it("should render component", () => {
diff --git a/src/components/lern-store/LernStoreGrid.vue b/src/components/lern-store/LernStoreGrid.vue
index 8466479e0a..84338aaacd 100644
--- a/src/components/lern-store/LernStoreGrid.vue
+++ b/src/components/lern-store/LernStoreGrid.vue
@@ -33,16 +33,13 @@ export default defineComponent({
display: grid;
grid-gap: var(--space-md);
width: 100%;
- margin: 0 calc(10 * var(--border-width-bold)); /* 20px */
@include breakpoint(tablet) {
grid-gap: calc(9 * var(--border-width-bold)); /* 18px */
- margin: 0 calc(18 * var(--border-width-bold)); /* 36px */
}
@include breakpoint(desktop) {
grid-gap: var(--space-lg);
- margin: 0 calc(41 * var(--border-width)); /* 41px */
}
}
diff --git a/src/components/lern-store/LernStorePlayer.unit.js b/src/components/lern-store/LernStorePlayer.unit.js
index f2a0a12a08..b975a5d0ad 100644
--- a/src/components/lern-store/LernStorePlayer.unit.js
+++ b/src/components/lern-store/LernStorePlayer.unit.js
@@ -1,18 +1,34 @@
import LernStorePlayer from "./LernStorePlayer";
import { mount } from "@vue/test-utils";
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
+import { initializeAxios } from "@/utils/api";
+
+initializeAxios({
+ get: async () => {
+ return { data: [] };
+ },
+});
describe("@/components/molecules/LernStorePlayer", () => {
- const wrapper = mount(LernStorePlayer);
+ const setup = (props = {}) => {
+ const wrapper = mount(LernStorePlayer, {
+ props,
+ global: {
+ plugins: [createTestingVuetify()],
+ },
+ });
+ return {
+ wrapper,
+ };
+ };
it("Renders the wrapper", () => {
+ const { wrapper } = setup();
expect(wrapper.exists()).toBe(true);
});
- it("Renders Spinner", async () => {
- wrapper.setData({
- loading: true,
- });
- await wrapper.vm.$nextTick();
+ it("Renders Spinner", () => {
+ const { wrapper } = setup({ loading: true });
expect(wrapper.find(".player-iframe").exists()).toBe(false);
expect(
wrapper
@@ -21,33 +37,28 @@ describe("@/components/molecules/LernStorePlayer", () => {
).toBe(true);
});
- it("Renders Iframe", async () => {
- wrapper.setData({
- loading: false,
- });
- await wrapper.vm.$nextTick();
+ it("Renders Iframe", () => {
+ const { wrapper } = setup({ loading: false });
expect(wrapper.find(".player-iframe").exists()).toBe(true);
});
- it("Renders Iframe with data", async () => {
- wrapper.setData({
+ it("Renders Iframe with data", () => {
+ const { wrapper } = setup({
loading: false,
iframeSrc: "iframeTestSRC",
scriptSrc: "scriptTestSRC",
});
- await wrapper.vm.$nextTick();
expect(wrapper.find(".player-iframe").attributes("src")).toBe(
"iframeTestSRC"
);
});
- it("Renders script data", async () => {
- wrapper.setData({
+ it("Renders script data", () => {
+ const { wrapper } = setup({
loading: false,
iframeSrc: "iframeTestSRC",
scriptSrc: "scriptTestSRC",
});
- await wrapper.vm.$nextTick();
expect(wrapper.props("scriptSrc")).toBe("scriptTestSRC");
});
});
diff --git a/src/components/lern-store/LernstoreCollectionDetailView.unit.js b/src/components/lern-store/LernstoreCollectionDetailView.unit.js
index e978bc2b45..613bcf3e21 100644
--- a/src/components/lern-store/LernstoreCollectionDetailView.unit.js
+++ b/src/components/lern-store/LernstoreCollectionDetailView.unit.js
@@ -1,12 +1,14 @@
import LernstoreCollectionDetailView from "./LernstoreCollectionDetailView";
-import Vuex from "vuex";
import { Collection } from "@@/tests/test-utils/mockDataCollection";
-import VueRouter from "vue-router";
-import { createLocalVue } from "@vue/test-utils";
import ContentModule from "@/store/content";
import NotifierModule from "@/store/notifier";
import setupStores from "@@/tests/test-utils/setupStores";
import { initializeAxios } from "@/utils/api";
+import {
+ createTestingVuetify,
+ createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { RouterLinkStub } from "@vue/test-utils";
jest.mock("@/utils/pageTitle", () => ({
buildPageTitle: (pageTitle) => pageTitle ?? "",
@@ -24,12 +26,6 @@ const testProps = {
jest.spyOn(window, "scrollTo").mockImplementation();
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-localVue.use(Vuex);
-
-const router = new VueRouter();
-
setupStores({
contentModule: ContentModule,
notifierModule: NotifierModule,
@@ -40,19 +36,29 @@ describe("@/components/organisms/LernstoreCollectionDetailView", () => {
beforeEach(() => {
wrapper = shallowMount(LernstoreCollectionDetailView, {
- ...createComponentMocks({ i18n: true }),
- router,
- localVue,
- propsData: { ...testProps },
- computed: {
- loading: () => jest.fn(),
- elements: () => jest.fn(),
- selected: () => jest.fn(),
- },
- state: {
- loading: true,
- elements: {},
- selected: [],
+ props: { ...testProps },
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $route: {
+ query: {
+ id: "mockId",
+ },
+ },
+ },
+ stubs: {
+ RouterLink: RouterLinkStub,
+ },
+ computed: {
+ loading: () => jest.fn(),
+ elements: () => jest.fn(),
+ selected: () => jest.fn(),
+ },
+ state: {
+ loading: true,
+ elements: {},
+ selected: [],
+ },
},
});
});
diff --git a/src/components/lern-store/LernstoreCollectionDetailView.vue b/src/components/lern-store/LernstoreCollectionDetailView.vue
index 2f7e5932ca..9dfa4707cd 100644
--- a/src/components/lern-store/LernstoreCollectionDetailView.vue
+++ b/src/components/lern-store/LernstoreCollectionDetailView.vue
@@ -83,7 +83,7 @@
{{ $t("pages.content._id.collection.selectElements") }}
-
-
@@ -67,7 +71,7 @@
diff --git a/src/components/lern-store/LernStoreGrid.unit.ts b/src/components/lern-store/LernStoreGrid.unit.ts
index 28d72c3e59..a14d9323d8 100644
--- a/src/components/lern-store/LernStoreGrid.unit.ts
+++ b/src/components/lern-store/LernStoreGrid.unit.ts
@@ -1,13 +1,12 @@
-import Vue from "vue";
-import { MountOptions, mount } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mount } from "@vue/test-utils";
import LernStoreGrid from "./LernStoreGrid.vue";
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
describe("@/components/lern-store/LernStoreGrid", () => {
- const wrapper = mount(LernStoreGrid as MountOptions
+
({
buildPageTitle: (pageTitle) => pageTitle ?? "",
@@ -11,15 +15,20 @@ const testProps = {
describe("@/components/molecules/LernstoreDetailView", () => {
const wrapper = shallowMount(LernstoreDetailView, {
- ...createComponentMocks({
- i18n: true,
- $route: {
- query: {
- id: "mockId",
+ props: { ...testProps },
+ global: {
+ provide: {
+ mq: "mockMode",
+ },
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $route: {
+ query: {
+ id: "mockId",
+ },
},
},
- }),
- propsData: { ...testProps },
+ },
});
it("Renders close button", () => {
@@ -32,7 +41,9 @@ describe("@/components/molecules/LernstoreDetailView", () => {
expect(wrapper.find(".preview-img").attributes("src")).toBe(
Resource.preview.url
);
- expect(wrapper.find(".preview-img").attributes("alt")).toBe("Bildvorschau");
+ expect(wrapper.find(".preview-img").attributes("alt")).toBe(
+ "pages.content.preview_img.alt"
+ );
});
it("Renders sidebar with data", () => {
diff --git a/src/components/lern-store/LernstoreDetailView.vue b/src/components/lern-store/LernstoreDetailView.vue
index 3ca7b926c0..7068913782 100644
--- a/src/components/lern-store/LernstoreDetailView.vue
+++ b/src/components/lern-store/LernstoreDetailView.vue
@@ -2,8 +2,8 @@
("@/utils/pageTitle", () => ({
@@ -13,14 +13,13 @@ describe("@pages/ColumnBoard.page.vue", () => {
const setup = () => {
const boardId = "test-board-id";
- const wrapper = shallowMount(ColumnBoardPage as MountOptions, {
- ...createComponentMocks({ i18n: true }),
+ const wrapper = shallowMount(ColumnBoardPage, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
propsData: {
boardId,
},
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- },
});
return {
diff --git a/src/components/page-board/ColumnBoard.page.vue b/src/components/page-board/ColumnBoard.page.vue
index ba4067b11d..77119b4526 100644
--- a/src/components/page-board/ColumnBoard.page.vue
+++ b/src/components/page-board/ColumnBoard.page.vue
@@ -1,5 +1,10 @@
-
+
diff --git a/src/components/page-class-members/ClassMembers.page.unit.ts b/src/components/page-class-members/ClassMembers.page.unit.ts
index c32d2e1e3d..10ea938b79 100644
--- a/src/components/page-class-members/ClassMembers.page.unit.ts
+++ b/src/components/page-class-members/ClassMembers.page.unit.ts
@@ -1,8 +1,6 @@
-import { mount, MountOptions } from "@vue/test-utils";
-import Vue, { ref } from "vue";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
+import { mount } from "@vue/test-utils";
+import { ref } from "vue";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import ClassMembersPage from "@/components/page-class-members/ClassMembers.page.vue";
import { Group, useGroupState } from "@data-group";
import { createMock, DeepMocked } from "@golevelup/ts-jest";
@@ -10,33 +8,46 @@ import { groupFactory } from "@@/tests/test-utils/factory";
import ClassMembersInfoBox from "@/components/page-class-members/ClassMembersInfoBox.vue";
import { createModuleMocks } from "@/utils/mock-store-module";
import NotifierModule from "@/store/notifier";
-
-jest.mock("@data-group");
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import vueDompurifyHTMLPlugin from "vue-dompurify-html";
+
+jest.mock("@data-group", () => {
+ return {
+ ...jest.requireActual("@data-group"),
+ useGroupState: jest.fn(),
+ };
+});
describe("@pages/ClassMembers.page.vue", () => {
let useGroupStateMock: DeepMocked>;
- const getWrapper = (
- propsData: { groupId: string },
- group: Group = groupFactory.build()
- ) => {
- document.body.setAttribute("data-app", "true");
+ const setup = (props: { groupId: string }) => {
+ const group: Group = groupFactory.build();
useGroupStateMock.isLoading = ref(false);
useGroupStateMock.group = ref(group);
const notifierModule = createModuleMocks(NotifierModule);
- const wrapper = mount(ClassMembersPage as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- propsData: { ...propsData },
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ const wrapper = mount(ClassMembersPage, {
+ props,
+ global: {
+ plugins: [
+ createTestingVuetify(),
+ createTestingI18n(),
+ vueDompurifyHTMLPlugin,
+ ],
+ provide: {
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ },
},
});
return {
+ group,
wrapper,
};
};
@@ -52,24 +63,10 @@ describe("@pages/ClassMembers.page.vue", () => {
});
describe("title", () => {
- const setup = () => {
- const group: Group = groupFactory.build();
-
- const { wrapper } = getWrapper(
- {
- groupId: "groupId",
- },
- group
- );
-
- return {
- wrapper,
- group,
- };
- };
-
it("should render static title", () => {
- const { wrapper, group } = setup();
+ const { wrapper, group } = setup({
+ groupId: "groupId",
+ });
const title = wrapper.find("h1");
@@ -77,7 +74,9 @@ describe("@pages/ClassMembers.page.vue", () => {
});
it("should show subtitle that group is from external system", () => {
- const { wrapper } = setup();
+ const { wrapper } = setup({
+ groupId: "groupId",
+ });
const title = wrapper.find("h1");
const subtitle = title.find("span");
@@ -87,47 +86,35 @@ describe("@pages/ClassMembers.page.vue", () => {
});
describe("breadcrumbs", () => {
- const setup = () => {
- const group: Group = groupFactory.build();
-
- const { wrapper } = getWrapper(
- {
- groupId: "groupId",
- },
- group
- );
-
- return {
- wrapper,
- group,
- };
- };
-
it("should render static breadcrumbs", () => {
- const { wrapper } = setup();
+ const { wrapper } = setup({
+ groupId: "groupId",
+ });
const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
- expect(breadcrumbs.at(0).text()).toEqual(
+ expect(breadcrumbs.at(0)?.text()).toEqual(
"pages.administration.index.title"
);
- expect(breadcrumbs.at(1).text()).toEqual(
+ expect(breadcrumbs.at(1)?.text()).toEqual(
"pages.administration.classes.index.title"
);
});
it("should render dynamic class name breadcrumb", () => {
- const { wrapper, group } = setup();
+ const { wrapper, group } = setup({
+ groupId: "groupId",
+ });
const breadcrumb = wrapper.findAll(".breadcrumbs-item").at(2);
- expect(breadcrumb.text()).toEqual(`common.labels.class '${group.name}'`);
+ expect(breadcrumb?.text()).toEqual(`common.labels.class '${group.name}'`);
});
});
describe("onMounted", () => {
it("should load the group for given groupId", async () => {
- getWrapper({
+ setup({
groupId: "groupId",
});
@@ -136,24 +123,10 @@ describe("@pages/ClassMembers.page.vue", () => {
});
describe("datatable", () => {
- const setup = () => {
- const group = groupFactory.build();
-
- const { wrapper } = getWrapper(
- {
- groupId: "groupId",
- },
- group
- );
-
- return {
- wrapper,
- group,
- };
- };
-
it("should render datatable", () => {
- const { wrapper } = setup();
+ const { wrapper } = setup({
+ groupId: "groupId",
+ });
const datatable = wrapper.findComponent({ name: "v-data-table" });
@@ -161,28 +134,35 @@ describe("@pages/ClassMembers.page.vue", () => {
});
it("should render datatable with correct headers", () => {
- const { wrapper } = setup();
+ const { wrapper } = setup({
+ groupId: "groupId",
+ });
const datatable = wrapper.findComponent({ name: "v-data-table" });
expect(datatable.props("headers")).toEqual([
{
- text: "common.labels.name",
+ key: "lastName",
+ title: "common.labels.name",
value: "lastName",
},
{
- text: "common.labels.firstName",
+ key: "firstName",
+ title: "common.labels.firstName",
value: "firstName",
},
{
- text: "common.labels.role",
+ key: "roleName",
+ title: "common.labels.role",
value: "roleName",
},
]);
});
it("should render datatable with correct items", () => {
- const { wrapper, group } = setup();
+ const { wrapper, group } = setup({
+ groupId: "groupId",
+ });
const datatable = wrapper.findComponent({ name: "v-data-table" });
@@ -190,7 +170,7 @@ describe("@pages/ClassMembers.page.vue", () => {
{
firstName: group.users[0].firstName,
lastName: group.users[0].lastName,
- roleName: "undefined",
+ roleName: "common.roleName.student",
},
]);
});
@@ -198,7 +178,7 @@ describe("@pages/ClassMembers.page.vue", () => {
describe("ClassMembersInfoBox", () => {
it("should render ClassMembersInfoBox", () => {
- const { wrapper } = getWrapper({
+ const { wrapper } = setup({
groupId: "groupId",
});
diff --git a/src/components/page-class-members/ClassMembers.page.vue b/src/components/page-class-members/ClassMembers.page.vue
index 4aa41d2b06..4cba3b3c59 100644
--- a/src/components/page-class-members/ClassMembers.page.vue
+++ b/src/components/page-class-members/ClassMembers.page.vue
@@ -1,6 +1,6 @@
{{ title }}
- ({{ t("page-class-members.title.info") }})
+ ({{ $t("page-class-members.title.info") }})
@@ -17,8 +17,8 @@
:items="items"
:headers="headers"
:loading="isLoading"
- :loading-text="t('common.loading.text')"
- :no-data-text="t('common.nodata')"
+ :loading-text="$t('common.loading.text')"
+ :no-data-text="$t('common.nodata')"
data-testid="class-members-table"
/>
;
+ let wrapper: VueWrapper;
- const mountComponent = (attrs = {}) => {
+ const mountComponent = (options = {}) => {
const envConfigModuleMock = createModuleMocks(EnvConfigModule, {
getCtlToolsTabEnabled: false,
});
- return mount(TasksDashboardMain as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- $router,
- $route,
- }),
- provide: {
- tasksModule: tasksModuleMock,
- copyModule: copyModuleMock,
- finishedTasksModule: finishedTasksModuleMock,
- loadingStateModule: loadingStateModuleMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
- shareModule: shareModuleMock,
- authModule: authModuleMock,
- [I18N_KEY as symbol]: { t: (key: string) => key },
- [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
+ return mount(TasksDashboardMain, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ tasksModule: tasksModuleMock,
+ copyModule: copyModuleMock,
+ finishedTasksModule: finishedTasksModuleMock,
+ loadingStateModule: loadingStateModuleMock,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
+ shareModule: shareModuleMock,
+ authModule: authModuleMock,
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
+ },
+ mocks: {
+ $router,
+ $route,
+ },
},
- ...attrs,
+ ...options,
});
};
@@ -125,7 +124,9 @@ describe("@/components/templates/TasksDashboardMain", () => {
TasksModule,
defaultTasksModuleGetters
);
- copyModuleMock = createModuleMocks(CopyModule);
+ copyModuleMock = createModuleMocks(CopyModule, {
+ getIsResultModalOpen: false,
+ });
loadingStateModuleMock = createModuleMocks(LoadingStateModule);
finishedTasksModuleMock = createModuleMocks(FinishedTasksModule, {
@@ -138,7 +139,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "student",
},
});
@@ -161,7 +162,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
it("should not render add task button", () => {
- const fab = wrapper.findComponent(vCustomFab);
+ const fab = wrapper.findComponent(SpeedDialMenu);
expect(fab.exists()).toBe(false);
});
@@ -187,15 +188,16 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "student",
},
});
});
- it("should call 'setCourseFilters' mutation with v-autocomplete on change", () => {
- const autocompleteEl = wrapper.find(".v-autocomplete");
- autocompleteEl.vm.$emit("selected-item");
+ it("should call 'setCourseFilters' mutation with v-autocomplete on change", async () => {
+ const autocompleteEl =
+ wrapper.findComponent(".v-autocomplete");
+ autocompleteEl.vm.$emit("update:modelValue");
expect(tasksModuleMock.setCourseFilters).toHaveBeenCalled();
});
@@ -224,7 +226,9 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
loadingStateModuleMock = createModuleMocks(LoadingStateModule);
notifierModuleMock = createModuleMocks(NotifierModule);
- shareModuleMock = createModuleMocks(ShareModule);
+ shareModuleMock = createModuleMocks(ShareModule, {
+ getIsShareModalOpen: false,
+ });
finishedTasksModuleMock = createModuleMocks(FinishedTasksModule, {
getTasks: [],
@@ -239,7 +243,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
authModule.setUser(mockAuthStoreDataTeacher as User);
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -262,13 +266,13 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
it("should render add task button", () => {
- const fabComponent: any = wrapper.find(".wireframe-fab");
+ const fabComponent = wrapper.find(".wireframe-fab");
expect(fabComponent.exists()).toEqual(true);
});
it("'add task' button should have correct path", async () => {
- const fabComponent: any = wrapper.find(".wireframe-fab");
- expect(fabComponent.vm.href).toStrictEqual(
+ const fabComponent = await wrapper.findComponent(SpeedDialMenu);
+ expect(fabComponent.props("href")).toStrictEqual(
"/homework/new?returnUrl=tasks"
);
});
@@ -286,7 +290,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -303,7 +307,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -320,7 +324,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -337,7 +341,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -348,8 +352,10 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
it("should call 'setSubstituteFilter' mutation on switch 'input-changed' event", async () => {
- const switchEl = wrapper.find(".v-input--switch");
- switchEl.vm.$emit("input-changed");
+ const switchEl = wrapper
+ .findComponent({ name: "v-switch" })
+ .get('input[type="checkbox"');
+ await switchEl.trigger("input");
expect(tasksModuleMock.setSubstituteFilter).toHaveBeenCalled();
});
@@ -363,7 +369,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "teacher",
},
});
@@ -398,7 +404,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "student",
},
});
@@ -431,7 +437,7 @@ describe("@/components/templates/TasksDashboardMain", () => {
});
wrapper = mountComponent({
- propsData: {
+ props: {
role: "student",
},
});
diff --git a/src/components/templates/TasksDashboardMain.vue b/src/components/templates/TasksDashboardMain.vue
index 079f7e8656..8419fc49f9 100644
--- a/src/components/templates/TasksDashboardMain.vue
+++ b/src/components/templates/TasksDashboardMain.vue
@@ -4,60 +4,74 @@
:full-width="false"
:fab-items="fabItems"
>
-
diff --git a/src/themes/brb/vuetify.options.js b/src/themes/brb/vuetify.options.js
index 63e1309a10..e27b70ae85 100644
--- a/src/themes/brb/vuetify.options.js
+++ b/src/themes/brb/vuetify.options.js
@@ -6,18 +6,14 @@ const custom = {
dark: false,
themes: {
light: {
- primary: {
- base: "#0a9396",
- darken1: "#086e71",
- lighten: "#e6f4f5",
- },
- secondary: {
- base: "#38677a",
- lighten1: "#567e8e",
- darken1: "#2a4d5b",
- },
- accent: {
- base: "#e4032e",
+ colors: {
+ primary: "#0a9396",
+ "primary-darken-1": "#086e71",
+ "primary-lighten": "#e6f4f5",
+ secondary: "#38677a",
+ "secondary-lighten-1": "#567e8e",
+ "secondary-darken-1": "#2a4d5b",
+ accent: "#e4032e",
},
},
},
diff --git a/src/themes/n21/components/legacy/TheFooter.vue b/src/themes/n21/components/legacy/TheFooter.vue
index 42853ed6ac..614a6f9761 100644
--- a/src/themes/n21/components/legacy/TheFooter.vue
+++ b/src/themes/n21/components/legacy/TheFooter.vue
@@ -104,7 +104,7 @@ export default {
width: 100%;
padding: 0 var(--space-md);
margin: var(--space-lg) 0 var(--space-md);
- color: var(--v-secondary-darken1);
+ color: rgba(var(--v-theme-secondary-darken-1));
text-align: center;
}
@@ -115,17 +115,17 @@ export default {
}
.footer-link {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
border: none;
&:focus,
&:hover {
- color: var(--v-primary-darken1);
+ color: rgba(var(--v-theme-primary-darken-1));
text-decoration: underline;
}
&:visited {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
}
}
diff --git a/src/themes/n21/vuetify.options.js b/src/themes/n21/vuetify.options.js
index cbb2d8c1d1..5b8c660b50 100644
--- a/src/themes/n21/vuetify.options.js
+++ b/src/themes/n21/vuetify.options.js
@@ -6,18 +6,14 @@ const custom = {
dark: false,
themes: {
light: {
- primary: {
- base: "#2876d0",
- darken1: "#1e599c",
- lighten: "#e9f1fa",
- },
- secondary: {
- base: "#355478",
- lighten1: "#536e8c",
- darken1: "#283f5a",
- },
- accent: {
- base: "#970000",
+ colors: {
+ primary: "#2876d0",
+ "primary-darken-1": "#1e599c",
+ "primary-lighten": "#e9f1fa",
+ secondary: "#355478",
+ "secondary-lighten-1": "#536e8c",
+ "secondary-darken-1": "#283f5a",
+ accent: "#970000",
},
},
},
diff --git a/src/themes/thr/components/legacy/TheFooter.vue b/src/themes/thr/components/legacy/TheFooter.vue
index 3c1e046614..16dda84ead 100644
--- a/src/themes/thr/components/legacy/TheFooter.vue
+++ b/src/themes/thr/components/legacy/TheFooter.vue
@@ -10,16 +10,16 @@
{{ link.text }}:
-
+
/
- {{ innerlink.text }}
+ {{
+ innerlink.text
+ }}
@@ -118,7 +118,7 @@ export default {
width: 100%;
padding: 0 var(--space-md);
margin: var(--space-lg) 0 var(--space-md);
- color: var(--v-secondary-darken1);
+ color: rgba(var(--v-theme-secondary-darken-1));
text-align: center;
}
@@ -138,7 +138,7 @@ export default {
margin-top: var(--space-xs);
.heart {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
}
.poweredby-logo {
@@ -148,17 +148,17 @@ export default {
}
.footer-link {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
border: none;
&:focus,
&:hover {
- color: var(--v-primary-darken1);
+ color: rgba(var(--v-theme-primary-darken-1));
text-decoration: underline;
}
&:visited {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
}
}
diff --git a/src/themes/thr/vuetify.options.js b/src/themes/thr/vuetify.options.js
index a3d3652248..14cc2db270 100644
--- a/src/themes/thr/vuetify.options.js
+++ b/src/themes/thr/vuetify.options.js
@@ -6,18 +6,14 @@ const custom = {
dark: false,
themes: {
light: {
- primary: {
- base: "#2876d0",
- darken1: "#1e599c",
- lighten: "#e9f1fa",
- },
- secondary: {
- base: "#185888",
- lighten1: "#3b719a",
- darken1: "#124266",
- },
- accent: {
- base: "#f56b00",
+ colors: {
+ primary: "#2876d0",
+ "primary-darken-1": "#1e599c",
+ "primary-lighten": "#e9f1fa",
+ secondary: "#185888",
+ "secondary-lighten-1": "#3b719a",
+ "secondary-darken-1": "#124266",
+ accent: "#f56b00",
},
},
},
diff --git a/src/types/board/DragAndDrop.ts b/src/types/board/DragAndDrop.ts
index d153904cf8..415d0ea5f7 100644
--- a/src/types/board/DragAndDrop.ts
+++ b/src/types/board/DragAndDrop.ts
@@ -2,17 +2,19 @@ import { BoardColumn, BoardSkeletonCard } from "./Board";
import { AnyContentElement } from "./ContentElement";
export interface CardMove {
- removedIndex: number | null;
- addedIndex: number | null;
- payload: BoardSkeletonCard;
- columnId?: string;
- columnIndex?: number;
+ cardId: string;
+ oldIndex: number;
+ newIndex: number;
+ fromColumnId: string;
+ toColumnId?: string;
+ columnDelta?: number;
+ forceNextTick?: boolean;
}
export interface ColumnMove {
addedIndex: number;
- removedIndex: number;
- payload: BoardColumn["id"];
+ removedIndex?: number | null;
+ columnId: BoardColumn["id"];
}
export interface ElementMove {
diff --git a/src/types/vuetify/index.ts b/src/types/vuetify/index.ts
new file mode 100644
index 0000000000..2f93d97461
--- /dev/null
+++ b/src/types/vuetify/index.ts
@@ -0,0 +1,21 @@
+type SelectItemKey =
+ | boolean
+ | string
+ | (string | number)[]
+ | ((item: Record, fallback?: any) => any);
+
+export type DataTableCompareFunction = (a: T, b: T) => number;
+export type DataTableHeader = {
+ key: string;
+ value?: SelectItemKey;
+ title: string;
+ colspan?: number;
+ rowspan?: number;
+ fixed?: boolean;
+ align?: "start" | "end" | "center";
+ width?: number | string;
+ minWidth?: string;
+ maxWidth?: string;
+ sortable?: boolean;
+ sort?: DataTableCompareFunction;
+};
diff --git a/src/utils/TestUtil.js b/src/utils/TestUtil.js
deleted file mode 100644
index f7579f3865..0000000000
--- a/src/utils/TestUtil.js
+++ /dev/null
@@ -1,14 +0,0 @@
-//TODO utility function for translation contructor mount
-/* import Vue from "vue";
-import VueI18n from "vue-i18n";
-
-module.exports = {
- getRenderedComponent(Component, propsData) {
- const Constructor = Vue.extend(Component);
- return new Constructor({
- VueI18n,
- propsData,
- });
- },
-};
- */
diff --git a/src/utils/adminFilter.js b/src/utils/adminFilter.js
deleted file mode 100644
index 4221a5231c..0000000000
--- a/src/utils/adminFilter.js
+++ /dev/null
@@ -1,337 +0,0 @@
-import { authModule } from "@/store";
-import InputCheckbox from "@/components/organisms/DataFilter/inputs/Checkbox";
-import InputDefault from "@/components/organisms/DataFilter/inputs/Default";
-
-import { fromInputDateTime, printDate } from "@/plugins/datetime";
-
-const defaultFilterFromDate = "1900-01-01";
-const defaultFilterToDate = "2099-12-31";
-
-const getFilterDateCreatedFromTo = (ctx) => ({
- title: ctx.$t("utils.adminFilter.date.title"),
- chipTemplate: (filter) => {
- return `${ctx.$t("utils.adminFilter.date.created")} ${printDate(
- filter[0] || defaultFilterFromDate
- )} ${ctx.$t("common.words.and")} ${printDate(
- filter[1] || defaultFilterToDate
- )} `;
- },
- dataTestid: "filter_creationDate",
- parser: {
- generator: (filterGroupConfig, values) => {
- try {
- return {
- createdAt: {
- $gte: fromInputDateTime(
- values[filterGroupConfig.filter[0].id] || defaultFilterFromDate
- )
- .utc()
- .format(),
- $lte: fromInputDateTime(
- values[filterGroupConfig.filter[1].id] || defaultFilterToDate
- )
- .endOf("day")
- .utc()
- .format(),
- },
- };
- } catch (error) {
- console.warn(error);
- return;
- }
- },
- parser: (filterGroupConfig, query) => {
- return {
- [filterGroupConfig.filter[0].id]: query?.createdAt?.$gte,
- [filterGroupConfig.filter[1].id]: query?.createdAt?.$lte,
- };
- },
- },
- filter: [
- {
- attribute: "createdAt",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.date.label.from"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- {
- attribute: "createdAt",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.date.label.until"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- ],
-});
-
-const getFilterDateOutdatedSinceFromTo = (ctx) => ({
- title: ctx.$t("utils.adminFilter.outdatedSince.title"),
- chipTemplate: (filter) => {
- return `${ctx.$t("utils.adminFilter.outdatedSince.title")} ${printDate(
- filter[0] || defaultFilterFromDate
- )} ${ctx.$t("common.words.and")} ${printDate(
- filter[1] || defaultFilterToDate
- )} `;
- },
- dataTestid: "filter_outdatedSinceDate",
- parser: {
- generator: (filterGroupConfig, values) => {
- try {
- return {
- outdatedSince: {
- $gte: fromInputDateTime(
- values[filterGroupConfig.filter[0].id] || defaultFilterFromDate
- )
- .utc()
- .format(),
- $lte: fromInputDateTime(
- values[filterGroupConfig.filter[1].id] || defaultFilterToDate
- )
- .endOf("day")
- .utc()
- .format(),
- },
- };
- } catch (error) {
- console.warn(error);
- return;
- }
- },
- parser: (filterGroupConfig, query) => {
- return {
- [filterGroupConfig.filter[0].id]: query?.outdatedSince?.$gte,
- [filterGroupConfig.filter[1].id]: query?.outdatedSince?.$lte,
- };
- },
- },
- filter: [
- {
- attribute: "outdatedSince",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.outdatedSince.label.from"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- {
- attribute: "outdatedSince",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.outdatedSince.label.until"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- ],
-});
-
-const getFilterDateLastMigrationSinceFromTo = (ctx) => ({
- title: ctx.$t("utils.adminFilter.lastMigration.title"),
- chipTemplate: (filter) => {
- return `${ctx.$t("utils.adminFilter.lastMigration.title")} ${printDate(
- filter[0] || defaultFilterFromDate
- )} ${ctx.$t("common.words.and")} ${printDate(
- filter[1] || defaultFilterToDate
- )} `;
- },
- dataTestid: "filter_lastMigrationDate",
- parser: {
- generator: (filterGroupConfig, values) => {
- try {
- return {
- lastLoginSystemChange: {
- $gte: fromInputDateTime(
- values[filterGroupConfig.filter[0].id] || defaultFilterFromDate
- )
- .utc()
- .format(),
- $lte: fromInputDateTime(
- values[filterGroupConfig.filter[1].id] || defaultFilterToDate
- )
- .endOf("day")
- .utc()
- .format(),
- },
- };
- } catch (error) {
- console.warn(error);
- return;
- }
- },
- parser: (filterGroupConfig, query) => {
- return {
- [filterGroupConfig.filter[0].id]: query?.lastLoginSystemChange?.$gte,
- [filterGroupConfig.filter[1].id]: query?.lastLoginSystemChange?.$lte,
- };
- },
- },
- filter: [
- {
- attribute: "lastLoginSystemChange",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.lastMigration.label.from"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- {
- attribute: "lastLoginSystemChange",
- input: InputDefault,
- label: ctx.$t("utils.adminFilter.lastMigration.label.until"),
- attributes: {
- type: "date",
- placeholder: ctx.$t("format.dateUTC"), //placeholder for browsers which do not support input type=date
- },
- },
- ],
-});
-
-const getClassesNames = async (ctx, arr) => {
- const { currentYear } = authModule.getSchool;
- await ctx.$store.dispatch("classes/find", {
- query: {
- $limit: 1000,
- year: currentYear._id,
- },
- });
- const classes = ctx.$store.state["classes"].list || [];
- classes
- .reduce((acc, kl) => [...new Set(acc.concat(kl.displayName))], [])
- .forEach((cl) => {
- arr.push({
- value: cl,
- label: cl,
- });
- });
-};
-
-export function studentFilter(ctx) {
- const classesFilteringOptions = [];
- getClassesNames(ctx, classesFilteringOptions);
-
- return [
- {
- title: ctx.$t("common.labels.registration"),
- chipTemplate: ([filteredStatus]) => {
- const status = filteredStatus.map((stat) => {
- if (stat === "ok") {
- return ctx.$t("pages.administration.students.legend.icon.success");
- } else if (stat === "parentsAgreed") {
- return ctx.$t(
- "utils.adminFilter.consent.label.parentsAgreementMissing"
- );
- } else if (stat === "missing") {
- return ctx.$t("utils.adminFilter.consent.label.missing");
- }
- });
- return ` ${status.join(" " + ctx.$t("common.words.and") + " ")}`;
- },
- dataTestid: "filter_registration",
- filter: [
- {
- attribute: "consentStatus",
- operator: "includes",
- input: InputCheckbox,
- options: [
- {
- value: "ok",
- label: ctx.$t(
- "pages.administration.students.legend.icon.success"
- ),
- },
- {
- value: "parentsAgreed",
- label: ctx.$t(
- "utils.adminFilter.consent.label.parentsAgreementMissing"
- ),
- },
- {
- value: "missing",
- label: ctx.$t("utils.adminFilter.consent.label.missing"),
- },
- ],
- },
- ],
- },
- {
- title: ctx.$t("utils.adminFilter.class.title"),
- chipTemplate: `${ctx.$t("utils.adminFilter.class.title")} = %1`,
- dataTestid: "filter_classes",
- filter: [
- {
- attribute: "classes",
- operator: "=",
- input: InputCheckbox,
- options: classesFilteringOptions,
- },
- ],
- },
- getFilterDateCreatedFromTo(ctx),
- getFilterDateLastMigrationSinceFromTo(ctx),
- getFilterDateOutdatedSinceFromTo(ctx),
- ];
-}
-
-export function teacherFilter(ctx) {
- const classesFilteringOptions = [];
- getClassesNames(ctx, classesFilteringOptions);
-
- return [
- {
- title: ctx.$t("utils.adminFilter.consent.title"),
- chipTemplate: ([filteredStatus]) => {
- const status = filteredStatus.map((stat) => {
- if (stat === "ok") {
- return ctx.$t("pages.administration.students.legend.icon.success");
- } else if (stat === "missing") {
- return ctx.$t("utils.adminFilter.consent.label.missing");
- }
- });
- return ` ${status.join(" " + ctx.$t("common.words.and") + " ")}`;
- },
- dataTestid: "filter_registration",
- filter: [
- {
- attribute: "consentStatus",
- operator: "includes",
- input: InputCheckbox,
- options: [
- {
- value: "ok",
- label: ctx.$t(
- "pages.administration.students.legend.icon.success"
- ),
- },
- {
- value: "missing",
- label: ctx.$t("utils.adminFilter.consent.label.missing"),
- },
- ],
- },
- ],
- },
- {
- title: ctx.$t("utils.adminFilter.class.title"),
- chipTemplate: `${ctx.$t("utils.adminFilter.class.title")} = %1`,
- dataTestid: "filter_classes",
- filter: [
- {
- attribute: "classes",
- operator: "=",
- input: InputCheckbox,
- options: classesFilteringOptions,
- },
- ],
- },
- getFilterDateCreatedFromTo(ctx),
- getFilterDateLastMigrationSinceFromTo(ctx),
- getFilterDateOutdatedSinceFromTo(ctx),
- ];
-}
diff --git a/src/utils/adminFilter.unit.js b/src/utils/adminFilter.unit.js
deleted file mode 100644
index eee6933cf6..0000000000
--- a/src/utils/adminFilter.unit.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import { studentFilter } from "./adminFilter";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc"; // dependent on utc plugin
-import timezone from "dayjs/plugin/timezone";
-import relativeTime from "dayjs/plugin/relativeTime";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import setupStores from "@@/tests/test-utils/setupStores";
-import AuthModule from "@/store/auth";
-import SchoolsModule from "@/store/schools";
-
-dayjs.extend(customParseFormat);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-
-const CTX_MOCK = {
- $t: (i18nMockKey) => {
- return i18nMockKey;
- },
- $store: {
- dispatch: jest.fn(),
- state: {
- classes: { list: [] },
- },
- },
-};
-
-setupStores({ authModule: AuthModule, schoolsModule: SchoolsModule });
-
-const filter = studentFilter(CTX_MOCK);
-const filterDateCreatedFromTo = filter[2];
-
-const MOCK_DATA = {
- filterGroupConfig: {
- filter: [{ id: "input-2-0" }, { id: "input-2-1" }],
- },
- emptyDates: {
- "input-2-0": "",
- "input-2-1": "",
- },
- dateValues: {
- "input-2-0": "2021-04-01",
- "input-2-1": "2021-05-01",
- },
- firstDateEmpty: {
- "input-2-0": "",
- "input-2-1": "2021-03-01",
- },
- secondDateEmpty: {
- "input-2-0": "2021-02-01",
- "input-2-1": "",
- },
-};
-
-describe("@/utils/adminFilter", () => {
- describe("getFilterDateCreatedFromTo", () => {
- it("returns UTC date values for input values", () => {
- const expected_gte_date = dayjs.tz("2021-04-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-05-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.dateValues
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter default value if no input", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.emptyDates
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter second date value is empty", () => {
- const expected_gte_date = dayjs.tz("2021-02-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.secondDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter first date value is empty", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-03-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.firstDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
- });
-
- describe("getFilterDateOutdatedSinceFromTo", () => {
- it("returns UTC date values for input values", () => {
- const expected_gte_date = dayjs.tz("2021-04-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-05-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.dateValues
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter default value if no input", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.emptyDates
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter second date value is empty", () => {
- const expected_gte_date = dayjs.tz("2021-02-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.secondDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter first date value is empty", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-03-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.firstDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
- });
-
- describe("getFilterDateLastMigrationSinceFromTo", () => {
- it("returns UTC date values for input values", () => {
- const expected_gte_date = dayjs.tz("2021-04-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-05-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.dateValues
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter default value if no input", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.emptyDates
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter second date value is empty", () => {
- const expected_gte_date = dayjs.tz("2021-02-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2099-12-31")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.secondDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
-
- it("returns filter first date value is empty", () => {
- const expected_gte_date = dayjs.tz("1900-01-01").utc().format();
- const expected_lte_date = dayjs
- .tz("2021-03-01")
- .endOf("day")
- .utc()
- .format();
-
- const { createdAt } = filterDateCreatedFromTo.parser.generator(
- MOCK_DATA.filterGroupConfig,
- MOCK_DATA.firstDateEmpty
- );
-
- expect(createdAt.$gte).toBe(expected_gte_date);
- expect(createdAt.$lte).toBe(expected_lte_date);
- });
- });
-});
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 884204ac56..76c2cb3f79 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,13 +1,16 @@
import { ApiResponseError, ApiValidationError } from "@/store/types/commons";
import { isObject } from "@vueuse/core";
import { AxiosInstance, isAxiosError } from "axios";
-import Vue from "vue";
+import { getCurrentInstance } from "vue";
let $axios: AxiosInstance;
export const initializeAxios = (axios: AxiosInstance) => {
$axios = axios;
- Vue.prototype.$axios = axios;
+ const app = getCurrentInstance()?.appContext.app;
+ if (app) {
+ app.config.globalProperties.$axios = axios;
+ }
};
export const mapAxiosErrorToResponseError = (
diff --git a/src/utils/api.unit.ts b/src/utils/api.unit.ts
index 5f32d8fbc5..1c3ddea7d0 100644
--- a/src/utils/api.unit.ts
+++ b/src/utils/api.unit.ts
@@ -1,8 +1,8 @@
import { apiResponseErrorFactory } from "@@/tests/test-utils/factory/apiResponseErrorFactory";
import { axiosErrorFactory } from "@@/tests/test-utils/factory/axiosErrorFactory";
import axios, { isAxiosError } from "axios";
-import Vue from "vue";
import { $axios, initializeAxios, mapAxiosErrorToResponseError } from "./api";
+import { mount } from "@vue/test-utils";
jest.mock("axios");
const mockedIsAxiosError = jest.mocked(isAxiosError);
@@ -16,9 +16,14 @@ describe("AxiosInstance", () => {
});
it("should set Vue.prototype.$axios", () => {
- initializeAxios(axios);
+ const wrapper = mount({
+ setup() {
+ initializeAxios(axios);
+ },
+ template: ``,
+ });
- expect(Vue.prototype.$axios).toBe(axios);
+ expect(wrapper.vm.$axios).toBe(axios);
});
});
diff --git a/src/utils/inject/inject-strict.unit.ts b/src/utils/inject/inject-strict.unit.ts
index 1a79873c44..0b0e248cf0 100644
--- a/src/utils/inject/inject-strict.unit.ts
+++ b/src/utils/inject/inject-strict.unit.ts
@@ -14,7 +14,9 @@ describe("injectStrict", () => {
return { provider };
},
{
- [PROVIDER_KEY.valueOf()]: "provided",
+ global: {
+ provide: { [PROVIDER_KEY.valueOf()]: "provided" },
+ },
}
);
@@ -30,7 +32,9 @@ describe("injectStrict", () => {
return { provider };
},
{
- [BOOLEAN_PROVIDER_KEY.valueOf()]: false,
+ global: {
+ provide: { [BOOLEAN_PROVIDER_KEY.valueOf()]: false },
+ },
}
);
diff --git a/src/utils/inject/injection-keys.ts b/src/utils/inject/injection-keys.ts
index 6837c2b90d..7c098df7eb 100644
--- a/src/utils/inject/injection-keys.ts
+++ b/src/utils/inject/injection-keys.ts
@@ -1,8 +1,10 @@
import ApplicationErrorModule from "@/store/application-error";
import AuthModule from "@/store/auth";
+import ContentModule from "@/store/content";
import ContextExternalToolsModule from "@/store/context-external-tools";
import EnvConfigModule from "@/store/env-config";
import GroupModule from "@/store/group";
+import NewsModule from "@/store/news";
import NotifierModule from "@/store/notifier";
import PrivacyPolicyModule from "@/store/privacy-policy";
import RoomModule from "@/store/room";
@@ -14,11 +16,9 @@ import TermsOfUseModule from "@/store/terms-of-use";
import UserLoginMigrationModule from "@/store/user-login-migrations";
import VideoConferenceModule from "@/store/video-conference";
import { InjectionKey } from "vue";
-import VueI18n from "vue-i18n";
export const ENV_CONFIG_MODULE_KEY: InjectionKey =
Symbol("envConfigModule");
-export const I18N_KEY: InjectionKey = Symbol("i18n");
export const NOTIFIER_MODULE_KEY: InjectionKey =
Symbol("notifierModule");
export const AUTH_MODULE_KEY: InjectionKey = Symbol("authModule");
@@ -45,3 +45,8 @@ export const TERMS_OF_USE_MODULE_KEY: InjectionKey =
Symbol("termsOfUseModule");
export const SCHOOLS_MODULE_KEY: InjectionKey =
Symbol("schoolsModule");
+export const NEWS_MODULE_KEY: InjectionKey = Symbol("newsModule");
+export const CONTENT_MODULE_KEY: InjectionKey =
+ Symbol("contentModule");
+
+export const THEME_KEY: InjectionKey<{ name: string }> = Symbol("theme");
diff --git a/src/utils/ldapConstants.js b/src/utils/ldapConstants.js
index c8daf245f1..ddefd45651 100644
--- a/src/utils/ldapConstants.js
+++ b/src/utils/ldapConstants.js
@@ -1,4 +1,4 @@
-import { helpers } from "vuelidate/lib/validators";
+import { helpers } from "@vuelidate/validators";
// Regex-based validator for the LDAP path.
//
@@ -11,7 +11,6 @@ import { helpers } from "vuelidate/lib/validators";
//
// It matches the following format: nameComponent[, or ;;]nameComponent
export const ldapPathRegexValidator = helpers.regex(
- "alpha",
/^(?:[A-Za-z][\w-]*|\d+(?:\.\d+)*)=(?:#(?:[\dA-Fa-f]{2})+|(?:[^,=+<>#;\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})+|"(?:[^\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*")(?:\+(?:[A-Za-z][\w-]*|\d+(?:\.\d+)*)=(?:#(?:[\dA-Fa-f]{2})+|(?:[^,=+<>#;\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*|"(?:[^\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*"))*(?:(,|;;)(?:[A-Za-z][\w-]*|\d+(?:\.\d+)*)=(?:#(?:[\dA-Fa-f]{2})+|(?:[^,=+<>#;\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})+|"(?:[^\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*")(?:\+(?:[A-Za-z][\w-]*|\d+(?:\.\d+)*)=(?:#(?:[\dA-Fa-f]{2})+|(?:[^,=+<>#;\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*|"(?:[^\\"]|\\[,=+<>#;\\"]|\\[\dA-Fa-f]{2})*"))*)*$/
);
@@ -19,7 +18,6 @@ export const ldapPathRegexValidator = helpers.regex(
// Allows both ldap:// and ldaps:// protocols.
// Not recommended for use in production environment.
export const ldapURLRegexValidator = helpers.regex(
- "alpha",
/^ldaps?:\/\/(([\w.-]+\.[a-z]+)|((\d{0,3}\.){3}\d{0,3}))(:\d+)?$/
);
@@ -27,7 +25,6 @@ export const ldapURLRegexValidator = helpers.regex(
// Allows only the ldaps:// protocol.
// Should be used in every production environment.
export const ldapSecuredURLRegexValidator = helpers.regex(
- "alpha",
/^ldaps:\/\/(([\w.-]+\.[a-z]+)|((\d{0,3}\.){3}\d{0,3}))(:\d+)?$/
);
diff --git a/src/utils/service-template.js b/src/utils/service-template.js
index ebcfa1ef18..315568d6fa 100644
--- a/src/utils/service-template.js
+++ b/src/utils/service-template.js
@@ -1,4 +1,4 @@
-import Vue from "vue";
+import { reactive } from "vue";
import { $axios } from "@/utils/api";
export default function (endpoint) {
@@ -159,11 +159,15 @@ export default function (endpoint) {
// The qid must be manually assigned to `params.qid`
updatePaginationForQuery(state, { res, qid, query }) {
const { limit, skip, total } = res;
- Vue.set(state.pagination, qid, {
- limit: parseInt(limit),
- skip: parseInt(skip),
- total: parseInt(total),
- query: parseInt(query),
+
+ state.pagination = reactive({
+ ...state.pagination,
+ [qid]: {
+ limit: parseInt(limit),
+ skip: parseInt(skip),
+ total: parseInt(total),
+ query: parseInt(query),
+ },
});
},
setStatus(state, status) {
diff --git a/src/utils/sidebar-base-items.ts b/src/utils/sidebar-base-items.ts
index 4b7a764792..c4b54ff3a9 100644
--- a/src/utils/sidebar-base-items.ts
+++ b/src/utils/sidebar-base-items.ts
@@ -75,7 +75,6 @@ const getSidebarItems = (
},
{
title: "global.sidebar.files-old",
- excludedPermission: "COLLABORATIVE_FILES_ONLY",
href: "/files",
icon: "$mdiFolderOpenOutline",
testId: "Meine Dateien",
@@ -112,14 +111,6 @@ const getSidebarItems = (
},
],
},
- {
- title: "global.sidebar.files",
- permission: "COLLABORATIVE_FILES",
- href: "/cfiles",
- icon: "$mdiFolderOpenOutline",
- testId: "Dateien",
- activeForUrls: ["^/cfiles($|/.*)"],
- },
{
title: "pages.news.title",
href: "/news",
diff --git a/src/utils/uid.ts b/src/utils/uid.ts
new file mode 100644
index 0000000000..f543af9581
--- /dev/null
+++ b/src/utils/uid.ts
@@ -0,0 +1,15 @@
+import { onBeforeMount, ref } from "vue";
+
+export const useUid = () => {
+ const uid = ref("");
+
+ onBeforeMount(() => {
+ uid.value = (
+ Date.now().toString(16) + Math.random().toString(16).substring(2)
+ ).toUpperCase();
+ });
+
+ return {
+ uid,
+ };
+};
diff --git a/src/vue-i18n.d.ts b/src/vue-i18n.d.ts
new file mode 100644
index 0000000000..f371f5e7c5
--- /dev/null
+++ b/src/vue-i18n.d.ts
@@ -0,0 +1,13 @@
+/**
+ * vue-i18n global type definitions
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { DefineLocaleMessage } from "vue-i18n";
+
+type MessageSchema = typeof import("@/locales/de");
+
+declare module "vue-i18n" {
+ // define the locale messages schema
+ export interface DefineLocaleMessage extends MessageSchema {}
+}
diff --git a/src/vuetify.options.js b/src/vuetify.options.js
index 35c7ff6b76..8039e759e1 100644
--- a/src/vuetify.options.js
+++ b/src/vuetify.options.js
@@ -5,18 +5,14 @@ const custom = {
theme: {
themes: {
light: {
- primary: {
- base: "#9e292b",
- darken1: "#800416",
- lighten: "#f5eaea",
- },
- secondary: {
- base: "#54616e",
- lighten1: "#8a9199",
- darken1: "#3a424b",
- },
- accent: {
- base: "#e98404",
+ color: {
+ primary: "#9e292b",
+ "primary-darken-1": "#800416",
+ "primary-lighten": "#f5eaea",
+ secondary: "#54616e",
+ "secondary-lighten-1": "#8a9199",
+ "secondary-darken-1": "#3a424b",
+ accent: "#e98404",
},
},
},
diff --git a/tests/general.unit.js b/tests/general.unit.js
deleted file mode 100644
index 6e59d6eaae..0000000000
--- a/tests/general.unit.js
+++ /dev/null
@@ -1,7 +0,0 @@
-describe.skip("Timezones", () => {
- // Not working at all under windows and GitHub Actions
- it("tests should always run in Europe/Berlin timezone", () => {
- expect(process.env.TZ).toBe("Europe/Berlin");
- expect(new Date().getTimezoneOffset()).toBe(-60);
- });
-});
diff --git a/tests/setup.js b/tests/setup.js
new file mode 100644
index 0000000000..ac2d6016d4
--- /dev/null
+++ b/tests/setup.js
@@ -0,0 +1,28 @@
+import { jest } from "@jest/globals";
+import { config, mount, shallowMount } from "@vue/test-utils";
+
+// enable rendering of default slot on stubbed components
+// see https://test-utils.vuejs.org/migration/#shallowMount-and-renderStubDefaultSlot
+config.global.renderStubDefaultSlot = true;
+
+global.mount = mount;
+global.shallowMount = shallowMount;
+
+/**
+ * matchMedia is used by useBreakpoints from VueUse to distinguish breakpoints.
+ * We need to mock it to run tests that rely on useBreakpoints
+ * @see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ */
+Object.defineProperty(window, "matchMedia", {
+ writable: true,
+ value: jest.fn().mockImplementation((query) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+});
diff --git a/tests/test-utils/componentMocks.ts b/tests/test-utils/componentMocks.ts
deleted file mode 100644
index d68cf0ea86..0000000000
--- a/tests/test-utils/componentMocks.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import createComponentMocksJS from "../unit/setup";
-
-type componentMockOptions = {
- i18n?: boolean;
- vueMeta?: boolean;
- user?: boolean;
- store?: {
- [property: string]: {
- state: any;
- getters: any;
- mutations: any;
- actions: any;
- };
- };
- $route?: string | any;
- $router?: any;
- router?: boolean;
- dialog?: {
- confirm: (params: any) => void;
- };
- mocks?: any;
- stubs?: any;
- $config?: any;
-};
-
-export default function createComponentMocks({
- i18n,
- vueMeta,
- user,
- store,
- $route,
- $router,
- router,
- dialog,
- mocks,
- stubs,
- $config,
-}: componentMockOptions) {
- return createComponentMocksJS({
- i18n,
- vueMeta,
- user,
- store,
- $route,
- $router,
- router,
- dialog,
- mocks,
- stubs,
- $config,
- });
-}
diff --git a/tests/test-utils/factory/boardResponseFactory.ts b/tests/test-utils/factory/boardResponseFactory.ts
index 024cda3b5a..111a7eece0 100644
--- a/tests/test-utils/factory/boardResponseFactory.ts
+++ b/tests/test-utils/factory/boardResponseFactory.ts
@@ -1,6 +1,6 @@
import { Factory } from "fishery";
import { BoardResponse } from "@/serverApi/v3";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const boardResponseFactory = Factory.define(
({ sequence }) => ({
diff --git a/tests/test-utils/factory/cardResponseFactory.ts b/tests/test-utils/factory/cardResponseFactory.ts
index 04bd898dbd..68799463e7 100644
--- a/tests/test-utils/factory/cardResponseFactory.ts
+++ b/tests/test-utils/factory/cardResponseFactory.ts
@@ -1,6 +1,6 @@
import { Factory } from "fishery";
import { CardResponse } from "@/serverApi/v3";
-import { timestampsResponseFactory } from "@@/tests/test-utils";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const cardResponseFactory = Factory.define(
({ sequence }) => ({
diff --git a/tests/test-utils/factory/columnResponseFactory.ts b/tests/test-utils/factory/columnResponseFactory.ts
index 8c4a02d932..6f923d8da9 100644
--- a/tests/test-utils/factory/columnResponseFactory.ts
+++ b/tests/test-utils/factory/columnResponseFactory.ts
@@ -1,6 +1,6 @@
import { Factory } from "fishery";
import { ColumnResponse } from "@/serverApi/v3";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const columnResponseFactory = Factory.define(
({ sequence }) => ({
diff --git a/tests/test-utils/factory/drawingContentElementResponseFactory.ts b/tests/test-utils/factory/drawingContentElementResponseFactory.ts
index b10fb7da96..9034d839a0 100644
--- a/tests/test-utils/factory/drawingContentElementResponseFactory.ts
+++ b/tests/test-utils/factory/drawingContentElementResponseFactory.ts
@@ -1,6 +1,6 @@
import { ContentElementType, DrawingElementResponse } from "@/serverApi/v3";
import { Factory } from "fishery";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
import { drawingContentElementFactory } from "./drawingContentElementFactory";
export const drawingContentElementResponseFactory =
diff --git a/tests/test-utils/factory/fileElementResponseFactory.ts b/tests/test-utils/factory/fileElementResponseFactory.ts
index 831318bdf0..e093b5aef0 100644
--- a/tests/test-utils/factory/fileElementResponseFactory.ts
+++ b/tests/test-utils/factory/fileElementResponseFactory.ts
@@ -1,7 +1,7 @@
import { ContentElementType, FileElementResponse } from "@/serverApi/v3";
import { Factory } from "fishery";
import { fileElementContent } from "./fileElementContentFactory";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const fileElementResponseFactory = Factory.define(
({ sequence }) => ({
diff --git a/tests/test-utils/factory/index.ts b/tests/test-utils/factory/index.ts
index 9d3384f36d..2605eb101e 100644
--- a/tests/test-utils/factory/index.ts
+++ b/tests/test-utils/factory/index.ts
@@ -51,3 +51,4 @@ export * from "./contextExternalToolConfigurationStatusResponseFactory";
export * from "./schoolExternalToolConfigurationFactory";
export * from "./schoolExternalToolConfigurationStatusResponseFactory";
export * from "./provisioningOptionsDataFactory";
+export * from "./schoolFactory";
diff --git a/tests/test-utils/factory/linkElementResponseFactory.ts b/tests/test-utils/factory/linkElementResponseFactory.ts
index ab1340237e..8a2cb7a352 100644
--- a/tests/test-utils/factory/linkElementResponseFactory.ts
+++ b/tests/test-utils/factory/linkElementResponseFactory.ts
@@ -1,7 +1,7 @@
import { Factory } from "fishery";
import { ContentElementType, LinkElementResponse } from "@/serverApi/v3";
-import { linkElementContentFactory } from "@@/tests/test-utils/factory/linkElementContentFactory";
-import { timestampsResponseFactory } from "@@/tests/test-utils";
+import { linkElementContentFactory } from "./linkElementContentFactory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const linkElementResponseFactory = Factory.define(
({ sequence }) => ({
diff --git a/tests/test-utils/factory/schoolFactory.ts b/tests/test-utils/factory/schoolFactory.ts
new file mode 100644
index 0000000000..19ecad2f8b
--- /dev/null
+++ b/tests/test-utils/factory/schoolFactory.ts
@@ -0,0 +1,7 @@
+import { School } from "@/store/types/schools";
+import { Factory } from "fishery";
+import { mockSchool } from "../mockObjects";
+
+export const schoolFactory = Factory.define(() => ({
+ ...mockSchool,
+}));
diff --git a/tests/test-utils/factory/submissionContainerElementResponseFactory.ts b/tests/test-utils/factory/submissionContainerElementResponseFactory.ts
index af35f5cb27..1dddafed6d 100644
--- a/tests/test-utils/factory/submissionContainerElementResponseFactory.ts
+++ b/tests/test-utils/factory/submissionContainerElementResponseFactory.ts
@@ -3,7 +3,7 @@ import {
SubmissionContainerElementResponse,
} from "@/serverApi/v3";
import { Factory } from "fishery";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
import { submissionContainerElementContent } from "./submissionContainerElementContentFactory";
export const submissionContainerElementResponseFactory =
diff --git a/tests/test-utils/factory/submissionItemResponseFactory.ts b/tests/test-utils/factory/submissionItemResponseFactory.ts
index 2674efebeb..ef6e757263 100644
--- a/tests/test-utils/factory/submissionItemResponseFactory.ts
+++ b/tests/test-utils/factory/submissionItemResponseFactory.ts
@@ -1,6 +1,6 @@
import { SubmissionItemResponse } from "@/serverApi/v3";
import { Factory } from "fishery";
-import { timestampsResponseFactory } from "@@/tests/test-utils/factory";
+import { timestampsResponseFactory } from "./timestampsResponseFactory";
export const submissionItemResponseFactory =
Factory.define(({ sequence }) => ({
diff --git a/tests/test-utils/factory/submissionsResponseFactory.ts b/tests/test-utils/factory/submissionsResponseFactory.ts
index f27266ad19..0cf65c280f 100644
--- a/tests/test-utils/factory/submissionsResponseFactory.ts
+++ b/tests/test-utils/factory/submissionsResponseFactory.ts
@@ -1,9 +1,7 @@
import { SubmissionsResponse, SubmissionItemResponse } from "@/serverApi/v3";
import { Factory } from "fishery";
-import {
- submissionItemResponseFactory,
- userDataResponseFactory,
-} from "@@/tests/test-utils";
+import { submissionItemResponseFactory } from "./submissionItemResponseFactory";
+import { userDataResponseFactory } from "./userDataResponseFactory";
type TransientParams = {
numberOfSubmissionItems: number;
diff --git a/tests/test-utils/i18nMock.ts b/tests/test-utils/i18nMock.ts
index cb40947b41..b39acc4be6 100644
--- a/tests/test-utils/i18nMock.ts
+++ b/tests/test-utils/i18nMock.ts
@@ -1,22 +1,16 @@
-import VueI18n from "vue-i18n";
+import { I18nLanguage } from "@/plugins/i18n";
+import { createMock } from "@golevelup/ts-jest";
-const i18n_tMock = (key: string, values?: VueI18n.Values): string =>
- key + (values ? ` ${JSON.stringify(values)}` : "");
-
-const i18n_tcMock = (
- key: string,
- choice?: VueI18n.Choice,
- values?: VueI18n.Values
-): string => i18n_tMock(key, values);
-
-const i18n_teMock = (
- key: string,
- locale?: VueI18n.Locale,
- values?: VueI18n.Values
-): string => i18n_tMock(key, values);
-
-export const i18nMock = {
- t: i18n_tMock,
- tc: i18n_tcMock,
- te: i18n_teMock,
-};
+export const i18nMock = createMock<{
+ t: (
+ key: keyof I18nLanguage,
+ placeholders?: Record
+ ) => string;
+}>({
+ t: (key, placeholders) => {
+ const str = `${key} ${
+ placeholders ? ` ${JSON.stringify(placeholders)}` : ""
+ }`;
+ return str;
+ },
+});
diff --git a/tests/test-utils/index.ts b/tests/test-utils/index.ts
index 0ab965940a..8849e26246 100644
--- a/tests/test-utils/index.ts
+++ b/tests/test-utils/index.ts
@@ -1,6 +1,5 @@
export * from "./ObjectIdMock";
export * from "./api-mocks";
-export * from "./componentMocks";
export * from "./composable-mocks";
export * from "./factory";
export * from "./i18nMock";
diff --git a/tests/test-utils/mockDataTasks.js b/tests/test-utils/mockDataTasks.ts
similarity index 90%
rename from tests/test-utils/mockDataTasks.js
rename to tests/test-utils/mockDataTasks.ts
index 68242e27fd..440f818790 100644
--- a/tests/test-utils/mockDataTasks.js
+++ b/tests/test-utils/mockDataTasks.ts
@@ -1,5 +1,7 @@
/* eslint-disable max-lines */
+import { Task, TaskStatus } from "@/store/types/tasks";
+
/*
Mockdata for tasks dashboards
This data is also used for unit tests, to ensure that the store works properly.
@@ -22,28 +24,31 @@ const generateStatus = (props = {}) =>
const overDueTasks = [
{
id: "59cce4171113d1132c98dc07",
- _id: "59cce4171113d1132c98dc07",
name: "Aufgabe an Marla (Mathe) - abgelaufen",
dueDate: "2017-07-28T15:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-07-28T11:58:46.601Z",
createdAt: "2017-07-28T11:58:46.601Z",
status: generateStatus(),
},
{
id: "59cce2c61113d1132c98dc06",
- _id: "59cce2c61113d1132c98dc06",
name: "Private Aufgabe von Marla - mit Kurs, abgelaufen",
dueDate: "2017-07-28T13:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:49:39.924Z",
createdAt: "2017-09-28T11:49:39.924Z",
status: generateStatus(),
},
{
id: "59cce352c6abf042248e888c",
- _id: "59cce352c6abf042248e888c",
name: "zu archivierende Aufgabe von Marla",
dueDate: "2017-06-07T09:30:00.000Z",
courseName: "Chemie",
+ courseId: "59cce4171113d1132c01dc07",
+ updatedAt: "2017-09-28T11:56:02.897Z",
createdAt: "2017-09-28T11:56:02.897Z",
status: generateStatus(),
},
@@ -51,39 +56,43 @@ const overDueTasks = [
const openTasksWithDueDate = [
{
id: "59cce4c3c6abf042248e888e",
- _id: "59cce4c3c6abf042248e888e",
name: "Private Aufgabe von Cord - mit Kurs, offen",
description: "Test",
dueDate: "2300-06-11T14:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T12:02:11.432Z",
lessonName: "Malen nach Zahlen",
createdAt: "2017-09-28T12:02:11.432Z",
status: generateStatus(),
},
{
id: "59cce1d381297026d02cdc4b",
- _id: "59cce1d381297026d02cdc4b",
name: "Private Aufgabe von Marla - mit Kurs, offen",
dueDate: "2300-09-28T13:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:49:39.924Z",
createdAt: "2017-09-28T11:49:39.924Z",
status: generateStatus(),
},
{
id: "59cce3f6c6abf042248e888d",
- _id: "59cce3f6c6abf042248e888d",
name: "Aufgabe an Marla (Mathe) - offen",
dueDate: "2300-09-28T15:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:58:46.601Z",
createdAt: "2017-09-28T11:58:46.601Z",
status: generateStatus(),
},
{
id: "59cce6c6d5e50214e47b601d",
- _id: "59cce6c6d5e50214e47b601d",
name: "Archivierte Aufgaben von Cord - mit Kurs, offen",
dueDate: "2300-10-25T15:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T12:10:46.180Z",
createdAt: "2017-09-28T12:10:46.180Z",
status: generateStatus(),
},
@@ -91,9 +100,10 @@ const openTasksWithDueDate = [
const openTasksWithoutDueDate = [
{
id: "59cce4171113d1132c98dc08",
- _id: "59cce4171113d1132c98dc08",
name: "Aufgabe an Marla (Mathe) - ohne Abgabedatum",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-07-28T11:58:46.601Z",
createdAt: "2017-07-28T11:58:46.601Z",
status: generateStatus(),
},
@@ -102,11 +112,12 @@ const openTasksWithoutDueDate = [
const submittedTasks = [
{
id: "59cce4c3c6abf042248e968e",
- _id: "59cce4c3c6abf042248e968e",
name: "Aufgabe von Cord - mit Kurs, abgegeben",
displayColor: "#00E5FF",
dueDate: "2300-06-11T14:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T12:02:11.432Z",
createdAt: "2017-09-28T12:02:11.432Z",
status: generateStatus({
submitted: 1,
@@ -117,11 +128,12 @@ const submittedTasks = [
const missedButGradedTasks = [
{
id: "59cce352c6abf001248e888c",
- _id: "59cce352c6abf001248e888c",
name: "Aufgabe von Marla - abgelaufen, bewertet",
displayColor: "#1DE9B6",
dueDate: "2017-06-07T09:30:00.000Z",
courseName: "Biologie",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:56:02.897Z",
createdAt: "2017-09-28T11:56:02.897Z",
status: generateStatus({
graded: 1,
@@ -132,11 +144,12 @@ const missedButGradedTasks = [
const gradedTasks = [
{
id: "59cce7u6c6abf042248e888d",
- _id: "59cce7u6c6abf042248e888d",
name: "Aufgabe an Marla (Mathe) - abgegeben, bewertet",
displayColor: "#00E5FF",
dueDate: "2300-09-28T15:00:00.000Z",
courseName: "Mathe",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:58:46.601Z",
createdAt: "2017-09-28T11:58:46.601Z",
status: generateStatus({
submitted: 1,
@@ -145,11 +158,12 @@ const gradedTasks = [
},
{
id: "59cce352c6abf001248e888c",
- _id: "59cce352c6abf001248e888c",
name: "Aufgabe von Marla - abgelaufen, bewertet",
displayColor: "#1DE9B6",
dueDate: "2017-06-07T09:30:00.000Z",
courseName: "Biologie",
+ courseId: "59cce4171113d1132c00dc07",
+ updatedAt: "2017-09-28T11:56:02.897Z",
createdAt: "2017-09-28T11:56:02.897Z",
status: generateStatus({
graded: 1,
@@ -163,7 +177,7 @@ const openTasks = [
...openTasksWithoutDueDate,
];
const completedTasks = [...submittedTasks, ...gradedTasks];
-const tasks = [...openTasks, ...completedTasks];
+const tasks: Task[] = [...openTasks, ...completedTasks];
const invalidTasks = [
{
@@ -175,7 +189,6 @@ const invalidTasks = [
},
{
id: "59cce1d381297026d02cdc4b",
- _id: "59cce1d381297026d02cdc4b",
dueDate: "2300-09-28T13:00:00.000Z",
courseName: "Mathe",
createdAt: "2017-09-28T11:49:39.924Z",
@@ -460,12 +473,12 @@ const mathTasks = [
},
];
-const hex = (value) => Math.floor(value).toString(16);
+const hex = (value: number) => Math.floor(value).toString(16);
const rnd = () => Math.random() * 16;
const ObjectId = () =>
hex(Date.now() / 1000) + " ".repeat(16).replace(/./g, () => hex(rnd()));
-const generateTask = (status, props) => {
+const generateTask = (status: TaskStatus, props: any) => {
const id = ObjectId();
return Object.assign(
diff --git a/tests/test-utils/mountComposable.ts b/tests/test-utils/mountComposable.ts
index 6dc93b7276..38fb83ee2d 100644
--- a/tests/test-utils/mountComposable.ts
+++ b/tests/test-utils/mountComposable.ts
@@ -1,30 +1,19 @@
-import { shallowMount } from "@vue/test-utils";
-import { defineComponent, provide } from "vue";
+import { ComponentMountingOptions, mount } from "@vue/test-utils";
+import { DefineComponent, defineComponent } from "vue";
export const mountComposable = (
composable: () => T,
- providers: Record = {}
+ options?: ComponentMountingOptions
): T => {
- const ParentComponent = defineComponent({
- setup() {
- for (const [key, mockFn] of Object.entries(providers)) {
- provide(key, mockFn);
- }
- },
- provide: providers,
- });
-
- const TestComponent = {
- template: "",
- };
-
- const wrapper = shallowMount(TestComponent, {
+ const TestComponent = defineComponent({
setup() {
const result = composable();
return { result };
},
- parentComponent: ParentComponent,
+ template: "",
});
+
+ const wrapper = mount(TestComponent, options);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return wrapper.vm.result;
diff --git a/tests/test-utils/setup/createTestingI18n.ts b/tests/test-utils/setup/createTestingI18n.ts
new file mode 100644
index 0000000000..b8062e5389
--- /dev/null
+++ b/tests/test-utils/setup/createTestingI18n.ts
@@ -0,0 +1,20 @@
+import { I18nLanguage } from "@/plugins/i18n";
+import { createI18n } from "vue-i18n";
+
+export const createTestingI18n = (options = {}) => {
+ const i18n = createI18n({
+ legacy: false,
+ locale: "en",
+ fallbackLocale: ["en"],
+ // disable log warnings on missing translations
+ // https://github.com/kazupon/vue-i18n/issues/96
+ missingWarn: false,
+ fallbackWarn: false,
+ silentTranslationWarn: true,
+ messages: {
+ en: {} as I18nLanguage,
+ },
+ ...options,
+ });
+ return i18n;
+};
diff --git a/tests/test-utils/setup/createTestingVuetify.ts b/tests/test-utils/setup/createTestingVuetify.ts
new file mode 100644
index 0000000000..e727674e7c
--- /dev/null
+++ b/tests/test-utils/setup/createTestingVuetify.ts
@@ -0,0 +1,31 @@
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/lib/components/index.mjs";
+import * as directives from "vuetify/lib/directives/index.mjs";
+import * as materialAliases from "@/components/icons/material";
+import { aliases, mdi } from "vuetify/lib/iconsets/mdi-svg.mjs";
+import { customAliases } from "@/components/icons/custom";
+
+export const createTestingVuetify = (options = {}) => {
+ const vuetify = createVuetify({
+ components: {
+ ...components,
+ },
+ directives,
+ icons: {
+ defaultSet: "mdi",
+ aliases: {
+ ...aliases,
+ ...materialAliases,
+ ...customAliases,
+ },
+ sets: {
+ mdi,
+ },
+ },
+ ...options,
+ });
+ return vuetify;
+};
+
+// see https://vuetifyjs.com/en/getting-started/unit-testing/
+global.ResizeObserver = require("resize-observer-polyfill");
diff --git a/tests/test-utils/setup/index.ts b/tests/test-utils/setup/index.ts
new file mode 100644
index 0000000000..8e989fc2bc
--- /dev/null
+++ b/tests/test-utils/setup/index.ts
@@ -0,0 +1,2 @@
+export * from "./createTestingI18n";
+export * from "./createTestingVuetify";
diff --git a/tests/test-utils/setupStores.js b/tests/test-utils/setupStores.js
index bfbfde74df..9424133589 100644
--- a/tests/test-utils/setupStores.js
+++ b/tests/test-utils/setupStores.js
@@ -1,8 +1,8 @@
import { initializeStores } from "@/store";
-import Vuex from "vuex";
+import { createStore } from "vuex";
export default function setupStores(modules) {
- const store = new Vuex.Store({
+ const store = createStore({
modules,
});
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
deleted file mode 100644
index 57953311eb..0000000000
--- a/tests/unit/setup.js
+++ /dev/null
@@ -1,247 +0,0 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-import Vuelidate from "vuelidate";
-import Vuex from "vuex";
-import Vuetify from "vuetify";
-import fs from "fs";
-import path from "path";
-import VueDOMPurifyHTML from "vue-dompurify-html";
-import { createLocalVue, mount, shallowMount } from "@vue/test-utils";
-import { mountBaseComponents } from "@/components/base/_globals";
-import { setupI18n } from "@/plugins/i18n-test.js";
-import "@/plugins/directives";
-import globalStubs from "./stubs.js";
-import { htmlConfig } from "@feature-render-html";
-
-// Don't warn about not using the production build of Vue, as
-// we care more about the quality of errors than performance
-// for tests.
-Vue.config.productionTip = false;
-
-// ===
-// Register global components
-// ===
-
-const baseComponentDir = path.join(__dirname, "../../src/components/base/");
-Vue.use(Vuelidate);
-Vue.use(Vuex);
-
-Vue.use(VueDOMPurifyHTML, {
- namedConfigurations: htmlConfig,
-});
-
-function readDirRecursiveSync(dir) {
- const results = [];
- const list = fs.readdirSync(dir);
- list.forEach((file) => {
- const filepath = path.join(dir, file);
- const stat = fs.statSync(filepath);
- if (stat && stat.isDirectory()) {
- results.push(...readDirRecursiveSync(filepath));
- } else {
- results.push(filepath);
- }
- });
- return results;
-}
-
-const globalComponentFiles = readDirRecursiveSync(baseComponentDir)
- // Only include "Base" prefixed .vue files
- .filter((fileName) => /Base[A-Z][\w]+\.vue$/.test(fileName))
- .map(
- (fileName) =>
- "./" + path.relative(baseComponentDir, fileName).replace(/\\/g, "/")
- );
-
-mountBaseComponents(globalComponentFiles, (fileName) =>
- require(path.join(baseComponentDir, fileName))
-);
-
-// ===
-// Mock window properties not handled by jsdom
-// ===
-
-Object.defineProperty(window, "localStorage", {
- value: (function () {
- let store = {};
- return {
- getItem: function (key) {
- return store[key] || null;
- },
- setItem: function (key, value) {
- store[key] = value.toString();
- },
- removeItem: function (key) {
- delete store[key];
- },
- clear: function () {
- store = {};
- },
- };
- })(),
-});
-
-Object.defineProperty(window, "matchMedia", {
- value: () => {
- return {
- matches: false,
- addListener: () => ({}),
- removeListener: () => ({}),
- };
- },
-});
-
-const location = {
- href: "",
-};
-Object.defineProperty(window, "location", {
- set: function (val) {
- location.host = "domain.io";
- location.hostname = "domain.io";
- location.origin = "http://domain.io";
- location.href = "http://domain.io" + val;
- location.pathname = val;
- },
- get: function () {
- return location;
- },
-});
-
-// ===
-// Global helpers
-// ===
-
-// https://vue-test-utils.vuejs.org/api/#mount
-global.mount = mount;
-
-// https://vue-test-utils.vuejs.org/api/#shallowmount
-global.shallowMount = shallowMount;
-
-// A helper for creating Vue component mocks
-global.createComponentMocks = ({
- i18n,
- vueMeta,
- user,
- store,
- $route,
- $router,
- router,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- dialog,
- mocks,
- stubs,
- $config,
-}) => {
- // Use a local version of Vue, to avoid polluting the global
- // Vue and thereby affecting other tests.
- // https://vue-test-utils.vuejs.org/api/#createlocalvue
- const localVue = createLocalVue();
- const returnOptions = { localVue };
-
- // https://vue-test-utils.vuejs.org/api/options.html#stubs
- returnOptions.stubs = stubs || {};
-
- // https://vue-test-utils.vuejs.org/api/options.html#mocks
- returnOptions.mocks = mocks || {};
-
- Object.entries(stubs || {}).forEach(([name, value]) => {
- if (value === true && globalStubs[name]) {
- stubs[name] = globalStubs[name]();
- }
- });
-
- // Converts a `store` option shaped like:
- //
- // store: {
- // someModuleName: {
- // state: { ... },
- // getters: { ... },
- // mutations: { ... },
- // actions: { ... },
- // },
- // anotherModuleName: {
- // getters: { ... },
- // },
- // },
- //
- // to a store instance, with each module namespaced by
- // default, just like in our app.
- if (store || i18n || user || vueMeta) {
- localVue.use(Vuex);
- const storeModules = store || {};
-
- returnOptions.store = new Vuex.Store({
- modules: Object.entries(storeModules)
- .map(([moduleName, storeModule]) => {
- return {
- [moduleName]: {
- state: storeModule.state || {},
- getters: storeModule.getters || {},
- mutations: storeModule.mutations || {},
- actions: storeModule.actions || {},
- namespaced: true,
- },
- };
- })
- .reduce((moduleA, moduleB) => Object.assign({}, moduleA, moduleB), {}),
- });
- }
-
- //Set `i18n: true` to enable localization and make `this.$i18n` available
- if (i18n) {
- localVue.use(VueI18n);
- returnOptions.i18n = setupI18n();
- }
-
- Vue.use(Vuetify);
- returnOptions.vuetify = new Vuetify();
-
- localVue.use(Vuelidate);
-
- // If using `router: true`, we'll automatically stub out
- // components from Vue Router.
- if (router) {
- returnOptions.stubs["NuxtLink"] = true;
- returnOptions.stubs["Nuxt"] = true;
- }
-
- returnOptions.stubs["RouterLink"] = true;
-
- if ($route) {
- returnOptions.mocks.$route = $route;
- }
- if ($router) {
- returnOptions.mocks.$router = $router;
- }
- if ($config) {
- returnOptions.mocks.$config = $config;
- } else {
- returnOptions.mocks.$config = {};
- }
- return returnOptions;
-};
-
-global.rendersSlotContent = (
- component,
- slotNames = ["default"],
- mountOptions
-) => {
- return [
- "renders his slot(s) content(s)",
- () => {
- slotNames.forEach((slotName) => {
- const slots = {};
- slots[slotName] = `
+
diff --git a/src/components/molecules/ImportModal.unit.ts b/src/components/molecules/ImportModal.unit.ts
deleted file mode 100644
index ecc4a28568..0000000000
--- a/src/components/molecules/ImportModal.unit.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-import { roomsModule } from "@/store";
-import RoomsModule from "@/store/rooms";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import setupStores from "@@/tests/test-utils/setupStores";
-import { mount, MountOptions } from "@vue/test-utils";
-import ImportModal from "./ImportModal.vue";
-import Vue from "vue";
-
-describe("@/components/molecules/RoomModal", () => {
- beforeEach(() => {
- // Avoids console warnings "[Vuetify] Unable to locate target [data-app]"
- document.body.setAttribute("data-app", "true");
- setupStores({ roomsModule: RoomsModule });
- });
-
- it("should open and close on property change", async () => {
- const wrapper = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: false,
- },
- });
- const dialog = wrapper.find(".import-dialog");
- const importDialog = wrapper.vm.$refs.importDialog as any;
- expect(dialog.exists()).toBe(true);
- expect(importDialog.isOpen).toBe(false);
- await wrapper.setProps({
- isOpen: true,
- });
- expect(importDialog.isOpen).toBe(true);
- await wrapper.setProps({
- isOpen: false,
- });
- expect(importDialog.isOpen).toBe(false);
- });
-
- it("should emit event if vuetify modal is closed", async () => {
- const wrapper = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: true,
- },
- });
- const customDialog = wrapper.vm.$refs.importDialog as any;
- customDialog.$emit("dialog-closed");
- const emitted = wrapper.emitted("dialog-closed");
- expect(emitted).toHaveLength(1);
- expect(emitted && emitted[0][0]).toBe(false);
- });
-
- it("stepper should work by setting step value", async () => {
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: true,
- },
- });
- const stepper = wrapper.find(".stepper");
-
- wrapper.setData({ step: 1 });
- expect(stepper.vm.steps[0].isActive).toBe(true);
-
- wrapper.setData({ step: 2 });
- await wrapper.vm.$nextTick();
- expect(stepper.vm.steps[1].isActive).toBe(true);
-
- wrapper.setData({ step: 3 });
- await wrapper.vm.$nextTick();
- expect(stepper.vm.steps[2].isActive).toBe(true);
- });
-
- it("text fields should have correct value", async () => {
- const testProps = {
- isOpen: true,
- };
- const sharedCourseData = {
- code: "123",
- courseName: "Mathe",
- status: "success",
- message: "",
- };
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: testProps,
- });
-
- wrapper.setData({ step: 2, sharedCourseData });
- await wrapper.vm.$nextTick();
-
- const textCourseCode = wrapper.find(".text-field-course-code");
- expect(textCourseCode.vm.value).toStrictEqual("123");
-
- wrapper.setData({ step: 3, sharedCourseData });
- await wrapper.vm.$nextTick();
- const textCourseName = wrapper.find(".text-field-course-name");
- expect(textCourseName.vm.value).toStrictEqual("Mathe");
- });
-
- it("next and back button should increase and decrease the step value", async () => {
- const testProps = {
- isOpen: true,
- };
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: testProps,
- });
-
- const btnNext = wrapper.find(`[data-testId="dialog-next"]`);
- const btnBack = wrapper.find(`[data-testId="dialog-back"]`);
- btnNext.trigger("click");
- expect(wrapper.vm.step).toStrictEqual(2);
-
- btnBack.trigger("click");
- expect(wrapper.vm.step).toStrictEqual(1);
- });
-
- it("cancel button should emit 'dialog-closed'", async () => {
- const testProps = {
- isOpen: true,
- };
- const wrapper = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: testProps,
- });
-
- const btnCancel = wrapper.find(".dialog-closed");
- btnCancel.trigger("click");
- const emitted = wrapper.emitted();
-
- expect(emitted["dialog-closed"]).toHaveLength(1);
- });
-
- it("next button title should change if step=3 ", async () => {
- const testProps = {
- isOpen: true,
- };
-
- const wrapper = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: testProps,
- });
- wrapper.setData({ step: 2 });
- await wrapper.vm.$nextTick();
-
- const btnNext = wrapper.find(`[data-testId="dialog-next"]`);
- expect(btnNext.element.innerHTML).toContain("Weiter");
- wrapper.setData({ step: 3 });
- await wrapper.vm.$nextTick();
- expect(btnNext.element.innerHTML).toContain("Importieren");
- });
-
- it("should have correct buttons according to error occurrence", async () => {
- const testProps = {
- isOpen: true,
- };
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: testProps,
- });
-
- const buttons = ["back", "cancel", "next"];
- const onImportErrorButton = ["confirm"];
-
- expect(wrapper.vm.modalButtons).toStrictEqual(buttons);
-
- await wrapper.setData({ isImportError: true, step: 3 });
- expect(wrapper.vm.modalButtons).toStrictEqual(onImportErrorButton);
- });
-
- describe("error handling", () => {
- it("should show code-error section if server sends shareToken error", async () => {
- const getSharedCourseDataMock = jest
- .spyOn(roomsModule, "getSharedCourseData")
- .mockImplementation();
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: true,
- },
- });
-
- wrapper.setData({ step: 2 });
- await wrapper.vm.$nextTick();
- const textElementBefore = wrapper.find(".text-field-course-code");
- expect(textElementBefore.vm.error).toBe(false);
- expect(textElementBefore.vm.errorMessages).toStrictEqual("");
- roomsModule.setBusinessError({
- statusCode: "400",
- message: "BadRequest",
- error: {},
- });
- const btnNext = wrapper.find(`[data-testId="dialog-next"]`);
- await btnNext.trigger("click");
- expect(getSharedCourseDataMock).toHaveBeenCalled();
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.businessError.message).toStrictEqual("BadRequest");
- expect(wrapper.vm.businessError.statusCode).toStrictEqual("400");
- const textElementAfter = wrapper.find(".text-field-course-code");
- expect(textElementAfter.vm.error).toBe(true);
- expect(textElementAfter.vm.errorMessages).toStrictEqual(
- wrapper.vm.$i18n.t("pages.rooms.importCourse.codeError")
- );
- getSharedCourseDataMock.mockClear();
- });
-
- it("should not go to step#3 if there is a code error", async () => {
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: true,
- },
- });
-
- wrapper.setData({ step: 2 });
- await wrapper.vm.$nextTick();
-
- const btnNext = wrapper.find(`[data-testId="dialog-next"]`);
- await btnNext.trigger("click");
- await wrapper.vm.$nextTick();
-
- await btnNext.trigger("click");
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.step).toStrictEqual(2);
- });
-
- it("should show import-error section if server sends import-error", async () => {
- const wrapper: any = mount(ImportModal as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
- isOpen: true,
- },
- });
- await wrapper.setData({
- businessError: {
- statusCode: "",
- message: "",
- error: {},
- },
- isImportError: false,
- step: 3,
- });
-
- const confirmButtonBefore = wrapper.find(".dialog-confirmed");
- const errorElementBefore = wrapper.find(".import-error");
-
- expect(confirmButtonBefore.exists()).toBe(false);
- expect(errorElementBefore.exists()).toBe(false);
-
- await wrapper.setData({
- businessError: {
- statusCode: "400",
- message: "import error",
- error: {},
- },
- isImportError: true,
- });
-
- const errorElementAfter = wrapper.find(".import-error");
- const confirmButtonAfter = wrapper.find(".dialog-confirmed");
- expect(errorElementAfter.element.textContent).toContain(
- wrapper.vm.$i18n.t("pages.rooms.importCourse.importError")
- );
- expect(confirmButtonAfter.exists()).toBe(true);
- });
- });
-});
diff --git a/src/components/molecules/ImportModal.vue b/src/components/molecules/ImportModal.vue
deleted file mode 100644
index 1a8adec16a..0000000000
--- a/src/components/molecules/ImportModal.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-
-
-
-
-
-
- {{ $t("pages.rooms.importCourse.step_1.text") }}
-
-
- {{ $t("pages.rooms.importCourse.step_2.text") }}
-
-
- {{ $t("pages.rooms.importCourse.step_3.text") }}
-
-
-
-
-
-
-
-
diff --git a/src/components/molecules/InfoBox.unit.js b/src/components/molecules/InfoBox.unit.js
deleted file mode 100644
index e41a1d9f69..0000000000
--- a/src/components/molecules/InfoBox.unit.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import InfoBox from "./InfoBox";
-
-describe("@/components/molecules/InfoBox", () => {
- it(
- ...rendersSlotContent(InfoBox, ["header", "body", "actions"], {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- active: true,
- },
- })
- );
-});
diff --git a/src/components/molecules/InfoBox.unit.ts b/src/components/molecules/InfoBox.unit.ts
new file mode 100644
index 0000000000..db08e2cfac
--- /dev/null
+++ b/src/components/molecules/InfoBox.unit.ts
@@ -0,0 +1,82 @@
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import InfoBox from "./InfoBox.vue";
+
+describe("@/components/molecules/InfoBox", () => {
+ describe("when active is true", () => {
+ const setup = (slots: any) => {
+ const wrapper = mount(InfoBox, {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ props: {
+ active: true,
+ },
+ slots,
+ });
+
+ return {
+ wrapper,
+ };
+ };
+
+ it("renders header slot content", () => {
+ const testSlot = "header slot";
+ const { wrapper } = setup({ header: testSlot });
+
+ expect(wrapper.html()).toContain(testSlot);
+ });
+
+ it("renders body slot content", () => {
+ const testSlot = "body slot";
+ const { wrapper } = setup({ body: testSlot });
+
+ expect(wrapper.html()).toContain(testSlot);
+ });
+
+ it("renders actions slot content", () => {
+ const testSlot = "actions slot";
+ const { wrapper } = setup({ actions: testSlot });
+
+ expect(wrapper.html()).toContain(testSlot);
+ });
+ });
+
+ describe("when active is false", () => {
+ const setup = (slots: any) => {
+ const wrapper = mount(InfoBox, {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ props: {
+ active: false,
+ },
+ slots,
+ });
+
+ return {
+ wrapper,
+ };
+ };
+
+ it("does not render header slot content", () => {
+ const testSlot = "header slot";
+ const { wrapper } = setup({ header: testSlot });
+
+ expect(wrapper.html()).not.toContain(testSlot);
+ });
+
+ it("does not render body slot content", () => {
+ const testSlot = "body slot";
+ const { wrapper } = setup({ body: testSlot });
+
+ expect(wrapper.html()).not.toContain(testSlot);
+ });
+
+ it("does not render actions slot content", () => {
+ const testSlot = "actions slot";
+ const { wrapper } = setup({ actions: testSlot });
+
+ expect(wrapper.html()).not.toContain(testSlot);
+ });
+ });
+});
diff --git a/src/components/molecules/InfoBox.vue b/src/components/molecules/InfoBox.vue
index d3b6309df4..971f884ec8 100644
--- a/src/components/molecules/InfoBox.vue
+++ b/src/components/molecules/InfoBox.vue
@@ -9,7 +9,7 @@
+
{{ $t("common.labels.close") }}
@@ -38,12 +38,12 @@ export default {
diff --git a/src/components/molecules/RoomBoardCard.unit.ts b/src/components/molecules/RoomBoardCard.unit.ts
index 4edb96a095..083bed7da2 100644
--- a/src/components/molecules/RoomBoardCard.unit.ts
+++ b/src/components/molecules/RoomBoardCard.unit.ts
@@ -1,12 +1,15 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, mount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
import RoomBoardCard from "./RoomBoardCard.vue";
-import { I18N_KEY } from "@/utils/inject";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
-const $router = {
- push: jest.fn(),
-};
+import { Router, useRouter } from "vue-router";
+import { createMock } from "@golevelup/ts-jest";
+
+jest.mock("vue-router");
+const useRouterMock = useRouter;
const mockBoardData = {
id: "test-id",
@@ -23,38 +26,34 @@ const mockCourseData = {
};
describe("RoomBoardCard", () => {
- let wrapper: Wrapper;
-
const setup = () => {
- document.body.setAttribute("data-app", "true");
- wrapper = mount(RoomBoardCard as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+ const router = createMock();
+ useRouterMock.mockReturnValue(router);
+ // Note: router has to be mocked before mounting the component
+ const wrapper = mount(RoomBoardCard, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
- propsData: {
+ props: {
dragInProgress: false,
keyDrag: false,
columnBoardItem: mockBoardData,
courseData: mockCourseData,
},
- mocks: { $router },
});
- };
- beforeEach(() => {
- $router.push.mockReset();
- });
+ return { wrapper, router };
+ };
describe("when a board card is rendered", () => {
it("should be found in dom", () => {
- setup();
+ const { wrapper } = setup();
expect(wrapper.findComponent(RoomBoardCard).exists()).toBe(true);
});
it("should have correct board title", () => {
- setup();
- const expectedBoardTitle = "Kurs-Board";
+ const { wrapper } = setup();
+ const expectedBoardTitle = "pages.room.boardCard.label.courseBoard";
const boardTitle = wrapper.find(".board-title").element.textContent;
expect(boardTitle).toContain(expectedBoardTitle);
@@ -63,29 +62,29 @@ describe("RoomBoardCard", () => {
describe("when interacting with a board card", () => {
it("should redirect to column board when clicking on the card", () => {
- setup();
- const boardId = wrapper.props().columnBoardItem.columnBoardId;
+ const { wrapper, router } = setup();
+ const boardId = mockBoardData.columnBoardId;
const boardCard = wrapper.findComponent({ name: "VCard" });
boardCard.vm.$emit("click");
- expect($router.push).toHaveBeenCalledTimes(1);
- expect($router.push).toHaveBeenCalledWith(`${boardId}/board`);
+ expect(router.push).toHaveBeenCalledTimes(1);
+ expect(router.push).toHaveBeenCalledWith(`${boardId}/board`);
});
it("should redirect to column board when pressing enter on the card", async () => {
- setup();
- const boardId = wrapper.props().columnBoardItem.columnBoardId;
+ const { wrapper, router } = setup();
+ const boardId = mockBoardData.columnBoardId;
const boardCard = wrapper.findComponent({ name: "VCard" });
await boardCard.trigger("keydown.enter");
- expect($router.push).toHaveBeenCalledTimes(1);
- expect($router.push).toHaveBeenCalledWith(`${boardId}/board`);
+ expect(router.push).toHaveBeenCalledTimes(1);
+ expect(router.push).toHaveBeenCalledWith(`${boardId}/board`);
});
it("should not redirect to column board if a card is dragged", async () => {
- setup();
+ const { wrapper, router } = setup();
await wrapper.setProps({ dragInProgress: true });
const boardCard = wrapper.findComponent({ name: "VCard" });
@@ -93,11 +92,11 @@ describe("RoomBoardCard", () => {
boardCard.vm.$emit("click");
await wrapper.vm.$nextTick();
- expect($router.push).not.toHaveBeenCalled();
+ expect(router.push).not.toHaveBeenCalled();
});
it("should emit 'onDrag' when pressing space", async () => {
- setup();
+ const { wrapper } = setup();
const boardCard = wrapper.findComponent({ name: "VCard" });
await boardCard.trigger("keydown.space");
@@ -106,7 +105,7 @@ describe("RoomBoardCard", () => {
});
it("should emit 'tab-pressed' when pressing tab", async () => {
- setup();
+ const { wrapper } = setup();
const boardCard = wrapper.findComponent({ name: "VCard" });
await boardCard.trigger("keydown.tab");
@@ -117,7 +116,7 @@ describe("RoomBoardCard", () => {
it.each([["up"], ["down"]])(
"should emit 'move-element' when pressing the %s arrow key and keyDrag is true",
async (key) => {
- setup();
+ const { wrapper } = setup();
await wrapper.setProps({ keyDrag: true });
const boardCard = wrapper.findComponent({ name: "VCard" });
@@ -130,7 +129,7 @@ describe("RoomBoardCard", () => {
it.each([["up"], ["down"]])(
"should not emit 'move-element' when pressing the %s arrow key and keyDrag is false",
async (key) => {
- setup();
+ const { wrapper } = setup();
const boardCard = wrapper.findComponent({ name: "VCard" });
await boardCard.trigger(`keydown.${key}`);
diff --git a/src/components/molecules/RoomBoardCard.vue b/src/components/molecules/RoomBoardCard.vue
index 0fffca47e6..e89219bc4d 100644
--- a/src/components/molecules/RoomBoardCard.vue
+++ b/src/components/molecules/RoomBoardCard.vue
@@ -3,8 +3,8 @@
class="mx-auto mb-4 board-card"
hover
tabindex="0"
- role="button"
- color="var(--v-primary-lighten)"
+ role="link"
+ color="rgba(var(--v-theme-primary-lighten))"
@click="openBoard"
@keydown.enter.self="openBoard"
@keydown.space.prevent="$emit('on-drag')"
@@ -15,68 +15,56 @@
-
+
+
-
diff --git a/src/components/molecules/RoomLessonCard.unit.ts b/src/components/molecules/RoomLessonCard.unit.ts
index 8e6c66884d..2530a494b1 100644
--- a/src/components/molecules/RoomLessonCard.unit.ts
+++ b/src/components/molecules/RoomLessonCard.unit.ts
@@ -1,11 +1,16 @@
-import { mount, MountOptions } from "@vue/test-utils";
-import RoomLessonCard from "./RoomLessonCard.vue";
-import EnvConfigModule from "@/store/env-config";
-import setupStores from "@@/tests/test-utils/setupStores";
import { envConfigModule } from "@/store";
-import Vue from "vue";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import EnvConfigModule from "@/store/env-config";
import { Envs } from "@/store/types/env-config";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import setupStores from "@@/tests/test-utils/setupStores";
+import { createMock } from "@golevelup/ts-jest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { VCard } from "vuetify/lib/components/index.mjs";
+import RoomLessonCard from "./RoomLessonCard.vue";
const baseTestProps = {
room: {
@@ -47,18 +52,15 @@ const hiddenTestProps = {
dragInProgress: false,
};
const getWrapper: any = (props: object, options?: object) => {
- return mount(RoomLessonCard as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: props,
+ return mount(RoomLessonCard, {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ props,
...options,
});
};
describe("@/components/molecules/RoomLessonCard", () => {
beforeEach(() => {
- document.body.setAttribute("data-app", "true");
window.location.pathname = "";
setupStores({ envConfigModule: EnvConfigModule });
});
@@ -73,35 +75,48 @@ describe("@/components/molecules/RoomLessonCard", () => {
expect(wrapper.vm.room).toStrictEqual(baseTestProps.room);
});
- it("should redirect to lesson page", () => {
- const location = window.location;
+ it("should redirect to lesson page", async () => {
const wrapper = getWrapper({ ...baseTestProps, role });
- const lessonCard = wrapper.find(".lesson-card");
- lessonCard.trigger("click");
- expect(location.pathname).toStrictEqual("/courses/456/topics/123");
+ Object.defineProperty(window, "location", {
+ set: jest.fn(),
+ get: () => createMock(),
+ });
+
+ const locationSpy = jest.spyOn(window, "location", "set");
+
+ const lessonCard = wrapper.findComponent(VCard);
+ await lessonCard.trigger("click");
+ await nextTick();
+
+ expect(locationSpy).toHaveBeenCalledWith("/courses/456/topics/123");
});
it("should NOT redirect to lesson page if dragging is in progress", () => {
- const location = window.location;
const wrapper = getWrapper({
...baseTestProps,
role,
dragInProgress: true,
});
+
+ Object.defineProperty(window, "location", {
+ set: jest.fn(),
+ get: () => createMock(),
+ });
+
+ const locationSpy = jest.spyOn(window, "location", "set");
+
const lessonCard = wrapper.find(".lesson-card");
lessonCard.trigger("click");
- expect(location.pathname).toStrictEqual("");
+ expect(locationSpy).not.toHaveBeenCalled();
});
it("should have correct title", () => {
const wrapper = getWrapper({ ...baseTestProps, role });
const title = wrapper.find(".title-section");
- expect(title.element.textContent).toContain(
- wrapper.vm.$i18n.t("common.words.topic")
- );
+ expect(title.element.textContent).toContain("common.words.topic");
});
it("should use hidden lesson UI only for hidden lesson cards", async () => {
@@ -118,7 +133,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const wrapper = getWrapper({ ...hiddenTestProps, role });
const chipElement = wrapper.find(".chip-value");
expect(chipElement.element.textContent).toContain(
- wrapper.vm.$i18n.t("pages.room.lessonCard.label.notVisible")
+ "pages.room.lessonCard.label.notVisible"
);
});
});
@@ -131,9 +146,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const actionButtons = wrapper.findAll(".action-button");
expect(actionButtons).toHaveLength(1);
- expect(actionButtons.wrappers[0].element.textContent).toContain(
- wrapper.vm.$i18n.t("common.action.publish")
- );
+ expect(actionButtons[0].html()).toContain("common.action.publish");
});
it("should have no action button when lesson is visible", () => {
@@ -151,8 +164,10 @@ describe("@/components/molecules/RoomLessonCard", () => {
const threeDotButton = wrapper.find(".three-dot-button");
await threeDotButton.trigger("click");
- const moreActionButton = wrapper.findAll(".menu-action");
- await moreActionButton.wrappers[0].trigger("click");
+ const moreActionButton = wrapper.findComponent(
+ `[data-testid="content-card-lesson-menu-edit"]`
+ );
+ await moreActionButton.trigger("click");
expect(redirectActionMock).toHaveBeenCalled();
expect(redirectActionMock.mock.calls[0][0]).toStrictEqual(
@@ -177,7 +192,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const hasCopyMenuItem = wrapper.vm.moreActionsMenuItems.teacher.some(
(item: any) => {
- return item.name === wrapper.vm.$i18n.t("common.actions.copy");
+ return item.name === "common.actions.copy";
}
);
expect(hasCopyMenuItem).toBe(true);
@@ -191,7 +206,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const hasCopyMenuItem = wrapper.vm.moreActionsMenuItems.teacher.some(
(item: any) => {
- return item.name === wrapper.vm.$i18n.t("common.actions.copy");
+ return item.name === "common.actions.copy";
}
);
expect(hasCopyMenuItem).toBe(false);
@@ -206,7 +221,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const threeDotButton = wrapper.find(".three-dot-button");
await threeDotButton.trigger("click");
- const moreActionButton = wrapper.find(
+ const moreActionButton = wrapper.findComponent(
`[data-testid="content-card-lesson-menu-copy"]`
);
await moreActionButton.trigger("click");
@@ -221,9 +236,13 @@ describe("@/components/molecules/RoomLessonCard", () => {
const threeDotButton = wrapper.find(".three-dot-button");
await threeDotButton.trigger("click");
- const moreActionButton = wrapper.findAll(".menu-action");
- await moreActionButton.wrappers[1].trigger("click");
+ const moreActionButton = wrapper.findComponent(
+ `[data-testid="content-card-lesson-menu-revert"]`
+ );
+ await moreActionButton.trigger("click");
+
await wrapper.vm.$nextTick();
+
expect(revertPublishedCardMock).toHaveBeenCalled();
});
@@ -233,10 +252,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const hasShareMenuItem = wrapper.vm.moreActionsMenuItems.teacher.some(
(item: any) => {
- return (
- item.name ===
- wrapper.vm.$i18n.t("pages.room.lessonCard.label.shareLesson")
- );
+ return item.name === "pages.room.lessonCard.label.shareLesson";
}
);
expect(hasShareMenuItem).toBe(true);
@@ -247,7 +263,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
const threeDotButton = wrapper.find(".three-dot-button");
await threeDotButton.trigger("click");
- const moreActionButton = wrapper.find(
+ const moreActionButton = wrapper.findComponent(
`[data-testid="content-card-lesson-menu-remove"]`
);
await moreActionButton.trigger("click");
@@ -280,13 +296,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
};
const wrapper = getWrapper({ ...lessonObject, role });
- const expectedString = `${wrapper.vm.$i18n.t(
- "common.words.tasks"
- )}: 3 ${wrapper.vm.$i18n.t(
- "common.words.published"
- )} / 4 ${wrapper.vm.$i18n.t(
- "common.words.planned"
- )} / 2 ${wrapper.vm.$i18n.t("common.words.drafts")}`;
+ const expectedString = `common.words.tasks: 3 common.words.published / 4 common.words.planned / 2 common.words.drafts`;
const chipElement = wrapper.find(".chip-value");
expect(chipElement.element.innerHTML).toContain(expectedString);
@@ -316,13 +326,7 @@ describe("@/components/molecules/RoomLessonCard", () => {
};
const wrapper = getWrapper({ ...lessonObject, role });
- const expectedString = `${wrapper.vm.$i18n.t(
- "common.words.tasks"
- )}: 3 ${wrapper.vm.$i18n.t(
- "common.words.ready"
- )} / 4 ${wrapper.vm.$i18n.t(
- "common.words.planned"
- )} / 2 ${wrapper.vm.$i18n.t("common.words.drafts")}`;
+ const expectedString = `common.words.tasks: 3 common.words.ready / 4 common.words.planned / 2 common.words.drafts`;
const chipElement = wrapper.find(".chip-value");
expect(chipElement.element.innerHTML).toContain(expectedString);
@@ -352,11 +356,8 @@ describe("@/components/molecules/RoomLessonCard", () => {
};
const wrapper = getWrapper({ ...lessonObject, role });
- const expectedString = `${wrapper.vm.$i18n.t(
- "common.words.tasks"
- )}: 3 ${wrapper.vm.$i18n.t(
- "common.words.published"
- )} / 2 ${wrapper.vm.$i18n.t("common.words.drafts")}`;
+ const expectedString = `common.words.tasks: 3 common.words.published / 2 common.words.drafts`;
+
const chipElement = wrapper.find(".chip-value");
expect(chipElement.element.innerHTML).toContain(expectedString);
@@ -429,40 +430,42 @@ describe("@/components/molecules/RoomLessonCard", () => {
describe("keypress events", () => {
const role = "teacher";
it("should call 'handleClick' event when 'enter' key is pressed", async () => {
- const handleClickMock = jest.fn();
const wrapper = getWrapper({ ...baseTestProps, role });
- wrapper.vm.handleClick = handleClickMock;
+ Object.defineProperty(window, "location", {
+ set: jest.fn(),
+ get: () => createMock(),
+ });
+
+ const locationSpy = jest.spyOn(window, "location", "set");
await wrapper.trigger("keydown.enter");
- expect(handleClickMock).toHaveBeenCalled();
- expect(handleClickMock.mock.calls[0][0].keyCode).toStrictEqual(13);
- expect(handleClickMock.mock.calls[0][0].key).toStrictEqual("Enter");
+
+ expect(locationSpy).toHaveBeenCalledWith("/courses/456/topics/123");
});
- it("should call 'onKeyPress' event when 'up, down, space' keys are pressed", async () => {
- const onKeyPressMock = jest.fn();
- const wrapper = getWrapper({ ...baseTestProps, role });
+ describe("when keydrag is true", () => {
+ it("should call 'onKeyPress' event when 'up, down, space' keys are pressed", async () => {
+ const wrapper = getWrapper({ ...baseTestProps, keyDrag: true, role });
- wrapper.vm.onKeyPress = onKeyPressMock;
-
- await wrapper.trigger("keydown.up");
- expect(onKeyPressMock).toHaveBeenCalled();
- expect(onKeyPressMock.mock.calls[0][0].keyCode).toStrictEqual(38);
- expect(onKeyPressMock.mock.calls[0][0].key).toStrictEqual("Up");
-
- jest.clearAllMocks();
- await wrapper.trigger("keydown.down");
- expect(onKeyPressMock).toHaveBeenCalled();
- expect(onKeyPressMock.mock.calls[0][0].keyCode).toStrictEqual(40);
- expect(onKeyPressMock.mock.calls[0][0].key).toStrictEqual("Down");
-
- jest.clearAllMocks();
- await wrapper.trigger("keydown.space");
- expect(onKeyPressMock).toHaveBeenCalled();
- expect(onKeyPressMock.mock.calls[0][0].keyCode).toStrictEqual(32);
- expect(onKeyPressMock.mock.calls[0][0].key).toStrictEqual(" ");
- jest.clearAllMocks();
+ await wrapper.trigger("keydown.up");
+
+ expect(wrapper.emitted("move-element")).toHaveLength(1);
+ expect(wrapper.emitted("move-element")[0][0]).toStrictEqual({
+ id: baseTestProps.lesson.id,
+ moveIndex: -1,
+ });
+
+ await wrapper.trigger("keydown.down");
+ expect(wrapper.emitted("move-element")).toHaveLength(2);
+ expect(wrapper.emitted("move-element")[1][0]).toStrictEqual({
+ id: baseTestProps.lesson.id,
+ moveIndex: 1,
+ });
+
+ await wrapper.trigger("keydown.space");
+ expect(wrapper.emitted("on-drag")).toHaveLength(1);
+ });
});
it("should emit 'tab-pressed' event when 'tab' key is pressed", async () => {
diff --git a/src/components/molecules/RoomLessonCard.vue b/src/components/molecules/RoomLessonCard.vue
index 8a0f989479..aea03e2f82 100644
--- a/src/components/molecules/RoomLessonCard.vue
+++ b/src/components/molecules/RoomLessonCard.vue
@@ -5,7 +5,7 @@
max-width="100%"
:aria-label="ariaLabel"
tabindex="0"
- :outlined="isHidden"
+ :variant="isHidden ? 'outlined' : 'elevated'"
hover
data-testid="content-card-lesson"
@click="handleClick"
@@ -17,7 +17,7 @@
>
+
{{
$t(
"pages.administration.students.infobox.registrationOnly.headline"
@@ -194,8 +195,7 @@
+@import "~vuetify/settings";
@import "@/styles/mixins";
.table__row {
font-weight: var(--font-weight-bold);
th {
- border-bottom: calc(2 * var(--border-width)) solid var(--v-secondary-base);
+ border-bottom: calc(2 * var(--border-width)) solid
+ rgba(var(--v-theme-secondary));
&.is-current-sort {
opacity: 1;
@@ -370,7 +372,7 @@ export default {
svg {
font-size: calc(1.5 * var(--text-lg));
- color: var(--v-secondary-base);
+ color: rgba(var(--v-theme-secondary));
}
}
@@ -413,7 +415,7 @@ export default {
z-index: var(--layer-fab);
outline: none;
box-shadow:
- 0 0 0 0 var(--v-white-base),
+ 0 0 0 0 rgba(var(--v-theme-white)),
0 0 0 3px var(--button-background);
}
}
@@ -428,9 +430,12 @@ export default {
left: 56%;
}
-::v-deep
- .v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover)
- .v-btn__content {
+:deep(
+ .v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(
+ :hover
+ )
+ .v-btn__content
+ ) {
opacity: 1;
}
diff --git a/src/components/organisms/FormCreateUser.unit.js b/src/components/organisms/FormCreateUser.unit.js
index c1b03c98d6..72fe418d15 100644
--- a/src/components/organisms/FormCreateUser.unit.js
+++ b/src/components/organisms/FormCreateUser.unit.js
@@ -1,4 +1,10 @@
+import { createStore } from "vuex";
import FormCreateUser from "./FormCreateUser";
+import {
+ createTestingVuetify,
+ createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { nextTick } from "vue";
const validRole = {
data: ["student"],
@@ -16,37 +22,45 @@ const getMockActionsErrorCreate = () => ({
find: jest.fn().mockReturnValue(Promise.resolve(validRole)),
});
-const getMocks = ({ actions = getMockActions() } = {}) =>
- createComponentMocks({
- i18n: true,
- user: true,
- store: {
- users: {
- actions,
- },
- roles: {
- actions,
+describe("@/components/organisms/FormCreateUser", () => {
+ const setup = (actions = getMockActions(), options = {}) => {
+ const wrapper = mount(FormCreateUser, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $store: createStore({
+ modules: {
+ users: {
+ actions,
+ },
+ roles: {
+ actions,
+ },
+ },
+ }),
+ },
},
- },
- });
+ ...options,
+ });
+
+ return { wrapper };
+ };
-describe("@/components/organisms/FormCreateUser", () => {
describe("create", () => {
it("emits create-user event on form submit", async () => {
- const actions = getMockActionsErrorCreate();
- const mock = getMocks({ actions });
- const wrapper = mount(FormCreateUser, {
- ...mock,
- });
+ const { wrapper } = setup(getMockActionsErrorCreate());
const inputFirstName = wrapper.find(
- 'input[data-testid="input_create-user_firstname"]'
+ '[data-testid="input_create-user_firstname"] input'
);
const inputLastName = wrapper.find(
- 'input[data-testid="input_create-user_lastname"]'
+ '[data-testid="input_create-user_lastname"] input'
);
const inputEmail = wrapper.find(
- 'input[data-testid="input_create-user_email"]'
+ '[data-testid="input_create-user_email"] input'
+ );
+ const submitButton = wrapper.find(
+ 'button[data-testid="button_create-user_submit"]'
);
expect(inputFirstName.exists()).toBe(true);
inputFirstName.setValue("Klara");
@@ -57,9 +71,13 @@ describe("@/components/organisms/FormCreateUser", () => {
expect(inputEmail.exists()).toBe(true);
inputEmail.setValue("klara.fall@mail.de");
- wrapper.find("form").trigger("submit");
+ expect(submitButton.exists()).toBe(true);
+
+ await submitButton.trigger("click");
+
+ await nextTick();
+ await nextTick();
- await wrapper.vm.$nextTick();
const eventUserData = wrapper.emitted("create-user")[0][0];
expect(eventUserData.firstName).toBe("Klara");
expect(eventUserData.lastName).toBe("Fall");
@@ -67,43 +85,27 @@ describe("@/components/organisms/FormCreateUser", () => {
});
it("does not emit create-user event if form is invalid", async () => {
- const actions = getMockActionsErrorCreate();
- const mock = getMocks({ actions });
- const wrapper = mount(FormCreateUser, {
- ...mock,
- });
+ const { wrapper } = setup(getMockActionsErrorCreate());
- wrapper.find("form").trigger("submit");
+ const submitButton = wrapper.find(
+ 'button[data-testid="button_create-user_submit"]'
+ );
+
+ await submitButton.trigger("click");
- await wrapper.vm.$nextTick();
const eventUserData = wrapper.emitted();
expect(eventUserData["create-user"]).toBeUndefined();
});
- it("emit trigger-validation event on form submit", async () => {
- const actions = getMockActionsErrorCreate();
- const mock = getMocks({ actions });
- const wrapper = mount(FormCreateUser, {
- ...mock,
- });
-
- wrapper.find("form").trigger("submit");
-
- await wrapper.vm.$nextTick();
- expect(wrapper.emitted("trigger-validation")[0]).toHaveLength(1);
- });
-
- it("renders slot content", async () => {
- const actions = getMockActionsErrorCreate();
- const mock = getMocks({ actions });
- const wrapper = mount(FormCreateUser, {
- ...mock,
+ it("renders slot content", () => {
+ const { wrapper } = setup(getMockActionsErrorCreate(), {
slots: {
- inputs: '',
+ inputs: '',
},
});
- const slot_input = wrapper.find('input[value="test"]');
- expect(slot_input.exists()).toBe(true);
+
+ const slotInput = wrapper.find('input[label="test"]');
+ expect(slotInput.exists()).toBe(true);
});
});
});
diff --git a/src/components/organisms/FormCreateUser.vue b/src/components/organisms/FormCreateUser.vue
index eab5b097ca..4ee707a953 100644
--- a/src/components/organisms/FormCreateUser.vue
+++ b/src/components/organisms/FormCreateUser.vue
@@ -1,106 +1,92 @@
-
+
+
-
diff --git a/src/components/organisms/Ldap/LdapClassesSection.unit.js b/src/components/organisms/Ldap/LdapClassesSection.unit.js
index d236bbc4e5..cccf427b7a 100644
--- a/src/components/organisms/Ldap/LdapClassesSection.unit.js
+++ b/src/components/organisms/Ldap/LdapClassesSection.unit.js
@@ -1,20 +1,34 @@
import { mount } from "@vue/test-utils";
import LdapClassesSection from "./LdapClassesSection";
+import {
+ createTestingVuetify,
+ createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import BaseInput from "@/components/base/BaseInput/BaseInput.vue";
describe("@/components/organisms/LdapClassesSection", () => {
- const ldapConfigData = {
- classPath: "class=path",
- nameAttribute: "description",
- participantAttribute: "member",
- };
-
- it("has correct child components", () => {
+ const setup = (props = {}) => {
const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigData,
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ components: {
+ "base-input": BaseInput,
+ },
+ },
+ props: {
+ modelValue: {
+ classPath: "class=path",
+ nameAttribute: "description",
+ participantAttribute: "member",
+ },
+ ...props,
},
});
+ return { wrapper };
+ };
+
+ it("has correct child components", () => {
+ const { wrapper } = setup();
expect(wrapper.find("[data-testid=ldapDataClassesPath]").exists()).toBe(
true
@@ -30,138 +44,101 @@ describe("@/components/organisms/LdapClassesSection", () => {
});
it("loads the validator", async () => {
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigData,
- },
- });
- // validations are only active when checked === true
- await wrapper.setData({ checked: true });
- expect(wrapper.vm.$v).not.toBeUndefined();
+ const { wrapper } = setup();
+
+ expect(wrapper.vm.v$).not.toBeUndefined();
});
- it("invalid validation is false when valid values are sent through props", async () => {
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigData,
- },
+ describe("valid values", () => {
+ it("should set the validator to valid", async () => {
+ const { wrapper } = setup();
+
+ // validations are only active when checked === true
+ await wrapper.setData({ checked: true });
+ // default props values are valid so expect this assertion to succeed
+ expect(wrapper.vm.v$.$invalid).toBe(false);
});
- // validations are only active when checked === true
- await wrapper.setData({ checked: true });
- // default props values are valid so expect this assertion to succeed
- expect(wrapper.vm.$v.$invalid).toBe(false);
});
- it("invalid validation is true when invalid values are sent through props", async () => {
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: {
+ describe("invalid values", () => {
+ it("should set the validator to invalid", async () => {
+ const { wrapper } = setup({
+ modelValue: {
classPath: "invalid",
nameAttribute: "",
participantAttribute: "",
},
- },
+ });
+
+ // validations are only active when checked === true
+ await wrapper.setData({ checked: true });
+
+ expect(wrapper.vm.v$.$invalid).toBe(true);
});
- await wrapper.setData({ checked: true });
- expect(wrapper.vm.$v.$invalid).toBe(true);
- });
- it("invalid validation is true when any of the input values are invalid", async () => {
- const ldapConfigDataTestSpecific = { ...ldapConfigData };
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigDataTestSpecific,
- },
- listeners: {
- input: (event) => {
- ldapConfigDataTestSpecific.classPath = event.classPath;
- ldapConfigDataTestSpecific.nameAttribute = event.nameAttribute;
- ldapConfigDataTestSpecific.participantAttribute =
- event.participantAttribute;
+ it("should render an error message", async () => {
+ const { wrapper } = setup({
+ modelValue: {
+ classPath: "",
+ nameAttribute: "",
+ participantAttribute: "",
},
- },
- });
- // validations are only active when checked === true
- await wrapper.setData({ checked: true });
+ });
- const inputPath = wrapper.find("input[data-testid=ldapDataClassesPath]");
- expect(inputPath.exists()).toBe(true);
+ // validations are only active when checked === true
+ await wrapper.setData({ checked: true });
+ await wrapper.vm.v$.$touch();
- inputPath.setValue("");
- inputPath.trigger("blur"); // without this the error is not displayed
+ const errorMessageComponent = wrapper.find(
+ '[data-testid="ldapDataClassesPath"] .base-input-info.base-input-error'
+ );
- expect(inputPath.element.value).toBe("");
- // disabled until behaviour is figured out
- // expect(wrapper.vm.$v.$invalid).toBe(true);
- // await wrapper.vm.$nextTick();
- // const errorMessageComponent = wrapper.find(
- // "div[data-testid='ldapDataClassesPath'] .info.error"
- // );
- // expect(errorMessageComponent.exists()).toBeTruthy();
+ expect(errorMessageComponent.text()).toEqual(
+ "common.validation.required"
+ );
+ });
});
it("it emits update:errors event when validate prop changes value", async () => {
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigData,
- validate: false,
- },
+ const { wrapper } = setup({
+ validate: false,
});
- expect(wrapper.emitted("update:errors")).toBeUndefined();
+
+ expect(wrapper.emitted("update:errors")).toHaveLength(1);
await wrapper.setProps({
validate: true,
});
- expect(wrapper.vm.$props.validate).toBe(true);
- await wrapper.vm.$nextTick();
- expect(wrapper.emitted("update:errors")[0]).toHaveLength(2);
+ expect(wrapper.emitted("update:errors")).toHaveLength(2);
});
it("invalid error message is displayed only after the blur event, even if originally invalid props were passed through", async () => {
- const ldapConfigDataTestSpecific = {
- classPath: "invalid",
- nameAttribute: "",
- participantAttribute: "",
- };
- const wrapper = mount(LdapClassesSection, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- value: ldapConfigDataTestSpecific,
- },
- listeners: {
- input: (event) => {
- ldapConfigDataTestSpecific.classPath = event.classPath;
- ldapConfigDataTestSpecific.nameAttribute = event.nameAttribute;
- ldapConfigDataTestSpecific.participantAttribute =
- event.participantAttribute;
- },
+ const { wrapper } = setup({
+ modelValue: {
+ classPath: "invalid",
+ nameAttribute: "",
+ participantAttribute: "",
},
});
+
// validations are only active when checked === true
await wrapper.setData({ checked: true });
- let errorMessageComponent = wrapper.find(
- "div[data-testid='ldapDataClassesPath'] .base-input-info.base-input-error"
+ expect(wrapper.vm.v$.$invalid).toBe(true);
+ const errorMessageComponentBefore = wrapper.find(
+ '[data-testid="ldapDataClassesPath"] .base-input-info.base-input-error'
);
- expect(wrapper.vm.$v.$invalid).toBe(true);
- expect(errorMessageComponent.exists()).toBeFalsy();
+ expect(errorMessageComponentBefore.exists()).toBe(false);
- const inputPath = wrapper.find("input[data-testid=ldapDataClassesPath]");
- expect(inputPath.exists()).toBe(true);
- expect(inputPath.element.value).toBe(ldapConfigDataTestSpecific.classPath);
+ await wrapper.vm.v$.$touch(); // without this the error is not displayed
- inputPath.trigger("blur"); // without this the error is not displayed
+ const errorMessageComponentAfter = wrapper.find(
+ '[data-testid="ldapDataClassesPath"] .base-input-info.base-input-error'
+ );
- await wrapper.vm.$nextTick();
- errorMessageComponent = wrapper.find(
- "div[data-testid='ldapDataClassesPath'] .base-input-info.base-input-error"
+ expect(errorMessageComponentAfter.text()).toEqual(
+ "pages.administration.ldapEdit.validation.path"
);
- expect(errorMessageComponent.exists()).toBeTruthy();
});
});
diff --git a/src/components/organisms/Ldap/LdapClassesSection.vue b/src/components/organisms/Ldap/LdapClassesSection.vue
index 8e2a62032a..7f44657f0a 100644
--- a/src/components/organisms/Ldap/LdapClassesSection.vue
+++ b/src/components/organisms/Ldap/LdapClassesSection.vue
@@ -5,26 +5,27 @@
$mdiFileTreeOutline
@@ -35,15 +36,17 @@
@@ -73,12 +79,18 @@
diff --git a/src/components/organisms/administration/ImportUsers.unit.ts b/src/components/organisms/administration/ImportUsers.unit.ts
index 023e1700a8..a750aa6fd7 100644
--- a/src/components/organisms/administration/ImportUsers.unit.ts
+++ b/src/components/organisms/administration/ImportUsers.unit.ts
@@ -1,15 +1,21 @@
-import SchoolsModule from "@/store/schools";
-import setupStores from "@@/tests/test-utils/setupStores";
-import ImportUsersModule, { MatchedBy } from "@/store/import-users";
-import { importUsersModule, envConfigModule } from "@/store";
-import { mount } from "@vue/test-utils";
-import ImportUsers from "./ImportUsers.vue";
import {
ImportUserListResponse,
ImportUserResponseRoleNamesEnum,
} from "@/serverApi/v3";
+import { envConfigModule, importUsersModule, schoolsModule } from "@/store";
import EnvConfigModule from "@/store/env-config";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import ImportUsersModule, { MatchedBy } from "@/store/import-users";
+import SchoolsModule from "@/store/schools";
+import { schoolFactory } from "@@/tests/test-utils";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import setupStores from "@@/tests/test-utils/setupStores";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { VDataTable } from "vuetify/lib/components/index.mjs";
+import ImportUsers from "./ImportUsers.vue";
const mockImportUsers: ImportUserListResponse = {
total: 3,
@@ -70,16 +76,6 @@ const mockData = {
mdiFlag: "mdiFlag",
mdiFlagOutline: "mdiFlagOutline",
mdiPencilOutline: "mdiPencilOutline",
- options: {
- page: 1,
- itemsPerPage: 25,
- sortBy: [],
- sortDesc: [],
- groupBy: [],
- groupDesc: [],
- mustSort: false,
- multiSort: false,
- },
roles: [
{ text: "Schüler/-in", value: "student" },
{ text: "Lehrer/-in", value: "teacher" },
@@ -95,17 +91,17 @@ const mockData = {
searchRole: "",
};
-const getWrapper: any = (data?: object, options?: object) => {
+const getWrapper = (data?: object, options?: object) => {
return mount(ImportUsers, {
- ...createComponentMocks({
- i18n: true,
- }),
- data: () => data,
- mocks: {
- $theme: {
- name: "nbc",
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $theme: {
+ name: "nbc",
+ },
},
},
+ data: () => data,
...options,
});
};
@@ -120,48 +116,71 @@ describe("@/components/molecules/importUsers", () => {
});
importUsersModule.setImportUsersList(mockImportUsers);
envConfigModule.env.SC_THEME = "default";
+ schoolsModule.setSchool(
+ schoolFactory.build({
+ inUserMigration: true,
+ inMaintenance: true,
+ })
+ );
});
it("should have correct props", () => {
const wrapper = getWrapper(mockData);
expect(wrapper.vm.importUsers).toStrictEqual(mockImportUsers.data);
- expect(wrapper.vm.options).toStrictEqual(mockData.options);
expect(wrapper.vm.roles).toStrictEqual(mockData.roles);
});
it("alert section should visible/invisible according to 'canStartMigration' value", async () => {
+ schoolsModule.setSchool(
+ schoolFactory.build({
+ inUserMigration: false,
+ inMaintenance: false,
+ })
+ );
+
const wrapper = getWrapper(mockData);
const alertElement = wrapper.findAll(".v-alert");
expect(alertElement).toHaveLength(1);
- expect(alertElement.wrappers[0].element.textContent).toContain(
- wrapper.vm.$i18n.t("pages.administration.migration.cannotStart")
+ expect(alertElement[0].element.textContent).toContain(
+ wrapper.vm.$t("pages.administration.migration.cannotStart")
);
- wrapper.vm.school.inMaintenance = true;
- wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
+ schoolsModule.setSchool(
+ schoolFactory.build({
+ inUserMigration: true,
+ inMaintenance: true,
+ })
+ );
+ await nextTick();
const invisibleAlertElement = wrapper.findAll(".v-alert");
expect(invisibleAlertElement).toHaveLength(0);
});
it("alert section should be visible/invisible according to 'canStartMigration' value", async () => {
+ schoolsModule.setSchool(
+ schoolFactory.build({
+ inUserMigration: false,
+ inMaintenance: true,
+ })
+ );
+
const wrapper = getWrapper({
...mockData,
});
- wrapper.vm.school.inMaintenance = false;
- wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
-
const visibleAlertElement = wrapper.findAll(".v-alert");
expect(visibleAlertElement).toHaveLength(1);
- wrapper.vm.school.inMaintenance = true;
- wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
+ schoolsModule.setSchool(
+ schoolFactory.build({
+ inUserMigration: true,
+ inMaintenance: true,
+ })
+ );
+ await nextTick();
const invisibleAlertElement = wrapper.findAll(".v-alert");
expect(invisibleAlertElement).toHaveLength(0);
@@ -170,95 +189,112 @@ describe("@/components/molecules/importUsers", () => {
it("data table should have correct props", async () => {
const wrapper = getWrapper(mockData);
- wrapper.vm.school.inMaintenance = true;
- wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
-
- const dataTableElement = wrapper.find(".v-data-table");
+ const dataTableElement = wrapper.findComponent(".v-data-table");
expect(dataTableElement.vm.headers).toStrictEqual(wrapper.vm.tableHead);
expect(dataTableElement.vm.items).toStrictEqual(mockImportUsers.data);
});
describe("should search with all columns", () => {
- let getDataFromApiSpy: any;
- let wrapper: any;
- beforeEach(async () => {
- getDataFromApiSpy = jest.fn();
- wrapper = getWrapper(mockData);
- wrapper.vm.getDataFromApi = getDataFromApiSpy;
- wrapper.vm.school.inMaintenance = true;
- wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
- });
+ const setup = () => {
+ const wrapper = getWrapper(mockData);
+
+ const getDataFromApiSpy = jest.spyOn(wrapper.vm, "getDataFromApi");
+
+ return {
+ wrapper,
+ getDataFromApiSpy,
+ };
+ };
afterEach(() => {
- getDataFromApiSpy.mockClear();
+ jest.clearAllMocks();
});
it("should set search data properties when search first name changes", async () => {
- const searchFirstNameElement = wrapper.find(".searchFirstName");
- searchFirstNameElement.vm.$emit("input", "some text");
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchFirstNameElement = wrapper.getComponent(
+ '[data-testid="search-first-name"]'
+ );
+
+ await searchFirstNameElement.setValue("some text");
+
expect(wrapper.vm.searchFirstName).toStrictEqual("some text");
expect(getDataFromApiSpy).toHaveBeenCalled();
});
it("should set search data properties when search last name changes", async () => {
- const searchLastNameElement = wrapper.find(".searchLastName");
- searchLastNameElement.vm.$emit("input", "some text");
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchLastNameElement = wrapper.getComponent(
+ '[data-testid="search-last-name"]'
+ );
+ await searchLastNameElement.setValue("some text");
+
expect(wrapper.vm.searchLastName).toStrictEqual("some text");
expect(getDataFromApiSpy).toHaveBeenCalled();
});
it("should set search data properties when search username changes", async () => {
- const searchLoginNameElement = wrapper.find(".searchLoginName");
- searchLoginNameElement.vm.$emit("input", "some text");
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchLoginNameElement = wrapper.getComponent(
+ '[data-testid="search-login-name"]'
+ );
+ await searchLoginNameElement.setValue("some text");
+
expect(wrapper.vm.searchLoginName).toStrictEqual("some text");
expect(getDataFromApiSpy).toHaveBeenCalled();
});
it("should set search data properties when search role changes", async () => {
- const searchRoleElement = wrapper.find(".searchRole");
- searchRoleElement.vm.$emit("input", "role search");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchRoleElement = wrapper.getComponent(
+ '[data-testid="search-role"]'
+ );
+ await searchRoleElement.setValue("role search");
+
expect(wrapper.vm.searchRole).toStrictEqual("role search");
expect(getDataFromApiSpy).toHaveBeenCalled();
});
it("should set search data properties when search classes changes", async () => {
- const searchClassesElement = wrapper.find(".searchClasses");
- searchClassesElement.vm.$emit("input", "class search");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchClassesElement = wrapper.getComponent(
+ '[data-testid="search-classes"]'
+ );
+ await searchClassesElement.setValue("class search");
+
expect(wrapper.vm.searchClasses).toStrictEqual("class search");
expect(getDataFromApiSpy).toHaveBeenCalled();
});
it("should search data proprieties when match filter is set", async () => {
- const searchMatchedByNoneElement = wrapper.find(".searchMatchedByNone");
- const searchMatchedByAdminElement = wrapper.find(".searchMatchedByAdmin");
- const searchMatchedByAutoElement = wrapper.find(".searchMatchedByAuto");
-
- searchMatchedByNoneElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const { wrapper } = setup();
+
+ const searchMatchedByNoneElement = wrapper.getComponent(
+ '[data-testid="search-matched-by-none"]'
+ );
+ const searchMatchedByAdminElement = wrapper.getComponent(
+ '[data-testid="search-matched-by-admin"]'
+ );
+ const searchMatchedByAutoElement = wrapper.getComponent(
+ '[data-testid="search-matched-by-auto"]'
+ );
+
+ await searchMatchedByNoneElement.trigger("click");
expect(wrapper.vm.searchMatchedBy).toStrictEqual([MatchedBy.None]);
- searchMatchedByAdminElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ await searchMatchedByAdminElement.trigger("click");
expect(wrapper.vm.searchMatchedBy).toStrictEqual([
MatchedBy.None,
MatchedBy.Admin,
]);
- searchMatchedByAutoElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ await searchMatchedByAutoElement.trigger("click");
expect(wrapper.vm.searchMatchedBy).toStrictEqual([
MatchedBy.None,
MatchedBy.Admin,
@@ -267,15 +303,15 @@ describe("@/components/molecules/importUsers", () => {
});
it("should set search data proprieties when flag filter is toggle", async () => {
- const searchFlaggedElement = wrapper.find(".searchFlagged");
- searchFlaggedElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const { wrapper, getDataFromApiSpy } = setup();
+
+ const searchFlaggedElement = wrapper.getComponent(
+ '[data-testid="search-flagged"]'
+ );
+ await searchFlaggedElement.trigger("click");
expect(wrapper.vm.searchFlagged).toBeTruthy();
- searchFlaggedElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ await searchFlaggedElement.trigger("click");
expect(wrapper.vm.searchFlagged).toBeFalsy();
expect(getDataFromApiSpy).toHaveBeenCalled();
@@ -291,7 +327,7 @@ describe("@/components/molecules/importUsers", () => {
wrapper.vm.getDataFromApi = getDataFromApiSpy;
wrapper.vm.school.inMaintenance = true;
wrapper.vm.school.inUserMigration = true;
- await wrapper.vm.$nextTick();
+ await nextTick();
});
afterEach(() => {
@@ -299,33 +335,31 @@ describe("@/components/molecules/importUsers", () => {
});
it("should sort by first name", async () => {
- const sortFirstNameElement = wrapper.find(".head_firstName");
- sortFirstNameElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const sortFirstNameElement = wrapper.find(
+ '[data-testid="head-first-name"]'
+ );
+ await sortFirstNameElement.trigger("click");
- expect(wrapper.vm.options.sortBy[0]).toBe("firstName");
- expect(wrapper.vm.options.sortDesc[0]).toBe(false);
+ expect(wrapper.vm.options.sortBy[0].key).toEqual("firstName");
+ expect(wrapper.vm.options.sortBy[0].order).toEqual("asc");
- sortFirstNameElement.trigger("click");
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.options.sortDesc[0]).toBe(true);
+ await sortFirstNameElement.trigger("click");
+ expect(wrapper.vm.options.sortBy[0].order).toEqual("desc");
getDataFromApiSpy.mockClear();
});
it("should sort by last name", async () => {
- const sortLastNameElement = wrapper.find(".head_lastName");
- sortLastNameElement.trigger("click");
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ const sortLastNameElement = wrapper.find(
+ '[data-testid="head-last-name"]'
+ );
+ await sortLastNameElement.trigger("click");
- expect(wrapper.vm.options.sortBy[0]).toBe("lastName");
- expect(wrapper.vm.options.sortDesc[0]).toBe(false);
+ expect(wrapper.vm.options.sortBy[0].key).toBe("lastName");
+ expect(wrapper.vm.options.sortBy[0].order).toBe("asc");
- sortLastNameElement.trigger("click");
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.options.sortDesc[0]).toBe(true);
+ await sortLastNameElement.trigger("click");
+ expect(wrapper.vm.options.sortBy[0].order).toBe("desc");
getDataFromApiSpy.mockClear();
});
diff --git a/src/components/organisms/administration/ImportUsers.vue b/src/components/organisms/administration/ImportUsers.vue
index 9b5b5f9fca..d5254d0a1b 100644
--- a/src/components/organisms/administration/ImportUsers.vue
+++ b/src/components/organisms/administration/ImportUsers.vue
@@ -1,12 +1,12 @@
diff --git a/src/components/page-board/ColumnBoard.page.unit.ts b/src/components/page-board/ColumnBoard.page.unit.ts
index 839cd2dcef..8af853216b 100644
--- a/src/components/page-board/ColumnBoard.page.unit.ts
+++ b/src/components/page-board/ColumnBoard.page.unit.ts
@@ -1,8 +1,8 @@
-import { I18N_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount } from "@vue/test-utils";
-import Vue from "vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { shallowMount } from "@vue/test-utils";
import ColumnBoardPage from "./ColumnBoard.page.vue";
jest.mock
{{ resource.title || resource.name }}
@@ -73,7 +74,7 @@
/* eslint-disable max-lines */
-import AddContentButton from "@/components/organisms/AddContentButton";
+import AddContentButton from "@/components/lern-store/AddContentButton";
import UserHasRole from "@/components/helpers/UserHasRole";
import contentMeta from "@/mixins/contentMeta";
import LernStorePlayer from "@/components/lern-store/LernStorePlayer";
@@ -229,6 +230,7 @@ export default {
},
};
},
+ inject: ["mq"],
computed: {
author() {
return getAuthor(this.resource.properties);
@@ -237,7 +239,9 @@ export default {
return this.resource.preview.url;
},
closeButtonStyleSelector() {
- return this.$mq === "tabletPortrait" || this.$mq === "mobile";
+ return (
+ this.mq.current === "tabletPortrait" || this.mq.current === "mobile"
+ );
},
collectionLink() {
let relation = getMetadataAttribute(
@@ -310,7 +314,7 @@ export default {
window.addEventListener("resize", this.handleResize);
this.handleResize();
},
- destroyed() {
+ unmounted() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
@@ -351,6 +355,7 @@ export default {
diff --git a/src/components/molecules/ApplicationErrorRouting.unit.ts b/src/components/molecules/ApplicationErrorRouting.unit.ts
index 2069d27426..2ea2ad617c 100644
--- a/src/components/molecules/ApplicationErrorRouting.unit.ts
+++ b/src/components/molecules/ApplicationErrorRouting.unit.ts
@@ -1,26 +1,37 @@
-import ApplicationErrorRouting from "./ApplicationErrorRouting.vue";
-import { mount } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import ApplicationErrorModule from "@/store/application-error";
-import { createModuleMocks } from "@/utils/mock-store-module";
-import VueRouter from "vue-router";
import { APPLICATION_ERROR_KEY } from "@/utils/inject";
+import { createModuleMocks } from "@/utils/mock-store-module";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { createMock } from "@golevelup/ts-jest";
+import { mount } from "@vue/test-utils";
+import { ref } from "vue";
+import { Router, useRouter } from "vue-router";
+import ApplicationErrorRouting from "./ApplicationErrorRouting.vue";
+
+jest.mock("vue-router", () => ({
+ useRoute: jest.fn(),
+ useRouter: jest.fn(),
+}));
describe("@/components/molecules/ApplicationErrorRouting.vue", () => {
- let router: VueRouter;
- let applicationErrorModuleMock: ApplicationErrorModule;
+ const router = createMock({
+ currentRoute: ref({ path: "/" }),
+ });
+ const useRouterMock = useRouter;
- const mountComponent: any = () => {
- const componentOptions = createComponentMocks({ i18n: true });
- const { localVue } = componentOptions;
- localVue.use(VueRouter);
- router = new VueRouter({ routes: [{ path: "home" }] });
- jest.spyOn(router, "replace");
+ useRouterMock.mockReturnValue(router);
+ let applicationErrorModuleMock: ApplicationErrorModule;
+ const mountComponent = () => {
return mount(ApplicationErrorRouting, {
- ...componentOptions,
- provide: {
- [APPLICATION_ERROR_KEY.valueOf()]: applicationErrorModuleMock,
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [APPLICATION_ERROR_KEY.valueOf()]: applicationErrorModuleMock,
+ },
},
router,
});
diff --git a/src/components/molecules/ApplicationErrorRouting.vue b/src/components/molecules/ApplicationErrorRouting.vue
index f5adc96c44..83e7a410e1 100644
--- a/src/components/molecules/ApplicationErrorRouting.vue
+++ b/src/components/molecules/ApplicationErrorRouting.vue
@@ -3,9 +3,8 @@
-
-
diff --git a/src/components/molecules/ContextMenu.unit.js b/src/components/molecules/ContextMenu.unit.ts
similarity index 71%
rename from src/components/molecules/ContextMenu.unit.js
rename to src/components/molecules/ContextMenu.unit.ts
index f922816592..3f0e5d4853 100644
--- a/src/components/molecules/ContextMenu.unit.js
+++ b/src/components/molecules/ContextMenu.unit.ts
@@ -1,4 +1,10 @@
-import ContextMenu from "./ContextMenu";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { DOMWrapper, mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import ContextMenu from "./ContextMenu.vue";
const actions = [
{ event: "event1", text: "testText1" },
@@ -6,14 +12,14 @@ const actions = [
{ event: "event3", text: "testText3" },
];
-const hasWrapperFocus = (wrapper) => {
- return wrapper.element === document.activeElement;
+const hasWrapperFocus = (wrapper?: DOMWrapper) => {
+ return wrapper?.element === document.activeElement;
};
-const getWrapper = ({ options, additionalProps } = {}) => {
+const getWrapper = ({ options = {}, additionalProps = {} } = {}) => {
return mount(ContextMenu, {
- ...createComponentMocks({ i18n: true, vuetify: true }),
- propsData: {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ props: {
show: true,
actions,
...additionalProps,
@@ -44,12 +50,13 @@ describe("@/components/molecules/ContextMenu", () => {
const buttons = wrapper.findAll(
".context-menu__button:not(.context-menu__button-close)"
);
+
for (let i = 0; i < buttons.length; i += 1) {
const button = buttons.at(i);
- const { event } = actions.find((a) => a.text === button.text());
- button.trigger("click");
- expect(wrapper.emitted(event)).toHaveLength(1);
- expect(wrapper.emitted(event)[0][0]).toBeUndefined();
+ const event = actions.find((a) => a.text === button?.text())?.event;
+ button?.trigger("click");
+ expect(wrapper.emitted(event ?? "")).toHaveLength(1);
+ expect(wrapper.emitted(event ?? "")?.[0][0]).toBeUndefined();
}
});
@@ -73,13 +80,12 @@ describe("@/components/molecules/ContextMenu", () => {
);
expect(wrapper.emitted("update:show")).toHaveLength(1);
expect(wrapper.emitted("update:show")).toStrictEqual([[false]]);
- wrapper.destroy();
});
describe("click outside", () => {
it("triggers event on click outside d", async () => {
// Mount Menu wrapper to have something to click outside
- const emptyNode = "";
+ const emptyNode = "";
const wrapper = mount({
data: () => ({ show: true, actions }),
template: `
@@ -89,7 +95,7 @@ describe("@/components/molecules/ContextMenu", () => {
`,
components: { ContextMenu },
- ...createComponentMocks({ i18n: true }),
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
});
const outsideElement = wrapper.find(".outside");
@@ -111,14 +117,14 @@ describe("@/components/molecules/ContextMenu", () => {
`,
components: { ContextMenu },
- ...createComponentMocks({ i18n: true }),
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
},
getAttachToOptions()
);
- const Menu = wrapper.find(".ctxmenu");
+ const menu = wrapper.findComponent(ContextMenu);
const outsideElement = wrapper.find(".outside");
await outsideElement.trigger("click");
- expect(Menu.emitted("update:show")).toBeUndefined();
+ expect(menu.emitted("update:show")).toBeUndefined();
});
});
@@ -134,7 +140,9 @@ describe("@/components/molecules/ContextMenu", () => {
const wrapper = getWrapper({
additionalProps: { anchor },
});
- const menuStyles = await wrapper.find(".context-menu").element.style;
+ const menuElement = await wrapper.find(".context-menu").element;
+ const menuStyles = window.getComputedStyle(menuElement);
+
expect(menuStyles.top).toContain(top);
expect(menuStyles.bottom).toContain(bottom);
expect(menuStyles.left).toContain(left);
@@ -143,78 +151,65 @@ describe("@/components/molecules/ContextMenu", () => {
);
it("should throw an error for invalid anchor positions", async () => {
- const consoleError = jest.spyOn(console, "error").mockImplementation();
expect(() => {
getWrapper({
additionalProps: { anchor: "top-bottom" },
});
}).toThrow(new Error("anchor is not defined"));
- expect(consoleError).toHaveBeenCalledWith(
- expect.stringMatching(
- /^\[Vue warn\]: Invalid prop: custom validator check failed for prop "anchor"\./
- )
- );
});
});
describe("a11y", () => {
it("first element get's focused on mount", async () => {
const wrapper = getWrapper(getAttachToOptions());
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
- const buttons = wrapper.findAll(".context-menu__button");
- expect(hasWrapperFocus(buttons.at(0))).toBe(true);
- wrapper.destroy();
+ await nextTick();
+ await nextTick();
+ const button = wrapper.find(".context-menu__button");
+ expect(hasWrapperFocus(button)).toBe(true);
});
it("arrow up keeps focus on first element if already focused", async () => {
const wrapper = getWrapper(getAttachToOptions());
- await wrapper.vm.$nextTick();
- const buttons = wrapper.findAll(".context-menu__button");
- buttons.at(0).element.focus();
- expect(hasWrapperFocus(buttons.at(0))).toBe(true);
- buttons.at(0).trigger("keydown.up");
- await wrapper.vm.$nextTick();
- expect(hasWrapperFocus(buttons.at(0))).toBe(true);
- wrapper.destroy();
+ await nextTick();
+ const button = wrapper.find(".context-menu__button");
+ button.trigger("focus");
+ expect(hasWrapperFocus(button)).toBe(true);
+ button.trigger("keydown.up");
+ await nextTick();
+ expect(hasWrapperFocus(button)).toBe(true);
});
it("arrow up focuses previous button", async () => {
const wrapper = getWrapper(getAttachToOptions());
- await wrapper.vm.$nextTick();
+ await nextTick();
const buttons = wrapper.findAll(".context-menu__button");
- expect(buttons.wrappers).toHaveLength(3);
-
- buttons.at(buttons.length - 1).element.focus();
- await wrapper.vm.$nextTick();
+ expect(buttons).toHaveLength(3);
for (let i = buttons.length - 1; i > 1; i -= 1) {
const currentButton = buttons.at(i);
const prevButton = buttons.at(i - 1);
- expect(hasWrapperFocus(currentButton)).toBe(true);
- expect(hasWrapperFocus(prevButton)).toBe(false);
- currentButton.trigger("keydown.up");
- await wrapper.vm.$nextTick();
+ currentButton?.trigger("keydown.up");
+ await nextTick();
expect(hasWrapperFocus(currentButton)).toBe(false);
expect(hasWrapperFocus(prevButton)).toBe(true);
}
- wrapper.destroy();
});
it("arrow down focuses next button", async () => {
const wrapper = getWrapper(getAttachToOptions());
- await wrapper.vm.$nextTick();
+ await nextTick();
const buttons = wrapper.findAll(".context-menu__button");
+
// - 2 (-1 for length offset and another -1 for close button)
for (let i = 0; i < buttons.length - 2; i += 1) {
const currentButton = buttons.at(i);
const nextButton = buttons.at(i + 1);
expect(hasWrapperFocus(currentButton)).toBe(true);
expect(hasWrapperFocus(nextButton)).toBe(false);
- currentButton.trigger("keydown.down");
- await wrapper.vm.$nextTick();
+ currentButton?.trigger("keydown.down");
+ await nextTick();
expect(hasWrapperFocus(currentButton)).toBe(false);
expect(hasWrapperFocus(nextButton)).toBe(true);
}
diff --git a/src/components/molecules/ContextMenu.vue b/src/components/molecules/ContextMenu.vue
index 8751ff34e4..07d7b6e5be 100644
--- a/src/components/molecules/ContextMenu.vue
+++ b/src/components/molecules/ContextMenu.vue
@@ -11,9 +11,9 @@
-
-
-
-
- - {{ $t("pages.rooms.importCourse.step_1.info_1") }} -
-- {{ $t("pages.rooms.importCourse.step_1.info_2") }} -
-
- {{ $t("pages.rooms.importCourse.step_2") }}
-
-
- {{ $t("pages.rooms.importCourse.step_3") }}
-
-
-
-
- {{ $t("pages.rooms.importCourse.importError") }}
-
-
-
- {{ mdiViewDashboard }}
+
+
{{ $t("pages.room.boardCard.label.courseBoard") }}
-
+
-
{{
$t("pages.administration.students.infobox.headline")
@@ -66,7 +64,7 @@
}}
-$mdiAlert
+ $mdiAlert
{{
$t("pages.administration.students.infobox.LDAP.paragraph-3")
}}
@@ -77,7 +75,10 @@
}}
-$mdiAlert
+ $mdiAlert
{{ $t("pages.administration.students.infobox.paragraph-4") }}
-
+
-
{{ $t("common.words.topic") }}
+
diff --git a/src/components/organisms/DataTable/TableDataRow.vue b/src/components/organisms/DataTable/TableDataRow.vue
index 708042ede4..ecb1d2c535 100644
--- a/src/components/organisms/DataTable/TableDataRow.vue
+++ b/src/components/organisms/DataTable/TableDataRow.vue
@@ -86,22 +86,24 @@ export default {
diff --git a/src/components/organisms/DataTable/TableHeadRow.vue b/src/components/organisms/DataTable/TableHeadRow.vue
index c338b3dfc0..78829d67f3 100644
--- a/src/components/organisms/DataTable/TableHeadRow.vue
+++ b/src/components/organisms/DataTable/TableHeadRow.vue
@@ -9,7 +9,7 @@
:label-hidden="true"
class="select"
:show-undefined-state="true"
- style="color: var(--v-secondary-base)"
+ style="color: rgba(var(--v-theme-secondary))"
/>
@@ -31,11 +31,9 @@
{{ lesson.name }}
@@ -38,7 +43,7 @@
data-testid="content-card-lesson-info"
>
-
+
-
diff --git a/src/components/molecules/TaskItemTeacher.unit.js b/src/components/molecules/TaskItemTeacher.unit.ts
similarity index 74%
rename from src/components/molecules/TaskItemTeacher.unit.js
rename to src/components/molecules/TaskItemTeacher.unit.ts
index bf51aa9a3f..8fd53e3a78 100644
--- a/src/components/molecules/TaskItemTeacher.unit.js
+++ b/src/components/molecules/TaskItemTeacher.unit.ts
@@ -1,11 +1,18 @@
import CopyModule, { CopyParamsTypeEnum } from "@/store/copy";
import NotifierModule from "@/store/notifier";
import TasksModule from "@/store/tasks";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
import mocks from "@@/tests/test-utils/mockDataTasks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { createMock } from "@golevelup/ts-jest";
+import { mount } from "@vue/test-utils";
+import { VBtn, VHover, VListItem } from "vuetify/lib/components/index.mjs";
import TaskItemMenu from "./TaskItemMenu.vue";
-import TaskItemTeacher from "./TaskItemTeacher";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import TaskItemTeacher from "./TaskItemTeacher.vue";
const {
tasksTeacher,
@@ -15,7 +22,7 @@ const {
noDueDateTasksTeacher,
} = mocks;
-const defineWindowWidth = (width) => {
+const defineWindowWidth = (width: number) => {
Object.defineProperty(window, "innerWidth", {
writable: true,
configurable: true,
@@ -24,29 +31,25 @@ const defineWindowWidth = (width) => {
window.dispatchEvent(new Event("resize"));
};
-let tasksModuleMock;
-let copyModuleMock;
-let notifierModuleMock;
+let tasksModuleMock: TasksModule;
+let copyModuleMock: CopyModule;
+let notifierModuleMock: NotifierModule;
const mockRouter = {
push: jest.fn(),
};
-const getWrapper = (props, options) => {
+const getWrapper = (props: { task: object }) => {
return mount(TaskItemTeacher, {
- ...createComponentMocks({
- i18n: true,
- vuetify: true,
- }),
- provide: {
- tasksModule: tasksModuleMock,
- copyModule: copyModuleMock,
- [NOTIFIER_MODULE_KEY]: notifierModuleMock,
- [I18N_KEY]: { t: (key) => key },
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ tasksModule: tasksModuleMock,
+ copyModule: copyModuleMock,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
+ },
},
- propsData: props,
- attachTo: document.body,
- ...options,
+ props: props,
mocks: {
$router: mockRouter,
},
@@ -72,12 +75,17 @@ describe("@/components/molecules/TaskItemTeacher", () => {
});
it("should direct user to legacy task details page", () => {
- const { location } = window;
+ Object.defineProperty(window, "location", {
+ set: jest.fn(),
+ get: () => createMock(),
+ });
+ const locationSpy = jest.spyOn(window, "location", "set");
+
const wrapper = getWrapper({ task: tasksTeacher[0] });
- const taskCard = wrapper.findComponent({ name: "v-list-item" });
+ const taskCard = wrapper.findComponent(VListItem);
taskCard.trigger("click");
- expect(location.pathname).toStrictEqual(`/homework/${tasksTeacher[0].id}`);
+ expect(locationSpy).toHaveBeenCalledWith(`/homework/${tasksTeacher[0].id}`);
});
it("should passthrough copy-task event", async () => {
@@ -109,8 +117,10 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toMatch(/Ohne Kurszuordnung/i);
- expect(wrapper.vm.courseName).toStrictEqual("Ohne Kurszuordnung");
+ expect(taskLabel.text()).toContain("pages.tasks.labels.noCourse");
+ expect(wrapper.vm.courseName).toStrictEqual(
+ "pages.tasks.labels.noCourse"
+ );
});
it("should show createdAt date in label", () => {
@@ -121,11 +131,11 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toMatch(
- /Ohne Kurszuordnung - Erstellt 28.09.17/i
+ expect(taskLabel.text()).toContain(
+ "components.molecules.TaskItemMenu.labels.createdAt 28.09.17"
);
expect(wrapper.vm.taskLabel).toStrictEqual(
- "Ohne Kurszuordnung - Erstellt 28.09.17"
+ "pages.tasks.labels.noCourse - components.molecules.TaskItemMenu.labels.createdAt 28.09.17"
);
});
@@ -138,9 +148,11 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toMatch(/Vertretung Ohne Kurszuordnung/i);
+ expect(taskLabel.text()).toContain(
+ "common.words.substitute pages.tasks.labels.noCourse"
+ );
expect(wrapper.vm.courseName).toStrictEqual(
- "Vertretung Ohne Kurszuordnung"
+ "common.words.substitute pages.tasks.labels.noCourse"
);
});
});
@@ -191,8 +203,10 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toMatch(/Vertretung Mathe/i);
- expect(wrapper.vm.courseName).toStrictEqual("Vertretung Mathe");
+ expect(taskLabel.text()).toContain("common.words.substitute Mathe");
+ expect(wrapper.vm.courseName).toStrictEqual(
+ "common.words.substitute Mathe"
+ );
});
});
@@ -237,8 +251,12 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toStrictEqual("Deutsch - Geplant 28.09.00");
- expect(wrapper.vm.taskLabel).toStrictEqual("Deutsch - Geplant 28.09.00");
+ expect(taskLabel.text()).toStrictEqual(
+ "Deutsch - pages.tasks.labels.planned 28.09.00"
+ );
+ expect(wrapper.vm.taskLabel).toStrictEqual(
+ "Deutsch - pages.tasks.labels.planned 28.09.00"
+ );
});
});
@@ -265,9 +283,11 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const taskLabel = wrapper.find("[data-testid='task-label']");
expect(taskLabel.exists()).toBe(true);
- expect(taskLabel.text()).toMatch(/Vertretung Mathe - Abgabe 11.06.00/i);
+ expect(taskLabel.text()).toMatch(
+ "common.words.substitute Mathe - pages.tasks.labels.due 11.06.00"
+ );
expect(wrapper.vm.taskLabel).toStrictEqual(
- `Vertretung Mathe - Abgabe 11.06.00`
+ `common.words.substitute Mathe - pages.tasks.labels.due 11.06.00`
);
});
});
@@ -281,8 +301,10 @@ describe("@/components/molecules/TaskItemTeacher", () => {
const topicLabel = wrapper.find("[data-testid='task-topic']");
expect(topicLabel.exists()).toBe(true);
- expect(topicLabel.text()).toMatch(/Thema Malen nach Zahlen/i);
- expect(wrapper.vm.topic).toStrictEqual(`Thema Malen nach Zahlen`);
+ expect(topicLabel.text()).toMatch("common.words.topic Malen nach Zahlen");
+ expect(wrapper.vm.topic).toStrictEqual(
+ "common.words.topic Malen nach Zahlen"
+ );
});
});
@@ -330,11 +352,15 @@ describe("@/components/molecules/TaskItemTeacher", () => {
task: drafts[1],
});
- const menuBtn = wrapper.find(".v-btn");
+ const menuBtn = wrapper.findComponent(VBtn);
await menuBtn.trigger("click");
- expect(wrapper.vm.isMenuActive).toBe(true);
- expect(wrapper.find(".menuable__content__active").exists()).toBe(true);
+ const hover = wrapper.findComponent(VHover);
+ console.log(hover.vm.$props);
+
+ expect(
+ wrapper.findComponent(`[data-testid="task-edit"]`).isVisible()
+ ).toBe(true);
});
it("should close menu on btn click", async () => {
@@ -359,9 +385,14 @@ describe("@/components/molecules/TaskItemTeacher", () => {
task: drafts[1],
});
- await wrapper.trigger("focus");
+ const vListItem = wrapper.findComponent(VListItem);
+ await vListItem.vm.$emit("focus");
+
expect(wrapper.vm.isActive).toBe(true);
- const menuBtn = wrapper.find("#task-menu-btn");
+ const menuBtn = wrapper.findComponent(
+ `[aria-label="common.words.task"]`
+ );
+
expect(menuBtn.isVisible()).toBe(true);
});
});
@@ -371,9 +402,9 @@ describe("@/components/molecules/TaskItemTeacher", () => {
task: tasksTeacher[0],
});
- const menuBtn = wrapper.find(".v-btn");
+ const menuBtn = wrapper.findComponent(VBtn);
await menuBtn.trigger("click");
- const editBtn = wrapper.find("#task-action-edit");
+ const editBtn = wrapper.findComponent(`[data-testid="task-edit"]`);
expect(editBtn.attributes("href")).toBe(
`/homework/${tasksTeacher[0].id}/edit`
@@ -387,7 +418,7 @@ describe("@/components/molecules/TaskItemTeacher", () => {
task: tasksTeacher[0],
});
- const menuBtn = wrapper.find("#task-menu-btn");
+ const menuBtn = wrapper.findComponent(VBtn);
expect(menuBtn.isVisible()).toBe(true);
});
});
diff --git a/src/components/molecules/TaskItemTeacher.vue b/src/components/molecules/TaskItemTeacher.vue
index 7bba6dc65e..7082f341fe 100644
--- a/src/components/molecules/TaskItemTeacher.vue
+++ b/src/components/molecules/TaskItemTeacher.vue
@@ -2,8 +2,8 @@
-
-
+
+
+
+ {{ avatarIcon }}
+
+
+
+
+
+
@@ -117,13 +135,16 @@ import {
printDateFromStringUTC as dateFromUTC,
printTimeFromStringUTC,
} from "@/plugins/datetime";
+import { vOnClickOutside } from "@vueuse/components";
-// TODO - different requiredKeys for finished and other tasks?
const taskRequiredKeys = ["courseName", "createdAt", "id", "name", "status"];
const finishedTaskRequiredKeys = ["createdAt", "id", "name"];
export default {
components: { TaskItemMenu },
+ directives: {
+ outsideClick: vOnClickOutside,
+ },
props: {
task: {
type: Object,
@@ -214,7 +235,7 @@ export default {
return this.task.lessonHidden && !this.isDraft;
},
currentBreakpoint() {
- return this.$vuetify.breakpoint.name;
+ return this.$vuetify.display.name;
},
ariaLabel() {
return `${this.$t("common.words.task")} ${this.task.name}`;
@@ -253,8 +274,16 @@ export default {
opacity: 0.5;
}
-// stylelint-disable sh-waqar/declaration-use-variable
-.context-menu-min-width {
- min-width: 45px;
+.task-item__main-info {
+ overflow: hidden;
+}
+
+:deep(.v-list-item__prepend .v-icon) {
+ width: inherit;
+ height: inherit;
+}
+
+.task-stats {
+ min-width: 7rem;
}
diff --git a/src/components/molecules/TitleInput.vue b/src/components/molecules/TitleInput.vue
deleted file mode 100644
index 6d07301083..0000000000
--- a/src/components/molecules/TitleInput.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
+
+
+
-
+
-
-
+
+
+
-
-
+
+
-
+
-
-
+
+
+
@@ -161,7 +161,7 @@ export default {
};
diff --git a/src/components/molecules/vCustomEmptyState.unit.js b/src/components/molecules/vCustomEmptyState.unit.ts
similarity index 57%
rename from src/components/molecules/vCustomEmptyState.unit.js
rename to src/components/molecules/vCustomEmptyState.unit.ts
index 8adc4830cd..36dd10d863 100644
--- a/src/components/molecules/vCustomEmptyState.unit.js
+++ b/src/components/molecules/vCustomEmptyState.unit.ts
@@ -1,45 +1,42 @@
-import Vuetify from "vuetify";
-import vCustomEmptyState from "./vCustomEmptyState";
-
-let vuetify;
-let wrapper;
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import vCustomEmptyState from "./vCustomEmptyState.vue";
const title = "Test title";
const subtitle = "Test subtitle";
const image = "@/assets/img/empty-state/tasks-empty-state.svg";
describe("@/components/molecules/vCustomEmptyState", () => {
- beforeEach(() => {
- vuetify = new Vuetify();
-
- wrapper = mount(vCustomEmptyState, {
- ...createComponentMocks(
- {
- i18n: true,
- vuetify: true,
- },
- vuetify
- ),
- propsData: {
+ const getWrapper = () => {
+ return mount(vCustomEmptyState, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props: {
image,
title,
},
});
- });
-
- afterEach(() => {
- wrapper.destroy();
- });
+ };
it("should render a title", () => {
+ const wrapper = getWrapper();
+
const h1 = wrapper.find("h1");
+
expect(h1.text()).toBe(title);
});
it("should render subtitle, if it is passed as props", async () => {
+ const wrapper = getWrapper();
const h2 = wrapper.find("h2");
+
expect(h2.exists()).toBe(false);
- expect(wrapper.props().subtitle).toBe("");
+ // @ts-expect-error type error
+ expect(wrapper.props("subtitle")).toBe("");
wrapper.setProps({ subtitle });
await wrapper.vm.$nextTick();
diff --git a/src/components/molecules/vCustomEmptyState.vue b/src/components/molecules/vCustomEmptyState.vue
index 25d7e9c519..c344edd60f 100644
--- a/src/components/molecules/vCustomEmptyState.vue
+++ b/src/components/molecules/vCustomEmptyState.vue
@@ -18,7 +18,7 @@
/>
, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: props,
- mocks: {
- $theme: {
- name: "nbc",
+const getWrapper = (props: object, options?: object) => {
+ return mount(vImportUsersMatchSearch, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ mocks: {
+ $theme: {
+ name: "nbc",
+ },
},
},
+ props,
+
...options,
});
};
describe("@/components/molecules/vImportUsersMatchSearch", () => {
beforeEach(() => {
- document.body.setAttribute("data-app", "true");
setupStores({ importUsersModule: ImportUsersModule });
});
- it("should have correct props", () => {
- const wrapper = getWrapper(testProps);
-
- expect(wrapper.vm.editedItem).toStrictEqual(testProps.editedItem);
- expect(wrapper.vm.isDialog).toStrictEqual(testProps.isDialog);
- });
-
it("should display 'editedItem' property in HTML section", async () => {
const wrapper = getWrapper(testProps);
- const editedItemElement = wrapper.find("[data-testid=edited-item]");
+ const editedItemElement = wrapper.find("[data-testid=edited-item]").html();
- expect(editedItemElement.element.textContent).toContain("Max");
- expect(editedItemElement.element.textContent).toContain("Mustermann");
- expect(editedItemElement.element.textContent).toContain("Schüler:in");
- expect(editedItemElement.element.textContent).toContain("max_mus");
- expect(editedItemElement.element.textContent).toContain("6a");
+ expect(editedItemElement).toContain("Max");
+ expect(editedItemElement).toContain("Mustermann");
+ expect(editedItemElement).toContain("common.roleName.student");
+ expect(editedItemElement).toContain("max_mus");
+ expect(editedItemElement).toContain("6a");
});
it("should set 'flagged' property true when flag-button clicked", async () => {
@@ -75,8 +76,8 @@ describe("@/components/molecules/vImportUsersMatchSearch", () => {
await flagButtonElement.trigger("click");
expect(saveFlagMock).toHaveBeenCalled();
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
+ await nextTick();
+ await nextTick();
expect(flagButtonElement.element.innerHTML).toContain(mdiFlag);
expect(wrapper.vm.flagged).toBe(true);
@@ -92,11 +93,15 @@ describe("@/components/molecules/vImportUsersMatchSearch", () => {
text: "Cord Carl",
};
const wrapper = getWrapper(testProps);
- const autoCompleteElement = wrapper.find(".v-autocomplete");
- await autoCompleteElement.vm.$emit("input", payload);
- await wrapper.vm.$nextTick();
+ const autoCompleteElement = wrapper.findComponent(VAutocomplete);
+ await autoCompleteElement.vm.$emit("update:modelValue", payload);
+
+ const editedItemElement = wrapper.findAllComponents(VListItem)[1].html();
+
+ expect(editedItemElement).toContain(payload.firstName);
+ expect(editedItemElement).toContain(payload.lastName);
+ expect(editedItemElement).toContain("common.roleName.teacher");
- expect(wrapper.vm.selectedItem).toStrictEqual(payload);
expect(wrapper.vm.canSave).toStrictEqual(true);
});
@@ -117,19 +122,20 @@ describe("@/components/molecules/vImportUsersMatchSearch", () => {
const wrapper = getWrapper(testProps);
- const autoCompleteElement = wrapper.find(".v-autocomplete");
- await autoCompleteElement.vm.$emit("input", match);
- await wrapper.vm.$nextTick();
+ const autoCompleteElement = wrapper.findComponent(VAutocomplete);
+ await autoCompleteElement.vm.$emit("update:modelValue", match);
+ await nextTick();
const saveMatchButton = wrapper.find("[data-testid=save-match-btn]");
await saveMatchButton.trigger("click");
+ await nextTick();
expect(saveMatchMock).toHaveBeenCalledTimes(1);
expect(saveMatchMock).toHaveBeenCalledWith({
importUserId: testProps.editedItem.importUserId,
userId: match.userId,
});
- await wrapper.vm.$nextTick();
+ await nextTick();
expect(wrapper.emitted()["saved-match"]).toBeTruthy();
});
@@ -162,7 +168,7 @@ describe("@/components/molecules/vImportUsersMatchSearch", () => {
});
const deleteMatchButton = wrapper.find("[data-testid=delete-match-btn]");
await deleteMatchButton.trigger("click");
- await wrapper.vm.$nextTick();
+ await nextTick();
expect(deleteMatchMock).toHaveBeenCalledTimes(1);
expect(deleteMatchMock).toHaveBeenCalledWith(
@@ -173,16 +179,25 @@ describe("@/components/molecules/vImportUsersMatchSearch", () => {
it("should disable delete button when edited item has no match", () => {
const wrapper = getWrapper(testProps);
- const deleteMatchButton = wrapper.find("[data-testid=delete-match-btn]");
+ const deleteMatchButton = wrapper
+ .findAllComponents(VBtn)
+ .filter(
+ (btn: any) => btn.attributes("data-testid") === "delete-match-btn"
+ )[0];
- expect(deleteMatchButton.vm.disabled).toBe(true);
+ expect(deleteMatchButton.props("disabled")).toBe(true);
});
it("should disable save button when no no item was selected", () => {
const wrapper = getWrapper(testProps);
- const saveMatchButton = wrapper.find("[data-testid=save-match-btn]");
- expect(saveMatchButton.vm.disabled).toBe(true);
+ const saveMatchButton = wrapper
+ .findAllComponents(VBtn)
+ .filter(
+ (btn: any) => btn.attributes("data-testid") === "save-match-btn"
+ )[0];
+
+ expect(saveMatchButton.props("disabled")).toBe(true);
});
it("should not display username when prop nbc is set", () => {
diff --git a/src/components/molecules/vImportUsersMatchSearch.vue b/src/components/molecules/vImportUsersMatchSearch.vue
index 78d1e74798..d3d1b26be5 100644
--- a/src/components/molecules/vImportUsersMatchSearch.vue
+++ b/src/components/molecules/vImportUsersMatchSearch.vue
@@ -1,109 +1,108 @@
-
-
- {{ data }}
-
-
-
-
-```
diff --git a/src/components/organisms/DataTable/DataTable.unit.js b/src/components/organisms/DataTable/DataTable.unit.js
deleted file mode 100644
index 76e04bdb74..0000000000
--- a/src/components/organisms/DataTable/DataTable.unit.js
+++ /dev/null
@@ -1,588 +0,0 @@
-import { tableData, tableColumns } from "./DataTable.data-factory.js";
-import DataTable from "./DataTable";
-import { localDataPrefix } from "@/mixins/controllableData";
-
-const defaultData = tableData(30);
-
-function getWrapper(attributes, options) {
- return mount(DataTable, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- data: defaultData,
- trackBy: "_id",
- columns: tableColumns,
- ...attributes,
- },
- ...options,
- });
-}
-
-const getTableRowsContent = async (wrapper) => {
- await wrapper.vm.$nextTick();
- return wrapper.findAll("tbody tr").wrappers.map((rowWrapper) => {
- return rowWrapper.findAll("td").wrappers.map((cell) => cell.text());
- });
-};
-
-describe("@/components/organisms/DataTable/DataTable", () => {
- beforeEach(() => {
- jest.spyOn(window, "scrollTo").mockImplementation();
- });
-
- describe("pagination", () => {
- const total = 100;
- const bigData = tableData(total);
-
- const getNextPageButton = (wrapper) => {
- wrapper.vm.$nextTick();
- return wrapper
- .findAll(".pagination-link")
- .wrappers.find((w) => w.attributes("aria-label") === "Go to next page");
- };
- const getPrevPageButton = (wrapper) =>
- wrapper
- .findAll(".pagination-link")
- .wrappers.find(
- (w) => w.attributes("aria-label") === "Go to previous page"
- );
-
- const isPageValid = async (wrapper, page, pageSize) => {
- await wrapper.vm.$nextTick();
- const renderedData = await getTableRowsContent(wrapper);
- expect(renderedData).toHaveLength(pageSize);
- renderedData.forEach((row, index) => {
- const testIndex = pageSize * (page - 1) + index;
- expect(JSON.stringify(bigData[testIndex])).toContain(row[0]);
- });
- };
-
- it("should not paginate by default", async () => {
- const wrapper = getWrapper({
- data: bigData,
- });
- expect(await getTableRowsContent(wrapper)).toHaveLength(total);
- });
-
- it("should limit data to paginated items only", async () => {
- const pageSize = 25;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: pageSize,
- });
- const renderedData = await getTableRowsContent(wrapper);
- expect(renderedData).toHaveLength(pageSize);
- renderedData.forEach((row, index) => {
- expect(JSON.stringify(bigData[index])).toContain(row[0]);
- });
- });
-
- it("should show correct data on page 2", async () => {
- const pageSize = 5;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: pageSize,
- currentPage: 2,
- });
- await isPageValid(wrapper, 2, pageSize);
- });
-
- it("should provide buttons to navigate pages", async () => {
- const pageSize = 20;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: pageSize,
- currentPage: 1,
- });
- await isPageValid(wrapper, 1, pageSize);
- getNextPageButton(wrapper).trigger("click");
- await isPageValid(wrapper, 2, pageSize);
- getPrevPageButton(wrapper).trigger("click");
- await isPageValid(wrapper, 1, pageSize);
- });
-
- it("should react to parent rowsPerPage changes", async () => {
- const orgPageSize = 20;
- const newPageSize = 50;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: orgPageSize,
- currentPage: 1,
- });
- await isPageValid(wrapper, 1, orgPageSize);
- wrapper.setProps({ rowsPerPage: newPageSize });
- await isPageValid(wrapper, 1, newPageSize);
- });
-
- it("passes rowsPerPage changes to parent and itself", async () => {
- const oldValue = 50;
- const newValue = 20;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: oldValue,
- currentPage: 1,
- });
- wrapper.vm.$_controllableDataRowsPerPage = newValue; // simulate write to variable from .sync modifier from child
- expect(wrapper.vm[`${localDataPrefix}RowsPerPage`]).toBe(newValue);
- expect(wrapper.emitted("update:rows-per-page")).toStrictEqual([[20]]);
- });
-
- it("should react to parent page changes", async () => {
- const orgPage = 2;
- const newPage = 3;
- const pageSize = 24;
- const wrapper = getWrapper({
- data: bigData,
- paginated: true,
- rowsPerPage: pageSize,
- currentPage: orgPage,
- });
- await isPageValid(wrapper, orgPage, pageSize);
- wrapper.setProps({ currentPage: newPage });
- await isPageValid(wrapper, newPage, pageSize);
- });
- });
-
- describe("sort", () => {
- const sortedFirstItem = "AAA";
- const sortedOtherItems = "LastItem";
- const testItems = 4;
- const centerIndex = Math.floor(testItems / 2);
- const flatData = tableData(testItems).map((item, index) => ({
- ...item,
- firstName: index === centerIndex ? sortedFirstItem : sortedOtherItems,
- }));
- const isUnsorted = async (wrapper) => {
- const renderedData = await getTableRowsContent(wrapper);
- expect(renderedData[0][0]).toContain(sortedOtherItems);
- expect(renderedData[centerIndex][0]).toContain(sortedFirstItem);
- };
- const isSortedAsc = async (wrapper) => {
- const renderedData = await getTableRowsContent(wrapper);
- expect(renderedData[0][0]).toContain(sortedFirstItem);
- expect(renderedData[1][0]).toContain(sortedOtherItems);
- };
- const isSortedDesc = async (wrapper) => {
- const renderedData = await getTableRowsContent(wrapper);
- expect(renderedData[renderedData.length - 1][0]).toContain(
- sortedFirstItem
- );
- };
- const getSortButton = (wrapper, text = "Vorname") =>
- wrapper
- .findAll("button.is-sortable")
- .wrappers.find((w) => w.text().startsWith(text));
-
- it("table header clicks should toggle the sortorder", async () => {
- const wrapper = getWrapper({
- data: flatData,
- });
- const sortButton = getSortButton(wrapper);
- await isUnsorted(wrapper);
- sortButton.trigger("click"); // sort asc on first click
- await isSortedAsc(wrapper);
- sortButton.trigger("click"); // sort desc on second click
- await isSortedDesc(wrapper);
- sortButton.trigger("click"); // sort asc on third click
- await isSortedAsc(wrapper);
- });
-
- it("should sort data initially (asc by default)", async () => {
- const wrapperAsc = getWrapper({
- data: flatData,
- sortBy: "firstName",
- });
- await isSortedAsc(wrapperAsc);
- });
-
- it("should sort data initially by sortOrder", async () => {
- const wrapperDesc = getWrapper({
- data: flatData,
- sortBy: "firstName",
- sortOrder: "desc",
- });
- await isSortedDesc(wrapperDesc);
- });
-
- it("should react to parent sortBy changes", async () => {
- const wrapper = getWrapper({
- data: flatData,
- });
- await isUnsorted(wrapper);
- wrapper.setProps({ sortBy: "firstName" });
- await isSortedAsc(wrapper);
- });
-
- it("should react to parent sortOrder changes", async () => {
- const wrapper = getWrapper({
- data: flatData,
- sortBy: "firstName",
- sortOrder: "desc",
- });
- await isSortedDesc(wrapper);
- wrapper.setProps({ sortOrder: "asc" });
- await isSortedAsc(wrapper);
- });
-
- describe("default sort method", () => {
- it("can sort undefined values", async () => {
- const testData = [
- { b: undefined },
- { b: "something" },
- { b: undefined },
- ];
- const result = DataTable.methods.sort(testData, "b", "asc");
- expect(result).toStrictEqual([
- { b: "something" },
- { b: undefined },
- { b: undefined },
- ]);
- });
-
- it("can sort booleans asc", async () => {
- const testData = [{ b: true }, { b: false }, { b: true }];
- const result = DataTable.methods.sort(testData, "b", "asc");
- expect(result).toStrictEqual([{ b: true }, { b: true }, { b: false }]);
- });
- it("can sort booleans desc", async () => {
- const testData = [{ b: true }, { b: false }, { b: true }];
- const result = DataTable.methods.sort(testData, "b", "desc");
- expect(result).toStrictEqual([{ b: false }, { b: true }, { b: true }]);
- });
-
- it("can sort numbers asc", async () => {
- const testData = [{ n: 7 }, { n: 2 }, { n: 9 }];
- const result = DataTable.methods.sort(testData, "n", "asc");
- expect(result).toStrictEqual([{ n: 2 }, { n: 7 }, { n: 9 }]);
- });
- it("can sort numbers desc", async () => {
- const testData = [{ n: 7 }, { n: 2 }, { n: 9 }];
- const result = DataTable.methods.sort(testData, "n", "desc");
- expect(result).toStrictEqual([{ n: 9 }, { n: 7 }, { n: 2 }]);
- });
-
- it("can sort strings asc", async () => {
- const testData = [
- { s: "Bbb" },
- { s: "aAA" },
- { s: "Aaa" },
- { s: "bBB" },
- ];
- const result = DataTable.methods.sort(testData, "s", "asc");
- expect(result).toStrictEqual([
- { s: "aAA" },
- { s: "Aaa" },
- { s: "bBB" },
- { s: "Bbb" },
- ]);
- });
- it("can sort strings desc", () => {
- const testData = [
- { s: "Bbb" },
- { s: "aAA" },
- { s: "Aaa" },
- { s: "bBB" },
- ];
- const result = DataTable.methods.sort(testData, "s", "desc");
- expect(result).toStrictEqual([
- { s: "Bbb" },
- { s: "bBB" },
- { s: "Aaa" },
- { s: "aAA" },
- ]);
- });
- });
- });
-
- describe("selection", () => {
- const total = 10;
- const testData = tableData(total).map((item, index) => ({
- ...item,
- _id: String(index), // simplify IDs of test data for easier testing
- }));
-
- const getVisibleSelections = async (wrapper) => {
- await wrapper.vm.$nextTick();
- const rowWrappers = wrapper.findAll("tbody tr").wrappers;
- return rowWrappers
- .filter((rowWrapper) => {
- return rowWrapper.find("input[type=checkbox]").element.checked;
- })
- .map((rowWrapper) => {
- return rowWrapper.findAll("td").wrappers.map((cell) => cell.text());
- });
- };
-
- const hasVisibleSelections = async (
- wrapper,
- data,
- expectedSelectionIds
- ) => {
- await wrapper.vm.$nextTick();
- const visibleSelections = await getVisibleSelections(wrapper);
- return (
- visibleSelections.length === expectedSelectionIds.length &&
- expectedSelectionIds.every((expectedId) => {
- const selectionFirstName = data.find(
- (row) => row._id === expectedId
- ).firstName;
- return visibleSelections.find(
- (selectionRow) => selectionRow[1] === selectionFirstName
- );
- })
- );
- };
-
- it("can select a value", async () => {
- const wrapper = getWrapper({
- data: testData,
- rowsSelectable: true,
- });
- wrapper.vm.$nextTick();
- const ele = wrapper.find("tbody tr input[type=checkbox]");
- ele.trigger("click");
- expect(await getVisibleSelections(wrapper)).toHaveLength(1);
- const dataRow = wrapper.find('[data-testid="table-data-row"]');
- await dataRow.vm.$emit("update:selected", true);
- expect(wrapper.emitted("update:selection")).toStrictEqual([
- [[testData[0]._id]],
- ]);
- });
-
- it("can unselect a value", async () => {
- const wrapper = getWrapper({
- data: testData,
- selection: ["0"],
- rowsSelectable: true,
- });
- expect(await getVisibleSelections(wrapper)).toHaveLength(1);
- wrapper.find("tbody tr input[type=checkbox]").trigger("click");
- expect(await getVisibleSelections(wrapper)).toHaveLength(0);
- const dataRow = wrapper.find('[data-testid="table-data-row"]');
- await dataRow.vm.$emit("update:selected", false);
- expect(wrapper.emitted("update:selection")).toStrictEqual([[[]]]);
- });
-
- it("can select all values on page", async () => {
- const rowsPerPage = Math.floor(total / 2);
- const expectedSelection = [...Array(rowsPerPage).keys()].map(String);
- const wrapper = getWrapper({
- data: testData,
- paginated: true,
- rowsPerPage,
- rowsSelectable: true,
- });
- expect(await getVisibleSelections(wrapper)).toHaveLength(0);
- wrapper.find("thead tr input[type=checkbox]").trigger("click");
-
- const rowSelectionBarElement = wrapper.find(
- '[data-testid="table-data-head"]'
- );
- await rowSelectionBarElement.vm.$emit(
- "update:current-page-selection-state",
- "all"
- );
- expect(
- await hasVisibleSelections(wrapper, testData, expectedSelection)
- ).toBe(true);
- expect(wrapper.emitted("update:selection")[0]).toStrictEqual([
- expectedSelection,
- ]);
- });
-
- // disabled until its implementation is completed
-
- // it("can select all values from all page", async () => {
- // const rowsPerPage = Math.floor(total / 2);
- // const expectedSelection = [...Array(total).keys()].map(String);
- // const wrapper = getWrapper({
- // data: testData,
- // paginated: true,
- // rowsPerPage,
- // rowsSelectable: true,
- // });
- // expect(await getVisibleSelections(wrapper)).toHaveLength(0);
- // wrapper.find("thead tr input[type=checkbox]").trigger("click");
- // await wrapper.vm.$nextTick();
- // wrapper.find("button.select-all-rows").trigger("click");
- // await wrapper.vm.$nextTick();
- // expect(wrapper.emitted("update:selection")[1]).toStrictEqual([
- // expectedSelection,
- // ]);
- // });
-
- it("can preselect values", async () => {
- const totalSelections = Math.floor(total / 2);
- const selection = [...Array(totalSelections).keys()].map(String);
- const wrapper = getWrapper({
- data: testData,
- selection,
- rowsSelectable: true,
- });
- expect(await getVisibleSelections(wrapper)).toHaveLength(totalSelections);
- expect(await hasVisibleSelections(wrapper, testData, selection)).toBe(
- true
- );
- });
-
- it("can preselect all values", async () => {
- const totalSelections = total;
- const selection = [...Array(totalSelections).keys()].map(String);
- const wrapper = getWrapper({
- data: testData,
- selection,
- rowsSelectable: true,
- });
- wrapper.emitted();
- expect(await getVisibleSelections(wrapper)).toHaveLength(totalSelections);
- expect(await hasVisibleSelections(wrapper, testData, selection)).toBe(
- true
- );
- });
-
- it("can unselect a value after selecting all", async () => {
- const selection = [...Array(total).keys()].map(String);
- const expectedSelection = selection.slice(1); // first element unchecked
- const wrapper = getWrapper({
- data: testData,
- selection,
- rowsSelectable: true,
- rowsPerPage: 50,
- });
- expect(await hasVisibleSelections(wrapper, testData, selection)).toBe(
- true
- );
- wrapper.find("tbody tr label").trigger("click");
- expect(
- await hasVisibleSelections(wrapper, testData, expectedSelection)
- ).toBe(true);
- });
-
- it("updates view if parent component selects some values", async () => {
- const totalSelections = Math.floor(total / 2);
- const selection = [...Array(totalSelections).keys()].map(String);
- const wrapper = getWrapper({
- data: testData,
- selection: [],
- rowsSelectable: true,
- });
- wrapper.setProps({
- selection,
- });
- await wrapper.vm.$nextTick();
- expect(await getVisibleSelections(wrapper)).toHaveLength(totalSelections);
- expect(await hasVisibleSelections(wrapper, testData, selection)).toBe(
- true
- );
- });
-
- it("updates view if parent component selects all values", async () => {
- const totalSelections = total;
- const selection = [...Array(totalSelections).keys()].map(String);
- const wrapper = getWrapper({
- data: testData,
- selection: [],
- rowsSelectable: true,
- });
- wrapper.setProps({
- selection,
- });
- await wrapper.vm.$nextTick();
- expect(await getVisibleSelections(wrapper)).toHaveLength(totalSelections);
- expect(await hasVisibleSelections(wrapper, testData, selection)).toBe(
- true
- );
- });
-
- describe("header checkbox shows", () => {
- const getWrapperLocal = (numberOfSelections) => {
- const selection = [...Array(numberOfSelections).keys()].map(String);
- return getWrapper({
- data: testData,
- selection,
- rowsSelectable: true,
- });
- };
-
- it("checked state if all values are selected", async () => {
- const wrapper = getWrapperLocal(total);
- const checkboxIcon = wrapper.get("thead tr");
- expect(
- checkboxIcon.element.innerHTML.includes("$mdiCheckboxOutline")
- ).toBe(true);
- });
-
- it("unchecked state if no values are selected", async () => {
- const wrapper = getWrapperLocal(0);
- const checkboxIcon = wrapper.get("thead tr");
- expect(
- checkboxIcon.element.innerHTML.includes("$mdiCheckboxBlankOutline")
- ).toBe(true);
- });
-
- it("intermediate state if some values are selected", async () => {
- const wrapper = getWrapperLocal(Math.round(total / 2));
- const checkboxIcon = wrapper.get("thead tr");
- expect(
- checkboxIcon.element.innerHTML.includes("$mdiCheckboxIntermediate")
- ).toBe(true);
- });
- });
- });
-
- describe("slots", () => {
- const smallData = tableData(1);
- it("renders scopedSlots with data", async () => {
- const testSlotContent = `some random slot content`;
-
- const wrapper = mount(DataTable, {
- ...createComponentMocks({ i18n: true }),
- propsData: {
- data: smallData,
- trackBy: "_id",
- columns: tableColumns,
- },
- scopedSlots: {
- "datacolumn-firstName": `
-
-
-
-
-
-
-
diff --git a/src/components/organisms/DataTable/RowSelectionBar.vue b/src/components/organisms/DataTable/RowSelectionBar.vue
index a7ba4ac4ca..f659aa170c 100644
--- a/src/components/organisms/DataTable/RowSelectionBar.vue
+++ b/src/components/organisms/DataTable/RowSelectionBar.vue
@@ -20,24 +20,24 @@
{{ $t("pages.administration.actions") }}
{{ taskChipValue }}
@@ -52,7 +57,8 @@
:class="`action-button action-button-${action.name
.split(' ')
.join('-')}`"
- text
+ variant="text"
+ color="primary"
@click.stop="action.action"
>
{{ action.name }}
@@ -103,7 +109,7 @@ export default {
mdiTrashCanOutline,
mdiContentCopy,
},
- defaultTitleColor: "--v-secondary-base",
+ defaultTitleColor: "rgba(var(--v-theme-secondary))",
};
},
computed: {
@@ -330,10 +336,6 @@ export default {
}
}
-.action-button {
- color: var(--v-primary-base);
-}
-
.v-card__text {
padding-bottom: var(--space-xs-4);
}
diff --git a/src/components/molecules/RoomModal.unit.ts b/src/components/molecules/RoomModal.unit.ts
index 3cf23e700d..5f11272ef7 100644
--- a/src/components/molecules/RoomModal.unit.ts
+++ b/src/components/molecules/RoomModal.unit.ts
@@ -1,6 +1,11 @@
+import RoomAvatarIterator from "@/components/organisms/RoomAvatarIterator.vue";
+import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
import { roomsModule } from "@/store";
import RoomsModule from "@/store/rooms";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import setupStores from "@@/tests/test-utils/setupStores";
import { mount } from "@vue/test-utils";
import RoomModal from "./RoomModal.vue";
@@ -8,14 +13,11 @@ import RoomModal from "./RoomModal.vue";
describe("RoomModal", () => {
const getWrapper = (props: { isOpen: boolean }) => {
const { isOpen } = props;
- document.body.setAttribute("data-app", "true");
setupStores({ roomsModule: RoomsModule });
const wrapper = mount(RoomModal, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
+ props: {
isOpen,
groupData: { title: "dummy title", groupElements: [] },
draggable: true,
@@ -38,14 +40,16 @@ describe("RoomModal", () => {
it("it should be rendered", () => {
const { wrapper } = setup();
- const dialog = wrapper.find(".room-dialog");
+ const dialog = wrapper.findComponent(vCustomDialog);
+
expect(dialog.exists()).toBe(true);
});
it("it should pass isOpen to vCustomDialog", () => {
const { wrapper } = setup();
- const customDialog = wrapper.vm.$refs.customDialog as any;
- expect(customDialog.isOpen).toBeFalsy();
+
+ const dialog = wrapper.findComponent(vCustomDialog);
+ expect(dialog.props("isOpen")).toBeFalsy();
});
});
@@ -62,8 +66,8 @@ describe("RoomModal", () => {
it("should pass isOpen to vCustomDialog", async () => {
const { wrapper } = await setup();
- const customDialog = wrapper.vm.$refs.customDialog as any;
- expect(customDialog.isOpen).toBeTruthy();
+ const dialog = wrapper.findComponent(vCustomDialog);
+ expect(dialog.props("isOpen")).toBeTruthy();
});
});
});
@@ -78,22 +82,22 @@ describe("RoomModal", () => {
it("should pass 'draggable' prop to room-avatar-iterator", () => {
const { wrapper } = setup();
- const iterator = wrapper.find(".iterator");
- expect(iterator.vm.$props.canDraggable).toBe(true);
+ const iterator = wrapper.findComponent(RoomAvatarIterator);
+ expect(iterator.props("canDraggable")).toBe(true);
});
it("should pass itemsize prop to room-avatar-iterator", () => {
const { wrapper } = setup();
- const iterator = wrapper.find(".iterator");
- expect(iterator.vm.$props.itemSize).toBe("5em");
+ const iterator = wrapper.findComponent(RoomAvatarIterator);
+ expect(iterator.props("itemSize")).toBe("5em");
});
it("should pass groupElements prop to room-avatar-iterator", () => {
const { wrapper } = setup();
- const iterator = wrapper.find(".iterator");
- expect(iterator.vm.$props.items).toEqual([]);
+ const iterator = wrapper.findComponent(RoomAvatarIterator);
+ expect(iterator.props("avatars")).toEqual([]);
});
});
@@ -209,7 +213,7 @@ describe("RoomModal", () => {
describe("when room-avatar-iterator emits 'startDrag'", () => {
const setup = async () => {
const { wrapper } = getWrapper({ isOpen: true });
- const iterator = wrapper.find(".iterator");
+ const iterator = wrapper.findComponent(RoomAvatarIterator);
const roomItem = {
id: "dummy id",
title: "dummy title",
@@ -218,7 +222,7 @@ describe("RoomModal", () => {
xPosition: 0,
yPosition: 0,
};
- await iterator.vm.$emit("startDrag", roomItem);
+ iterator.vm.$emit("startDrag", roomItem);
return { wrapper, roomItem };
};
@@ -237,8 +241,8 @@ describe("RoomModal", () => {
const setup = () => {
const { wrapper } = getWrapper({ isOpen: true });
- const customDialog = wrapper.vm.$refs.customDialog as any;
- customDialog.$emit("dialog-closed");
+ const dialog = wrapper.findComponent(vCustomDialog);
+ dialog.vm.$emit("dialog-closed");
return { wrapper };
};
diff --git a/src/components/molecules/RoomModal.vue b/src/components/molecules/RoomModal.vue
index 805ae1022d..a48e62b1e8 100644
--- a/src/components/molecules/RoomModal.vue
+++ b/src/components/molecules/RoomModal.vue
@@ -5,22 +5,24 @@
class="room-dialog"
@dialog-closed="$emit('update:isOpen', false)"
>
-
-
-
+
+
+
+
+
+
+
+
{{
$t("components.molecules.TaskItemTeacher.lessonIsNotPublished")
}}
-
- {{ task.status.submitted }}
- {{ task.status.maxSubmissions }}
- {{ task.status.graded }}
-
-
-
+
+
+
-
-
- {{ $t("components.molecules.TaskItemTeacher.lessonIsNotPublished") }}
-
-
-
-
-
- {{ $t("components.molecules.TaskItemTeacher.submitted") }}
-
-
- {{ task.status.submitted }}/{{ task.status.maxSubmissions }}
-
-
-
-
- {{ $t("components.molecules.TaskItemTeacher.graded") }}
-
-
- {{ task.status.graded }}
-
+
+
-
-
-
+
- {{ avatarIcon }}
-
-
-
-
-
- {{ taskLabel }}
-
-
-
- {{ task.name }}
-
-
- {{ topic }}
-
-
-
+
+ {{ taskLabel }}
+
+
+
+ {{ task.name }}
+
+
+ {{ topic }}
+
+
+
+ {{
+ $t("components.molecules.TaskItemTeacher.lessonIsNotPublished")
+ }}
+
+
+ {{ task.status.submitted }}
+ {{ task.status.maxSubmissions }}
+ {{ task.status.graded }}
+
+
+
+
+
+
+
+ {{ $t("components.molecules.TaskItemTeacher.submitted") }}
+
+
+ {{ task.status.submitted }}/{{ task.status.maxSubmissions }}
+
+
+
+
+ {{ $t("components.molecules.TaskItemTeacher.graded") }}
+
+
+ {{ task.status.graded }}
+
+
+ {{ title }}
{{ subtitle }}
+
+
@@ -1263,6 +1534,8 @@ export default {
"rooms-empty-state",
"tasks-empty-state",
"tools-empty-state",
+ "content-initial",
+ "content-empty",
].includes(value);
},
},
diff --git a/src/components/molecules/vImportUsersMatchSearch.unit.ts b/src/components/molecules/vImportUsersMatchSearch.unit.ts
index 4e7737afea..3f7138a23e 100644
--- a/src/components/molecules/vImportUsersMatchSearch.unit.ts
+++ b/src/components/molecules/vImportUsersMatchSearch.unit.ts
@@ -1,11 +1,19 @@
-import { mount, MountOptions } from "@vue/test-utils";
-import vImportUsersMatchSearch from "./vImportUsersMatchSearch.vue";
-import { mdiFlag, mdiFlagOutline } from "@mdi/js";
import { importUsersModule } from "@/store";
-import setupStores from "@@/tests/test-utils/setupStores";
import ImportUsersModule from "@/store/import-users";
-import Vue from "vue";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import setupStores from "@@/tests/test-utils/setupStores";
+import { mdiFlag, mdiFlagOutline } from "@mdi/js";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import {
+ VAutocomplete,
+ VBtn,
+ VListItem,
+} from "vuetify/lib/components/index.mjs";
+import vImportUsersMatchSearch from "./vImportUsersMatchSearch.vue";
const testProps = {
editedItem: {
@@ -21,43 +29,36 @@ const testProps = {
ldapSource: "LDAP",
};
-const getWrapper: any = (props: object, options?: object) => {
- return mount(vImportUsersMatchSearch as MountOptions
-
-
-
+
+
+
{{
$t("components.molecules.importUsersMatch.title", {
instance: $theme.name,
source: ldapSource,
})
}}
-
-
-
- {{ mdiClose }}
-
-
-
+
+
+
+
-
+
{{
- $t("components.molecules.importUsersMatch.subtitle", {
- instance: $theme.name,
- source: ldapSource,
- })
- }}
-
-
- {{
- $t("components.molecules.importUsersMatch.subtitle.nbc", {
- instance: $theme.name,
- source: ldapSource,
- })
+ $t(
+ isNbc
+ ? "components.molecules.importUsersMatch.subtitle.nbc"
+ : "components.molecules.importUsersMatch.subtitle",
+ {
+ instance: $theme.name,
+ source: ldapSource,
+ }
+ )
}}
-
-
-
-
- {{ ldapSource }}
-
-
- {{ `${editedItem.firstName} ${editedItem.lastName}` }}
-
-
+
+
+
+
+ {{ ldapSource }}
+
+
+
+
+ {{ $theme.name }}
+
+
- Filter: {{ title | entities }}
-
-
-
-
- {{ labelRemove }}
-
-
-
-
- {{ labelCancel }}
-
-
- {{ labelApply }}
-
-
-
-
-
-
-
-
diff --git a/src/components/organisms/DataFilter/DataFilterSelect.vue b/src/components/organisms/DataFilter/DataFilterSelect.vue
deleted file mode 100644
index d2e55c7597..0000000000
--- a/src/components/organisms/DataFilter/DataFilterSelect.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/components/organisms/DataFilter/FilterDialog.unit.ts b/src/components/organisms/DataFilter/FilterDialog.unit.ts
new file mode 100644
index 0000000000..46ab9c91e9
--- /dev/null
+++ b/src/components/organisms/DataFilter/FilterDialog.unit.ts
@@ -0,0 +1,40 @@
+import { ComponentMountingOptions, mount } from "@vue/test-utils";
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
+import FilterDialog from "./FilterDialog.vue";
+
+describe("@components/DataFilter/FilterDialog.vue", () => {
+ const mountComponent = (
+ options: ComponentMountingOptions = {}
+ ) => {
+ return mount(FilterDialog, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
+ ...options,
+ });
+ };
+
+ describe("should render the component", () => {
+ it("should render the component", () => {
+ const wrapper = mountComponent();
+ expect(wrapper.exists()).toBe(true);
+ });
+
+ it("should pass the props to dialog component", async () => {
+ const wrapper = mountComponent();
+ await wrapper.setProps({ isOpen: true });
+ const dialog = wrapper.getComponent({ name: "v-dialog" });
+
+ expect(dialog.props("modelValue")).toBe(true);
+ expect(dialog.props("maxWidth")).toBe(480);
+ });
+
+ it("should emit the 'dialog:close' event on close", async () => {
+ const wrapper = mountComponent();
+ const dialog = wrapper.getComponent({ name: "v-dialog" });
+ await dialog.vm.$emit("update:modelValue", false);
+
+ expect(wrapper.emitted()).toHaveProperty("dialog-closed");
+ });
+ });
+});
diff --git a/src/components/organisms/DataFilter/FilterDialog.vue b/src/components/organisms/DataFilter/FilterDialog.vue
new file mode 100644
index 0000000000..de152f01cb
--- /dev/null
+++ b/src/components/organisms/DataFilter/FilterDialog.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/organisms/DataFilter/composables/filter.composable.ts b/src/components/organisms/DataFilter/composables/filter.composable.ts
new file mode 100644
index 0000000000..02baaaace8
--- /dev/null
+++ b/src/components/organisms/DataFilter/composables/filter.composable.ts
@@ -0,0 +1,208 @@
+import { computed, onMounted, ref } from "vue";
+
+import {
+ FilterOption,
+ FilterOptionsType,
+ FilterQuery,
+ Registration,
+ SelectOptionsType,
+ User,
+ UserBasedRegistrationOptions,
+ ChipTitle,
+ FilterItem,
+ UpdateFilterParamType,
+} from "../types";
+import { useI18n } from "vue-i18n";
+import { useFilterLocalStorage } from "./localStorage.composable";
+import { printDate } from "@/plugins/datetime";
+
+export const useDataTableFilter = (userType: string) => {
+ const { t } = useI18n();
+ const { setFilterState, getFilterStorage, initializeUserType } =
+ useFilterLocalStorage();
+ initializeUserType(userType);
+
+ const filterQuery = ref({});
+
+ const defaultFilterMenuItems: SelectOptionsType[] = [
+ {
+ label: t("common.labels.registration"),
+ value: FilterOption.REGISTRATION,
+ },
+ {
+ label: t("utils.adminFilter.class.title"),
+ value: FilterOption.CLASSES,
+ },
+ {
+ label: t("utils.adminFilter.date.title"),
+ value: FilterOption.CREATION_DATE,
+ },
+ {
+ label: t("utils.adminFilter.lastMigration.title"),
+ value: FilterOption.LAST_MIGRATION_ON,
+ },
+ {
+ label: t("utils.adminFilter.outdatedSince.title"),
+ value: FilterOption.OBSOLOTE_SINCE,
+ },
+ ];
+
+ const registrationOptions: UserBasedRegistrationOptions = {
+ [User.STUDENT]: [
+ {
+ label: t("pages.administration.students.legend.icon.success"),
+ value: Registration.COMPLETE,
+ },
+ {
+ label: t("utils.adminFilter.consent.label.parentsAgreementMissing"),
+ value: Registration.PARENT_AGREED,
+ },
+ {
+ label: t("utils.adminFilter.consent.label.missing"),
+ value: Registration.MISSING,
+ },
+ ],
+ [User.TEACHER]: [
+ {
+ label: t("pages.administration.students.legend.icon.success"),
+ value: Registration.COMPLETE,
+ },
+
+ {
+ label: t("utils.adminFilter.consent.label.missing"),
+ value: Registration.MISSING,
+ },
+ ],
+ };
+
+ const selectedFilterType = ref();
+
+ const isDateFiltering = computed(() => {
+ return (
+ selectedFilterType.value == FilterOption.CREATION_DATE ||
+ selectedFilterType.value == FilterOption.LAST_MIGRATION_ON ||
+ selectedFilterType.value == FilterOption.OBSOLOTE_SINCE
+ );
+ });
+
+ const isSelectFiltering = computed(() => {
+ return (
+ selectedFilterType.value == FilterOption.CLASSES ||
+ selectedFilterType.value == FilterOption.REGISTRATION
+ );
+ });
+
+ const filterMenuItems = ref([]);
+
+ const filterChipTitles = ref>([]);
+
+ const updateFilter = (value: UpdateFilterParamType) => {
+ if (!selectedFilterType.value) return;
+ filterQuery.value[selectedFilterType.value] = value;
+
+ filterMenuItems.value = defaultFilterMenuItems.filter(
+ (item: SelectOptionsType) => !(item.value in filterQuery.value)
+ );
+
+ setFilterChipTitles();
+
+ setFilterState(filterQuery.value);
+ setFilterMenuItems();
+ };
+
+ const removeFilter = () => {
+ if (selectedFilterType.value)
+ delete filterQuery.value[selectedFilterType.value];
+
+ setFilterChipTitles();
+ setFilterState(filterQuery.value);
+ setFilterMenuItems();
+ };
+
+ const removeChipFilter = (val: FilterOption) => {
+ delete filterQuery.value[val];
+
+ setFilterState(filterQuery.value);
+ setFilterMenuItems();
+ };
+
+ const setFilterMenuItems = () => {
+ filterMenuItems.value = defaultFilterMenuItems.filter(
+ (item: SelectOptionsType) => !(item.value in filterQuery.value)
+ );
+ };
+
+ const prepareChipTitles = (chipItem: FilterItem) => {
+ if (chipItem[0] == FilterOption.REGISTRATION) {
+ const statusKeyMap = {
+ [Registration.COMPLETE]: t(
+ "pages.administration.students.legend.icon.success"
+ ),
+ [Registration.MISSING]: t("utils.adminFilter.consent.label.missing"),
+ [Registration.PARENT_AGREED]: t(
+ "utils.adminFilter.consent.label.parentsAgreementMissing"
+ ),
+ };
+ const status = chipItem[1].map((val) => {
+ return statusKeyMap[val as Registration];
+ });
+
+ return status.join(` ${t("common.words.and")} `);
+ }
+
+ if (chipItem[0] == FilterOption.CLASSES)
+ return `${t("utils.adminFilter.class.title")} = ${chipItem[1].join(
+ ", "
+ )}`;
+
+ if (chipItem[0] == FilterOption.CREATION_DATE)
+ return `${t("utils.adminFilter.date.created")} ${printDate(
+ chipItem[1].$gte
+ )} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+
+ if (chipItem[0] == FilterOption.LAST_MIGRATION_ON)
+ return `${t("utils.adminFilter.lastMigration.title")} ${printDate(
+ chipItem[1].$gte
+ )} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+
+ if (chipItem[0] == FilterOption.OBSOLOTE_SINCE)
+ return `${t("utils.adminFilter.outdatedSince.title")} ${printDate(
+ chipItem[1].$gte
+ )} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+ return [];
+ };
+
+ const setFilterChipTitles = () => {
+ const items = Object.entries(filterQuery.value).reduce(
+ (acc: Array
@@ -214,14 +214,14 @@ export default {
},
dataRowSlots() {
return Object.fromEntries(
- Object.entries(this.$scopedSlots).filter(([name]) =>
+ Object.entries(this.$slots).filter(([name]) =>
name.startsWith("datacolumn")
)
);
},
dataHeadSlots() {
return Object.fromEntries(
- Object.entries(this.$scopedSlots).filter(([name]) =>
+ Object.entries(this.$slots).filter(([name]) =>
name.startsWith("headcolumn")
)
);
@@ -296,25 +296,28 @@ export default {
},
},
watch: {
- selectionKeys(to) {
- /**
- * toggle whenever the selection changes
- *
- * @event update:selection
- * @property {array} selectedRowIds identifiers (trackBy value) of all selected items
- * @property {string} selectionType is the selection Array "inclusive" or "exclusive".
- * Inclusive means all items in the passed array are selected.
- * Exclusive means all items not in the passed array are selected.
- */
- this.$emit(
- "update:selection",
- Object.keys(to),
- this.$_controllableDataSelectionType
- );
- /**
- * helper event for the selectedRowIds .sync modifier
- */
- this.$emit("update:selectedRowIds", Object.keys(to));
+ selectionKeys: {
+ handler(to) {
+ /**
+ * toggle whenever the selection changes
+ *
+ * @event update:selection
+ * @property {array} selectedRowIds identifiers (trackBy value) of all selected items
+ * @property {string} selectionType is the selection Array "inclusive" or "exclusive".
+ * Inclusive means all items in the passed array are selected.
+ * Exclusive means all items not in the passed array are selected.
+ */
+ this.$emit(
+ "update:selection",
+ Object.keys(to),
+ this.$_controllableDataSelectionType
+ );
+ /**
+ * helper event for the selectedRowIds .sync modifier
+ */
+ this.$emit("update:selectedRowIds", Object.keys(to));
+ },
+ deep: true,
},
selectedRowIds: {
handler(to) {
@@ -328,8 +331,7 @@ export default {
obj[key] = true;
return obj;
}, {});
- this.$set(this, "selectionKeys", newSelectionKeys);
- this.$forceUpdate();
+ this.selectionKeys = newSelectionKeys;
},
immediate: true,
},
@@ -342,20 +344,25 @@ export default {
methods: {
getValueByPath,
selectAllRowsOfAllPages() {
- this.$set(this, "selectionKeys", {});
+ this.selectionKeys = {};
this.$_controllableDataSelectionType = "exclusive";
},
unselectAllRowsOfAllPages() {
- this.$set(this, "selectionKeys", {});
+ this.selectionKeys = {};
this.$_controllableDataSelectionType = "inclusive";
},
setRowSelection(row, state) {
- const method = (newState) => (newState ? "$set" : "$delete");
- this[
- method(
- this.$_controllableDataSelectionType === "inclusive" ? state : !state
- )
- ](this.selectionKeys, getValueByPath(row, this.trackBy), true);
+ const newState =
+ this.$_controllableDataSelectionType === "inclusive" ? state : !state;
+
+ if (newState) {
+ this.selectionKeys = {
+ ...this.selectionKeys,
+ [getValueByPath(row, this.trackBy)]: true,
+ };
+ } else {
+ delete this.selectionKeys[getValueByPath(row, this.trackBy)];
+ }
},
isRowSelected(row) {
const rowId = getValueByPath(row, this.trackBy);
diff --git a/src/components/organisms/DataTable/DataTable.data-factory.js b/src/components/organisms/DataTable/DataTable.data-factory.js
index a34f496c30..893c0e9424 100644
--- a/src/components/organisms/DataTable/DataTable.data-factory.js
+++ b/src/components/organisms/DataTable/DataTable.data-factory.js
@@ -1,9 +1,5 @@
import users from "./testUserData";
-import InputCheckbox from "@/components/organisms/DataFilter/inputs/Checkbox";
-import InputRadio from "@/components/organisms/DataFilter/inputs/Radio";
-import InputDefault from "@/components/organisms/DataFilter/inputs/Default";
-
const tableData = (n) => users.slice(0, n);
const tableColumns = [
@@ -69,7 +65,6 @@ const tableFilters = [
{
attribute: "$limit",
operator: "<",
- input: InputRadio,
options: [
{ value: 25, label: "25" },
{ value: 50, label: "50" },
@@ -86,7 +81,6 @@ const tableFilters = [
attribute: "age",
applyNegated: true,
operator: "<=",
- input: InputDefault,
label: "Alter",
attributes: {
type: "number",
@@ -102,7 +96,6 @@ const tableFilters = [
{
attribute: "birthday",
operator: "=",
- input: InputDefault,
label: "Geburtstag",
attributes: {
type: "date",
@@ -118,7 +111,6 @@ const tableFilters = [
{
attribute: "agreed",
operator: "=",
- input: InputCheckbox,
options: [
{ value: "true", label: "Einverständniserklärung vorhanden" },
{ value: "false", label: "Keine Einverständniserklärung" },
@@ -133,7 +125,6 @@ const tableFilters = [
{
attribute: "firstName",
operator: "includes",
- input: InputDefault,
label: "Vorname",
attributes: {
type: "text",
diff --git a/src/components/organisms/DataTable/DataTable.md b/src/components/organisms/DataTable/DataTable.md
deleted file mode 100644
index 055120c09d..0000000000
--- a/src/components/organisms/DataTable/DataTable.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# DataTable
-
-The DataTable should be used whenever you need to display data in an organized way and have all the data to display available. If you want to display data from the backend you should consider using the BackendDataTable which supports showing only parts of the data so you do not need to fetch everything in advance.
-
-## Basic Usage
-
-To use the DataTable you have to specify the following props:
-
-### `data` (required)
-
-The `data` prop must be a flat Array of Objects with an undefined structure. You can pass in whatever you like. Which data of this object will be shown can be declared with the `columns` prop.
-
-### `columns` (required)
-
-The columns prop declares the columns that the table will show. It must be an Array of Objects with the following Schema:
-
-```js
-const columns = [
- {
- label: String, // required
- field: String,
- sortable: Boolean,
- },
- // ...
-];
-```
-
-The `label` value will be displayed in the table header. If you set `sortable` to `true`, the user can sort the data by this column by clicking on the table header. More details on sorting can be found in the optional features section. The `field` attribute is really important to actually show some data. It defines per column the path in the data object to access the data to be shown. In example if you have an object like `{ a: { c: "ac" }, b: "b"}` in your data, you can set `field` to `a.c` to render the value `ac` (`obj.a.c`) in the given row.
-
-### `trackBy` (required)
-
-The `trackBy` property is required to get a unique identifier for each data-row. It must contain an access path to a unique identifier for each object. It is required because we need to keep track of which item was rendered where and also helps to identify rows later on when using features like `selection`. The path can be nested, just like in the `columns` `field` value.
-
-## Features (optional)
-
-### Sort
-
-Like explained above, you can allow the user to sort by columns. By default we have a generic sort method that supports most basic data types (`String`, `Number`, `Boolean`). If that is not enough for you, you can define your own sort method and pass it in with the `sortMethod` prop. This method will be called with 3 arguments: `function(data, sortBy, sortOrder, utils)`. `data` is the value of the data prop, `sortBy` contains the `field` value specified for the column to sort by and `sortOrder` will be `asc` or `desc`. `utils` exposes helper functions like `getValueByPath(dataObj, path)` you could use to access the data in the object.
-
-To keep you updated about the current sorting and to preselect some sort options there exist the props `sortBy` and `sortOrder` are provided. `sortOrder` will be either `asc` or `desc` and `sortBy` will contain the `field` value specified for the column to sort by. Both of these props are optional and support the `.sync` modifier as well as the events `@update:sort-by` and `@update:sort-order` with there value as the first argument.
-
-### Pagination
-
-The DataTable does support pagination. To enable it, simply set the `paginated` prop to `true`. To preselect how many items should be visible per page you can set the props `rowsPerPage` (type `Number`) and select the current page with the `currentPage` (type `Number`) prop. Both of these props support the `.sync` modifier and therefore the events `@update:rows-per-page` and `@update:current-page` to keep you informed about the current user state. But you do not need to specify those values. It will work just fine without them.
-
-**Note:** Currently it is not possible to specify the available `items-per-page` options the user can choose from.
-
-### Selections
-
-If you set the prop `rowsSelectable` to true, the Table will render an additional column at the very left. This column contains checkboxes and allows the user to select entries of the table. This even works with pagination. There are some helpful shortcuts for the user like _"select all items on the current page"_ and _"select all items"_ but you don't need to care about that. The DataTable will only expose a single property `selections` to you that you can use with the `.sync` modifier to listen for selection changes. Alternatively, you can listen to the `@update:selections` event. This Event will contain the new selection as the first argument. You can also use the `selections` property to pass in an initial selection.
-
-The data structure of a selection is a flat array that contains all the identifiers of the selected items. An identifier is the value of the row data that the `trackBy` property is referencing.
-
-### Slots
-
-You can customize each data column field by providing a scoped Slot. The Slot will provide you the data that should be displayed as `props.data` and everything else is up to you. You can use this to style input fields as well as to extend the behavior. For example opening a Dialog on click.
-
-The Slot names do follow the naming schema `datacolumn-{{coloumn-key}}`. `column-key` is the value you provided for the coloum as the `field` attribute in the `column` prop.
-
-**INFO: any `.` in the `field` value will be replaced by `-` in the slot name** (`field: "user.age"` => `datacolumn-user-age`)
-
-```vue
-
-
+
+ {{ `${editedItem.firstName} ${editedItem.lastName}` }}
+
+
{{ mapRoleNames(editedItem.roleNames) }}
-
- {{
- `${$t("components.organisms.importUsers.tableClasses")}: ${
- editedItem.classNames
- ? editedItem.classNames.join(", ")
- : ""
- }`
+
+
+ {{
+ `${$t(
+ "components.organisms.importUsers.tableClasses"
+ )}: ${editedItem.classNames.join(", ")}`
}}
-
-
+ {{
`${$t("components.organisms.importUsers.tableUserName")}: ${
editedItem.loginName
}`
}}
-
-
-
-
-
- {{ $theme.name }}
-
-
-
+
+
+
+
{{ `${selectedItem.firstName} ${selectedItem.lastName}` }}
-
-
+
+
{{ mapRoleNames(selectedItem.roleNames) }}
-
-
+
+
{{
`${$t("components.organisms.importUsers.tableUserName")}: ${
selectedItem.loginName
}`
}}
-
-
-
-
+
+
+
+
{{
`${editedItem.match.firstName} ${editedItem.match.lastName}`
}}
-
-
+
+
{{ mapRoleNames(editedItem.match.roleNames) }}
-
-
+
+
{{
`${$t("components.organisms.importUsers.tableUserName")}: ${
editedItem.match.loginName
}`
}}
-
-
-
-
+
+
+
+
{{ $t("components.molecules.importUsersMatch.unMatched") }}
@@ -111,15 +110,16 @@
$t("components.molecules.importUsersMatch.unMatched.nbc")
}}
-
-
-
+
+
-
-
- {{ `${item.firstName} ${item.lastName}` }}
-
-
-
-
-
- {{ item.firstName }} {{ item.lastName }}
-
-
- {{ mapRoleNames(item.roleNames) }}
-
-
+
+
+
+ {{ mapRoleNames(item.raw.roleNames) }}
+
+
{{
`${$t(
"components.organisms.importUsers.tableUserName"
- )}: ${item.loginName}`
+ )}: ${item.raw.loginName}`
}}
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+ {{ $t("components.molecules.importUsersMatch.flag") }}
-
- {{ flagged ? mdiFlag : mdiFlagOutline }}
-
-
-
-
-
+ {{ flagged ? mdiFlag : mdiFlagOutline }}
+
+
+
+
+
- {{ mdiContentSave }}
+ {{ mdiContentSave }}
{{ $t("components.molecules.importUsersMatch.saveMatch") }}
-
-
+
- {{ mdiDelete }}
+ {{ mdiDelete }}
{{ $t("components.molecules.importUsersMatch.deleteMatch") }}
-
-
-
-
+
+
+
+
+
diff --git a/src/components/organisms/DataFilter/DataFilterChips.vue b/src/components/organisms/DataFilter/DataFilterChips.vue
deleted file mode 100644
index bb2c3667db..0000000000
--- a/src/components/organisms/DataFilter/DataFilterChips.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/components/organisms/DataFilter/DataFilterLayout.unit.js b/src/components/organisms/DataFilter/DataFilterLayout.unit.js
deleted file mode 100644
index a7d81a7d01..0000000000
--- a/src/components/organisms/DataFilter/DataFilterLayout.unit.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import DataFilterLayout from "./DataFilterLayout";
-
-describe("@/components/organisms/DataFilter/DataFilterLayout", () => {
- it(...rendersSlotContent(DataFilterLayout, ["select", "chips", "modal"]));
-});
diff --git a/src/components/organisms/DataFilter/DataFilterLayout.vue b/src/components/organisms/DataFilter/DataFilterLayout.vue
deleted file mode 100644
index 022a2a3a71..0000000000
--- a/src/components/organisms/DataFilter/DataFilterLayout.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
- {{ chip.label }}
-
-
- {{ mdiClose }}
-
-
-
-
-
-
-
diff --git a/src/components/organisms/DataFilter/DataFilterModal.vue b/src/components/organisms/DataFilter/DataFilterModal.vue
deleted file mode 100644
index 191318f5f1..0000000000
--- a/src/components/organisms/DataFilter/DataFilterModal.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
-
-
-
-
-
+
+ {{props.data}} ${testSlotContent}
`, - }, - }); - - // check that basic slot content gets rendered - expect(wrapper.html()).toContain(testSlotContent); - - // check that content from props.data got rendered - const renderedData = await getTableRowsContent(wrapper); - renderedData.forEach((row, index) => { - expect(row[0]).toContain(smallData[index]["firstName"]); - }); - }); - - it("renders scopedSlots with data for nested keys", async () => { - const testSlotContent = `some random slot content`; - - const wrapper = mount(DataTable, { - ...createComponentMocks({ i18n: true }), - propsData: { - data: smallData, - trackBy: "_id", - columns: tableColumns, - }, - scopedSlots: { - "datacolumn-address-city": `{{props.data}} ${testSlotContent}
`, - }, - }); - // check that basic slot content gets rendered - expect(wrapper.html()).toContain(testSlotContent); - - // check that content from props.data got rendered - const renderedData = await getTableRowsContent(wrapper); - renderedData.forEach((row, index) => { - expect(row[2]).toContain(smallData[index].address.city); - }); - }); - }); -}); diff --git a/src/components/organisms/DataTable/DataTable.vue b/src/components/organisms/DataTable/DataTable.vue deleted file mode 100644 index b4f1e2dd45..0000000000 --- a/src/components/organisms/DataTable/DataTable.vue +++ /dev/null @@ -1,180 +0,0 @@ - --
-
{{ $t("pages.administration.ldap.classes.path.subtitle") }}
-
-
+
-
{{ $t("pages.administration.migration.cannotStart") }}
-
+
- {{ item.flagged ? mdiFlag : mdiFlagOutline }}
-
-
+
+ {{ item.flagged ? mdiFlag : mdiFlagOutline }}
+
+
-
+
-
-
-
-
-
-
@@ -93,77 +93,85 @@
type="string"
:label="$t('components.organisms.importUsers.searchClass')"
clearable
- class="searchClasses"
+ data-testid="search-classes"
/>
-
-
+
- {{ mdiAccountPlus }}
-
-
-
+ {{ mdiAccountPlus }}
+
+
+
- {{ mdiAccountSwitch }}
-
-
-
+ {{ mdiAccountSwitch }}
+
+
+
- {{ mdiAccountSwitchOutline }}
-
-
-
+ >
+ {{ mdiAccountSwitchOutline }}
+
+
+
-
-
+
- {{ searchFlagged ? mdiFlag : mdiFlagOutline }}
-
-
-
+
+ {{ searchFlagged ? mdiFlag : mdiFlagOutline }}
+
+
+
@@ -174,45 +182,50 @@
+
+ {{ item.classNames.join(", ") }}
+
+
- {{ getMatchedByIcon(item.match) }}
+ {{ getMatchedByIcon(item.match) }}
{{
item.match
? `${item.match.firstName} ${item.match.lastName}`
: $t("components.organisms.importUsers.createNew")
}}
-
- {{ mdiPencilOutline }}
-
+ {{ mdiPencilOutline }}
+
-
{{ $t("components.organisms.importUsers.legend") }}
-
-
-
-
-
+ {{ $t("components.cardElement.fileElement.previewError") }}
+
+
+
+
+
+
+
+
-
-
diff --git a/src/components/ui-speed-dial-menu/SpeedDialMenu.unit.ts b/src/components/ui-speed-dial-menu/SpeedDialMenu.unit.ts
new file mode 100644
index 0000000000..55644167f7
--- /dev/null
+++ b/src/components/ui-speed-dial-menu/SpeedDialMenu.unit.ts
@@ -0,0 +1,166 @@
+import { createTestingVuetify } from "@@/tests/test-utils/setup";
+import { mdiClose } from "@mdi/js";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { DefineComponent, defineComponent, nextTick } from "vue";
+import { VBtn } from "vuetify/lib/components/index.mjs";
+import SpeedDialMenu from "./SpeedDialMenu.vue";
+import SpeedDialMenuAction from "./SpeedDialMenuAction.vue";
+
+const componentWithFlatSlots = defineComponent({
+ components: {
+ SpeedDialMenu,
+ SpeedDialMenuAction,
+ },
+ template: `
+
+
+ DefaultSlotLabel
+
+ Action1
+ Action2
+ Action3
+
+
+
+
+ `,
+ setup() {
+ return {
+ mdiClose,
+ };
+ },
+});
+
+const componentWithIteratedSlots = defineComponent({
+ components: {
+ SpeedDialMenu,
+ SpeedDialMenuAction,
+ },
+ template: `
+
+
+ DefaultSlotLabel
+
+ {{ action.label }}
+
+
+
+
+
+ `,
+ setup() {
+ const actions = [
+ { label: "Action1", icon: mdiClose, href: "example.com" },
+ { label: "Action2", icon: mdiClose, to: "example.com" },
+ { label: "Action3", icon: mdiClose },
+ ];
+
+ return {
+ actions,
+ mdiClose,
+ };
+ },
+});
+
+describe("SpeedDialMenu", () => {
+ const setup = ({
+ component,
+ }: {
+ component: DefineComponent;
+ }) => {
+ const slot = "TestSlot";
+ const wrapper = mount(component, {
+ global: {
+ plugins: [createTestingVuetify()],
+ },
+ });
+
+ return {
+ wrapper,
+ slot,
+ };
+ };
+
+ const toggleMenu = async (wrapper: VueWrapper) => {
+ const menu = await wrapper.findComponent(SpeedDialMenu);
+ const menuButton = await menu.findComponent(VBtn);
+ await menuButton.trigger("click");
+ await nextTick();
+ };
+
+ it.each([
+ { type: "hardcoded Slots", component: componentWithFlatSlots },
+ { type: "iterated Slots", component: componentWithIteratedSlots },
+ ])("should render with $type", async ({ component }) => {
+ const { wrapper } = setup({ component });
+
+ const result = await wrapper.findComponent(SpeedDialMenu);
+ expect(result).toBeTruthy();
+ });
+
+ it.each([
+ { type: "hardcoded Slots", component: componentWithFlatSlots },
+ { type: "iterated Slots", component: componentWithIteratedSlots },
+ ])(
+ "should open and close menu on click with $type",
+ async ({ component }) => {
+ jest.useFakeTimers();
+ const { wrapper } = setup({ component });
+
+ // --- Open
+ await toggleMenu(wrapper);
+
+ const actionsAfterOpen =
+ await wrapper.findAllComponents(SpeedDialMenuAction);
+ expect(actionsAfterOpen).toHaveLength(3);
+
+ // --- Close
+ await toggleMenu(wrapper);
+
+ const actionsAfterClose =
+ await wrapper.findAllComponents(SpeedDialMenuAction);
+ expect(actionsAfterClose).toHaveLength(0);
+ }
+ );
+
+ it.each([
+ { type: "hardcoded Slots", component: componentWithFlatSlots },
+ { type: "iterated Slots", component: componentWithIteratedSlots },
+ ])(
+ "should provide incremental index to actions with $type",
+ async ({ component }) => {
+ jest.useFakeTimers();
+ const { wrapper } = setup({ component });
+
+ // --- Open
+ await toggleMenu(wrapper);
+
+ const actionsAfterOpen =
+ await wrapper.findAllComponents(SpeedDialMenuAction);
+
+ actionsAfterOpen.forEach((action, index) => {
+ expect(action.props("speedDialIndex")).toEqual(index);
+ });
+ }
+ );
+
+ it.each([
+ { type: "hardcoded Slots", component: componentWithFlatSlots },
+ { type: "iterated Slots", component: componentWithIteratedSlots },
+ ])(
+ "should render labels in default slots for menu-button with $type",
+ async ({ component }) => {
+ jest.useFakeTimers();
+ const { wrapper } = setup({ component });
+
+ const menu = await wrapper.findComponent(SpeedDialMenu);
+ const menuButton = await menu.findComponent(VBtn);
+
+ expect(menuButton.text()).toEqual("DefaultSlotLabel");
+ }
+ );
+});
diff --git a/src/components/ui-speed-dial-menu/SpeedDialMenu.vue b/src/components/ui-speed-dial-menu/SpeedDialMenu.vue
new file mode 100644
index 0000000000..1cc8415a92
--- /dev/null
+++ b/src/components/ui-speed-dial-menu/SpeedDialMenu.vue
@@ -0,0 +1,190 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/ui-speed-dial-menu/SpeedDialMenuAction.vue b/src/components/ui-speed-dial-menu/SpeedDialMenuAction.vue
new file mode 100644
index 0000000000..11321d6e62
--- /dev/null
+++ b/src/components/ui-speed-dial-menu/SpeedDialMenuAction.vue
@@ -0,0 +1,166 @@
+-
+
+
+
+
+
+
+
+
diff --git a/src/components/ui-speed-dial-menu/index.ts b/src/components/ui-speed-dial-menu/index.ts
new file mode 100644
index 0000000000..b29f00404f
--- /dev/null
+++ b/src/components/ui-speed-dial-menu/index.ts
@@ -0,0 +1,4 @@
+import SpeedDialMenu from "./SpeedDialMenu.vue";
+import SpeedDialMenuAction from "./SpeedDialMenuAction.vue";
+
+export { SpeedDialMenu, SpeedDialMenuAction };
diff --git a/src/components/ui-speed-dial-menu/injection-tokens.ts b/src/components/ui-speed-dial-menu/injection-tokens.ts
new file mode 100644
index 0000000000..c9a19602ac
--- /dev/null
+++ b/src/components/ui-speed-dial-menu/injection-tokens.ts
@@ -0,0 +1,11 @@
+export const INJECT_SPEED_DIAL_ORIENTATION = Symbol(
+ "INJECT_SPEED_DIAL_ORIENTATION"
+);
+
+export const INJECT_SPEED_DIAL_DIRECTION = Symbol(
+ "INJECT_SPEED_DIAL_DIRECTION"
+);
+
+export const INJECT_SPEED_DIAL_ACTION_CLICKED = Symbol(
+ "INJECT_SPEED_DIAL_ACTION_CLICKED"
+);
diff --git a/src/components/util-board/BoardNotifier.composable.unit.ts b/src/components/util-board/BoardNotifier.composable.unit.ts
index 5b6554d126..62a633b63a 100644
--- a/src/components/util-board/BoardNotifier.composable.unit.ts
+++ b/src/components/util-board/BoardNotifier.composable.unit.ts
@@ -1,6 +1,6 @@
import { useBoardNotifier } from "./BoardNotifier.composable";
import { mountComposable } from "@@/tests/test-utils/mountComposable";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
import NotifierModule from "@/store/notifier";
@@ -8,8 +8,9 @@ const notifierModule = createModuleMocks(NotifierModule);
const setup = () => {
return mountComposable(() => useBoardNotifier(), {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ global: {
+ provide: { [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule },
+ },
});
};
diff --git a/src/components/util-board/extractDataAttribute.util.ts b/src/components/util-board/extractDataAttribute.util.ts
new file mode 100644
index 0000000000..e2ef1ab40f
--- /dev/null
+++ b/src/components/util-board/extractDataAttribute.util.ts
@@ -0,0 +1,18 @@
+export const extractDataAttribute = (
+ el: HTMLElement | null,
+ attributeName: string
+): string | undefined => {
+ if (!el) {
+ return undefined;
+ }
+
+ if (el.dataset && el.dataset[attributeName] !== undefined) {
+ return el.dataset[attributeName];
+ }
+
+ if (el.parentElement) {
+ return extractDataAttribute(el.parentElement, attributeName);
+ }
+
+ return undefined;
+};
diff --git a/src/components/util-board/extractDataAttribute.util.unit.ts b/src/components/util-board/extractDataAttribute.util.unit.ts
new file mode 100644
index 0000000000..0f1f2eee29
--- /dev/null
+++ b/src/components/util-board/extractDataAttribute.util.unit.ts
@@ -0,0 +1,62 @@
+import { extractDataAttribute } from "./extractDataAttribute.util";
+
+const getRandomId = () => "id" + Math.random();
+
+describe("extractDataAttribute", () => {
+ describe("when data-attribute can not be found anywhere", () => {
+ it("should return undefined", async () => {
+ document.body.innerHTML = ``;
+
+ const el = document.getElementById("element");
+ const columnId = extractDataAttribute(el, "columnId");
+
+ expect(columnId).toBeUndefined();
+ });
+ });
+
+ describe("when data-attribute exists on the element itself", () => {
+ it("should return the value", async () => {
+ const id = getRandomId();
+ document.body.innerHTML = ``;
+
+ const el = document.getElementById("element");
+ const columnId = extractDataAttribute(el, "columnId");
+
+ expect(columnId).toBe(id);
+ });
+ });
+
+ describe("when data-attribute exists on the parent element itself", () => {
+ it("should return the value", async () => {
+ const id = getRandomId();
+ document.body.innerHTML = `
+ type
- const bindMaska: DirectiveFunction = (el, binding, vNode, oldVnode) => {
+ const bindMaska: FunctionDirective = (
+ el,
+ binding,
+ vNode,
+ oldVnode
+ ) => {
const newBinding = { ...binding, arg: options as string };
- (vMaska as DirectiveFunction)(el, newBinding, vNode, oldVnode);
+ (vMaska as FunctionDirective)(el, newBinding, vNode, oldVnode);
};
return bindMaska;
diff --git a/src/components/util-input-masks/InputMask.unit.ts b/src/components/util-input-masks/InputMask.unit.ts
index 82bda59eb5..49bd266232 100644
--- a/src/components/util-input-masks/InputMask.unit.ts
+++ b/src/components/util-input-masks/InputMask.unit.ts
@@ -1,7 +1,6 @@
import { createInputMask } from "@/components/util-input-masks/InputMask.factory";
-import { DirectiveBinding, DirectiveFunction } from "vue";
+import { DirectiveBinding, FunctionDirective, VNode } from "vue";
import { vMaska, MaskInputOptions } from "maska";
-import { VNode } from "vue/types/umd";
jest.mock("maska");
@@ -20,7 +19,7 @@ describe("InputMask.factory", () => {
it("should bind maska when directive function is called", () => {
const mockedMaska = vMaska;
- const directive: DirectiveFunction = createInputMask({ mask: "" });
+ const directive: FunctionDirective = createInputMask({ mask: "" });
directive(
maskaDirectiveMock.element,
maskaDirectiveMock.binding,
@@ -35,7 +34,7 @@ describe("InputMask.factory", () => {
const options: MaskInputOptions = { mask: "##-##" };
- const directive: DirectiveFunction = createInputMask(options);
+ const directive: FunctionDirective = createInputMask(options);
directive(
maskaDirectiveMock.element,
maskaDirectiveMock.binding,
diff --git a/src/components/util-input-masks/InputsMasks.ts b/src/components/util-input-masks/InputsMasks.ts
index 76b5ca4291..63c858e562 100644
--- a/src/components/util-input-masks/InputsMasks.ts
+++ b/src/components/util-input-masks/InputsMasks.ts
@@ -2,10 +2,6 @@ import { createInputMask } from "./InputMask.factory";
export const dateInputMask = createInputMask({
mask: "##.##.####",
- preProcess: (value: string) => {
- const [year, month, day] = value.split("-");
- return day + month + year;
- },
});
export const timeInputMask = createInputMask({ mask: "##:##" });
diff --git a/src/components/util-validators/validators.ts b/src/components/util-validators/validators.ts
index 7b7a6a56e3..87c83433d9 100644
--- a/src/components/util-validators/validators.ts
+++ b/src/components/util-validators/validators.ts
@@ -34,29 +34,29 @@ export const isValidUrl: FormValidatorFn = (errMsg) => (value) => {
};
/**
+ * Vuelidate Validator
* Checks if given value has valid time format
*/
-export const isValidTimeFormat: FormValidatorFn =
- (errMsg) => (value) => {
- if (value === "" || value === null) {
- return true;
- }
+export const isValidTimeFormat = (value: string | null) => {
+ if (value === "" || value === null) {
+ return true;
+ }
- const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
+ const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
- return !value.match(timeRegex) ? errMsg : true;
- };
+ return !!value.match(timeRegex);
+};
/**
+ * Vuelidate Validator
* Checks if given value has valid time format
*/
-export const isValidDateFormat: FormValidatorFn =
- (errMsg) => (value) => {
- if (value === "" || value === null) {
- return true;
- }
+export const isValidDateFormat = (value: string | null) => {
+ if (value === "" || value === null) {
+ return true;
+ }
- const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
+ const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
- return !value.match(dateRegex) ? errMsg : true;
- };
+ return !!value.match(dateRegex);
+};
diff --git a/src/components/util-validators/validators.unit.ts b/src/components/util-validators/validators.unit.ts
index baab820589..2cf974c513 100644
--- a/src/components/util-validators/validators.unit.ts
+++ b/src/components/util-validators/validators.unit.ts
@@ -68,29 +68,25 @@ describe("util-validators", () => {
});
describe("isValidTimeFormat", () => {
- const isValid = isValidTimeFormat(ERROR);
-
it("should accept valid time format", () => {
- expect(isValid("12:12")).toBe(true);
+ expect(isValidTimeFormat("12:12")).toBe(true);
});
it("should not accept invalid time format", () => {
- expect(isValid("55:5")).toBe(ERROR);
- expect(isValid("55:55")).toBe(ERROR);
+ expect(isValidTimeFormat("55:5")).toBe(false);
+ expect(isValidTimeFormat("55:55")).toBe(false);
});
});
describe("isValidDateFormat", () => {
- const isValid = isValidDateFormat(ERROR);
-
it("should accept valid date format", () => {
- expect(isValid("12.12.2023")).toBe(true);
+ expect(isValidDateFormat("12.12.2023")).toBe(true);
});
it("should not accept invalid date format", () => {
- expect(isValid("31.31.2023")).toBe(ERROR);
- expect(isValid("1.1.2001")).toBe(ERROR);
- expect(isValid("1.101")).toBe(ERROR);
+ expect(isValidDateFormat("31.31.2023")).toBe(false);
+ expect(isValidDateFormat("1.1.2001")).toBe(false);
+ expect(isValidDateFormat("1.101")).toBe(false);
});
});
});
diff --git a/src/components/util-vue/index.ts b/src/components/util-vue/index.ts
new file mode 100644
index 0000000000..9a077ed03c
--- /dev/null
+++ b/src/components/util-vue/index.ts
@@ -0,0 +1,3 @@
+import { hasSlotContent } from "./slots";
+
+export { hasSlotContent };
diff --git a/src/components/util-vue/slots.ts b/src/components/util-vue/slots.ts
new file mode 100644
index 0000000000..988416ba9c
--- /dev/null
+++ b/src/components/util-vue/slots.ts
@@ -0,0 +1,42 @@
+import { Slot, VNode } from "vue";
+
+/**
+ *
+ * check if slot is providing actual content
+ * (helps to check this in a compact, reusable way - see example)
+ *
+ * @param slot Slot
+ * @returns boolean
+ *
+ * ```html
+ * ) {
const copyModule = inject("copyModule");
const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
- const i18n = injectStrict(I18N_KEY);
-
- const t = (key: string) => {
- const translateResult = i18n.t(key);
- if (typeof translateResult === "string") {
- return translateResult;
- }
- return "unknown translation-key:" + key;
- };
+ const { t } = useI18n();
const backgroundCopyProcesses: Ref = ref([]);
diff --git a/src/composables/copy.unit.ts b/src/composables/copy.unit.ts
index 0c482ec129..ec297fd84d 100644
--- a/src/composables/copy.unit.ts
+++ b/src/composables/copy.unit.ts
@@ -2,11 +2,12 @@ import { CopyApiResponseStatusEnum } from "@/serverApi/v3";
import CopyModule, { CopyParams, CopyParamsTypeEnum } from "@/store/copy";
import LoadingStateModule from "@/store/loading-state";
import NotifierModule from "@/store/notifier";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
import { mountComposable } from "@@/tests/test-utils/mountComposable";
import { ref, watch } from "vue";
import { useCopy } from "./copy";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
jest.mock("./loadingState");
@@ -21,15 +22,17 @@ describe("copy composable", () => {
const loadingStateModuleMock = createModuleMocks(LoadingStateModule);
const copyModuleMock = createModuleMocks(CopyModule);
- const i18n = { t: jest.fn().mockReturnValue("placeholder") };
-
const isLoadingDialogOpen = ref(false);
const { copy } = mountComposable(() => useCopy(isLoadingDialogOpen), {
- copyModule: copyModuleMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
- loadingStateModule: loadingStateModuleMock,
- [I18N_KEY.valueOf()]: i18n,
+ global: {
+ plugins: [createTestingI18n()],
+ provide: {
+ copyModule: copyModuleMock,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
+ loadingStateModule: loadingStateModuleMock,
+ },
+ },
});
return {
diff --git a/src/composables/i18n.composable.ts b/src/composables/i18n.composable.ts
deleted file mode 100644
index 1b9c9ec12a..0000000000
--- a/src/composables/i18n.composable.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import VueI18n from "vue-i18n";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
-
-export const useI18n = () => {
- const i18n: VueI18n = injectStrict(I18N_KEY);
-
- const t = (key: string, values?: VueI18n.Values): string => {
- return i18n.tc(key, 0, values);
- };
-
- const te = (key: string, locale?: VueI18n.Locale): boolean => {
- return i18n.te(key, locale);
- };
-
- const locale = i18n.locale;
-
- return {
- t,
- te,
- locale,
- };
-};
diff --git a/src/composables/i18n.composable.unit.ts b/src/composables/i18n.composable.unit.ts
deleted file mode 100644
index ef43b1a618..0000000000
--- a/src/composables/i18n.composable.unit.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { mount } from "@vue/test-utils";
-import { defineComponent } from "vue";
-import VueI18n from "vue-i18n";
-import { I18N_KEY } from "@/utils/inject";
-import { useI18n } from "./i18n.composable";
-
-describe("useI18n", () => {
- const getWrapper = () => {
- let composable: ReturnType | undefined;
-
- const TestComponent = defineComponent({
- template: "",
- setup() {
- composable = useI18n();
- },
- });
-
- const vueI18n: DeepMocked = createMock();
-
- const wrapper = mount(TestComponent, {
- provide: {
- [I18N_KEY.valueOf()]: vueI18n,
- },
- });
-
- return {
- wrapper,
- vueI18n,
- composable,
- };
- };
-
- afterEach(() => {
- jest.clearAllMocks();
- });
-
- describe("t", () => {
- it("should be defined", () => {
- const { composable } = getWrapper();
-
- expect(composable?.t).toBeDefined();
- });
-
- describe("when translating", () => {
- const setup = () => {
- const { vueI18n, composable } = getWrapper();
-
- const translationResult = "translated";
-
- vueI18n.tc.mockReturnValue(translationResult);
-
- return {
- vueI18n,
- composable,
- translationResult,
- };
- };
-
- it("should call vueI18n", () => {
- const { vueI18n, composable } = setup();
-
- composable?.t("key", { param1: "value1" });
-
- expect(vueI18n.tc).toHaveBeenCalledWith("key", 0, { param1: "value1" });
- });
-
- it("should return a translated string", () => {
- const { composable, translationResult } = setup();
-
- const result = composable?.t("key", { param1: "value1" });
-
- expect(result).toEqual(translationResult);
- });
- });
- });
-});
diff --git a/src/composables/loadingState.unit.ts b/src/composables/loadingState.unit.ts
index 02ba6b5ec9..a1c7f9f92e 100644
--- a/src/composables/loadingState.unit.ts
+++ b/src/composables/loadingState.unit.ts
@@ -10,9 +10,7 @@ describe("loadingState composable", () => {
const loadingMessage = "test message";
const { isLoadingDialogOpen } = mountComposable(
() => useLoadingState(loadingMessage),
- {
- loadingStateModule: loadingStateModuleMock,
- }
+ { global: { provide: { loadingStateModule: loadingStateModuleMock } } }
);
isLoadingDialogOpen.value = true;
@@ -29,9 +27,7 @@ describe("loadingState composable", () => {
const { isLoadingDialogOpen } = mountComposable(
() => useLoadingState("...loading"),
- {
- loadingStateModule: loadingStateModuleMock,
- }
+ { global: { provide: { loadingStateModule: loadingStateModuleMock } } }
);
isLoadingDialogOpen.value = false;
diff --git a/src/layouts/legacyLoggedIn.unit.ts b/src/layouts/legacyLoggedIn.unit.ts
index ad40164a16..4e75cd8fbe 100644
--- a/src/layouts/legacyLoggedIn.unit.ts
+++ b/src/layouts/legacyLoggedIn.unit.ts
@@ -1,6 +1,4 @@
-import Vue from "vue";
-import { mount, MountOptions } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mount } from "@vue/test-utils";
import { createModuleMocks } from "@/utils/mock-store-module";
import { authModule, envConfigModule, filePathsModule } from "@/store";
import AuthModule from "@/store/auth";
@@ -12,7 +10,14 @@ import StatusAlertsModule from "@/store/status-alerts";
import setupStores from "@@/tests/test-utils/setupStores";
import legacyLoggedIn from "./legacyLoggedIn.vue";
import { Envs } from "@/store/types/env-config";
-import { I18N_KEY, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { useRoute } from "vue-router";
+import { NOTIFIER_MODULE_KEY, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
+import { reactive } from "vue";
+import NotifierModule from "@/store/notifier";
const $route = {
query: {
@@ -21,8 +26,6 @@ const $route = {
path: "/administration/students/",
};
-const $router = { push: jest.fn(), currentRoute: $route, afterEach: jest.fn() };
-
setupStores({
authModule: AuthModule,
autoLogoutModule: AutoLogoutModule,
@@ -67,24 +70,40 @@ envConfigModule.setEnvs({
ALERT_STATUS_URL: "https://status.dbildungscloud.de",
} as Envs);
+jest.mock("vue-router");
+const useRouteMock = useRoute;
+
describe("legacyLoggedIn", () => {
it("should mark active links", () => {
+ const autoLogoutModule = createModuleMocks(AutoLogoutModule);
const statusAlertsModule = createModuleMocks(StatusAlertsModule, {
getStatusAlerts: [],
});
+ const notifierModule = createModuleMocks(NotifierModule);
- const wrapper = mount(legacyLoggedIn as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY as symbol]: { t: (key: string) => key },
- [STATUS_ALERTS_MODULE_KEY.valueOf()]: statusAlertsModule,
- },
- mocks: {
- $theme: {
- name: "instance name",
+ useRouteMock.mockImplementation(() => reactive($route));
+
+ const wrapper = mount(legacyLoggedIn, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ autoLogoutModule,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+ [STATUS_ALERTS_MODULE_KEY.valueOf()]: statusAlertsModule,
+ },
+ mocks: {
+ $route: { hash: "" },
+ $theme: {
+ name: "instance name",
+ },
},
- $router,
- $route,
+ stubs: [
+ "base-input",
+ "base-modal",
+ "base-link",
+ "base-qr-code",
+ "router-link",
+ ],
},
});
diff --git a/src/layouts/legacyLoggedIn.vue b/src/layouts/legacyLoggedIn.vue
index bfe0cb34ca..5b81bc9a5d 100644
--- a/src/layouts/legacyLoggedIn.vue
+++ b/src/layouts/legacyLoggedIn.vue
@@ -29,7 +29,7 @@
diff --git a/src/pages/NewsCreate.page.vue b/src/pages/NewsCreate.page.vue
index 95476ccc15..d9d941575d 100644
--- a/src/pages/NewsCreate.page.vue
+++ b/src/pages/NewsCreate.page.vue
@@ -4,24 +4,24 @@
:breadcrumbs="[
{
to: '/news',
- text: $t('pages.news.title'),
+ title: $t('pages.news.title'),
},
{
- text: $t('pages.news.new.title'),
+ title: $t('pages.news.new.title'),
disabled: true,
},
]"
:full-width="false"
>
-
+
{{ $t("error.proxy.action") }}
diff --git a/src/pages/administration/ClassOverview.page.unit.ts b/src/pages/administration/ClassOverview.page.unit.ts
index d7140eea5a..37023374c5 100644
--- a/src/pages/administration/ClassOverview.page.unit.ts
+++ b/src/pages/administration/ClassOverview.page.unit.ts
@@ -1,308 +1,329 @@
import AuthModule from "@/store/auth";
import GroupModule from "@/store/group";
-import { ClassInfo, ClassRootType } from "@/store/types/class-info";
+import { ClassRootType } from "@/store/types/class-info";
import { Pagination } from "@/store/types/commons";
import { SortOrder } from "@/store/types/sort-order.enum";
import {
AUTH_MODULE_KEY,
GROUP_MODULE_KEY,
- I18N_KEY,
SCHOOLS_MODULE_KEY,
} from "@/utils/inject";
import { createModuleMocks } from "@/utils/mock-store-module";
-import { classInfoFactory, i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { mount, MountOptions, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { classInfoFactory } from "@@/tests/test-utils";
+import { VueWrapper, mount } from "@vue/test-utils";
import ClassOverview from "./ClassOverview.page.vue";
import SchoolsModule from "@/store/schools";
import { School, Year } from "@/store/types/schools";
import { createMock } from "@golevelup/ts-jest";
-import VueRouter from "vue-router";
+import { Router, useRoute, useRouter } from "vue-router";
import { ClassRequestContext } from "@/serverApi/v3";
-
-const $router = createMock();
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { nextTick } from "vue";
+import { VBtn, VDataTableServer } from "vuetify/lib/components/index.mjs";
+import vueDompurifyHTMLPlugin from "vue-dompurify-html";
+
+jest.mock("vue-router", () => ({
+ useRoute: jest.fn(),
+ useRouter: jest.fn(),
+}));
+const useRouteMock = useRoute;
+const useRouterMock = useRouter;
jest.mock("@/utils/pageTitle", () => ({
buildPageTitle: (pageTitle) => pageTitle ?? "",
}));
-describe("ClassOverview", () => {
- const getWrapper = (
- getters: Partial = {},
- propsData: { tab: string } = { tab: "current" }
- ) => {
- document.body.setAttribute("data-app", "true");
-
- const groupModule = createModuleMocks(GroupModule, {
- getClasses: [
- classInfoFactory.build(),
- classInfoFactory.build({
- externalSourceName: undefined,
- type: ClassRootType.Class,
- isUpgradable: true,
- }),
- ],
- getPagination: {
- limit: 10,
- skip: 0,
- total: 30,
- },
- ...getters,
- });
+const createWrapper = (
+ groupModuleGetters: Partial = {},
+ schoolsModuleGetters: Partial = {},
+ props: { tab: string } = { tab: "current" }
+) => {
+ const route = { query: { tab: "current" } };
+ useRouteMock.mockReturnValue(route);
+ const router = createMock();
+ useRouterMock.mockReturnValue(router);
+
+ const groupModule = createModuleMocks(GroupModule, {
+ getClasses: [
+ classInfoFactory.build(),
+ classInfoFactory.build({
+ externalSourceName: undefined,
+ type: ClassRootType.Class,
+ isUpgradable: true,
+ }),
+ ],
+ getPagination: {
+ limit: 10,
+ skip: 0,
+ total: 30,
+ },
+ ...groupModuleGetters,
+ });
- const authModule = createModuleMocks(AuthModule, {
- getUserPermissions: ["CLASS_EDIT".toLowerCase()],
- });
+ const authModule = createModuleMocks(AuthModule, {
+ getUserPermissions: ["CLASS_EDIT".toLowerCase()],
+ });
- const schoolModule = createModuleMocks(SchoolsModule, {
- getSchool: {
- years: {
- schoolYears: [],
- nextYear: {
- name: "2024/25",
- } as Year,
- activeYear: {
- name: "2023/24",
- } as Year,
- lastYear: {} as Year,
- },
- } as unknown as School,
- ...getters,
- });
+ const schoolModule = createModuleMocks(SchoolsModule, {
+ getSchool: {
+ years: {
+ schoolYears: [],
+ nextYear: {
+ name: "2024/25",
+ } as Year,
+ activeYear: {
+ name: "2023/24",
+ } as Year,
+ lastYear: {} as Year,
+ },
+ } as unknown as School,
+ ...schoolsModuleGetters,
+ });
- const wrapper: Wrapper = mount(ClassOverview as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
+ const wrapper = mount(ClassOverview, {
+ global: {
+ plugins: [
+ createTestingVuetify(),
+ createTestingI18n(),
+ vueDompurifyHTMLPlugin,
+ ],
provide: {
- [I18N_KEY.valueOf()]: i18nMock,
[GROUP_MODULE_KEY.valueOf()]: groupModule,
[SCHOOLS_MODULE_KEY.valueOf()]: schoolModule,
[AUTH_MODULE_KEY.valueOf()]: authModule,
},
- mocks: { $router },
- propsData,
- });
+ },
+ props,
+ });
- const calledFrom = ClassRequestContext.ClassOverview;
+ const calledFrom = ClassRequestContext.ClassOverview;
- return {
- wrapper,
- groupModule,
- schoolModule,
- calledFrom,
- };
+ return {
+ wrapper,
+ route,
+ router,
+ groupModule,
+ schoolModule,
+ calledFrom,
};
+};
+const findTableComponen = (wrapper: VueWrapper) => {
+ return wrapper.findComponent(
+ '[data-testid="admin-class-table"]'
+ );
+};
+
+describe("ClassOverview", () => {
afterEach(() => {
jest.clearAllMocks();
});
- describe("breadcrumbs", () => {
- it("should render static breadcrumbs", () => {
- const { wrapper } = getWrapper({});
+ describe("general", () => {
+ const setup = () => createWrapper();
+
+ it("should mount", () => {
+ const { wrapper } = setup();
+ expect(wrapper.exists()).toBe(true);
+ });
+
+ describe("breadcrumbs", () => {
+ it("should render static breadcrumbs", () => {
+ const { wrapper } = setup();
- const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
+ const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
- expect(breadcrumbs.at(0).text()).toEqual(
- "pages.administration.index.title"
- );
- expect(breadcrumbs.at(1).text()).toEqual(
- "pages.administration.classes.index.title"
- );
+ expect(breadcrumbs.at(0)?.text()).toEqual(
+ "pages.administration.index.title"
+ );
+ expect(breadcrumbs.at(1)?.text()).toEqual(
+ "pages.administration.classes.index.title"
+ );
+ });
});
- });
- describe("onMounted", () => {
- describe("when loading the page", () => {
- it("should load the classes", async () => {
- const { groupModule } = getWrapper();
+ describe("onMounted", () => {
+ describe("when loading the page", () => {
+ it("should load the classes", async () => {
+ const { groupModule } = setup();
- await Vue.nextTick();
+ await nextTick();
- expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ });
});
});
});
describe("when there are classes or groups to display", () => {
- const setup = () => {
- const classes: ClassInfo[] = [
- classInfoFactory.build(),
- classInfoFactory.build({
- externalSourceName: undefined,
- type: ClassRootType.Class,
- isUpgradable: true,
- }),
- ];
-
- const { wrapper, groupModule } = getWrapper({
- getClasses: classes,
- });
+ describe("classes", () => {
+ const setup = () => {
+ const classes = [
+ classInfoFactory.build(),
+ classInfoFactory.build({
+ externalSourceName: undefined,
+ type: ClassRootType.Class,
+ isUpgradable: true,
+ }),
+ ];
+
+ const { wrapper } = createWrapper({
+ getClasses: classes,
+ });
- return {
- classes,
- wrapper,
- groupModule,
+ return { wrapper, classes };
};
- };
- it("should display the entries in the table", async () => {
- const { classes, wrapper } = setup();
+ it("should display the entries in the table", async () => {
+ const { classes, wrapper } = setup();
- const table = wrapper.find('[data-testid="admin-class-table"]');
+ const table = wrapper.findComponent(
+ '[data-testid="admin-class-table"]'
+ );
- expect(table.props("items")).toEqual(classes);
+ expect(table.props("items")).toEqual(classes);
+ });
});
- });
- describe("onUpdateSortBy", () => {
- describe("when changing the sortBy", () => {
- const setup = () => {
- const sortBy = "externalSourceName";
+ describe("onUpdateSortBy", () => {
+ describe("when changing the sortBy", () => {
+ const setup = () => {
+ const sortBy = { key: "externalSourceName" };
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
- return {
- sortBy,
- wrapper,
- groupModule,
+ return {
+ sortBy,
+ wrapper,
+ groupModule,
+ };
};
- };
- it("should call store to change sort by", async () => {
- const { sortBy, wrapper, groupModule } = setup();
+ it("should call store to change sort by", async () => {
+ const { sortBy, wrapper, groupModule } = setup();
- wrapper
- .find('[data-testid="admin-class-table"]')
- .vm.$emit("update:sort-by", sortBy);
- await Vue.nextTick();
+ findTableComponen(wrapper).vm.$emit("update:sortBy", [sortBy]);
+ await nextTick();
- expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
- expect(groupModule.setSortBy).toHaveBeenCalledWith(sortBy);
+ expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ expect(groupModule.setSortBy).toHaveBeenCalledWith(sortBy.key);
+ });
});
});
- });
- describe("updateSortOrder", () => {
- describe("when changing the sort order", () => {
- const setup = () => {
- const sortOrder = true;
+ describe("updateSortOrder", () => {
+ describe("when changing the sort order", () => {
+ const setup = () => {
+ const sortBy = { key: "externalSourceName", order: "desc" };
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
- return {
- sortOrder,
- wrapper,
- groupModule,
+ return {
+ sortBy,
+ wrapper,
+ groupModule,
+ };
};
- };
- it("should call store to change sort order", async () => {
- const { sortOrder, wrapper, groupModule } = setup();
+ it("should call store to change sort order", async () => {
+ const { sortBy, wrapper, groupModule } = setup();
- wrapper
- .find('[data-testid="admin-class-table"]')
- .vm.$emit("update:sort-desc", sortOrder);
- await Vue.nextTick();
+ findTableComponen(wrapper).vm.$emit("update:sortBy", [sortBy]);
+ await nextTick();
- expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
- expect(groupModule.setSortOrder).toHaveBeenCalledWith(SortOrder.DESC);
+ expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ expect(groupModule.setSortOrder).toHaveBeenCalledWith(SortOrder.DESC);
+ });
});
});
- });
-
- describe("onUpdateItemsPerPage", () => {
- describe("when changing the number of items per page", () => {
- const setup = () => {
- const itemsPerPage = 20;
- const pagination: Pagination = {
- limit: 10,
- skip: 0,
- total: 30,
- };
+ describe("onUpdateItemsPerPage", () => {
+ describe("when changing the number of items per page", () => {
+ const setup = () => {
+ const itemsPerPage = 20;
- const { wrapper, groupModule } = getWrapper({
- getPagination: {
+ const pagination: Pagination = {
limit: 10,
skip: 0,
total: 30,
- },
- });
+ };
- return {
- itemsPerPage,
- pagination,
- wrapper,
- groupModule,
+ const { wrapper, groupModule } = createWrapper({
+ getPagination: {
+ limit: 10,
+ skip: 0,
+ total: 30,
+ },
+ });
+
+ return {
+ itemsPerPage,
+ pagination,
+ wrapper,
+ groupModule,
+ };
};
- };
- it("should call store to change the limit in pagination", async () => {
- const { itemsPerPage, wrapper, groupModule, pagination } = setup();
+ it("should call store to change the limit in pagination", async () => {
+ const { itemsPerPage, wrapper, groupModule, pagination } = setup();
- wrapper
- .find('[data-testid="admin-class-table"]')
- .vm.$emit("update:items-per-page", itemsPerPage);
- await Vue.nextTick();
+ findTableComponen(wrapper).vm.$emit(
+ "update:itemsPerPage",
+ itemsPerPage
+ );
+ await nextTick();
- expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
- expect(groupModule.setPagination).toHaveBeenCalledWith({
- ...pagination,
- limit: itemsPerPage,
+ expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ expect(groupModule.setPagination).toHaveBeenCalledWith({
+ ...pagination,
+ limit: itemsPerPage,
+ });
});
});
});
- });
- describe("onUpdateCurrentPage", () => {
- describe("when changing the table page", () => {
- const setup = () => {
- const page = 2;
- const pagination: Pagination = {
- limit: 10,
- skip: 0,
- total: 30,
- };
+ describe("onUpdateCurrentPage", () => {
+ describe("when changing the table page", () => {
+ const setup = () => {
+ const page = 2;
+ const pagination: Pagination = {
+ limit: 10,
+ skip: 0,
+ total: 30,
+ };
- pagination.skip = (page - 1) * pagination.limit;
+ pagination.skip = (page - 1) * pagination.limit;
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
- return {
- page,
- pagination,
- wrapper,
- groupModule,
+ return {
+ page,
+ pagination,
+ wrapper,
+ groupModule,
+ };
};
- };
- it("should call store to update current page", async () => {
- const { page, wrapper, groupModule, pagination } = setup();
+ it("should call store to update current page", async () => {
+ const { page, wrapper, groupModule, pagination } = setup();
- wrapper
- .find('[data-testid="admin-class-table"]')
- .vm.$emit("update:page", page);
- await Vue.nextTick();
+ findTableComponen(wrapper).vm.$emit("update:page", page);
+ await nextTick();
- expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
- expect(groupModule.setPage).toHaveBeenCalledWith(page);
- expect(groupModule.setPagination).toHaveBeenCalledWith(pagination);
+ expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+ expect(groupModule.setPage).toHaveBeenCalledWith(page);
+ expect(groupModule.setPagination).toHaveBeenCalledWith(pagination);
+ });
});
});
});
describe("action buttons", () => {
describe("when legacy classes are available", () => {
- const setup = () => {
- const { wrapper } = getWrapper();
-
- return {
- wrapper,
- };
- };
+ const setup = () => createWrapper();
it("should render 4 buttons", () => {
const { wrapper } = setup();
@@ -329,16 +350,11 @@ describe("ClassOverview", () => {
});
describe("when no classes are available", () => {
- const setup = () => {
- const { wrapper } = getWrapper({
+ const setup = () =>
+ createWrapper({
getClasses: [classInfoFactory.build()],
});
- return {
- wrapper,
- };
- };
-
it("should render only manage button which refers to members page", () => {
const { wrapper } = setup();
@@ -366,7 +382,7 @@ describe("ClassOverview", () => {
describe("when clicking on the manage class button", () => {
describe("when group class root type is class", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
const classId: string = groupModule.getClasses[1].id;
@@ -394,7 +410,7 @@ describe("ClassOverview", () => {
describe("when class root type is group", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
const classId: string = groupModule.getClasses[0].id;
@@ -407,21 +423,19 @@ describe("ClassOverview", () => {
it("should redirect to group class members page", async () => {
const { wrapper } = setup();
- const manageBtn = wrapper.find(
+ const manageBtn = wrapper.findComponent(
'[data-testid="class-table-members-manage-btn"]'
);
- const routerLink = manageBtn.findComponent({ name: "router-link" });
-
expect(manageBtn.attributes().href).toBeUndefined();
- expect(routerLink.exists()).toBeTruthy();
+ expect(manageBtn.props("to")).toBeDefined();
});
});
});
describe("when clicking on the edit class button", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
const classId: string = groupModule.getClasses[1].id;
@@ -445,7 +459,7 @@ describe("ClassOverview", () => {
describe("when class is upgradable", () => {
describe("when clicking on the upgrade class button", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
const classId: string = groupModule.getClasses[1].id;
@@ -471,7 +485,7 @@ describe("ClassOverview", () => {
describe("when class is not upgradable", () => {
const setup = () => {
- const { wrapper } = getWrapper({
+ const { wrapper } = createWrapper({
getClasses: [
classInfoFactory.build({
externalSourceName: undefined,
@@ -489,7 +503,7 @@ describe("ClassOverview", () => {
it("should display the upgrade button as disabled", () => {
const { wrapper } = setup();
- const successorBtn = wrapper.find(
+ const successorBtn = wrapper.findComponent(
'[data-testid="class-table-successor-btn"]'
);
@@ -499,7 +513,7 @@ describe("ClassOverview", () => {
describe("when clicking on the delete class button", () => {
const setup = () => {
- const { wrapper } = getWrapper();
+ const { wrapper } = createWrapper();
return {
wrapper,
@@ -512,16 +526,16 @@ describe("ClassOverview", () => {
await wrapper
.find('[data-testid="class-table-delete-btn"]')
.trigger("click");
+ await nextTick();
- const dialog = wrapper.find('[data-testid="delete-dialog"]');
-
- expect(dialog.props("isOpen")).toBeTruthy();
+ const dialog = wrapper.findComponent({ name: "v-custom-dialog" });
+ expect(dialog.vm.isOpen).toBe(true);
});
});
describe("when delete dialog is open", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, groupModule } = createWrapper();
return {
wrapper,
@@ -537,9 +551,11 @@ describe("ClassOverview", () => {
.find('[data-testid="class-table-delete-btn"]')
.trigger("click");
- const dialog = wrapper.find('[data-testid="delete-dialog"]');
+ const dialog = wrapper.findComponent({ name: "v-custom-dialog" });
- await dialog.find('[data-testid="dialog-cancel"').trigger("click");
+ await dialog
+ .findComponent('[data-testid="dialog-cancel"')
+ .trigger("click");
expect(groupModule.deleteClass).not.toHaveBeenCalled();
});
@@ -553,9 +569,11 @@ describe("ClassOverview", () => {
.find('[data-testid="class-table-delete-btn"]')
.trigger("click");
- const dialog = wrapper.find('[data-testid="delete-dialog"]');
+ const dialog = wrapper.findComponent({ name: "v-custom-dialog" });
- await dialog.find('[data-testid="dialog-confirm"').trigger("click");
+ await dialog
+ .findComponent('[data-testid="dialog-confirm"')
+ .trigger("click");
expect(groupModule.deleteClass).toHaveBeenCalled();
});
@@ -566,7 +584,7 @@ describe("ClassOverview", () => {
describe("tabs", () => {
describe("when loading page", () => {
const setup = () => {
- const { wrapper } = getWrapper();
+ const { wrapper } = createWrapper();
return {
wrapper,
@@ -600,28 +618,30 @@ describe("ClassOverview", () => {
'[data-testid="admin-class-current-year-tab"]'
);
- expect(currentYearTab.classes()).toContain("v-tab--active");
+ expect(currentYearTab.classes()).toContain("v-tab--selected");
});
});
describe("when clicking on a tab", () => {
const setup = () => {
- const { wrapper, groupModule } = getWrapper();
+ const { wrapper, route, router, groupModule } = createWrapper();
return {
wrapper,
+ route,
+ router,
groupModule,
};
};
it("should replace the route to the given tab ", async () => {
- const { wrapper } = setup();
+ const { wrapper, router } = setup();
await wrapper
.find('[data-testid="admin-class-next-year-tab"]')
.trigger("click");
- expect($router.replace).toHaveBeenCalledWith({
+ expect(router.replace).toHaveBeenCalledWith({
query: { tab: "next" },
});
});
@@ -629,7 +649,8 @@ describe("ClassOverview", () => {
describe("when clicking on next year tab", () => {
const setup = () => {
- const { wrapper, groupModule, calledFrom } = getWrapper(
+ const { wrapper, groupModule, calledFrom } = createWrapper(
+ {},
{},
{ tab: "next" }
);
@@ -657,7 +678,8 @@ describe("ClassOverview", () => {
describe("when clicking on previous years tab", () => {
const setup = () => {
- const { wrapper, groupModule, calledFrom } = getWrapper(
+ const { wrapper, groupModule, calledFrom } = createWrapper(
+ {},
{},
{ tab: "archive" }
);
@@ -685,7 +707,7 @@ describe("ClassOverview", () => {
describe("when clicking on current year tab", () => {
const setup = () => {
- const { wrapper, groupModule, calledFrom } = getWrapper();
+ const { wrapper, groupModule, calledFrom } = createWrapper();
return {
wrapper,
@@ -716,7 +738,7 @@ describe("ClassOverview", () => {
describe("addClass", () => {
describe("when clicking on add class buttton", () => {
const setup = () => {
- const { wrapper } = getWrapper();
+ const { wrapper } = createWrapper();
return {
wrapper,
diff --git a/src/pages/administration/ClassOverview.page.vue b/src/pages/administration/ClassOverview.page.vue
index b8cc6c3539..a2b1296f31 100644
--- a/src/pages/administration/ClassOverview.page.vue
+++ b/src/pages/administration/ClassOverview.page.vue
@@ -5,38 +5,32 @@
:full-width="true"
data-testid="admin-class-title"
>
-
-
+
+
{{ nextYear }}
-
+
{{ currentYear }}
-
+
{{ t("pages.administration.classes.label.archive") }}
-
@@ -45,9 +39,9 @@
:title="t('pages.administration.classes.manage')"
:aria-label="t('pages.administration.classes.manage')"
data-testid="legacy-class-table-manage-btn"
- outlined
+ variant="outlined"
color="secondary"
- small
+ size="small"
:href="`/administration/classes/${item.id}/manage`"
class="mx-1 px-1"
min-width="0"
@@ -58,9 +52,9 @@
:title="t('pages.administration.classes.edit')"
:aria-label="t('pages.administration.classes.edit')"
data-testid="class-table-edit-btn"
- outlined
+ variant="outlined"
color="secondary"
- small
+ size="small"
:href="`/administration/classes/${item.id}/edit`"
class="mx-1 px-1"
min-width="0"
@@ -71,9 +65,9 @@
:title="$t('pages.administration.classes.delete')"
:aria-label="$t('pages.administration.classes.delete')"
data-testid="class-table-delete-btn"
- outlined
+ variant="outlined"
color="secondary"
- small
+ size="small"
@click="onClickDeleteIcon(item)"
class="mx-1 px-1"
min-width="0"
@@ -85,9 +79,9 @@
:aria-label="t('pages.administration.classes.createSuccessor')"
:title="t('pages.administration.classes.createSuccessor')"
data-testid="class-table-successor-btn"
- outlined
+ variant="outlined"
color="secondary"
- small
+ size="small"
:href="`/administration/classes/${item.id}/createSuccessor`"
class="mx-1 px-1"
min-width="0"
@@ -100,9 +94,9 @@
:title="t('pages.administration.classes.manage')"
:aria-label="t('pages.administration.classes.manage')"
data-testid="class-table-members-manage-btn"
- outlined
+ variant="outlined"
color="secondary"
- small
+ size="small"
:to="{
name: 'administration-groups-classes-members',
params: { groupId: item.id },
@@ -114,20 +108,21 @@
-
-
+
-
@@ -164,8 +159,17 @@
+
diff --git a/src/pages/administration/StudentConsent.page.vue b/src/pages/administration/StudentConsent.page.vue
index eb58885fff..0cf431d41b 100644
--- a/src/pages/administration/StudentConsent.page.vue
+++ b/src/pages/administration/StudentConsent.page.vue
@@ -1,12 +1,13 @@
-
-
+
+
@@ -24,7 +25,7 @@
$t("pages.administration.students.consent.handout")
}}
-
+
-
-
-
-
-
-
+ this.shareCourse(),
@@ -422,7 +372,7 @@ export default defineComponent({
mounted() {
window.addEventListener("pageshow", this.setActiveTabIfPageCached);
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener("pageshow", this.setActiveTabIfPageCached);
},
methods: {
@@ -442,36 +392,14 @@ export default defineComponent({
this.tabIndex = index >= 0 ? index : 0;
},
- fabClick() {
- if (this.currentTab.name === "learn-content") {
- this.importDialog.isOpen = true;
- }
- },
async shareCourse() {
- if (envConfigModule.getEnv.FEATURE_COURSE_SHARE_NEW) {
+ if (envConfigModule.getEnv.FEATURE_COURSE_SHARE) {
this.shareModule.startShareFlow({
id: this.courseId,
type: ShareTokenBodyParamsParentTypeEnum.Courses,
});
- } else if (envConfigModule.getEnv.FEATURE_COURSE_SHARE) {
- await roomModule.createCourseShareToken(this.courseId);
- this.dialog.courseShareToken = roomModule.getCourseShareToken;
- this.dialog.model = "share";
- this.dialog.header = this.$t("pages.room.modal.course.share.header");
- this.dialog.text = this.$t("pages.room.modal.course.share.text");
- this.dialog.inputText = this.dialog.courseShareToken;
- this.dialog.subText = this.$t("pages.room.modal.course.share.subText");
- this.dialog.qrUrl = `${window.location.origin}/courses?import=${this.dialog.courseShareToken}`;
- this.dialog.isOpen = true;
}
},
- closeDialog() {
- this.dialog.model = "";
- this.dialog.header = "";
- this.dialog.text = "";
- this.dialog.inputText = "";
- this.dialog.subText = "";
- },
async onCopyRoom(courseId) {
const loadingText = this.$t(
"components.molecules.copyResult.title.loading"
@@ -519,20 +447,20 @@ export default defineComponent({
diff --git a/src/pages/rooms/RoomOverview.page.vue b/src/pages/rooms/RoomOverview.page.vue
index f3722305ba..f0a9cb6579 100644
--- a/src/pages/rooms/RoomOverview.page.vue
+++ b/src/pages/rooms/RoomOverview.page.vue
@@ -4,7 +4,7 @@
:has-rooms="hasCurrentRooms"
:has-import-token="!!importToken"
>
-
+
@@ -21,26 +21,28 @@
-
+
-
+
+ {{ $t("common.words.tasks") }}
-
-
-
-
-
-
- {{ tabOneHeader.icon }}
- {{
- tabOneHeader.title
- }}
-
-
- {{ tabTwoHeader.icon }}
- {{ tabTwoHeader.title }}
-
-
- {{
- tabThreeHeader.icon
- }}
- {{
- tabThreeHeader.title
- }}
-
-
-
+
+ {{ $t("common.words.tasks") }}
+
+
-
+
+
+
+ {{ tabOneHeader.icon }}
+
+
+ {{ tabOneHeader.title }}
+
+
+
+
+ {{ tabTwoHeader.icon }}
+
+
+ {{ tabTwoHeader.title }}
+
+
+
+ {{ tabThreeHeader.icon }}
+
+
+ {{ tabThreeHeader.title }}
+
+
+
+
-
diff --git a/src/components/templates/TasksDashboardStudent.unit.ts b/src/components/templates/TasksDashboardStudent.unit.ts
index da9e5ae415..cb7f576f6b 100644
--- a/src/components/templates/TasksDashboardStudent.unit.ts
+++ b/src/components/templates/TasksDashboardStudent.unit.ts
@@ -5,14 +5,16 @@ import NotifierModule from "@/store/notifier";
import TasksModule from "@/store/tasks";
import { OpenTasksForStudent } from "@/store/types/tasks";
import { createModuleMocks } from "@/utils/mock-store-module";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import mocks from "@@/tests/test-utils/mockDataTasks";
import vCustomEmptyState from "@/components/molecules/vCustomEmptyState.vue";
import TasksList from "@/components/organisms/TasksList.vue";
import TasksDashboardStudent from "@/components/templates/TasksDashboardStudent.vue";
-import { mount, MountOptions, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { mount } from "@vue/test-utils";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const { overDueTasks, openTasksWithoutDueDate, openTasksWithDueDate } = mocks;
@@ -22,22 +24,21 @@ describe("@/components/templates/TasksDashboardStudent", () => {
let finishedTasksModuleMock: FinishedTasksModule;
let loadingStateModuleMock: LoadingStateModule;
let notifierModuleMock: NotifierModule;
- let wrapper: Wrapper;
-
- const mountComponent = (attrs = {}) => {
- const wrapper = mount(TasksDashboardStudent as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- tasksModule: tasksModuleMock,
- copyModule: copyModuleMock,
- finishedTasksModule: finishedTasksModuleMock,
- loadingStateModule: loadingStateModuleMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
+
+ const mountComponent = (options = {}) => {
+ const wrapper = mount(TasksDashboardStudent, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+
+ provide: {
+ tasksModule: tasksModuleMock,
+ copyModule: copyModuleMock,
+ finishedTasksModule: finishedTasksModuleMock,
+ loadingStateModule: loadingStateModuleMock,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
+ },
},
- ...attrs,
+ ...options,
});
return wrapper;
@@ -76,8 +77,8 @@ describe("@/components/templates/TasksDashboardStudent", () => {
});
it("Should render tasks list component", () => {
- wrapper = mountComponent({
- propsData: {
+ const wrapper = mountComponent({
+ props: {
emptyState,
tabRoutes,
},
@@ -93,8 +94,8 @@ describe("@/components/templates/TasksDashboardStudent", () => {
completedTasksForStudentIsEmpty: true,
});
- wrapper = mountComponent({
- propsData: {
+ const wrapper = mountComponent({
+ props: {
emptyState,
tabRoutes,
},
@@ -104,15 +105,15 @@ describe("@/components/templates/TasksDashboardStudent", () => {
expect(emptyStateComponent.exists()).toBe(true);
});
- it("Should update store when tab changes", async () => {
- wrapper = mountComponent({
- propsData: {
+ it("Should update store when tab changes", () => {
+ const wrapper = mountComponent({
+ props: {
emptyState,
tabRoutes,
},
});
- await wrapper.setData({ tab: tabRoutes[0] });
+ wrapper.vm.tab = tabRoutes[0];
expect(tasksModuleMock.setActiveTab).toHaveBeenCalled();
});
diff --git a/src/components/templates/TasksDashboardStudent.vue b/src/components/templates/TasksDashboardStudent.vue
index cc064296c4..8d0d7ff822 100644
--- a/src/components/templates/TasksDashboardStudent.vue
+++ b/src/components/templates/TasksDashboardStudent.vue
@@ -1,7 +1,7 @@
-
-
+
+
-
+
+
-
+
+
-
+
+
diff --git a/src/components/templates/TasksDashboardTeacher.unit.ts b/src/components/templates/TasksDashboardTeacher.unit.ts
index dedf82a084..ebe37d0486 100644
--- a/src/components/templates/TasksDashboardTeacher.unit.ts
+++ b/src/components/templates/TasksDashboardTeacher.unit.ts
@@ -5,20 +5,18 @@ import NotifierModule from "@/store/notifier";
import TasksModule from "@/store/tasks";
import { OpenTasksForTeacher } from "@/store/types/tasks";
import { createModuleMocks } from "@/utils/mock-store-module";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import mocks from "@@/tests/test-utils/mockDataTasks";
import vCustomEmptyState from "@/components/molecules/vCustomEmptyState.vue";
import TasksList from "@/components/organisms/TasksList.vue";
-import { mount, MountOptions, Wrapper } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
import TasksDashboardTeacher from "./TasksDashboardTeacher.vue";
-import Vue from "vue";
import ShareModule from "@/store/share";
-import {
- ENV_CONFIG_MODULE_KEY,
- I18N_KEY,
- NOTIFIER_MODULE_KEY,
-} from "@/utils/inject";
+import { ENV_CONFIG_MODULE_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
import EnvConfigModule from "../../store/env-config";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
const { overDueTasksTeacher, dueDateTasksTeacher, noDueDateTasksTeacher } =
mocks;
@@ -33,26 +31,23 @@ describe("@/components/templates/TasksDashboardTeacher", () => {
let notifierModuleMock: NotifierModule;
let shareModuleMock: ShareModule;
- let wrapper: Wrapper;
-
const mountComponent = (attrs = {}) => {
const envConfigModuleMock = createModuleMocks(EnvConfigModule, {
getCtlToolsTabEnabled: false,
});
- const wrapper = mount(TasksDashboardTeacher as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- tasksModule: tasksModuleMock,
- copyModule: copyModuleMock,
- finishedTasksModule: finishedTasksModuleMock,
- loadingStateModule: loadingStateModuleMock,
- [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
- shareModule: shareModuleMock,
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
- [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
+ const wrapper = mount(TasksDashboardTeacher, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ tasksModule: tasksModuleMock,
+ copyModule: copyModuleMock,
+ finishedTasksModule: finishedTasksModuleMock,
+ loadingStateModule: loadingStateModuleMock,
+ [NOTIFIER_MODULE_KEY.valueOf()]: notifierModuleMock,
+ shareModule: shareModuleMock,
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
+ },
},
...attrs,
});
@@ -89,11 +84,13 @@ describe("@/components/templates/TasksDashboardTeacher", () => {
copyModuleMock = createModuleMocks(CopyModule);
loadingStateModuleMock = createModuleMocks(LoadingStateModule);
notifierModuleMock = createModuleMocks(NotifierModule);
- shareModuleMock = createModuleMocks(ShareModule);
+ shareModuleMock = createModuleMocks(ShareModule, {
+ getIsShareModalOpen: false,
+ });
});
it("Should render tasks list component, with second panel expanded per default", () => {
- wrapper = mountComponent({
+ const wrapper = mountComponent({
propsData: {
emptyState,
tabRoutes,
@@ -103,11 +100,11 @@ describe("@/components/templates/TasksDashboardTeacher", () => {
const expansionPanels = wrapper.findAll(".v-expansion-panel");
expect(wrapper.findComponent(TasksList).exists()).toBe(true);
- expect(expansionPanels.exists()).toBe(true);
- expect(expansionPanels.at(0).classes()).not.toContain(
+ expect(expansionPanels.length).toBeGreaterThan(0);
+ expect(expansionPanels.at(0)?.classes()).not.toContain(
"v-expansion-panel--active"
);
- expect(expansionPanels.at(1).classes()).toContain(
+ expect(expansionPanels.at(1)?.classes()).toContain(
"v-expansion-panel--active"
);
});
@@ -119,7 +116,7 @@ describe("@/components/templates/TasksDashboardTeacher", () => {
draftsForTeacherIsEmpty: true,
});
- wrapper = mountComponent({
+ const wrapper = mountComponent({
propsData: {
emptyState,
tabRoutes,
@@ -131,20 +128,20 @@ describe("@/components/templates/TasksDashboardTeacher", () => {
});
it("Should update store when tab changes", async () => {
- wrapper = mountComponent({
+ const wrapper = mountComponent({
propsData: {
emptyState,
tabRoutes,
},
});
- await wrapper.setData({ tab: tabRoutes[1] });
+ wrapper.vm.tab = tabRoutes[1];
expect(tasksModuleMock.setActiveTab).toHaveBeenCalled();
});
it("Should handle copy-task event", async () => {
- wrapper = mountComponent({
+ const wrapper = mountComponent({
propsData: {
emptyState,
tabRoutes,
diff --git a/src/components/templates/TasksDashboardTeacher.vue b/src/components/templates/TasksDashboardTeacher.vue
index eae5b46013..29f023fdce 100644
--- a/src/components/templates/TasksDashboardTeacher.vue
+++ b/src/components/templates/TasksDashboardTeacher.vue
@@ -1,7 +1,7 @@
-
-
+
+
-
+
+
-
+
+
-
+
+
@@ -86,17 +86,17 @@ import TasksList from "@/components/organisms/TasksList";
import ShareModal from "@/components/share/ShareModal.vue";
import { ShareTokenBodyParamsParentTypeEnum } from "@/serverApi/v3";
import { envConfigModule } from "@/store";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
import { defineComponent } from "vue";
import { useCopy } from "../../composables/copy";
import { useLoadingState } from "../../composables/loadingState";
+import { useI18n } from "vue-i18n";
// eslint-disable-next-line vue/require-direct-export
export default defineComponent({
setup() {
- const i18n = injectStrict(I18N_KEY);
+ const { t } = useI18n();
const { isLoadingDialogOpen } = useLoadingState(
- i18n.t("components.molecules.copyResult.title.loading")
+ t("components.molecules.copyResult.title.loading")
);
const { copy } = useCopy(isLoadingDialogOpen);
diff --git a/src/components/templates/default-wireframe.types.ts b/src/components/templates/default-wireframe.types.ts
index 25f462aa96..0373a571d9 100644
--- a/src/components/templates/default-wireframe.types.ts
+++ b/src/components/templates/default-wireframe.types.ts
@@ -1,5 +1,5 @@
export type Breadcrumb = {
- text: string;
+ title: string;
href?: string;
to?: string;
disabled?: boolean;
diff --git a/src/components/topbar/HelpDropdown.unit.ts b/src/components/topbar/HelpDropdown.unit.ts
index c41904cd69..c8a68aadaf 100644
--- a/src/components/topbar/HelpDropdown.unit.ts
+++ b/src/components/topbar/HelpDropdown.unit.ts
@@ -1,15 +1,12 @@
-import Vue from "vue";
-import { MountOptions, mount } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { I18N_KEY } from "@/utils/inject";
+import { mount } from "@vue/test-utils";
import HelpDropdown from "./HelpDropdown.vue";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
describe("@/components/topbar/HelpDropdown", () => {
it("shows a list of menu items", () => {
- const wrapper = mount(HelpDropdown as MountOptions, {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY as symbol]: { t: (key: string) => key },
+ const wrapper = mount(HelpDropdown, {
+ global: {
+ plugins: [createTestingI18n()],
},
});
diff --git a/src/components/topbar/HelpDropdown.vue b/src/components/topbar/HelpDropdown.vue
index d30c03b253..3b9a2e8499 100644
--- a/src/components/topbar/HelpDropdown.vue
+++ b/src/components/topbar/HelpDropdown.vue
@@ -1,74 +1,58 @@
-
+
-
- {{ item.icon }}
-
-
-
- {{ item.label }}
-
-
+ {{
+ $t(item.label)
+ }}
-
-
diff --git a/src/components/topbar/TheTopBar.unit.ts b/src/components/topbar/TheTopBar.unit.ts
index e84a7ce419..872ea04567 100644
--- a/src/components/topbar/TheTopBar.unit.ts
+++ b/src/components/topbar/TheTopBar.unit.ts
@@ -1,17 +1,21 @@
-import Vue from "vue";
import { createModuleMocks } from "@/utils/mock-store-module";
import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts";
-import { MountOptions, mount, Wrapper } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mount } from "@vue/test-utils";
import AuthModule from "@/store/auth";
import StatusAlertsModule from "@/store/status-alerts";
import {
- I18N_KEY,
AUTH_MODULE_KEY,
+ ENV_CONFIG_MODULE_KEY,
STATUS_ALERTS_MODULE_KEY,
} from "@/utils/inject";
import TheTopBar from "./TheTopBar.vue";
import { StatusAlert } from "@/store/types/status-alert";
+import BaseQrCode from "@/components/base/BaseQrCode.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import EnvConfigModule from "@/store/env-config";
const getWrapper = (props?: object, statusAlerts: StatusAlert[] = []) => {
const authModule = createModuleMocks(AuthModule, {
@@ -25,26 +29,30 @@ const getWrapper = (props?: object, statusAlerts: StatusAlert[] = []) => {
getStatusAlerts: statusAlerts,
});
- return mount(TheTopBar as MountOptions, {
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- [I18N_KEY as symbol]: { t: (key: string) => key },
- [AUTH_MODULE_KEY.valueOf()]: authModule,
- [STATUS_ALERTS_MODULE_KEY.valueOf()]: statusAlertsModule,
+ const envConfigModule = createModuleMocks(EnvConfigModule, {});
+
+ const wrapper = mount(TheTopBar, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [AUTH_MODULE_KEY.valueOf()]: authModule,
+ [STATUS_ALERTS_MODULE_KEY.valueOf()]: statusAlertsModule,
+ [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+ },
+ components: {
+ "base-qr-code": BaseQrCode,
+ },
},
- propsData: props,
- attachTo: document.body,
+ props,
});
+
+ return wrapper;
};
describe("@/components/topbar/TheTopBar", () => {
describe("when user is logged in with no status alerts", () => {
- let wrapper: Wrapper;
-
- beforeEach(() => {
- wrapper = getWrapper({
+ const setup = () => {
+ const wrapper = getWrapper({
user: {
firstName: "Arthur",
lastName: "Dent",
@@ -54,9 +62,12 @@ describe("@/components/topbar/TheTopBar", () => {
name: "dummy school",
},
});
- });
+
+ return { wrapper };
+ };
it("should render action buttons correctly", () => {
+ const { wrapper } = setup();
expect(wrapper.find("[data-testid='top-menu-btn']").exists()).toBe(true);
expect(wrapper.find("[data-testid='status-alerts-icon']").exists()).toBe(
false
@@ -69,6 +80,7 @@ describe("@/components/topbar/TheTopBar", () => {
});
it("should not render status alert icon", () => {
+ const { wrapper } = setup();
expect(wrapper.find("[data-testid='status-alerts-icon']").exists()).toBe(
false
);
@@ -76,7 +88,7 @@ describe("@/components/topbar/TheTopBar", () => {
});
describe("when status alerts exist", () => {
- it("should render status alerts icon", async () => {
+ const setup = () => {
const wrapper = getWrapper(
{
user: {
@@ -90,8 +102,12 @@ describe("@/components/topbar/TheTopBar", () => {
},
mockStatusAlerts
);
- await wrapper.vm.$nextTick();
+ return { wrapper };
+ };
+
+ it("should render status alerts icon", async () => {
+ const { wrapper } = setup();
expect(
wrapper.findAll('[data-testid="status-alerts-icon"]')
).toHaveLength(1);
@@ -101,12 +117,18 @@ describe("@/components/topbar/TheTopBar", () => {
});
});
- describe("when enabling/disabling fullscreen mode", () => {
- it("should emit fullscreen event when enabling", async () => {
+ describe("when fullscreen mode is disabled", () => {
+ const setup = () => {
const wrapper = getWrapper({
fullscreenMode: false,
});
+ return { wrapper };
+ };
+
+ it("should emit fullscreen event", async () => {
+ const { wrapper } = setup();
+
const expandBtn = wrapper.find('[data-testid="fullscreen-btn"]');
expect(expandBtn.exists()).toBe(true);
@@ -114,16 +136,23 @@ describe("@/components/topbar/TheTopBar", () => {
expect(wrapper.emitted("action")).toBeTruthy();
expect(wrapper.emitted("action")).toHaveLength(1);
- const action = wrapper.emitted("action") as any[][];
- expect(action[0]).toStrictEqual(["fullscreen"]);
+ expect(wrapper.emitted("action")).toStrictEqual([["fullscreen"]]);
});
+ });
- it("should emit fullcreen event", async () => {
+ describe("when fullscreen mode is enabled", () => {
+ const setup = () => {
const wrapper = getWrapper({
fullscreenMode: true,
});
+ return { wrapper };
+ };
+
+ it("should emit fullcreen event", async () => {
+ const { wrapper } = setup();
+
const collapseBtn = wrapper.find(".fullscreen-button-active");
expect(collapseBtn.exists()).toBe(true);
@@ -131,37 +160,41 @@ describe("@/components/topbar/TheTopBar", () => {
expect(wrapper.emitted("action")).toBeTruthy();
expect(wrapper.emitted("action")).toHaveLength(1);
- const action = wrapper.emitted("action") as any[][];
- expect(action[0]).toStrictEqual(["fullscreen"]);
+ expect(wrapper.emitted("action")).toStrictEqual([["fullscreen"]]);
});
});
- it("should emit logout event", async () => {
- const wrapper = getWrapper({
- user: {
- firstName: "Arthur",
- lastName: "Dent",
- roles: [{ name: "administrator" }],
- },
- school: {
- name: "dummy school",
- },
- });
- await wrapper.vm.$nextTick();
+ describe("when a user logs out", () => {
+ const setup = () => {
+ const wrapper = getWrapper({
+ user: {
+ firstName: "Arthur",
+ lastName: "Dent",
+ roles: [{ name: "administrator" }],
+ },
+ school: {
+ name: "dummy school",
+ },
+ });
- const initials = wrapper.find("[data-testid='initials']");
- await initials.trigger("click");
+ return { wrapper };
+ };
- const logoutBtn = wrapper.find("[data-testid='logout']");
- expect(wrapper.find("[data-testid='logout']").exists()).toBe(true);
+ it("should emit logout event", async () => {
+ const { wrapper } = setup();
+ const initials = wrapper.find("[data-testid='initials']");
+ await initials.trigger("click");
- await logoutBtn.trigger("click");
+ const logoutBtn = wrapper.find("[data-testid='logout']");
+ expect(wrapper.find("[data-testid='logout']").exists()).toBe(true);
- expect(wrapper.emitted("action")).toBeTruthy();
- expect(wrapper.emitted("action")).toHaveLength(1);
- const action = wrapper.emitted("action") as any[][];
+ await logoutBtn.trigger("click");
- expect(action[0]).toStrictEqual(["logout"]);
+ expect(wrapper.emitted("action")).toBeTruthy();
+ expect(wrapper.emitted("action")).toHaveLength(1);
+
+ expect(wrapper.emitted("action")).toStrictEqual([["logout"]]);
+ });
});
});
diff --git a/src/components/topbar/TheTopBar.vue b/src/components/topbar/TheTopBar.vue
index b02a8e561a..45a4ba6bbf 100644
--- a/src/components/topbar/TheTopBar.vue
+++ b/src/components/topbar/TheTopBar.vue
@@ -6,19 +6,18 @@
:class="{ 'expanded-menu': expandedMenu }"
>
- $mdiMenu
-
+ @click="sendEvent('expandMenu')"
+ />
diff --git a/src/components/ui-board/BoardMenuActionDelete.unit.ts b/src/components/ui-board/BoardMenuActionDelete.unit.ts
index 95045d2310..b3f8acd092 100644
--- a/src/components/ui-board/BoardMenuActionDelete.unit.ts
+++ b/src/components/ui-board/BoardMenuActionDelete.unit.ts
@@ -1,11 +1,14 @@
import { BoardMenuScope } from "@/components/ui-board/board-menu-scope";
import { MENU_SCOPE } from "@/components/ui-board/injection-tokens";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
import setupDeleteConfirmationComposableMock from "@@/tests/test-utils/composable-mocks/setupDeleteConfirmationComposableMock";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import { BoardMenuActionDelete } from "@ui-board";
import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue, { nextTick, ref } from "vue";
+import { mount } from "@vue/test-utils";
+import { nextTick, ref } from "vue";
import BoardMenuAction from "./BoardMenuAction.vue";
jest.mock("@ui-confirmation-dialog");
@@ -14,16 +17,17 @@ const mockedUseDeleteConfirmationDialog = jest.mocked(
);
describe("BoardMenuActionMoveDown Component", () => {
- let wrapper: Wrapper;
-
const setup = (options: { scope: BoardMenuScope }) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardMenuActionDelete as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [MENU_SCOPE as symbol]: options.scope,
+ const wrapper = mount(BoardMenuActionDelete, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [MENU_SCOPE as symbol]: options.scope,
+ },
},
});
+
+ return wrapper;
};
const askDeleteConfirmationMock = jest.fn();
@@ -39,20 +43,20 @@ describe("BoardMenuActionMoveDown Component", () => {
describe("when component is mounted", () => {
it("should render", () => {
- setup({ scope: "board" });
+ const wrapper = setup({ scope: "board" });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeTruthy();
});
it("should open askConfirmationDialog on click", () => {
- setup({ scope: "board" });
+ const wrapper = setup({ scope: "board" });
const action = wrapper.findComponent(BoardMenuAction);
action.vm.$emit("click");
expect(askDeleteConfirmationMock).toHaveBeenCalled();
});
- it("should emit click on taskConfirmationDialog confirmation", async () => {
- setup({ scope: "board" });
+ it("should emit click on taskConfirmationDialog confirmation (its a Promise)", async () => {
+ const wrapper = setup({ scope: "board" });
askDeleteConfirmationMock.mockResolvedValue(true);
const action = wrapper.findComponent(BoardMenuAction);
await action.vm.$emit("click");
@@ -60,13 +64,13 @@ describe("BoardMenuActionMoveDown Component", () => {
expect(wrapper.emitted("click")).toBeTruthy();
});
- it("should not emit click on taskConfirmationDialog cancel", async () => {
- setup({ scope: "board" });
+ it("should emit click on taskConfirmationDialog cancel, too (its a Promise)", async () => {
+ const wrapper = setup({ scope: "board" });
askDeleteConfirmationMock.mockResolvedValue(false);
const action = wrapper.findComponent(BoardMenuAction);
await action.vm.$emit("click");
await nextTick();
- expect(wrapper.emitted("click")).toBeFalsy();
+ expect(wrapper.emitted()).toBeTruthy();
});
});
});
diff --git a/src/components/ui-board/BoardMenuActionDelete.vue b/src/components/ui-board/BoardMenuActionDelete.vue
index f246b18dd9..338a5b6a25 100644
--- a/src/components/ui-board/BoardMenuActionDelete.vue
+++ b/src/components/ui-board/BoardMenuActionDelete.vue
@@ -40,18 +40,13 @@ export default defineComponent({
}
};
- const onClick = async (): Promise => {
- let shouldDelete = true;
- if (!props.skipDeleteConfirmation) {
- shouldDelete = await askDeleteConfirmation(
- props.name,
- getLanguageKeyTypeName(scope)
- );
- }
+ const onClick = (): void => {
+ const promise = askDeleteConfirmation(
+ props.name,
+ getLanguageKeyTypeName(scope)
+ );
- if (shouldDelete) {
- emit("click");
- }
+ emit("click", promise);
};
return {
diff --git a/src/components/ui-board/BoardMenuActionMoveDown.unit.ts b/src/components/ui-board/BoardMenuActionMoveDown.unit.ts
index fbc2fe9b68..08beb9ea7e 100644
--- a/src/components/ui-board/BoardMenuActionMoveDown.unit.ts
+++ b/src/components/ui-board/BoardMenuActionMoveDown.unit.ts
@@ -1,52 +1,64 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import { BoardMenuActionMoveDown } from "@ui-board";
import {
BOARD_CARD_HAS_MULTIPLE_ELEMENTS,
BOARD_CARD_IS_LAST_ELEMENT,
} from "@util-board";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
import BoardMenuAction from "./BoardMenuAction.vue";
describe("BoardMenuActionMoveDown Component", () => {
- let wrapper: Wrapper;
-
const setup = (options: {
isLastElement: boolean;
hasMultipleElements: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardMenuActionMoveDown as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [BOARD_CARD_HAS_MULTIPLE_ELEMENTS as symbol]:
- options.hasMultipleElements,
- [BOARD_CARD_IS_LAST_ELEMENT as symbol]: options.isLastElement,
+ const wrapper = mount(BoardMenuActionMoveDown, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [BOARD_CARD_HAS_MULTIPLE_ELEMENTS as symbol]:
+ options.hasMultipleElements,
+ [BOARD_CARD_IS_LAST_ELEMENT as symbol]: options.isLastElement,
+ },
},
});
+
+ return wrapper;
};
describe("when component is mounted", () => {
it("should render if element not in last position and a list of elements exists", () => {
- setup({ isLastElement: false, hasMultipleElements: true });
+ const wrapper = setup({
+ isLastElement: false,
+ hasMultipleElements: true,
+ });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeTruthy();
});
it("should not be rendered if element is in last position and a list of elements exists", () => {
- setup({ isLastElement: true, hasMultipleElements: true });
+ const wrapper = setup({ isLastElement: true, hasMultipleElements: true });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should not be rendered if element is the only element", () => {
- setup({ isLastElement: true, hasMultipleElements: false });
+ const wrapper = setup({
+ isLastElement: true,
+ hasMultipleElements: false,
+ });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should emit if is clicked", () => {
- setup({ isLastElement: false, hasMultipleElements: true });
+ const wrapper = setup({
+ isLastElement: false,
+ hasMultipleElements: true,
+ });
const listItemComponent = wrapper.findComponent(BoardMenuAction);
listItemComponent.vm.$emit("click", { preventDefault: jest.fn() });
diff --git a/src/components/ui-board/BoardMenuActionMoveLeft.unit.ts b/src/components/ui-board/BoardMenuActionMoveLeft.unit.ts
index 3eeed46996..0692fc8a7a 100644
--- a/src/components/ui-board/BoardMenuActionMoveLeft.unit.ts
+++ b/src/components/ui-board/BoardMenuActionMoveLeft.unit.ts
@@ -1,48 +1,51 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import { BoardMenuActionMoveLeft } from "@ui-board";
import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_FIRST_COLUMN } from "@util-board";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
import BoardMenuAction from "./BoardMenuAction.vue";
describe("BoardMenuActionMoveLeft Component", () => {
- let wrapper: Wrapper;
-
const setup = (options: {
isFirstColumn: boolean;
hasMultipleColumns: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardMenuActionMoveLeft as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [BOARD_HAS_MULTIPLE_COLUMNS as symbol]: options.hasMultipleColumns,
- [BOARD_IS_FIRST_COLUMN as symbol]: options.isFirstColumn,
+ const wrapper = mount(BoardMenuActionMoveLeft, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [BOARD_HAS_MULTIPLE_COLUMNS as symbol]: options.hasMultipleColumns,
+ [BOARD_IS_FIRST_COLUMN as symbol]: options.isFirstColumn,
+ },
},
});
+
+ return wrapper;
};
describe("when component is mounted", () => {
it("should render if element not in first position and several columns exist", () => {
- setup({ isFirstColumn: false, hasMultipleColumns: true });
+ const wrapper = setup({ isFirstColumn: false, hasMultipleColumns: true });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeTruthy();
});
it("should not be rendered if element is in first position and several columns exists", () => {
- setup({ isFirstColumn: true, hasMultipleColumns: true });
+ const wrapper = setup({ isFirstColumn: true, hasMultipleColumns: true });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should not be rendered if element is the only element", () => {
- setup({ isFirstColumn: true, hasMultipleColumns: false });
+ const wrapper = setup({ isFirstColumn: true, hasMultipleColumns: false });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should emit if is clicked", () => {
- setup({ isFirstColumn: false, hasMultipleColumns: true });
+ const wrapper = setup({ isFirstColumn: false, hasMultipleColumns: true });
const listItemComponent = wrapper.findComponent(BoardMenuAction);
listItemComponent.vm.$emit("click", { preventDefault: jest.fn() });
diff --git a/src/components/ui-board/BoardMenuActionMoveRight.unit.ts b/src/components/ui-board/BoardMenuActionMoveRight.unit.ts
index 4694d67447..0b1e5289e3 100644
--- a/src/components/ui-board/BoardMenuActionMoveRight.unit.ts
+++ b/src/components/ui-board/BoardMenuActionMoveRight.unit.ts
@@ -1,48 +1,51 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import { BoardMenuActionMoveRight } from "@ui-board";
import { BOARD_HAS_MULTIPLE_COLUMNS, BOARD_IS_LAST_COLUMN } from "@util-board";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import BoardMenuAction from "./BoardMenuAction.vue";
describe("BoardMenuActionMoveLeft Component", () => {
- let wrapper: Wrapper;
-
const setup = (options: {
isLastColumn: boolean;
hasMultipleColumns: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardMenuActionMoveRight as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [BOARD_HAS_MULTIPLE_COLUMNS as symbol]: options.hasMultipleColumns,
- [BOARD_IS_LAST_COLUMN as symbol]: options.isLastColumn,
+ const wrapper = shallowMount(BoardMenuActionMoveRight, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [BOARD_HAS_MULTIPLE_COLUMNS as symbol]: options.hasMultipleColumns,
+ [BOARD_IS_LAST_COLUMN as symbol]: options.isLastColumn,
+ },
},
});
+
+ return wrapper;
};
describe("when component is mounted", () => {
it("should render if element not in last position and several columns exist", () => {
- setup({ isLastColumn: false, hasMultipleColumns: true });
+ const wrapper = setup({ isLastColumn: false, hasMultipleColumns: true });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeTruthy();
});
it("should not be rendered if element is in last position and several columns exists", () => {
- setup({ isLastColumn: true, hasMultipleColumns: true });
+ const wrapper = setup({ isLastColumn: true, hasMultipleColumns: true });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should not be rendered if element is the only element", () => {
- setup({ isLastColumn: true, hasMultipleColumns: false });
+ const wrapper = setup({ isLastColumn: true, hasMultipleColumns: false });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should emit if is clicked", () => {
- setup({ isLastColumn: false, hasMultipleColumns: true });
+ const wrapper = setup({ isLastColumn: false, hasMultipleColumns: true });
const listItemComponent = wrapper.findComponent(BoardMenuAction);
listItemComponent.vm.$emit("click", { preventDefault: jest.fn() });
diff --git a/src/components/ui-board/BoardMenuActionMoveUp.unit.ts b/src/components/ui-board/BoardMenuActionMoveUp.unit.ts
index abe7ea3704..4528f24a82 100644
--- a/src/components/ui-board/BoardMenuActionMoveUp.unit.ts
+++ b/src/components/ui-board/BoardMenuActionMoveUp.unit.ts
@@ -1,51 +1,66 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import { BoardMenuActionMoveUp } from "@ui-board";
import {
BOARD_CARD_HAS_MULTIPLE_ELEMENTS,
BOARD_CARD_IS_FIRST_ELEMENT,
} from "@util-board";
-import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import { shallowMount } from "@vue/test-utils";
import BoardMenuAction from "./BoardMenuAction.vue";
describe("BoardMenuActionMoveUp Component", () => {
- let wrapper: Wrapper;
-
const setup = (options: {
isFirstElement: boolean;
hasMultipleElements: boolean;
}) => {
- document.body.setAttribute("data-app", "true");
- wrapper = shallowMount(BoardMenuActionMoveUp as MountOptions, {
- ...createComponentMocks({}),
- provide: {
- [BOARD_CARD_HAS_MULTIPLE_ELEMENTS as symbol]:
- options.hasMultipleElements,
- [BOARD_CARD_IS_FIRST_ELEMENT as symbol]: options.isFirstElement,
+ const wrapper = shallowMount(BoardMenuActionMoveUp, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ provide: {
+ [BOARD_CARD_HAS_MULTIPLE_ELEMENTS as symbol]:
+ options.hasMultipleElements,
+ [BOARD_CARD_IS_FIRST_ELEMENT as symbol]: options.isFirstElement,
+ },
},
});
+
+ return wrapper;
};
describe("when component is mounted", () => {
it("should render if element not in first position and a list of elements exists", () => {
- setup({ isFirstElement: false, hasMultipleElements: true });
+ const wrapper = setup({
+ isFirstElement: false,
+ hasMultipleElements: true,
+ });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeTruthy();
});
it("should not be rendered if element is in first position and a list of elements exists", () => {
- setup({ isFirstElement: true, hasMultipleElements: true });
+ const wrapper = setup({
+ isFirstElement: true,
+ hasMultipleElements: true,
+ });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should not be rendered if element is the only element", () => {
- setup({ isFirstElement: true, hasMultipleElements: false });
+ const wrapper = setup({
+ isFirstElement: true,
+ hasMultipleElements: false,
+ });
const action = wrapper.findComponent(BoardMenuAction);
expect(action.exists()).toBeFalsy();
});
it("should emit if is clicked", () => {
- setup({ isFirstElement: false, hasMultipleElements: true });
+ const wrapper = setup({
+ isFirstElement: false,
+ hasMultipleElements: true,
+ });
const listItemComponent = wrapper.findComponent(BoardMenuAction);
listItemComponent.vm.$emit("click", { preventDefault: jest.fn() });
diff --git a/src/components/ui-board/LineClamp.unit.ts b/src/components/ui-board/LineClamp.unit.ts
index ebaa4fdbce..6eba7eb0f4 100644
--- a/src/components/ui-board/LineClamp.unit.ts
+++ b/src/components/ui-board/LineClamp.unit.ts
@@ -1,13 +1,17 @@
-import { MountOptions, mount } from "@vue/test-utils";
-import Vue from "vue";
+import { mount } from "@vue/test-utils";
import LineClamp from "@/components/ui-board/LineClamp.vue";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
describe(LineClamp.name, () => {
const setup = (defaultSlotContent: string) => {
- document.body.setAttribute("data-app", "true");
-
const icon = "mdi-test";
- const wrapper = mount(LineClamp as MountOptions, {
+ const wrapper = mount(LineClamp, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
slots: {
default: defaultSlotContent,
},
diff --git a/src/components/ui-board/LineClamp.vue b/src/components/ui-board/LineClamp.vue
index 033e129ce7..a0e36064bd 100644
--- a/src/components/ui-board/LineClamp.vue
+++ b/src/components/ui-board/LineClamp.vue
@@ -1,15 +1,14 @@
-
- , {
- propsData: {
- icon: icon,
- },
- });
-
- return {
- wrapper,
- icon,
- };
- };
-
- it("renders correctly", () => {
- const { wrapper, icon } = setup();
-
- expect(wrapper.text()).toBe(icon);
- });
-});
diff --git a/src/components/ui-board/content-element/ContentElementTitleIcon.vue b/src/components/ui-board/content-element/ContentElementTitleIcon.vue
deleted file mode 100644
index 5a83f62ec1..0000000000
--- a/src/components/ui-board/content-element/ContentElementTitleIcon.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-
- {{
- icon
- }}
-
-
-
diff --git a/src/components/ui-board/injection-tokens.ts b/src/components/ui-board/injection-tokens.ts
index cd2d1a8758..9dc61edd34 100644
--- a/src/components/ui-board/injection-tokens.ts
+++ b/src/components/ui-board/injection-tokens.ts
@@ -1 +1,4 @@
-export const MENU_SCOPE = Symbol("MENU_SCOPE");
+import { InjectionKey } from "vue";
+import { BoardMenuScope } from "./board-menu-scope";
+
+export const MENU_SCOPE: InjectionKey = Symbol("MENU_SCOPE");
diff --git a/src/components/ui-color-overlay/ColorOverlay.unit.ts b/src/components/ui-color-overlay/ColorOverlay.unit.ts
deleted file mode 100644
index 57e9fd72f6..0000000000
--- a/src/components/ui-color-overlay/ColorOverlay.unit.ts
+++ /dev/null
@@ -1,382 +0,0 @@
-import { ColorOverlay } from "@ui-color-overlay";
-import { shallowMount } from "@vue/test-utils";
-import { nextTick } from "vue";
-
-describe("ColorOverlay", () => {
- const setup = (props: {
- isOverlayDisabled: boolean;
- color?: string;
- opacity?: number;
- }) => {
- document.body.setAttribute("data-app", "true");
-
- const slotContent = ", {
- ...createComponentMocks({ i18n: true }),
- provide: {
- [I18N_KEY.valueOf()]: { t: (key: string) => key },
- },
- propsData: {
+ const wrapper = shallowMount(DeleteConfirmation, {
+ global: { plugins: [createTestingI18n()] },
+ props: {
isDeleteModalOpen: options?.isDeleteModalOpen ?? true,
title: options.title ?? "title",
typeName: options.typeName ?? "card",
diff --git a/src/components/ui-confirmation-dialog/ConfirmationDialog.vue b/src/components/ui-confirmation-dialog/ConfirmationDialog.vue
index d7aa52deb8..af96bb7e4a 100644
--- a/src/components/ui-confirmation-dialog/ConfirmationDialog.vue
+++ b/src/components/ui-confirmation-dialog/ConfirmationDialog.vue
@@ -7,9 +7,11 @@
:is-open="isDialogOpen"
@dialog-closed="onCloseDialog"
>
- => {
const titleString = title ? `"${title}"` : "";
- const typeString = i18n.t(typeLanguageKey).toString();
+ const typeString = t(typeLanguageKey);
- const message = i18n
- .t("ui-confirmation-dialog.ask-delete", {
- title: titleString,
- type: typeString,
- })
- .toString();
+ const message = t("ui-confirmation-dialog.ask-delete", {
+ title: titleString,
+ type: typeString,
+ });
const shouldDelete = await askConfirmation({ message });
diff --git a/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.unit.ts b/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.unit.ts
index 7b11021acc..35f463d776 100644
--- a/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.unit.ts
+++ b/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.unit.ts
@@ -1,9 +1,18 @@
-import { I18N_KEY } from "@/utils/inject";
import setupConfirmationComposableMock from "@@/tests/test-utils/composable-mocks/setupConfirmationComposableMock";
import { mountComposable } from "@@/tests/test-utils/mountComposable";
import { useDeleteConfirmationDialog } from "./DeleteConfirmation.composable";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
+import { useI18n } from "vue-i18n";
jest.mock("./Confirmation.composable");
+jest.mock("vue-i18n", () => {
+ return {
+ ...jest.requireActual("vue-i18n"),
+ useI18n: jest.fn(),
+ };
+});
+const useI18nMock = useI18n;
+
describe("DeleteConfirmation composable", () => {
describe("askDeleteConfirmation", () => {
const setup = (isConfirmed: boolean) => {
@@ -22,12 +31,20 @@ describe("DeleteConfirmation composable", () => {
askConfirmationMock,
});
- const translateMock = jest.fn().mockImplementation((key: string) => key);
+ const translateMock = jest
+ .fn()
+ .mockImplementation(
+ (key: string, dynamic?: object): string =>
+ key + (dynamic ? ` ${JSON.stringify(dynamic)}` : "")
+ );
+ useI18nMock.mockReturnValue({
+ t: translateMock,
+ });
const { askDeleteConfirmation } = mountComposable(
() => useDeleteConfirmationDialog(),
{
- [I18N_KEY.valueOf()]: { t: translateMock },
+ global: { plugins: [createTestingI18n()] },
}
);
@@ -79,7 +96,7 @@ describe("DeleteConfirmation composable", () => {
await askDeleteConfirmation(title, typeLanguageKey);
expect(askConfirmation).toHaveBeenCalledWith({
- message: titleTranslationKey,
+ message: expect.stringContaining(titleTranslationKey),
});
});
@@ -121,7 +138,7 @@ describe("DeleteConfirmation composable", () => {
await askDeleteConfirmation("", typeLanguageKey);
expect(askConfirmation).toHaveBeenCalledWith({
- message: titleTranslationKey,
+ message: expect.stringContaining(titleTranslationKey),
});
});
diff --git a/src/components/ui-date-time-picker/DatePicker.unit.ts b/src/components/ui-date-time-picker/DatePicker.unit.ts
index eb62ae87ab..c2d7c94674 100644
--- a/src/components/ui-date-time-picker/DatePicker.unit.ts
+++ b/src/components/ui-date-time-picker/DatePicker.unit.ts
@@ -1,52 +1,34 @@
-import Vue from "vue";
-import { MountOptions, mount, Wrapper } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { ComponentMountingOptions, mount } from "@vue/test-utils";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import DatePicker from "./DatePicker.vue";
-import { I18N_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
-
-type DatePickerProps = {
- date: string;
- label?: string;
- ariaLabel?: string;
- required?: boolean;
- minDate?: string;
- maxDate?: string;
-};
describe("DatePicker", () => {
- let wrapper: Wrapper;
-
- // Fully mount component in the document so that trigger("focus") really focuses
- // https://v1.test-utils.vuejs.org/api/wrapper/trigger.html
- const attachToDOM = () => {
- const div = document.createElement("div");
- div.id = "root";
- document.body.appendChild(div);
- };
-
- const setup = (props: DatePickerProps) => {
- document.body.setAttribute("data-app", "true");
- attachToDOM();
-
- wrapper = mount(DatePicker as MountOptions, {
- ...createComponentMocks({}),
- propsData: props,
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
+ const mountComponent = (
+ options: ComponentMountingOptions = {}
+ ) => {
+ return mount(DatePicker, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
- attachTo: "#root",
+ ...options,
+ attachTo: document.body,
});
};
it("should render component", () => {
- setup({ date: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { date: new Date().toISOString() },
+ });
expect(wrapper.findComponent(DatePicker).exists()).toBe(true);
});
it("should emit update:date event on input", async () => {
- jest.useFakeTimers();
- setup({ date: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { date: new Date().toISOString() },
+ });
const textField = wrapper
.findComponent({ name: "v-text-field" })
@@ -56,39 +38,38 @@ describe("DatePicker", () => {
const dateSelector = wrapper.findComponent({ name: "v-date-picker" });
expect(dateSelector.exists()).toBe(true);
- dateSelector.vm.$emit("input", new Date().toISOString());
+ dateSelector.vm.$emit("update:model-value", new Date().toISOString());
- jest.advanceTimersByTime(1000);
expect(wrapper.emitted("update:date")).toHaveLength(1);
});
describe("when date is invalid", () => {
it("should emit error event", async () => {
- setup({
- date: new Date().toISOString(),
- required: true,
+ const wrapper = mountComponent({
+ props: {
+ date: new Date().toISOString(),
+ required: true,
+ },
});
const textField = wrapper.findComponent({ name: "v-text-field" });
const input = textField.find("input");
await input.setValue("");
- await wrapper.vm.$nextTick();
expect(wrapper.emitted("update:date")).toBeUndefined();
expect(wrapper.emitted("error")).toHaveLength(1);
});
it("should emit error event", async () => {
- setup({
- date: "55.55.5555",
+ const wrapper = mountComponent({
+ props: { date: new Date().toISOString() },
});
const textField = wrapper.findComponent({ name: "v-text-field" });
const input = textField.find("input");
- await input.setValue("");
- await wrapper.vm.$nextTick();
+ await input.setValue("55.55.5555");
expect(wrapper.emitted("update:date")).toBeUndefined();
expect(wrapper.emitted("error")).toHaveLength(1);
diff --git a/src/components/ui-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
index 07a252258f..40e377e146 100644
--- a/src/components/ui-date-time-picker/DatePicker.vue
+++ b/src/components/ui-date-time-picker/DatePicker.vue
@@ -2,164 +2,149 @@
-
+
+
-
diff --git a/src/components/ui-date-time-picker/DateTimePicker.unit.ts b/src/components/ui-date-time-picker/DateTimePicker.unit.ts
index 4c0c70f8ae..1306e9a715 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.unit.ts
+++ b/src/components/ui-date-time-picker/DateTimePicker.unit.ts
@@ -1,82 +1,70 @@
-import Vue from "vue";
-import { MountOptions, Wrapper, mount } from "@vue/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { ComponentMountingOptions, mount } from "@vue/test-utils";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
import DateTimePicker from "./DateTimePicker.vue";
-import { I18N_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
-
-type DateTimePickerProps = {
- dateTime: string;
- dateInputLabel?: string;
- dateInputAriaLabel?: string;
- minDate?: string;
- maxDate?: string;
- timeInputLabel?: string;
- timeInputAriaLabel?: string;
- required?: boolean;
-};
describe("DateTimePicker", () => {
- let wrapper: Wrapper;
-
- const setup = (props: DateTimePickerProps) => {
- document.body.setAttribute("data-app", "true");
- wrapper = mount(DateTimePicker as MountOptions, {
- ...createComponentMocks({}),
- propsData: props,
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
+ const mountComponent = (
+ options: ComponentMountingOptions = {}
+ ) => {
+ return mount(DateTimePicker, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
},
+ ...options,
+ attachTo: document.body,
});
};
it("should render component", () => {
- setup({ dateTime: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { dateTime: new Date().toISOString() },
+ });
expect(wrapper.findComponent(DateTimePicker).exists()).toBe(true);
});
describe("if date and time are set", () => {
it("should emit input event on date input", async () => {
- setup({ dateTime: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { dateTime: new Date().toISOString() },
+ });
const datePicker = wrapper.findComponent({ name: "date-picker" });
expect(datePicker.exists()).toBe(true);
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
- datePicker.vm.$emit("update:date", tomorrow);
-
- await wrapper.vm.$nextTick();
+ datePicker.vm.$emit("update:date", tomorrow.toISOString());
- expect(wrapper.emitted("input")).toHaveLength(1);
+ expect(wrapper.emitted("update:dateTime")).toHaveLength(1);
});
it("should emit input event on time input", async () => {
- jest.useFakeTimers();
- setup({ dateTime: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { dateTime: new Date().toISOString() },
+ });
const timePicker = wrapper.findComponent({ name: "time-picker" });
expect(timePicker.exists()).toBe(true);
timePicker.vm.$emit("update:time", "00:00");
- jest.advanceTimersByTime(1000);
-
- expect(wrapper.emitted("input")).toHaveLength(1);
+ expect(wrapper.emitted("update:dateTime")).toHaveLength(1);
});
});
describe("if only date is set", () => {
it("should emit input event with time set to 23:59", async () => {
- jest.useFakeTimers();
- setup({ dateTime: "" });
+ const wrapper = mountComponent({
+ props: { dateTime: "" },
+ });
const datePicker = wrapper.findComponent({ name: "date-picker" });
const date = new Date("2030-01-01");
- datePicker.vm.$emit("update:date", date);
-
- jest.advanceTimersByTime(1000);
+ datePicker.vm.$emit("update:date", date.toISOString());
- const emits = wrapper.emitted("input");
+ const emits = wrapper.emitted("update:dateTime");
expect(emits?.length).toEqual(1);
date.setHours(23);
date.setMinutes(59);
@@ -86,35 +74,32 @@ describe("DateTimePicker", () => {
describe("if only time is set", () => {
it("should emit no input event", async () => {
- jest.useFakeTimers();
- setup({ dateTime: "" });
+ const wrapper = mountComponent({
+ props: { dateTime: "" },
+ });
const timePicker = wrapper.findComponent({ name: "time-picker" });
timePicker.vm.$emit("update:time", "00:00");
- jest.advanceTimersByTime(1000);
-
expect(wrapper.emitted("input")).toBe(undefined);
});
});
describe("if date and time values are removed", () => {
it("should emit input event", async () => {
- jest.useFakeTimers();
- setup({ dateTime: new Date().toISOString() });
+ const wrapper = mountComponent({
+ props: { dateTime: new Date().toISOString() },
+ });
const datePicker = wrapper.findComponent({ name: "date-picker" });
datePicker.vm.$emit("update:date", "");
- jest.advanceTimersByTime(1000);
- expect(wrapper.emitted("input")).toBe(undefined);
+ expect(wrapper.emitted("update:dateTime")).toBe(undefined);
const timePicker = wrapper.findComponent({ name: "time-picker" });
timePicker.vm.$emit("update:time", "");
- jest.advanceTimersByTime(1000);
-
- expect(wrapper.emitted("input")).toHaveLength(1);
+ expect(wrapper.emitted("update:dateTime")).toHaveLength(1);
});
});
});
diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index f270ea5502..65760d59d7 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -21,143 +21,108 @@
/>
-
-
diff --git a/src/components/ui-light-box/index.ts b/src/components/ui-light-box/index.ts
index f077df65fe..f570c1d475 100644
--- a/src/components/ui-light-box/index.ts
+++ b/src/components/ui-light-box/index.ts
@@ -1,4 +1,5 @@
-import { LightBoxOptions, useLightBox } from "./LightBox.composable";
+import type { LightBoxOptions } from "./LightBox.composable";
+import { useLightBox } from "./LightBox.composable";
import LightBox from "./LightBox.vue";
export { LightBox, LightBoxOptions, useLightBox };
diff --git a/src/components/ui-preview-image/NaturalWidth.composable.ts b/src/components/ui-preview-image/NaturalWidth.composable.ts
deleted file mode 100644
index beadc5069f..0000000000
--- a/src/components/ui-preview-image/NaturalWidth.composable.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ref } from "vue";
-
-// Calculates the max width of an image, because v-img currently has a bug. Images that are smaller than the parent element are stretched to full width.
-export const useNaturalwidth = () => {
- const imageRef = ref();
- const imageWidth = ref();
-
- const setWidth = () => {
- const { naturalWidth } = imageRef.value.image;
- const parenElementWidth = imageRef.value.$parent.$el.clientWidth;
-
- if (naturalWidth < parenElementWidth) {
- imageWidth.value = imageRef.value.image.naturalWidth;
- }
- };
-
- return {
- imageRef,
- imageWidth,
- setWidth,
- };
-};
diff --git a/src/components/ui-preview-image/NaturalWidth.composable.unit.ts b/src/components/ui-preview-image/NaturalWidth.composable.unit.ts
deleted file mode 100644
index f0ece8ed76..0000000000
--- a/src/components/ui-preview-image/NaturalWidth.composable.unit.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useNaturalwidth } from "./NaturalWidth.composable";
-
-describe("useNaturalwidth", () => {
- describe("when image is smaller than parent element", () => {
- const setup = () => {
- const { imageRef, imageWidth, setWidth } = useNaturalwidth();
- imageRef.value = {
- image: {
- naturalWidth: 100,
- },
- $parent: {
- $el: {
- clientWidth: 1000,
- },
- },
- };
-
- return {
- imageWidth,
- setWidth,
- };
- };
-
- it("should return imageRef, imageWidth and setWidth", () => {
- // Arrange
- const { imageWidth, setWidth } = setup();
- // Act
- setWidth();
- // Assert
- expect(imageWidth.value).toEqual(100);
- });
- });
-
- describe("when image is bigger than parent element", () => {
- const setup = () => {
- const { imageRef, imageWidth, setWidth } = useNaturalwidth();
- imageRef.value = {
- image: {
- naturalWidth: 1000,
- },
- $parent: {
- $el: {
- clientWidth: 100,
- },
- },
- };
-
- return {
- imageWidth,
- setWidth,
- };
- };
-
- it("should return imageRef, imageWidth and setWidth", () => {
- // Arrange
- const { imageWidth, setWidth } = setup();
- // Act
- setWidth();
- // Assert
- expect(imageWidth.value).toEqual(undefined);
- });
- });
-});
diff --git a/src/components/ui-preview-image/PreviewImage.unit.ts b/src/components/ui-preview-image/PreviewImage.unit.ts
index fc69762569..626cbc6dd5 100644
--- a/src/components/ui-preview-image/PreviewImage.unit.ts
+++ b/src/components/ui-preview-image/PreviewImage.unit.ts
@@ -1,31 +1,26 @@
import errorImage from "@/assets/img/image-not-available.svg";
-import { I18N_KEY } from "@/utils/inject";
-import { i18nMock } from "@@/tests/test-utils";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import {
+ createTestingI18n,
+ createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { WarningAlert } from "@ui-alert";
import { PreviewImage } from "@ui-preview-image";
import { mount, shallowMount } from "@vue/test-utils";
+import { VImg } from "vuetify/lib/components/index.mjs";
describe("PreviewImage", () => {
const setupWithShallowMount = (props: any) => {
- document.body.setAttribute("data-app", "true");
-
const propsData = {
...props,
src: "https://www.example.com/image-preview.jpg",
alt: "image.jpg",
"aspect-ratio": 1.77777,
position: "top",
- contain: true,
+ cover: true,
};
const wrapper = shallowMount(PreviewImage, {
- attachTo: document.body,
propsData,
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- },
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
});
return {
wrapper,
@@ -35,25 +30,18 @@ describe("PreviewImage", () => {
};
const setupWithMount = (props: any) => {
- document.body.setAttribute("data-app", "true");
-
const propsData = {
...props,
src: "https://www.example.com/image-preview.jpg",
alt: "image.jpg",
"aspect-ratio": 1.77777,
position: "top",
- contain: true,
+ cover: true,
};
const wrapper = mount(PreviewImage, {
attachTo: document.body,
propsData,
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- [I18N_KEY.valueOf()]: i18nMock,
- },
+ global: { plugins: [createTestingVuetify(), createTestingI18n()] },
});
return {
wrapper,
@@ -65,14 +53,26 @@ describe("PreviewImage", () => {
it("should display image with correct props", () => {
const { wrapper, src, alt } = setupWithShallowMount({});
- const image = wrapper.find("v-img-stub");
+ const image = wrapper.findComponent(VImg);
expect(image.exists()).toBe(true);
expect(image.attributes("src")).toBe(src);
expect(image.attributes("alt")).toBe(alt);
expect(image.attributes("aspectratio")).toBe("1.77777");
- expect(image.attributes("position")).toBe("top");
- expect(image.attributes("contain")).toBe("true");
+ expect(image.attributes("cover")).toBe("true");
+ });
+
+ it("should set max-width with correct value", async () => {
+ const { wrapper } = setupWithShallowMount({});
+ wrapper.vm.imageRef.image = {
+ naturalWidth: "100",
+ };
+
+ const image = wrapper.findComponent(VImg);
+
+ await image.trigger("load");
+
+ expect(image.attributes("maxwidth")).toBe("100");
});
it("should has loading spinner", () => {
@@ -84,25 +84,25 @@ describe("PreviewImage", () => {
describe("when v-img emits error", () => {
it("should display warning alert", async () => {
const { wrapper } = setupWithShallowMount({});
- const image = wrapper.find("v-img-stub");
- await image.vm.$emit("error");
+ const image = wrapper.findComponent(VImg);
+ await image.trigger("error");
- const alert = wrapper.find("warningalert-stub");
+ const alert = wrapper.findComponent(WarningAlert);
expect(alert.exists()).toBe(true);
});
it("should emit error event", async () => {
const { wrapper } = setupWithShallowMount({});
- const image = wrapper.find("v-img-stub");
- await image.vm.$emit("error");
+ const image = wrapper.findComponent(VImg);
+ await image.trigger("error");
expect(wrapper.emitted("error")).toBeTruthy();
});
it("should pass error image to v-img", async () => {
const { wrapper } = setupWithShallowMount({});
- const image = wrapper.find("v-img-stub");
- await image.vm.$emit("error");
+ const image = wrapper.findComponent(VImg);
+ await image.trigger("error");
expect(image.attributes("src")).toBe(errorImage);
});
diff --git a/src/components/ui-preview-image/PreviewImage.vue b/src/components/ui-preview-image/PreviewImage.vue
index ea93e4ebb9..ad79b91bc5 100644
--- a/src/components/ui-preview-image/PreviewImage.vue
+++ b/src/components/ui-preview-image/PreviewImage.vue
@@ -1,52 +1,52 @@
-
+
+
, {
- propsData,
+ const setup = (props: Props, slots?: Slots) => {
+ const { icon, hasGreyBackground } = props;
+
+ const wrapper = mount(ContentElementBar, {
+ global: {
+ plugins: [createTestingVuetify(), createTestingI18n()],
+ },
+ props,
slots,
- ...createComponentMocks({}),
});
return {
wrapper,
icon,
hasGreyBackground,
- title,
- element,
- menu,
- subtitle,
- logo,
};
};
describe("when icon prop is defined", () => {
- it("should render icon", () => {
- const { wrapper, icon } = setup({
- icon: "mdi-test-icon",
- });
+ it("should render icon next to the title", () => {
+ const { wrapper } = setup(
+ {
+ icon: "mdi-test-icon",
+ },
+ {
+ title: "my title",
+ }
+ );
- const iconComponent = wrapper.find({ name: "v-icon" });
+ const iconElement = wrapper.find(".content-element-title .v-icon");
- expect(iconComponent.classes()).toContain(icon);
+ expect(iconElement.exists()).toBe(true);
});
});
@@ -83,9 +65,13 @@ describe("ContentElementBar", () => {
describe("when title slot is defined", () => {
it("should render title slot", () => {
- const { wrapper, title } = setup({
- title: "test title slot",
- });
+ const title = "test title slot";
+ const { wrapper } = setup(
+ {},
+ {
+ title,
+ }
+ );
const titleElement = wrapper.text();
@@ -105,9 +91,13 @@ describe("ContentElementBar", () => {
describe("when element slot is defined", () => {
it("should render element slot", () => {
- const { wrapper, element: elementSlot } = setup({
- element: "test element slot",
- });
+ const elementSlot = "test element slot";
+ const { wrapper } = setup(
+ {},
+ {
+ element: elementSlot,
+ }
+ );
const element = wrapper.text();
@@ -117,9 +107,13 @@ describe("ContentElementBar", () => {
describe("when menu slot is defined", () => {
it("should render menu slot", () => {
- const { wrapper, menu } = setup({
- menu: "test menu slot",
- });
+ const menu = "test menu slot";
+ const { wrapper } = setup(
+ {},
+ {
+ menu,
+ }
+ );
const menuElement = wrapper.text();
@@ -129,9 +123,13 @@ describe("ContentElementBar", () => {
describe("when subtitle slot is defined", () => {
it("should render subtitle slot", () => {
- const { wrapper, subtitle } = setup({
- subtitle: "test subtitle slot",
- });
+ const subtitle = "test subtitle slot";
+ const { wrapper } = setup(
+ {},
+ {
+ subtitle,
+ }
+ );
const subtitleElement = wrapper.text();
@@ -151,12 +149,16 @@ describe("ContentElementBar", () => {
describe("when hasGreyBackground prop is true", () => {
it("should render grey background", () => {
- const { wrapper } = setup({
- hasGreyBackground: true,
- title: "i have a dream",
- });
+ const { wrapper } = setup(
+ {
+ hasGreyBackground: true,
+ },
+ {
+ title: "i have a dream",
+ }
+ );
- const divWithBackgroundClass = wrapper.find("div.grey.lighten-4");
+ const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
expect(divWithBackgroundClass.exists()).toBe(true);
});
@@ -166,53 +168,26 @@ describe("ContentElementBar", () => {
it("should not render grey background", () => {
const { wrapper } = setup({});
- const divWithBackgroundClass = wrapper.find("div.grey.lighten-4");
+ const divWithBackgroundClass = wrapper.find("div.bg-grey-lighten-4");
expect(divWithBackgroundClass.exists()).toBe(false);
});
});
- describe("when menu slot and display slot are defined", () => {
- it("should render menu slot in display", () => {
- const menu = "test menu slot content";
- const { wrapper } = setup({
- display: "display content",
- menu,
- });
-
- const contentElementDisplay = wrapper.find(".content-element-display");
-
- expect(contentElementDisplay.exists()).toBe(true);
- expect(contentElementDisplay.text()).toEqual(
- expect.stringContaining(menu)
- );
- });
- });
-
- describe("when menu slot is defined but not display slot", () => {
- it("should render menu slot in title", () => {
- const menu = "test menu slot content";
- const { wrapper } = setup({
- title: "title content",
- menu,
- });
-
- const title = wrapper.find({ name: "v-card-title" });
-
- expect(title.exists()).toBe(true);
- expect(title.text()).toEqual(expect.stringContaining(menu));
- });
- });
-
describe("when logo slot is defined", () => {
- it("should render logo slot", () => {
- const { wrapper, logo } = setup({
- logo: "test logo slot",
- });
+ it("should render logo slot next to the title", () => {
+ const logo = "test logo slot";
+ const { wrapper } = setup(
+ {},
+ {
+ logo,
+ title: "my title",
+ }
+ );
- const logoElement = wrapper.text();
+ const titleElement = wrapper.find(".content-element-title");
- expect(logoElement).toBe(logo);
+ expect(titleElement.text()).toContain(logo);
});
});
});
diff --git a/src/components/ui-board/content-element/ContentElementBar.vue b/src/components/ui-board/content-element/ContentElementBar.vue
index ab1ad36366..f1044af1f5 100644
--- a/src/components/ui-board/content-element/ContentElementBar.vue
+++ b/src/components/ui-board/content-element/ContentElementBar.vue
@@ -1,113 +1,98 @@
-
-
diff --git a/src/components/ui-board/content-element/ContentElementTitleIcon.unit.ts b/src/components/ui-board/content-element/ContentElementTitleIcon.unit.ts
deleted file mode 100644
index 5a6534feb2..0000000000
--- a/src/components/ui-board/content-element/ContentElementTitleIcon.unit.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import ContentElementTitleIcon from "./ContentElementTitleIcon.vue";
-import { MountOptions, shallowMount } from "@vue/test-utils";
-import Vue from "vue";
-
-describe("ContentElementTitleIcon", () => {
- const setup = () => {
- document.body.setAttribute("data-app", "true");
-
- const icon = "mdi-test";
- const wrapper = shallowMount(ContentElementTitleIcon as MountOptionstest-slot-content
";
- const propsData = {
- isOverlayDisabled: props.isOverlayDisabled,
- color: props.color,
- opacity: props.opacity,
- };
- const wrapper = shallowMount(ColorOverlay, {
- attachTo: document.body,
- propsData,
- slots: {
- default: slotContent,
- },
- });
-
- return {
- wrapper,
- ...propsData,
- };
- };
-
- describe("when isOverlayDisabled is false", () => {
- it("should be found in dom", () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- const colorOverlay = wrapper.findComponent(ColorOverlay);
-
- expect(colorOverlay.exists()).toBe(true);
- });
-
- it("should render slot content", () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- expect(wrapper.text()).toContain("test-slot-content");
- });
-
- describe("when the container is clicked", () => {
- it("should emit on:action event", () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- const container = wrapper.find(".display-container");
- container.trigger("click");
-
- expect(wrapper.emitted("on:action")).toHaveLength(1);
- });
- });
-
- describe("when the overlay is clicked", () => {
- it("should emit on:action event", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- wrapper.trigger("focusin");
- await nextTick();
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- overlay.trigger("click");
-
- expect(wrapper.emitted("on:action")).toHaveLength(1);
- });
- });
-
- describe("when the image is focused (using focusin and focusout)", () => {
- it("should show overlay and hide it, when not ", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- wrapper.trigger("focusin");
- await nextTick();
-
- const overlayFocusIn = wrapper.find(".display-overlay");
-
- expect(overlayFocusIn.exists()).toBe(true);
- expect(overlayFocusIn.isVisible()).toBe(true);
-
- wrapper.trigger("focusout");
- await nextTick();
-
- const overlayFocusOut = wrapper.find(".display-overlay");
-
- expect(overlayFocusOut.exists()).toBe(false);
- });
- });
-
- describe("when the container is focused (using focus and blur)", () => {
- it("should show overlay and hide it, when not ", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- const container = wrapper.find(".display-container")
- .element as HTMLDivElement;
-
- expect(document.activeElement).toBe(document.body);
-
- container.focus();
- await nextTick();
-
- expect(document.activeElement).toBe(container);
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- container.blur();
- await nextTick();
-
- expect(document.activeElement).toBe(document.body);
-
- const overlayBlur = wrapper.find(".display-overlay");
-
- expect(overlayBlur.exists()).toBe(false);
- });
- });
-
- describe("when Enter key is pressed", () => {
- it("should emit on:action event", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- const container = wrapper.find(".display-container");
- container.trigger("keydown.enter");
- await nextTick();
-
- expect(wrapper.emitted("on:action")).toHaveLength(1);
- });
- });
-
- describe("when Space key is pressed", () => {
- it("should emit on:action event", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- const container = wrapper.find(".display-container");
- container.trigger("keydown.space");
- await nextTick();
-
- expect(wrapper.emitted("on:action")).toHaveLength(1);
- });
- });
-
- describe("when the user hovers over the image", () => {
- it("should show overlay and hide it, when not", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlayEnter = wrapper.find(".display-overlay");
-
- expect(overlayEnter.exists()).toBe(true);
- expect(overlayEnter.isVisible()).toBe(true);
-
- wrapper.trigger("mouseleave");
- await nextTick();
-
- const overlayLeave = wrapper.find(".display-overlay");
-
- expect(overlayLeave.exists()).toBe(false);
- });
- });
-
- describe("when color property is undefined", () => {
- it("should use default color value", async () => {
- // default color should be "var(--v-black-base)", BUT as these is
- // unknown here, we need to use "real" color values
- const color = "rgb(27, 27, 27)"; // equivalent to #1b1b1b
- const { wrapper } = setup({ isOverlayDisabled: false });
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- const style = getComputedStyle(overlay.element);
-
- expect(style.getPropertyValue("background-color")).toBe(color);
- });
- });
-
- describe("when color property is defined", () => {
- it("should use defined color value", async () => {
- const color = "white";
- const { wrapper } = setup({ isOverlayDisabled: false, color });
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- const style = getComputedStyle(overlay.element);
-
- expect(style.getPropertyValue("background-color")).toBe(color);
- });
- });
-
- describe("when opacity property is undefined", () => {
- it("should use default opacity value", async () => {
- const { wrapper } = setup({ isOverlayDisabled: false });
- const defaultOpacity = "0.2";
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- const style = getComputedStyle(overlay.element);
-
- expect(style.getPropertyValue("opacity")).toBe(defaultOpacity);
- });
- });
-
- describe("when opacity property is defined", () => {
- it("should use defined opacity value", async () => {
- const opacity = 0.8;
- const { wrapper } = setup({ isOverlayDisabled: false, opacity });
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlay = wrapper.find(".display-overlay");
-
- expect(overlay.exists()).toBe(true);
- expect(overlay.isVisible()).toBe(true);
-
- const style = getComputedStyle(overlay.element);
-
- expect(style.getPropertyValue("opacity")).toBe(opacity.toString());
- });
- });
- });
-
- describe("when isOverlayDisabled is true", () => {
- it("should be found in dom", () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const colorOverlay = wrapper.findComponent(ColorOverlay);
-
- expect(colorOverlay.exists()).toBe(true);
- });
-
- it("should render slot content", () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- expect(wrapper.text()).toContain("test-slot-content");
- });
-
- describe("when the container is clicked", () => {
- it("should not emit on:action event", () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const container = wrapper.find(".display-container");
- container.trigger("click");
-
- expect(wrapper.emitted("on:action")).toBeUndefined();
- });
- });
-
- describe("when the image is clicked", () => {
- it("should not emit on:action event, ", () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const slotContent = wrapper.find(".slot-content");
- slotContent.trigger("click");
-
- expect(wrapper.emitted("on:action")).toBeUndefined();
- });
- });
-
- describe("when the image is focused (using focusin and focusout)", () => {
- it("should not show overlay", async () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- wrapper.trigger("focusin");
- await nextTick();
-
- const overlayFocusIn = wrapper.find(".display-overlay");
-
- expect(overlayFocusIn.exists()).toBe(false);
-
- wrapper.trigger("focusout");
- await nextTick();
-
- const overlayFocusOut = wrapper.find(".display-overlay");
-
- expect(overlayFocusOut.exists()).toBe(false);
- });
- });
-
- describe("when the image is focused (using focus and blur)", () => {
- it("should not show overlay", async () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const container = wrapper.find(".display-container")
- .element as HTMLDivElement;
-
- expect(document.activeElement).toBe(document.body);
-
- container.focus();
- await nextTick();
-
- expect(document.activeElement).toBe(container);
-
- const overlayFocus = wrapper.find(".display-overlay");
-
- expect(overlayFocus.exists()).toBe(false);
-
- container.blur();
- await nextTick();
-
- expect(document.activeElement).toBe(document.body);
-
- const overlayBlur = wrapper.find(".display-overlay");
-
- expect(overlayBlur.exists()).toBe(false);
- });
- });
-
- describe("when Enter key is pressed", () => {
- it("should not emit on:action event", async () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const container = wrapper.find(".display-container");
- container.trigger("keydown.enter");
- await nextTick();
-
- expect(wrapper.emitted("on:action")).toBeUndefined();
- });
- });
-
- describe("when Space key is pressed", () => {
- it("should not emit on:action event", async () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- const container = wrapper.find(".display-container");
- container.trigger("keydown.space");
- await nextTick();
-
- expect(wrapper.emitted("on:action")).toBeUndefined();
- });
- });
-
- describe("when the user hovers over the image", () => {
- it("should not show overlay", async () => {
- const { wrapper } = setup({ isOverlayDisabled: true });
-
- wrapper.trigger("mouseenter");
- await nextTick();
-
- const overlayEnter = wrapper.find(".display-overlay");
-
- expect(overlayEnter.exists()).toBe(false);
-
- wrapper.trigger("mouseleave");
- await nextTick();
-
- const overlayLeave = wrapper.find(".display-overlay");
-
- expect(overlayLeave.exists()).toBe(false);
- });
- });
- });
-});
diff --git a/src/components/ui-color-overlay/ColorOverlay.vue b/src/components/ui-color-overlay/ColorOverlay.vue
deleted file mode 100644
index f3cb37d322..0000000000
--- a/src/components/ui-color-overlay/ColorOverlay.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/components/ui-color-overlay/index.ts b/src/components/ui-color-overlay/index.ts
deleted file mode 100644
index 55a806ec35..0000000000
--- a/src/components/ui-color-overlay/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ColorOverlay from "./ColorOverlay.vue";
-
-export { ColorOverlay };
diff --git a/src/components/ui-confirmation-dialog/Confirmation.composable.unit.ts b/src/components/ui-confirmation-dialog/Confirmation.composable.unit.ts
index 824ae715d9..d39b76b937 100644
--- a/src/components/ui-confirmation-dialog/Confirmation.composable.unit.ts
+++ b/src/components/ui-confirmation-dialog/Confirmation.composable.unit.ts
@@ -1,6 +1,6 @@
-import { I18N_KEY } from "@/utils/inject";
import { mountComposable } from "@@/tests/test-utils/mountComposable";
import { useConfirmationDialog } from "./Confirmation.composable";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
describe("Confirmation composable", () => {
describe("askConfirmation", () => {
@@ -8,7 +8,7 @@ describe("Confirmation composable", () => {
const { askConfirmation, isDialogOpen } = mountComposable(
() => useConfirmationDialog(),
{
- [I18N_KEY.valueOf()]: { t: (k: string) => k },
+ global: { plugins: [createTestingI18n()] },
}
);
diff --git a/src/components/ui-confirmation-dialog/ConfirmationDialog.unit.ts b/src/components/ui-confirmation-dialog/ConfirmationDialog.unit.ts
index 1992f8d633..4a27a9435f 100644
--- a/src/components/ui-confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/components/ui-confirmation-dialog/ConfirmationDialog.unit.ts
@@ -1,9 +1,8 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { MountOptions, shallowMount } from "@vue/test-utils";
-import Vue, { ref } from "vue";
+import { shallowMount } from "@vue/test-utils";
+import { ref } from "vue";
import { useInternalConfirmationDialog } from "./Confirmation.composable";
import DeleteConfirmation from "./ConfirmationDialog.vue";
-import { I18N_KEY } from "@/utils/inject";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
jest.mock("./Confirmation.composable");
const mockedUseInternalConfirmationDialog = jest.mocked(
@@ -18,8 +17,6 @@ describe(DeleteConfirmation.name, () => {
title?: string;
typeName?: string;
}) => {
- document.body.setAttribute("data-app", "true");
-
mockedUseInternalConfirmationDialog.mockReturnValue({
confirm: confirmSpy,
cancel: cancelSpy,
@@ -28,12 +25,9 @@ describe(DeleteConfirmation.name, () => {
isDialogOpen: ref(true),
});
- const wrapper = shallowMount(DeleteConfirmation as MountOptions- {{ message }} -
+ ++ {{ message }} +
+ @@ -47,5 +49,6 @@ export default defineComponent({ diff --git a/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.ts b/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.ts index 4e8cc7954c..8ef10accd0 100644 --- a/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.ts +++ b/src/components/ui-confirmation-dialog/DeleteConfirmation.composable.ts @@ -1,8 +1,8 @@ -import { I18N_KEY, injectStrict } from "@/utils/inject"; import { useConfirmationDialog } from "./Confirmation.composable"; +import { useI18n } from "vue-i18n"; export const useDeleteConfirmationDialog = () => { - const i18n = injectStrict(I18N_KEY); + const { t } = useI18n(); const { askConfirmation, isDialogOpen } = useConfirmationDialog(); const askDeleteConfirmation = async ( @@ -10,14 +10,12 @@ export const useDeleteConfirmationDialog = () => { typeLanguageKey: string ): Promise
-
- {{ t("components.cardElement.fileElement.previewError") }}
-
-
-
-
-
-
-
-
+
+
+ {{ icon }}
+ {{ mdiClose }}
+
+
+
+
+
+
+
+ {{ isMenuOpen ? mdiClose : icon }}
+
+
+
+
+
+ {{ props.icon }}
+
+
+
+
+
+
+
+ {{ props.icon }}
+
+
+
+ -
+
+
+
`;
+
+ const el = document.getElementById("element");
+ const columnId = extractDataAttribute(el, "columnId");
+
+ expect(columnId).toBe(id);
+ });
+ });
+});
diff --git a/src/components/util-board/index.ts b/src/components/util-board/index.ts
index d69e739fb8..d758082d6b 100644
--- a/src/components/util-board/index.ts
+++ b/src/components/util-board/index.ts
@@ -8,10 +8,12 @@ import {
BOARD_IS_FIRST_COLUMN,
BOARD_IS_LAST_COLUMN,
} from "./board-injection-tokens";
+import { extractDataAttribute } from "./extractDataAttribute.util";
export {
useBoardNotifier,
useSharedLastCreatedElement,
+ extractDataAttribute,
BOARD_CARD_HAS_MULTIPLE_ELEMENTS,
BOARD_CARD_IS_FIRST_ELEMENT,
BOARD_CARD_IS_LAST_ELEMENT,
diff --git a/src/components/util-input-masks/InputMask.factory.ts b/src/components/util-input-masks/InputMask.factory.ts
index 34ea7bc7ad..56deebcffc 100644
--- a/src/components/util-input-masks/InputMask.factory.ts
+++ b/src/components/util-input-masks/InputMask.factory.ts
@@ -1,6 +1,6 @@
import type { MaskInputOptions } from "maska";
import { vMaska } from "maska";
-import { DirectiveFunction } from "vue";
+import { FunctionDirective } from "vue";
/**
* Creates a Maska-Directive from a given maska-configuration.
@@ -13,11 +13,14 @@ import { DirectiveFunction } from "vue";
* @see https://beholdr.github.io/maska/#/?id=maskinput-options
*/
export const createInputMask = (options: MaskInputOptions) => {
- // DirectiveFunction type is necessary to ensure compatibility with defineComponent()-Syntax in vue 2.7
- // going forward with Vue3 we should be able to use Directive
+
+ -
+
+
+ *
+ * ```
+ */
+
+export const hasSlotContent = (slot: Slot | undefined, props = {}) => {
+ return slot && !isSlotEmpty(slot, props);
+};
+
+function isSlotEmpty(slot: Slot | undefined, props = {}): boolean {
+ return slot !== undefined && isVNodeEmpty(slot?.(props));
+}
+
+function isVNodeEmpty(vNode: VNode | VNode[]) {
+ if (!vNode) return true;
+
+ const vNodes = asArray(vNode);
+ if (vNodes.every((vnode) => vnode.type === Comment)) return true;
+ if (vNodes.length === 0) return true;
+ if (vNodes.length === 1) {
+ if (vNodes[0].children === null) return true;
+ if (vNodes[0].children.length === 0) return true;
+ }
+ return false;
+}
+
+function asArray(arg: unknown) {
+ if (Array.isArray(arg)) return arg;
+ return arg != null ? [arg] : [];
+}
diff --git a/src/composables/copy.ts b/src/composables/copy.ts
index c17b5d4c3b..5a4020205a 100644
--- a/src/composables/copy.ts
+++ b/src/composables/copy.ts
@@ -1,21 +1,14 @@
import { CopyApiResponseStatusEnum } from "@/serverApi/v3";
import CopyModule, { CopyParams, CopyParamsTypeEnum } from "@/store/copy";
import { injectStrict } from "@/utils/inject";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject/injection-keys";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject/injection-keys";
import { Ref, inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
export function useCopy(isLoadingDialogOpen: Ref
-
diff --git a/src/pages/ProxyError.page.vue b/src/pages/ProxyError.page.vue
index 4cec644dd2..344d0e7362 100644
--- a/src/pages/ProxyError.page.vue
+++ b/src/pages/ProxyError.page.vue
@@ -1,7 +1,7 @@
- {{ t("pages.administration.classes.deleteDialog.title") }} -
+ ++ {{ t("pages.administration.classes.deleteDialog.title") }} +
+{{ title }}
-
@@ -46,8 +47,8 @@
:columns="tableColumns"
:data="tableData"
track-by="_id"
- :sort-by.sync="sortBy"
- :sort-order.sync="sortOrder"
+ v-model:sort-by="sortBy"
+ v-model:sort-order="sortOrder"
data-testid="consent_table_1"
@update:sort="onUpdateSort"
>
@@ -55,12 +56,12 @@
-
+
-
+
{{ $t("common.actions.cancel") }}
@@ -119,8 +120,8 @@
:data="tableData"
track-by="id"
:paginated="false"
- :sort-by.sync="sortBy"
- :sort-order.sync="sortOrder"
+ v-model:sort-by="sortBy"
+ v-model:sort-order="sortOrder"
data-testid="consent_table_2"
@update:sort="onUpdateSort"
>
@@ -140,8 +141,9 @@
data-testid="check-confirm"
/>
- +
-
+
{{ $t("common.actions.cancel") }}
@@ -190,8 +192,8 @@
:data="tableData"
track-by="_id"
:paginated="false"
- :sort-by.sync="sortBy"
- :sort-order.sync="sortOrder"
+ v-model:sort-by="sortBy"
+ v-model:sort-order="sortOrder"
data-testid="consent_table_3"
@update:sort="onUpdateSort"
>
@@ -204,10 +206,10 @@
+
-
+
{{
$t("pages.administration.students.consent.cancel.modal.confirm")
}}
@@ -266,7 +268,7 @@
{{
@@ -275,7 +277,12 @@
)
}}
-
+
{{
$t("pages.administration.students.consent.cancel.modal.continue")
}}
@@ -409,15 +416,15 @@ export default {
breadcrumbs() {
return [
{
- text: this.$t("pages.administration.index.title"),
+ title: this.$t("pages.administration.index.title"),
to: "/administration/",
},
{
- text: this.$t("pages.administration.students.index.title"),
+ title: this.$t("pages.administration.students.index.title"),
to: "/administration/students",
},
{
- text: this.title,
+ title: this.title,
disabled: true,
},
];
@@ -454,7 +461,7 @@ export default {
await this.find();
window.addEventListener("beforeunload", this.warningEventHandler);
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener("beforeunload", this.warningEventHandler);
clearTimeout(this.tableTimeOut);
clearTimeout(this.printTimeOut);
@@ -643,20 +650,26 @@ export default {
}
.print-title {
- color: var(--v-primary-base);
+ color: rgba(var(--v-theme-primary));
border: none;
}
.warning {
- color: var(--v-error-base);
+ color: rgba(var(--v-theme-error));
+}
+.success-image {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0 auto;
}
-::v-deep .link {
- color: var(--v-primary-base);
+:deep(.link) {
+ color: rgba(var(--v-theme-primary));
text-decoration: none;
}
-::v-deep .table {
+:deep(.table) {
margin-top: var(--space-lg);
.table__row {
@@ -664,11 +677,11 @@ export default {
}
}
-::v-deep .toolbelt {
+:deep(.toolbelt) {
display: none;
}
-::v-deep .calendar-input {
+:deep(.calendar-input) {
max-width: 5em;
margin-bottom: 0;
@@ -683,7 +696,7 @@ export default {
}
}
-::v-deep .base-input {
+:deep(.base-input) {
max-width: 10em;
margin-bottom: var(--space-md);
margin-left: var(--space-xs);
diff --git a/src/pages/administration/StudentCreate.page.vue b/src/pages/administration/StudentCreate.page.vue
index 0547b0f197..159136b0b2 100644
--- a/src/pages/administration/StudentCreate.page.vue
+++ b/src/pages/administration/StudentCreate.page.vue
@@ -59,15 +59,15 @@ export default {
sendRegistration: false,
breadcrumbs: [
{
- text: this.$t("pages.administration.index.title"),
+ title: this.$t("pages.administration.index.title"),
href: "/administration/",
},
{
- text: this.$t("pages.administration.students.index.title"),
+ title: this.$t("pages.administration.students.index.title"),
to: "/administration/students",
},
{
- text: this.$t("pages.administration.students.new.title"),
+ title: this.$t("pages.administration.students.new.title"),
to: "/administration/students/new",
disabled: true,
},
@@ -115,7 +115,7 @@ export default {
diff --git a/src/pages/files/file-page-config.type.ts b/src/pages/files/file-page-config.type.ts
deleted file mode 100644
index 8faed3ab94..0000000000
--- a/src/pages/files/file-page-config.type.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
-
-export type FilesPageConfig = {
- title: string;
- breadcrumbs: Breadcrumb[];
- loadFilesFunction: () => Promise;
-};
diff --git a/src/pages/files/file-table-item.ts b/src/pages/files/file-table-item.ts
deleted file mode 100644
index 6a43bc8bd6..0000000000
--- a/src/pages/files/file-table-item.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface FileTableItem {
- name: string;
- path: string;
- icon: {
- name: string;
- colored?: boolean;
- };
- size: string;
- lastChanged: string;
-}
diff --git a/src/pages/files/file-table-utils.composable.ts b/src/pages/files/file-table-utils.composable.ts
deleted file mode 100644
index cdc8ee196f..0000000000
--- a/src/pages/files/file-table-utils.composable.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import {
- CollaborativeFile,
- CollaborativeFileType,
- FileTypeIconMapping,
-} from "@/store/types/collaborative-file";
-import { FileTableItem } from "@/pages/files/file-table-item";
-import { Route } from "vue-router";
-import { DataTableHeader } from "vuetify";
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
-import { FileMetaListResponse } from "@/store/collaborative-files/file-meta-list.response";
-import {
- FileMetaResponse,
- FileTypeResponse,
-} from "@/store/collaborative-files/file-meta.response";
-import { FilesPageConfig } from "@/pages/files/file-page-config.type";
-import CollaborativeFilesModule from "@/store/collaborative-files";
-
-export function useFileTableUtils(
- collaborativeFilesModule: CollaborativeFilesModule,
- t: (key: string) => string
-) {
- const getHeaders = (): DataTableHeader[] => {
- return [
- { text: "", value: "icon", sortable: false, width: 5 },
- {
- text: t("common.labels.name"),
- value: "name",
- class: "primary--text",
- cellClass: "primary--text",
- },
- {
- text: t("common.labels.size"),
- value: "size",
- class: "primary--text",
- width: "110",
- },
- {
- text: t("common.labels.changed"),
- value: "lastChanged",
- class: "primary--text",
- width: "140",
- },
- ];
- };
-
- const getDeepBreadcumbs = (params: string[]): Breadcrumb[] => {
- let redirectTo = "/cfiles/teams";
- const deepBreadcrumbs: Breadcrumb[] = [];
-
- params.forEach((param: string) => {
- redirectTo += `/${param}`;
- deepBreadcrumbs.push({
- text: param,
- to: redirectTo,
- });
- });
- deepBreadcrumbs.pop();
-
- return deepBreadcrumbs;
- };
-
- const getFileCategory = (pathArray: string[]): string => {
- return pathArray.length >= 2 ? pathArray[1] : pathArray[0];
- };
-
- const mapFileToFileTableItem = (file: CollaborativeFile): FileTableItem => {
- return {
- name: file.translationKey ? t(file.translationKey) : file.name,
- path: file.path,
- icon: {
- name: file.icon || FileTypeIconMapping[file.type],
- colored: file.type === CollaborativeFileType.FAVORITES,
- },
- size: file.size.toString(),
- lastChanged: file.lastChanged,
- };
- };
-
- const getFilesOverview = (): FilesPageConfig => {
- return {
- title: t("pages.files.overview.headline"),
- breadcrumbs: [],
- loadFilesFunction: async () =>
- collaborativeFilesModule.fetchFilesOverview(),
- };
- };
-
- const getTeamsOverview = (): FilesPageConfig => {
- return {
- title: t("pages.files.overview.teamFiles"),
- breadcrumbs: [
- {
- text: t("pages.files.overview.headline"),
- to: "/cfiles/",
- },
- ],
- loadFilesFunction: async () => collaborativeFilesModule.fetchTeams(),
- };
- };
-
- const getTeamsPage = (route: Route): FilesPageConfig => {
- const paramsArray: string[] = route.params.catchAll
- .split("/")
- .filter((element: string) => element !== "");
- const deepBreadcrumbs: Breadcrumb[] = getDeepBreadcumbs(paramsArray);
-
- return {
- title: paramsArray.slice(-1)[0],
- breadcrumbs: [
- {
- text: t("pages.files.overview.headline"),
- to: "/cfiles/",
- },
- {
- text: t("pages.files.overview.teamFiles"),
- to: "/cfiles/teams",
- },
- ...deepBreadcrumbs,
- ],
- loadFilesFunction: async () => collaborativeFilesModule.fetchTeamFiles(),
- };
- };
-
- const getFilesPageForRoute = (route: Route): FilesPageConfig => {
- const pathArray: string[] = route.path
- .split("/")
- .filter((element: string) => element !== "");
-
- const currentCategory: string = getFileCategory(pathArray);
-
- switch (currentCategory) {
- case "cfiles":
- return getFilesOverview();
- case "teams":
- if (pathArray.length == 2) {
- return getTeamsOverview();
- } else {
- return getTeamsPage(route);
- }
- default:
- throw new Error("page not found");
- }
- };
-
- const FileTypeMapping: Record = {
- [FileTypeResponse.FILE]: CollaborativeFileType.FILE,
- [FileTypeResponse.PDF]: CollaborativeFileType.PDF,
- [FileTypeResponse.SHARED_DIRECTORY]: CollaborativeFileType.SHARED_DIRECTORY,
- [FileTypeResponse.DIRECTORY]: CollaborativeFileType.DIRECTORY,
- [FileTypeResponse.FAVORITES]: CollaborativeFileType.FAVORITES,
- };
-
- const mapFileMetaListResponse = (
- response: FileMetaListResponse
- ): CollaborativeFile[] => {
- const files: CollaborativeFile[] = response.data.map(
- (fileMeta: FileMetaResponse) => mapFileMetaResponse(fileMeta)
- );
- return files;
- };
-
- const mapFileMetaResponse = (
- fileMeta: FileMetaResponse
- ): CollaborativeFile => {
- const fileType: CollaborativeFileType = FileTypeMapping[fileMeta.type];
- const file: CollaborativeFile = {
- path: fileMeta.path,
- type: fileType,
- size: fileMeta.size,
- name: fileMeta.name,
- lastChanged: fileMeta.lastChanged,
- icon: FileTypeIconMapping[fileType],
- translationKey: undefined,
- };
- return file;
- };
-
- return {
- mapFileMetaListResponse,
- getFilesPageForRoute,
- mapFileToFileTableItem,
- getFileCategory,
- getDeepBreadcumbs,
- getHeaders,
- };
-}
diff --git a/src/pages/files/file-table-utils.composable.unit.ts b/src/pages/files/file-table-utils.composable.unit.ts
deleted file mode 100644
index 35fa25f2fa..0000000000
--- a/src/pages/files/file-table-utils.composable.unit.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-import { DataTableHeader } from "vuetify";
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
-import { Route } from "vue-router";
-import { FileMetaListResponse } from "@/store/collaborative-files/file-meta-list.response";
-import { FileTypeResponse } from "@/store/collaborative-files/file-meta.response";
-import {
- CollaborativeFile,
- CollaborativeFileType,
- FileIcon,
-} from "@/store/types/collaborative-file";
-import { useFileTableUtils } from "@/pages/files/file-table-utils.composable";
-import { FilesPageConfig } from "@/pages/files/file-page-config.type";
-import { collaborativeFilesModule } from "@/store";
-
-jest.mock("@/store", () => ({
- collaborativeFilesModule: {
- fetchFilesOverview: jest.fn(),
- fetchTeams: jest.fn(),
- fetchTeamFiles: jest.fn(),
- },
-}));
-
-describe("UseFileTableUtils", () => {
- function setup() {
- const expectedTranslation = "translated";
- const tMock = jest.fn().mockReturnValue(expectedTranslation);
- const {
- getHeaders,
- getFilesPageForRoute,
- getFileCategory,
- mapFileMetaListResponse,
- getDeepBreadcumbs,
- } = useFileTableUtils(collaborativeFilesModule, tMock);
-
- return {
- getHeaders,
- getFilesPageForRoute,
- getFileCategory,
- mapFileMetaListResponse,
- getDeepBreadcumbs,
- tMock,
- expectedTranslation,
- };
- }
-
- describe("getHeaders", () => {
- it("should return dataTableHeader array", () => {
- const { getHeaders, tMock, expectedTranslation } = setup();
-
- const headers: DataTableHeader[] = getHeaders();
-
- expect(headers.length).toEqual(4);
-
- const iconHeader = headers[0];
- expect(iconHeader.text).toEqual("");
- expect(iconHeader.value).toEqual("icon");
- expect(iconHeader.sortable).toBeFalsy();
- expect(iconHeader.width).toEqual(5);
-
- const nameHeader = headers[1];
- expect(nameHeader.text).toEqual(expectedTranslation);
- expect(nameHeader.value).toEqual("name");
- expect(nameHeader.class).toEqual("primary--text");
- expect(nameHeader.cellClass).toEqual("primary--text");
- expect(nameHeader.sortable).toBeUndefined();
- expect(nameHeader.width).toBeUndefined();
- expect(tMock).toHaveBeenCalledWith("common.labels.name");
-
- const sizeHeader = headers[2];
- expect(sizeHeader.text).toEqual(expectedTranslation);
- expect(sizeHeader.value).toEqual("size");
- expect(sizeHeader.class).toEqual("primary--text");
- expect(sizeHeader.sortable).toBeUndefined();
- expect(sizeHeader.width).toEqual("110");
- expect(tMock).toHaveBeenCalledWith("common.labels.size");
-
- const changedHeader = headers[3];
- expect(changedHeader.text).toEqual(expectedTranslation);
- expect(changedHeader.value).toEqual("lastChanged");
- expect(changedHeader.class).toEqual("primary--text");
- expect(changedHeader.sortable).toBeUndefined();
- expect(changedHeader.width).toEqual("140");
- expect(tMock).toHaveBeenCalledWith("common.labels.changed");
-
- expect(tMock).toBeCalledTimes(3);
- });
- });
-
- describe("getDeepBreadcumbs", () => {
- it("should return deepBreadcrumbs", () => {
- const { getDeepBreadcumbs } = setup();
- const class10 = "class10";
- const deepBreadcumbs: Breadcrumb[] = getDeepBreadcumbs([
- class10,
- "groupA",
- ]);
-
- expect(deepBreadcumbs.length).toEqual(1);
- expect(deepBreadcumbs[0].text).toEqual(class10);
- expect(deepBreadcumbs[0].to).toEqual(`/cfiles/teams/${class10}`);
- });
- });
-
- describe("getFilesPageForRoute", () => {
- describe("getFileCategory", () => {
- it("should return the fileCategory teams when pathArray >= 2", () => {
- const { getFileCategory } = setup();
- const expectedCategory = "teams";
-
- const category: string = getFileCategory([
- "cfiles",
- expectedCategory,
- "class10",
- "anything",
- ]);
-
- expect(category).toEqual(expectedCategory);
- });
-
- it("should return the fileCategory cfiles when pathArray < 2", () => {
- const { getFileCategory } = setup();
- const category: string = getFileCategory(["cfiles"]);
-
- expect(category).toEqual("cfiles");
- });
- });
-
- describe("getFilesOverview", () => {
- it("should return the filesOverview as filesPage", async () => {
- const { getFilesPageForRoute, tMock, expectedTranslation } = setup();
- const route: Route = {
- path: "/cfiles/",
- params: {},
- } as Route;
-
- const filesOverview: FilesPageConfig = getFilesPageForRoute(route);
- await filesOverview.loadFilesFunction();
-
- expect(filesOverview.title).toEqual(expectedTranslation);
- expect(filesOverview.breadcrumbs).toEqual([]);
- expect(tMock).toHaveBeenCalledWith("pages.files.overview.headline");
- expect(collaborativeFilesModule.fetchFilesOverview).toHaveBeenCalled();
- });
- });
-
- describe("getTeamsOverview", () => {
- it("should return the teamsOverview as filesPage", async () => {
- const { getFilesPageForRoute, tMock, expectedTranslation } = setup();
- const route: Route = {
- path: "/cfiles/teams",
- params: {},
- } as Route;
-
- const filesOverview: FilesPageConfig = getFilesPageForRoute(route);
- await filesOverview.loadFilesFunction();
-
- expect(filesOverview.breadcrumbs).toEqual([
- { text: expectedTranslation, to: "/cfiles/" },
- ]);
- expect(tMock).toHaveBeenCalledWith("pages.files.overview.headline");
- expect(tMock).toHaveBeenCalledWith("pages.files.overview.teamFiles");
- expect(collaborativeFilesModule.fetchTeams).toHaveBeenCalled();
- });
- });
-
- describe("getTeamsPage", () => {
- it("should return teamsPage as filesPage", async () => {
- const { getFilesPageForRoute, tMock, expectedTranslation } = setup();
- const route: Route = {
- path: "/cfiles/teams/testFolder1/testFolder2",
- params: { catchAll: "testFolder1/testFolder2" } as unknown,
- } as Route;
-
- const filesOverview: FilesPageConfig = getFilesPageForRoute(route);
- await filesOverview.loadFilesFunction();
-
- expect(filesOverview.breadcrumbs).toEqual([
- { text: expectedTranslation, to: "/cfiles/" },
- { text: expectedTranslation, to: "/cfiles/teams" },
- { text: "testFolder1", to: "/cfiles/teams/testFolder1" },
- ]);
- expect(tMock).toHaveBeenCalledWith("pages.files.overview.headline");
- expect(tMock).toHaveBeenCalledWith("pages.files.overview.teamFiles");
- expect(collaborativeFilesModule.fetchTeamFiles).toHaveBeenCalled();
- });
- });
-
- it("should return error when currentCategory not exists", async () => {
- const { getFilesPageForRoute } = setup();
- const route: Route = {
- path: "/cfiles/unknown/anything",
- params: {},
- } as Route;
-
- expect(() => getFilesPageForRoute(route)).toThrowError("page not found");
- });
- });
-
- describe("mapFileMetaListResponse", () => {
- it("should map a fileMetaListResponse to collaborativeFile array", () => {
- const { mapFileMetaListResponse } = setup();
- const response: FileMetaListResponse = {
- data: [
- {
- id: "id",
- name: "FileName",
- size: 38383,
- type: FileTypeResponse.FILE,
- path: "/path/to/fileName",
- lastChanged: new Date(2022, 10, 11).toISOString(),
- },
- {
- id: "id2",
- name: "FileName2",
- size: 2112,
- type: FileTypeResponse.DIRECTORY,
- path: "/path/to/fileName2",
- lastChanged: new Date(2022, 10, 10).toISOString(),
- },
- ],
- size: 2,
- };
-
- const collaborativeFiles: CollaborativeFile[] =
- mapFileMetaListResponse(response);
-
- expect(collaborativeFiles[0]).toEqual({
- name: "FileName",
- size: 38383,
- type: CollaborativeFileType.FILE,
- path: "/path/to/fileName",
- lastChanged: new Date(2022, 10, 11).toISOString(),
- icon: FileIcon.FILE,
- translationKey: undefined,
- });
- });
- });
-});
diff --git a/src/pages/h5p/H5PEditor.page.unit.ts b/src/pages/h5p/H5PEditor.page.unit.ts
index 7837794e11..faeacf16b9 100644
--- a/src/pages/h5p/H5PEditor.page.unit.ts
+++ b/src/pages/h5p/H5PEditor.page.unit.ts
@@ -1,10 +1,8 @@
import { mount } from "@vue/test-utils";
import H5pEditorPage from "./H5PEditor.page.vue";
-import { I18N_KEY } from "@/utils/inject";
-import VueI18n from "vue-i18n";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
-jest.mock("vue-router/composables", () => ({
+jest.mock("vue-router", () => ({
useRoute: () => ({ params: { id: "test-id" }, query: {} }),
}));
@@ -12,22 +10,15 @@ describe("H5PEditorPage", () => {
const parentType = "test-parent-type";
const parentId = "test-parent-id";
- const i18nMock = new VueI18n({
- locale: "en",
- });
-
- const createWrapper = (propsData = {}) => {
+ const createWrapper = (props = {}) => {
return mount(H5pEditorPage, {
- ...createComponentMocks({
- i18n: true,
- }),
- propsData: {
+ global: {
+ plugins: [createTestingI18n()],
+ },
+ props: {
parentType,
parentId,
- ...propsData,
- },
- provide: {
- [I18N_KEY as any]: i18nMock,
+ ...props,
},
});
};
diff --git a/src/pages/h5p/H5PEditor.page.vue b/src/pages/h5p/H5PEditor.page.vue
index e6dad461ab..c885510adf 100644
--- a/src/pages/h5p/H5PEditor.page.vue
+++ b/src/pages/h5p/H5PEditor.page.vue
@@ -2,8 +2,7 @@
{
- const translateResult = i18n.t(key, values);
- if (typeof translateResult === "string") {
- return translateResult;
- }
- return "unknown translation-key:" + key;
- };
+ const { t } = useI18n();
const route = useRoute();
diff --git a/src/pages/h5p/H5PPlayer.page.unit.ts b/src/pages/h5p/H5PPlayer.page.unit.ts
index 3da93564c3..fa8e0b8719 100644
--- a/src/pages/h5p/H5PPlayer.page.unit.ts
+++ b/src/pages/h5p/H5PPlayer.page.unit.ts
@@ -1,25 +1,16 @@
import { mount } from "@vue/test-utils";
import H5pPlayerPage from "./H5PPlayer.page.vue";
-import { I18N_KEY } from "@/utils/inject";
-import VueI18n from "vue-i18n";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { createTestingI18n } from "@@/tests/test-utils/setup";
-jest.mock("vue-router/composables", () => ({
+jest.mock("vue-router", () => ({
useRoute: () => ({ params: { id: "test-id" }, query: {} }),
}));
describe("H5PPlayerPage", () => {
- const i18nMock = new VueI18n({
- locale: "en",
- });
-
const createWrapper = () => {
return mount(H5pPlayerPage, {
- ...createComponentMocks({
- i18n: true,
- }),
- provide: {
- [I18N_KEY as any]: i18nMock,
+ global: {
+ plugins: [createTestingI18n()],
},
});
};
diff --git a/src/pages/h5p/H5PPlayer.page.vue b/src/pages/h5p/H5PPlayer.page.vue
index a6ce6b4aba..fbc12452a4 100644
--- a/src/pages/h5p/H5PPlayer.page.vue
+++ b/src/pages/h5p/H5PPlayer.page.vue
@@ -2,8 +2,7 @@
-
+
+
{{ $t("pages.rooms.headerSection.archived") }}
@@ -31,8 +31,8 @@
{{ $t("pages.rooms.headerSection.toCourseFiles") }}
@@ -40,71 +40,37 @@
-
+
{{ $t("common.actions.cancel") }}
-
+
{{
$t("pages.administration.students.consent.steps.download.next")
}}
@@ -220,7 +222,7 @@
{{ successMessage }}
![]()
- {{
+ {{
$t("pages.administration.students.consent.steps.success.back")
}}
-
{{ roomData.title }}
-
-
- {{ tabItem.icon }}
-
- {{ tabItem.label }}
-
-
+
+
+
+
+
+ {{ tabItem.icon }}
+
+ {{ tabItem.label }}
+
+
+
+
-
-
- {{ dialog.header }}
-
-
- - {{ dialog.text }} -
-
-
-
- {{ dialog.subText }}
-
-
-
- {{ $t("pages.rooms.index.courses.active") }}
@@ -12,8 +12,8 @@
-
Test-Slot: ${slotName}
`; - const { element } = shallowMount(component, { - ...mountOptions, - slots, - }); - global.expect(element.innerHTML).toContain(slots[slotName]); - }); - }, - ]; -}; - -// is imported by @@/tests/test-utils/componentMocks.ts -// please refactor -export default global.createComponentMocks; diff --git a/tsconfig.json b/tsconfig.json index 5edb370c7e..529a29e871 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -45,15 +45,17 @@ "@feature-board": ["src/components/feature-board"], "@feature-editor": ["src/components/feature-editor"], "@feature-render-html": ["src/components/feature-render-html"], + "@feature-news-form": ["src/components/feature-news-form"], "@ui-alert": ["src/components/ui-alert"], "@ui-board": ["src/components/ui-board"], - "@ui-color-overlay": ["src/components/ui-color-overlay"], "@ui-preview-image": ["src/components/ui-preview-image"], "@ui-confirmation-dialog": ["src/components/ui-confirmation-dialog"], "@ui-date-time-picker": ["src/components/ui-date-time-picker"], "@ui-light-box": ["src/components/ui-light-box"], + "@ui-speed-dial-menu": ["src/components/ui-speed-dial-menu"], "@util-board": ["src/components/util-board"], "@util-validators": ["src/components/util-validators"], + "@util-vue": ["src/components/util-vue"], "@util-input-masks": ["src/components/util-input-masks"], "@util-device-detection": ["src/components/util-device-detection"], "@page-board": ["src/components/page-board"], @@ -70,8 +72,5 @@ "tests/**/*.ts", "tests/**/*.tsx" ], - "exclude": ["node_modules", "./src/components/base/_globals.js"], - "vueCompilerOptions": { - "target": 2.7 - } + "exclude": ["node_modules", "./src/components/base/components.js"] } diff --git a/vue.config.js b/vue.config.js index 1b926ca5b9..e4691ee3c9 100644 --- a/vue.config.js +++ b/vue.config.js @@ -4,6 +4,7 @@ const { createDevServerConfig } = require("./webpack-config/dev-server-config"); const generateAliases = require("./webpack-config/theme-aliases"); const ThemeResolverPlugin = require("./webpack-config/theme-resolver-plugin"); const NoncePlaceholderPlugin = require("./webpack-config/nonce-placeholder-plugin"); +const { VuetifyPlugin } = require("webpack-plugin-vuetify"); const TSCONFIG_PATH = path.resolve(__dirname, "./tsconfig.build.json"); @@ -14,10 +15,15 @@ const getDir = (subPath) => path.resolve(__dirname, subPath); module.exports = defineConfig({ assetsDir: "_nuxt", + runtimeCompiler: true, + transpileDependencies: ["vuetify"], configureWebpack: { - plugins: [new NoncePlaceholderPlugin()], + plugins: [ + new VuetifyPlugin({ styles: { configFile: "src/styles/settings.scss" } }), + new NoncePlaceholderPlugin(), + ], resolve: { alias: { "@data-board": getDir("src/components/data-board"), @@ -48,17 +54,19 @@ module.exports = defineConfig({ "@feature-board": getDir("src/components/feature-board"), "@feature-editor": getDir("src/components/feature-editor"), "@feature-render-html": getDir("src/components/feature-render-html"), + "@feature-news-form": getDir("src/components/feature-news-form"), "@ui-alert": getDir("src/components/ui-alert"), "@ui-board": getDir("src/components/ui-board"), - "@ui-color-overlay": getDir("src/components/ui-color-overlay"), "@ui-preview-image": getDir("src/components/ui-preview-image"), "@ui-confirmation-dialog": getDir( "src/components/ui-confirmation-dialog" ), "@ui-date-time-picker": getDir("src/components/ui-date-time-picker"), "@ui-light-box": getDir("src/components/ui-light-box"), + "@ui-speed-dial-menu": getDir("src/components/ui-speed-dial-menu"), "@util-board": getDir("src/components/util-board"), "@util-validators": getDir("src/components/util-validators"), + "@util-vue": getDir("src/components/util-vue"), "@util-input-masks": getDir("src/components/util-input-masks"), "@util-device-detection": getDir( "src/components/util-device-detection" @@ -69,6 +77,16 @@ module.exports = defineConfig({ extensions: [".js", ".ts", ".vue", ".json"], plugins: [new ThemeResolverPlugin(__dirname, replacements)], }, + module: { + rules: [ + { + test: /\.ts$/, + type: "javascript/auto", + loader: path.resolve(__dirname, "webpack-config/vue-i18n-loader.js"), + include: [path.resolve(__dirname, "src/locales")], + }, + ], + }, }, // use custom tsconfig for webpack builds diff --git a/webpack-config/vue-i18n-loader.js b/webpack-config/vue-i18n-loader.js new file mode 100644 index 0000000000..b3ba2bc2bf --- /dev/null +++ b/webpack-config/vue-i18n-loader.js @@ -0,0 +1,39 @@ +const { generateJavaScript } = require("@intlify/bundle-utils"); + +const loader = function (source, sourceMap) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const loaderContext = this; + const options = { + filename: loaderContext.resourcePath, + bridge: false, + sourceMap: false, + inSourceMap: sourceMap, + forceStringify: false, + useClassComponent: false, + strictMessage: false, + escapeHtml: false, + env: loaderContext.mode, + type: "plain", + isGlobal: false, + onWarn: (msg) => { + loaderContext.emitWarning( + new Error(`[vue-i18n-loader]: ${loaderContext.resourcePath} ${msg}`) + ); + }, + onError: (msg) => { + loaderContext.emitError( + new Error(`[vue-i18n-loader]: ${loaderContext.resourcePath} ${msg}`) + ); + }, + }; + + try { + this.cacheable && this.cacheable(); + const { code, map } = generateJavaScript(source, options); + this.callback(null, code, map); + } catch (err) { + loaderContext.emitError(new Error(`[vue-i18n-loader]: ${err.message}`)); + } +}; + +module.exports = loader;