diff --git a/src/components/feature-board-link-element/components/LinkContentElement.unit.ts b/src/components/feature-board-link-element/components/LinkContentElement.unit.ts index e1dd367764..f292c3f38d 100644 --- a/src/components/feature-board-link-element/components/LinkContentElement.unit.ts +++ b/src/components/feature-board-link-element/components/LinkContentElement.unit.ts @@ -123,7 +123,7 @@ describe("LinkContentElement", () => { const component = wrapper.getComponent(LinkContentElementCreate); component.vm.$emit("create:url", "https://abc.de"); - expect(useMetaTagExtractorApiMock.extractMetaTags).toHaveBeenCalled(); + expect(useMetaTagExtractorApiMock.getMetaTags).toHaveBeenCalled(); }); describe("when no protocol was provided", () => { @@ -135,7 +135,7 @@ describe("LinkContentElement", () => { component.vm.$emit("create:url", url); const expected = `https://${url}`; - expect(useMetaTagExtractorApiMock.extractMetaTags).toHaveBeenCalledWith( + expect(useMetaTagExtractorApiMock.getMetaTags).toHaveBeenCalledWith( expected ); }); @@ -151,9 +151,12 @@ describe("LinkContentElement", () => { title: "my title", description: "", imageUrl: "https://abc.de/foto.png", + type: "unknown", + parentTitle: "", + parentType: "unknown", }; - useMetaTagExtractorApiMock.extractMetaTags.mockResolvedValue( + useMetaTagExtractorApiMock.getMetaTags.mockResolvedValue( fakeMetaTags ); diff --git a/src/components/feature-board-link-element/components/LinkContentElement.vue b/src/components/feature-board-link-element/components/LinkContentElement.vue index 2ed6b0a28d..5d13536d07 100644 --- a/src/components/feature-board-link-element/components/LinkContentElement.vue +++ b/src/components/feature-board-link-element/components/LinkContentElement.vue @@ -90,7 +90,7 @@ export default defineComponent({ () => props.isEditMode && !computedElement.value.content.url ); - const { extractMetaTags } = useMetaTagExtractorApi(); + const { getMetaTags } = useMetaTagExtractorApi(); const { createPreviewImage } = usePreviewGenerator(element.value.id); @@ -101,8 +101,7 @@ export default defineComponent({ const validUrl = ensureProtocolIncluded(originalUrl); modelValue.value.url = validUrl; - const { title, description, imageUrl } = - await extractMetaTags(validUrl); + const { title, description, imageUrl } = await getMetaTags(validUrl); modelValue.value.title = title; modelValue.value.description = description; diff --git a/src/components/feature-board-link-element/components/LinkContentElementCreate.vue b/src/components/feature-board-link-element/components/LinkContentElementCreate.vue index b647dc1904..b1fc3b1c73 100644 --- a/src/components/feature-board-link-element/components/LinkContentElementCreate.vue +++ b/src/components/feature-board-link-element/components/LinkContentElementCreate.vue @@ -12,14 +12,14 @@ rows="1" @keydown.enter.prevent.stop="onKeydownEnter" class="text" - > - - + /> + +
+ +
diff --git a/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.ts b/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.ts index 2a5c1d295a..8e4bca0750 100644 --- a/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.ts +++ b/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.ts @@ -1,5 +1,9 @@ -import { MetaTagExtractorApiFactory } from "@/serverApi/v3"; +import { + MetaTagExtractorApiFactory, + MetaTagExtractorResponse, +} from "@/serverApi/v3"; import { $axios } from "@/utils/api"; +import { useI18n } from "@/composables/i18n.composable"; type MetaTagResult = { url: string; @@ -9,15 +13,53 @@ type MetaTagResult = { }; export const useMetaTagExtractorApi = () => { + const { t } = useI18n(); const metaTagApi = MetaTagExtractorApiFactory(undefined, "/v3", $axios); - const extractMetaTags = async (url: string): Promise => { + const mapMetaTagResponse = ( + response: MetaTagExtractorResponse + ): MetaTagResult => { + const titleParts = [ + getPrefix(response.type), + getTitle(response.type, response.title), + getSuffix(response.type, response.parentTitle), + ]; + const title = titleParts.join(" ").trim(); + return { ...response, title }; + }; + + const getPrefix = (type: string): string => { + const typeToLanguageKeyMap: Record = { + course: "common.labels.course", + lesson: "common.words.topic", + task: "common.words.task", + board: "components.board", + }; + + const prefixKey = typeToLanguageKeyMap[type]; + return prefixKey ? `${t(prefixKey)}:` : ""; + }; + + const getTitle = (type: string, title: string) => { + if (type === "board" && title == "") { + return t("pages.room.boardCard.label.courseBoard"); + } + return title; + }; + + const getSuffix = (type: string, parentTitle: string): string => { + if (type === "board" && parentTitle !== "") { + return `(${parentTitle})`; + } + return ""; + }; + + const getMetaTags = async (url: string): Promise => { try { - const res = await metaTagApi.metaTagExtractorControllerGetData({ + const res = await metaTagApi.metaTagExtractorControllerGetMetaTags({ url, }); - - return res.data; + return mapMetaTagResponse(res.data); } catch (e) { return { url, @@ -28,6 +70,6 @@ export const useMetaTagExtractorApi = () => { }; return { - extractMetaTags, + getMetaTags, }; }; diff --git a/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.unit.ts b/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.unit.ts index 3232e8a2bf..b7b9ad4d01 100644 --- a/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.unit.ts +++ b/src/components/feature-board-link-element/composables/MetaTagExtractorApi.composable.unit.ts @@ -1,10 +1,13 @@ import * as serverApi from "@/serverApi/v3/api"; import { MetaTagExtractorResponse } from "@/serverApi/v3/api"; import { createMock, DeepMocked } from "@golevelup/ts-jest"; -import { mount } from "@vue/test-utils"; -import { defineComponent } from "vue"; import { useMetaTagExtractorApi } from "./MetaTagExtractorApi.composable"; -import { mockApiResponse } from "@@/tests/test-utils"; +import { + i18nMock, + mockApiResponse, + mountComposable, +} from "@@/tests/test-utils"; +import { I18N_KEY } from "@/utils/inject"; describe("useMetaTagExtractorApi", () => { let api: DeepMocked; @@ -19,56 +22,132 @@ describe("useMetaTagExtractorApi", () => { jest.clearAllMocks(); }); - const getWrapper = () => { - let composable: ReturnType | undefined; - - const TestComponent = defineComponent({ - template: "
", - setup() { - composable = useMetaTagExtractorApi(); - }, - }); - - const wrapper = mount(TestComponent, {}); - return { wrapper, composable }; - }; - - describe("extractMetaTags", () => { + describe("getMetaTags", () => { describe("when meta tags could be extracted", () => { - const setup = () => { - const mockedResponse: MetaTagExtractorResponse = { - url: "", - title: "", - description: "", - imageUrl: "", + describe("when meta tags are of type unknown", () => { + const setup = () => { + const mockedResponse: MetaTagExtractorResponse = { + url: "", + title: "", + description: "", + imageUrl: "", + type: "unknown", + parentTitle: "", + parentType: "unknown", + }; + + api.metaTagExtractorControllerGetMetaTags.mockResolvedValue( + mockApiResponse({ data: mockedResponse }) + ); + + const composable = mountComposable(() => useMetaTagExtractorApi(), { + [I18N_KEY.valueOf()]: i18nMock, + }); + + return { + mockedResponse, + composable, + }; }; - api.metaTagExtractorControllerGetData.mockResolvedValue( - mockApiResponse({ data: mockedResponse }) - ); + it("should be defined", () => { + const { composable } = setup(); - const { wrapper, composable } = getWrapper(); + expect(composable?.getMetaTags).toBeDefined(); + }); - return { - wrapper, - mockedResponse, - composable, - }; - }; + it("should return the data", async () => { + const { composable, mockedResponse } = setup(); - it("should be defined", () => { - const { composable } = setup(); + const url = "https://test.de/my-article"; + const data = await composable?.getMetaTags(url); - expect(composable?.extractMetaTags).toBeDefined(); + expect(data).toEqual(mockedResponse); + }); }); - it("should return the data", async () => { - const { composable, mockedResponse } = setup(); - - const url = "https://test.de/my-article"; - const data = await composable?.extractMetaTags(url); - - expect(data).toEqual(mockedResponse); + describe("when metatags are of type board", () => { + describe("when board has explicit title", () => { + const setup = () => { + const mockedResponse: MetaTagExtractorResponse = { + url: "https://test.de/my-article", + title: "Shakespear", + description: "", + imageUrl: "", + type: "board", + parentTitle: "English", + parentType: "course", + }; + + api.metaTagExtractorControllerGetMetaTags.mockResolvedValue( + mockApiResponse({ data: mockedResponse }) + ); + + const composable = mountComposable(() => useMetaTagExtractorApi(), { + [I18N_KEY.valueOf()]: i18nMock, + }); + + return { + mockedResponse, + composable, + }; + }; + + it("should be defined", () => { + const { composable } = setup(); + + expect(composable?.getMetaTags).toBeDefined(); + }); + + it("should return the correct composed title", async () => { + const { composable } = setup(); + + const url = "https://test.de/my-article"; + const data = await composable?.getMetaTags(url); + + expect(data.title).toEqual( + "components.board: Shakespear (English)" + ); + }); + }); + + describe("when board has no explicit title", () => { + const setup = () => { + const mockedResponse: MetaTagExtractorResponse = { + url: "https://test.de/my-article", + title: "", + description: "", + imageUrl: "", + type: "board", + parentTitle: "English", + parentType: "course", + }; + + api.metaTagExtractorControllerGetMetaTags.mockResolvedValue( + mockApiResponse({ data: mockedResponse }) + ); + + const composable = mountComposable(() => useMetaTagExtractorApi(), { + [I18N_KEY.valueOf()]: i18nMock, + }); + + return { + mockedResponse, + composable, + }; + }; + + it("should use default fallback title", async () => { + const { composable } = setup(); + + const url = "https://test.de/my-article"; + const data = await composable?.getMetaTags(url); + + expect(data.title).toEqual( + "components.board: pages.room.boardCard.label.courseBoard (English)" + ); + }); + }); }); }); @@ -79,14 +158,18 @@ describe("useMetaTagExtractorApi", () => { title: "", description: "", imageUrl: "", + type: "unknown", + parentTitle: "", + parentType: "unknown", }; - api.metaTagExtractorControllerGetData.mockRejectedValue(false); + api.metaTagExtractorControllerGetMetaTags.mockRejectedValue(false); - const { wrapper, composable } = getWrapper(); + const composable = mountComposable(() => useMetaTagExtractorApi(), { + [I18N_KEY.valueOf()]: { t: (key: string) => key }, + }); return { - wrapper, mockedResponse, composable, }; @@ -96,7 +179,7 @@ describe("useMetaTagExtractorApi", () => { const { composable } = setup(); const url = "https://test.de/my-article"; - const data = await composable?.extractMetaTags(url); + const data = await composable?.getMetaTags(url); expect(data).toEqual({ url, title: "", description: "" }); }); diff --git a/src/components/util-validators/validators.ts b/src/components/util-validators/validators.ts index 58cb867eea..7b7a6a56e3 100644 --- a/src/components/util-validators/validators.ts +++ b/src/components/util-validators/validators.ts @@ -19,7 +19,9 @@ export const isValidUrl: FormValidatorFn = (errMsg) => (value) => { if (!["http:", "https:"].includes(urlObject.protocol)) { throw new Error("Wrong protocol"); } - if (!urlObject.hostname.includes(".")) { + if ( + !(urlObject.hostname.includes(".") || urlObject.hostname === "localhost") + ) { throw new Error("TopLevelDomain missing"); } if (/(^-)|(--)|(-$)/.test(urlObject.hostname)) { diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts index 1d753c38e1..30707cf1c6 100644 --- a/src/serverApi/v3/api.ts +++ b/src/serverApi/v3/api.ts @@ -2561,6 +2561,24 @@ export interface MetaTagExtractorResponse { * @memberof MetaTagExtractorResponse */ imageUrl: string; + /** + * + * @type {string} + * @memberof MetaTagExtractorResponse + */ + type: string; + /** + * + * @type {string} + * @memberof MetaTagExtractorResponse + */ + parentTitle: string; + /** + * + * @type {string} + * @memberof MetaTagExtractorResponse + */ + parentType: string; } /** * @@ -9477,9 +9495,9 @@ export const MetaTagExtractorApiAxiosParamCreator = function (configuration?: Co * @param {*} [options] Override http request option. * @throws {RequiredError} */ - metaTagExtractorControllerGetData: async (getMetaTagDataBody: GetMetaTagDataBody, options: any = {}): Promise => { + metaTagExtractorControllerGetMetaTags: async (getMetaTagDataBody: GetMetaTagDataBody, options: any = {}): Promise => { // verify required parameter 'getMetaTagDataBody' is not null or undefined - assertParamExists('metaTagExtractorControllerGetData', 'getMetaTagDataBody', getMetaTagDataBody) + assertParamExists('metaTagExtractorControllerGetMetaTags', 'getMetaTagDataBody', getMetaTagDataBody) const localVarPath = `/meta-tag-extractor`; // use dummy base URL string because the URL constructor only accepts absolute URLs. const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL); @@ -9527,8 +9545,8 @@ export const MetaTagExtractorApiFp = function(configuration?: Configuration) { * @param {*} [options] Override http request option. * @throws {RequiredError} */ - async metaTagExtractorControllerGetData(getMetaTagDataBody: GetMetaTagDataBody, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { - const localVarAxiosArgs = await localVarAxiosParamCreator.metaTagExtractorControllerGetData(getMetaTagDataBody, options); + async metaTagExtractorControllerGetMetaTags(getMetaTagDataBody: GetMetaTagDataBody, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { + const localVarAxiosArgs = await localVarAxiosParamCreator.metaTagExtractorControllerGetMetaTags(getMetaTagDataBody, options); return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); }, } @@ -9548,8 +9566,8 @@ export const MetaTagExtractorApiFactory = function (configuration?: Configuratio * @param {*} [options] Override http request option. * @throws {RequiredError} */ - metaTagExtractorControllerGetData(getMetaTagDataBody: GetMetaTagDataBody, options?: any): AxiosPromise { - return localVarFp.metaTagExtractorControllerGetData(getMetaTagDataBody, options).then((request) => request(axios, basePath)); + metaTagExtractorControllerGetMetaTags(getMetaTagDataBody: GetMetaTagDataBody, options?: any): AxiosPromise { + return localVarFp.metaTagExtractorControllerGetMetaTags(getMetaTagDataBody, options).then((request) => request(axios, basePath)); }, }; }; @@ -9568,7 +9586,7 @@ export interface MetaTagExtractorApiInterface { * @throws {RequiredError} * @memberof MetaTagExtractorApiInterface */ - metaTagExtractorControllerGetData(getMetaTagDataBody: GetMetaTagDataBody, options?: any): AxiosPromise; + metaTagExtractorControllerGetMetaTags(getMetaTagDataBody: GetMetaTagDataBody, options?: any): AxiosPromise; } @@ -9587,8 +9605,8 @@ export class MetaTagExtractorApi extends BaseAPI implements MetaTagExtractorApiI * @throws {RequiredError} * @memberof MetaTagExtractorApi */ - public metaTagExtractorControllerGetData(getMetaTagDataBody: GetMetaTagDataBody, options?: any) { - return MetaTagExtractorApiFp(this.configuration).metaTagExtractorControllerGetData(getMetaTagDataBody, options).then((request) => request(this.axios, this.basePath)); + public metaTagExtractorControllerGetMetaTags(getMetaTagDataBody: GetMetaTagDataBody, options?: any) { + return MetaTagExtractorApiFp(this.configuration).metaTagExtractorControllerGetMetaTags(getMetaTagDataBody, options).then((request) => request(this.axios, this.basePath)); } }