diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap index f6f72d2efc..e8914c3f5a 100644 --- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap +++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap @@ -3,7 +3,7 @@ exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extension with registered tab shows extension tab in general area 1`] = ` `; +exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extensions with tabs having same id when navigating to first extension tab renders 1`] = ` +
+
+ +
+
+
+

+ registered-tab-page-id + preferences +

+
+
+ License item + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + close + + +
+ +
+
+
+
+
+
+`; + +exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extensions with tabs having same id when navigating to second extension tab renders 1`] = ` +
+
+ +
+
+
+

+ duplicated-tab-page-id + preferences +

+
+
+ Another metrics + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + close + + +
+ +
+
+
+
+
+
+`; + exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given multiple extensions with specific preferences, when navigating to extension specific preferences page renders 1`] = `
{ }); it("shows extension tab in general area", () => { - const actual = rendered.getByTestId("tab-link-for-extension-specific-tab-navigation-item-metrics-extension-tab"); + const actual = rendered.getByTestId("tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"); expect(actual).toMatchSnapshot(); }); @@ -187,7 +187,7 @@ describe("preferences - navigation to extension specific preferences", () => { describe("when navigating to specific extension tab", () => { beforeEach(() => { - applicationBuilder.preferences.navigation.click("extension-specific-tab-navigation-item-metrics-extension-tab"); + applicationBuilder.preferences.navigation.click("extension-registered-tab-page-id-nav-item-metrics-extension-tab"); }); it("renders", () => { expect(rendered.container).toMatchSnapshot(); @@ -204,6 +204,87 @@ describe("preferences - navigation to extension specific preferences", () => { }); }); }); + + describe("given extension with few registered tabs", () => { + beforeEach(async () => { + const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTabs); + + await applicationBuilder.addExtensions(extension); + }); + + it("shows each of registered tabs in general area", () => { + const helloTab = rendered.getByTestId("tab-link-for-extension-hello-world-tab-page-id-nav-item-hello-extension-tab"); + const logsTab = rendered.getByTestId("tab-link-for-extension-hello-world-tab-page-id-nav-item-logs-extension-tab"); + + expect(helloTab).toBeInTheDocument(); + expect(logsTab).toBeInTheDocument(); + }); + }); + + describe("given extensions with tabs having same id", () => { + beforeEach(async () => { + const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab); + const otherExtension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab); + + await applicationBuilder.addExtensions(extension, otherExtension); + }); + + it("shows tab from the first extension", () => { + const actual = rendered.getByTestId("tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"); + + expect(actual).toBeInTheDocument(); + }); + + it("shows tab from the second extension", () => { + const actual = rendered.getByTestId("tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"); + + expect(actual).toBeInTheDocument(); + }); + + describe("when navigating to first extension tab", () => { + beforeEach(() => { + applicationBuilder.preferences.navigation.click("extension-registered-tab-page-id-nav-item-metrics-extension-tab"); + }); + + it("renders", () => { + expect(rendered.container).toMatchSnapshot(); + }); + + it("shows related preferences for this tab", () => { + const actual = rendered.getByTestId("metrics-preference-item-hint"); + + expect(actual).toBeInTheDocument(); + }); + + it("does not show unrelated preferences for this tab", () => { + const actual = rendered.queryByTestId("another-metrics-preference-item-hint"); + + expect(actual).not.toBeInTheDocument(); + }); + }); + + describe("when navigating to second extension tab", () => { + beforeEach(() => { + applicationBuilder.preferences.navigation.click("extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"); + }); + + it("renders", () => { + expect(rendered.container).toMatchSnapshot(); + }); + + it("shows related preferences for this tab", () => { + const actual = rendered.getByTestId("another-metrics-preference-item-hint"); + + expect(actual).toBeInTheDocument(); + }); + + it("does not show unrelated preferences for this tab", () => { + const actual = rendered.queryByTestId("metrics-preference-item-hint"); + + expect(actual).not.toBeInTheDocument(); + }); + }); + }); }); }); @@ -313,3 +394,63 @@ const extensionStubWithWithRegisteredTab: Partial = { orderNumber: 100, }], }; + +const extensionStubWithWithRegisteredTabs: Partial = { + id: "hello-world-tab-page-id", + + appPreferences: [ + { + title: "Hello world", + id: "hello-preference-item-id", + showInPreferencesTab: "hello-extension-tab", + + components: { + Hint: () =>
, + Input: () =>
, + }, + }, + { + title: "Logs", + id: "logs-preference-item-id", + showInPreferencesTab: "logs-extension-tab", + + components: { + Hint: () =>
, + Input: () =>
, + }, + }, + ], + + appPreferenceTabs: [{ + title: "Metrics tab", + id: "hello-extension-tab", + orderNumber: 100, + }, { + title: "Logs tab", + id: "logs-extension-tab", + orderNumber: 200, + }], +}; + +const extensionStubWithWithSameRegisteredTab: Partial = { + id: "duplicated-tab-page-id", + + appPreferences: [ + { + title: "Another metrics", + id: "another-metrics-preference-item-id", + showInPreferencesTab: "metrics-extension-tab", + + components: { + Hint: () =>
, + Input: () =>
, + }, + }, + ], + + appPreferenceTabs: [{ + title: "Metrics tab", + id: "metrics-extension-tab", + orderNumber: 100, + }], +}; diff --git a/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts index 84a23beaf6..4af9c7ca8e 100644 --- a/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts +++ b/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts @@ -32,7 +32,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({ extension.appPreferenceTabs, map((tab) => { - const id = `extension-specific-tab-navigation-item-${tab.id}`; + const id = `extension-${extension.sanitizedExtensionId}-nav-item-${tab.id}`; const isActive = computed(() => routeIsActive.get() && pathParameters.get().tabId === tab.id); return getInjectable({