diff --git a/config/webpack/vue-i18n-loader.js b/config/webpack/vue-i18n-loader.js index 448f7e4c7a..666713278a 100644 --- a/config/webpack/vue-i18n-loader.js +++ b/config/webpack/vue-i18n-loader.js @@ -1,4 +1,4 @@ -const { generateJSON, generateJavaScript } = require("@intlify/bundle-utils"); +const { generateJavaScript } = require("@intlify/bundle-utils"); const loader = function (source, sourceMap) { // eslint-disable-next-line @typescript-eslint/no-this-alias @@ -10,8 +10,7 @@ const loader = function (source, sourceMap) { inSourceMap: sourceMap, forceStringify: false, useClassComponent: false, - strictMessage: false, - escapeHtml: false, + strictMessage: true, // DO NOT set this to false. We do not allow HTML in messages. env: loaderContext.mode, type: "plain", isGlobal: false, diff --git a/src/components/administration/AdminMigrationSection.unit.ts b/src/components/administration/AdminMigrationSection.unit.ts index 50ed0c4eb6..3c1f66322b 100644 --- a/src/components/administration/AdminMigrationSection.unit.ts +++ b/src/components/administration/AdminMigrationSection.unit.ts @@ -18,7 +18,6 @@ import { } from "@@/tests/test-utils/setup"; import { mount } from "@vue/test-utils"; import { nextTick } from "vue"; -import vueDompurifyHTMLPlugin from "vue-dompurify-html"; describe("AdminMigrationSection", () => { let schoolsModule: jest.Mocked; @@ -68,11 +67,7 @@ describe("AdminMigrationSection", () => { const wrapper = mount(AdminMigrationSection, { global: { - plugins: [ - createTestingVuetify(), - createTestingI18n(), - vueDompurifyHTMLPlugin, - ], + plugins: [createTestingVuetify(), createTestingI18n()], provide: { [SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule, [USER_LOGIN_MIGRATION_MODULE_KEY.valueOf()]: userLoginMigrationModule, @@ -181,11 +176,20 @@ describe("AdminMigrationSection", () => { } ); - const renderHtmls = wrapper.findAllComponents({ name: "RenderHTML" }); - - expect(renderHtmls[1].props("html")).toStrictEqual( - "components.administration.adminMigrationSection.infoText" - ); + const infoText = wrapper.get('[data-testId="migration-info-text"]'); + const expectedText = [ + "firstParagraph", + "secondParagraph", + "thirdParagraph", + "fourthParagraph", + ] + .map( + (text) => + `components.administration.adminMigrationSection.infoText.${text}` + ) + .join(""); + + expect(infoText.text()).toEqual(expectedText); }); it("should display the info text activeMigration when the admin activated the migration", () => { @@ -203,9 +207,9 @@ describe("AdminMigrationSection", () => { } ); - const renderHtmls = wrapper.findAllComponents({ name: "RenderHTML" }); + const infoText = wrapper.get('[data-testId="migration-active-status"]'); - expect(renderHtmls[1].props("html")).toStrictEqual( + expect(infoText.text()).toStrictEqual( "components.administration.adminMigrationSection.migrationActive" ); }); @@ -368,7 +372,7 @@ describe("AdminMigrationSection", () => { const buttonComponent = wrapper.findComponent({ name: "v-btn" }); const switchComponent = wrapper.findComponent({ name: "v-switch" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); expect(buttonComponent.exists()).toBe(false); expect(switchComponent.isVisible()).toBe(false); @@ -440,7 +444,7 @@ describe("AdminMigrationSection", () => { const buttonComponent = wrapper.findComponent({ name: "v-btn" }); const switchComponent = wrapper.findComponent({ name: "v-switch" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); expect(buttonComponent.exists()).toBe(false); expect(switchComponent.isVisible()).toBe(false); @@ -460,7 +464,7 @@ describe("AdminMigrationSection", () => { ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const cardComponent = wrapper.findComponent({ name: "v-card" }); @@ -478,7 +482,7 @@ describe("AdminMigrationSection", () => { } ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const cardComponent = wrapper.findComponent({ name: "v-card" }); const cardButtonAgree = cardComponent.find("[data-testId=agree-btn]"); @@ -506,7 +510,7 @@ describe("AdminMigrationSection", () => { } ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const cardComponent = wrapper.findComponent({ name: "v-card" }); const cardButtonDisagree = cardComponent.find( @@ -540,7 +544,7 @@ describe("AdminMigrationSection", () => { ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const cardComponent = wrapper.findComponent({ name: "v-card" }); @@ -567,7 +571,7 @@ describe("AdminMigrationSection", () => { ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const warningCards = wrapper.findAllComponents({ name: "migration-warning-card", @@ -602,7 +606,7 @@ describe("AdminMigrationSection", () => { } ); const buttonComponent = wrapper.findComponent({ name: "v-btn" }); - await buttonComponent.vm.$emit("click"); + await buttonComponent.trigger("click"); const cardComponent = wrapper.findComponent({ name: "v-card" }); const cardButtonDisagree = cardComponent.find( @@ -643,11 +647,18 @@ describe("AdminMigrationSection", () => { } ); - const renderHtmls = wrapper.findAllComponents({ name: "RenderHTML" }); - - expect(renderHtmls[2].props("html")).toContain( - "components.administration.adminMigrationSection.oauthMigrationFinished.text" + const dateParagraph = wrapper.get( + "[data-testid=migration-finished-timestamp]" ); + + const expectedText = ["firstParagraph", "secondParagraph"] + .map( + (paragraph) => + `components.administration.adminMigrationSection.oauthMigrationFinished.text.${paragraph}` + ) + .join(""); + + expect(dateParagraph.text()).toBe(expectedText); }); it("should show finalFinish text when migration grace period has expired", async () => { @@ -669,12 +680,16 @@ describe("AdminMigrationSection", () => { } ); - const renderHtml = wrapper.findComponent({ name: "RenderHTML" }); - - expect(renderHtml.props()).toHaveProperty("html"); - expect(renderHtml.props("html")).toContain( - "components.administration.adminMigrationSection.oauthMigrationFinished.textComplete" + const paragraph = wrapper.get( + "[data-testid=migration-finished-timestamp]" ); + + const expectedText = [ + "components.administration.adminMigrationSection.oauthMigrationFinished.text.firstParagraph", + "components.administration.adminMigrationSection.oauthMigrationFinished.textComplete.secondParagraph", + ].join(""); + + expect(paragraph.text()).toBe(expectedText); }); it("should not exist when migration has not been completed", async () => { diff --git a/src/components/administration/AdminMigrationSection.vue b/src/components/administration/AdminMigrationSection.vue index 18beaa9ec9..dfa7b6945d 100644 --- a/src/components/administration/AdminMigrationSection.vue +++ b/src/components/administration/AdminMigrationSection.vue @@ -1,203 +1,260 @@ diff --git a/src/components/lern-store/ContentInitialState.unit.ts b/src/components/lern-store/ContentInitialState.unit.ts index 10aec4791c..2d0534276d 100644 --- a/src/components/lern-store/ContentInitialState.unit.ts +++ b/src/components/lern-store/ContentInitialState.unit.ts @@ -5,23 +5,18 @@ import { } from "@@/tests/test-utils/setup"; import { mount } from "@vue/test-utils"; import ContentInitialState from "./ContentInitialState.vue"; -import vueDompurifyHTMLPlugin from "vue-dompurify-html"; describe("@/components/molecules/ContentInitialState", () => { const wrapper = mount(ContentInitialState, { global: { - plugins: [ - createTestingI18n(), - createTestingVuetify(), - vueDompurifyHTMLPlugin, - ], + plugins: [createTestingI18n(), createTestingVuetify()], }, data: () => ({}), }); it("Provides proper title", () => { expect(wrapper.findComponent(vCustomEmptyState).props("title")).toBe( - "pages.content.init_state.title" + "pages.content.initState.title" ); }); it("Provides message", () => { diff --git a/src/components/lern-store/ContentInitialState.vue b/src/components/lern-store/ContentInitialState.vue index b1605f9cf7..7c9d92abd5 100644 --- a/src/components/lern-store/ContentInitialState.vue +++ b/src/components/lern-store/ContentInitialState.vue @@ -1,30 +1,46 @@ -