1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Adjust navigate to preferences tests to new changes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-06-08 15:23:30 +03:00
parent 2011c5dc64
commit b6f7e2c449
3 changed files with 855 additions and 23 deletions

View File

@ -1,5 +1,790 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extension with registered tab shows extension tab in general area 1`] = `
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
`;
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extension with registered tab when navigating to specific extension tab renders 1`] = `
<div>
<div
class="SettingLayout showNavigation Preferences"
data-testid="extension-preferences-page"
>
<nav
class="sidebarRegion"
>
<div
class="sidebar"
>
<div
class="Tabs flex column"
>
<div
class="header"
>
Preferences
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-application"
role="tab"
tabindex="0"
>
<div
class="label"
>
App
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-proxy"
role="tab"
tabindex="0"
>
<div
class="label"
>
Proxy
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-kubernetes"
role="tab"
tabindex="0"
>
<div
class="label"
>
Kubernetes
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-editor"
role="tab"
tabindex="0"
>
<div
class="label"
>
Editor
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-terminal"
role="tab"
tabindex="0"
>
<div
class="label"
>
Terminal
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
</div>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="extensions"
>
<h2>
registered-tab-page-id
preferences
</h2>
<section
class="small"
data-testid="extension-preference-item-for-metrics-preference-item-id"
id="metrics-preference-item-id"
>
<div
class="SubTitle"
>
License item
</div>
<div
data-testid="metrics-preference-item-input"
/>
<div
class="hint"
>
<div
data-testid="metrics-preference-item-hint"
/>
</div>
</section>
<hr
class="small"
/>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div
data-testid="close-preferences"
>
<div
aria-label="Close"
class="closeButton"
role="button"
>
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
</div>
<div
aria-hidden="true"
class="esc"
>
ESC
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
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`] = `
<div>
<div
class="SettingLayout showNavigation Preferences"
data-testid="extension-preferences-page"
>
<nav
class="sidebarRegion"
>
<div
class="sidebar"
>
<div
class="Tabs flex column"
>
<div
class="header"
>
Preferences
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-application"
role="tab"
tabindex="0"
>
<div
class="label"
>
App
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-proxy"
role="tab"
tabindex="0"
>
<div
class="label"
>
Proxy
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-kubernetes"
role="tab"
tabindex="0"
>
<div
class="label"
>
Kubernetes
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-editor"
role="tab"
tabindex="0"
>
<div
class="label"
>
Editor
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-terminal"
role="tab"
tabindex="0"
>
<div
class="label"
>
Terminal
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
</div>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="extensions"
>
<h2>
registered-tab-page-id
preferences
</h2>
<section
class="small"
data-testid="extension-preference-item-for-metrics-preference-item-id"
id="metrics-preference-item-id"
>
<div
class="SubTitle"
>
License item
</div>
<div
data-testid="metrics-preference-item-input"
/>
<div
class="hint"
>
<div
data-testid="metrics-preference-item-hint"
/>
</div>
</section>
<hr
class="small"
/>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div
data-testid="close-preferences"
>
<div
aria-label="Close"
class="closeButton"
role="button"
>
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
</div>
<div
aria-hidden="true"
class="esc"
>
ESC
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
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`] = `
<div>
<div
class="SettingLayout showNavigation Preferences"
data-testid="extension-preferences-page"
>
<nav
class="sidebarRegion"
>
<div
class="sidebar"
>
<div
class="Tabs flex column"
>
<div
class="header"
>
Preferences
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-application"
role="tab"
tabindex="0"
>
<div
class="label"
>
App
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-proxy"
role="tab"
tabindex="0"
>
<div
class="label"
>
Proxy
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-kubernetes"
role="tab"
tabindex="0"
>
<div
class="label"
>
Kubernetes
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-editor"
role="tab"
tabindex="0"
>
<div
class="label"
>
Editor
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-terminal"
role="tab"
tabindex="0"
>
<div
class="label"
>
Terminal
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"
role="tab"
tabindex="0"
>
<div
class="label"
>
Metrics tab
</div>
</div>
</div>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="extensions"
>
<h2>
duplicated-tab-page-id
preferences
</h2>
<section
class="small"
data-testid="extension-preference-item-for-another-metrics-preference-item-id"
id="another-metrics-preference-item-id"
>
<div
class="SubTitle"
>
Another metrics
</div>
<div
data-testid="another-metrics-preference-item-input"
/>
<div
class="hint"
>
<div
data-testid="another-metrics-preference-item-hint"
/>
</div>
</section>
<hr
class="small"
/>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div
data-testid="close-preferences"
>
<div
aria-label="Close"
class="closeButton"
role="button"
>
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
</div>
<div
aria-hidden="true"
class="esc"
>
ESC
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
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`] = `
<div>
<div
class="SettingLayout showNavigation Preferences"
data-testid="extension-preferences-page"
>
<nav
class="sidebarRegion"
>
<div
class="sidebar"
>
<div
class="Tabs flex column"
>
<div
class="header"
>
Preferences
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-application"
role="tab"
tabindex="0"
>
<div
class="label"
>
App
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-proxy"
role="tab"
tabindex="0"
>
<div
class="label"
>
Proxy
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-kubernetes"
role="tab"
tabindex="0"
>
<div
class="label"
>
Kubernetes
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-editor"
role="tab"
tabindex="0"
>
<div
class="label"
>
Editor
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-terminal"
role="tab"
tabindex="0"
>
<div
class="label"
>
Terminal
</div>
</div>
<div
data-testid="extension-settings"
>
<hr />
<div
class="header flex items-center"
>
<i
class="Icon mr-3 material focusable smallest"
>
<span
class="icon"
data-icon-name="extension"
>
extension
</span>
</i>
Extensions
</div>
<div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-some-test-extension-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
some-test-extension-id
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-some-other-test-extension-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
some-other-test-extension-id
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="extensions"
>
<h2>
some-test-extension-id
preferences
</h2>
<section
class="small"
data-testid="extension-preference-item-for-some-preference-item-id"
id="some-preference-item-id"
>
<div
class="SubTitle"
>
Some preference item
</div>
<div
data-testid="some-preference-item-input"
/>
<div
class="hint"
>
<div
data-testid="some-preference-item-hint"
/>
</div>
</section>
<hr
class="small"
/>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div
data-testid="close-preferences"
>
<div
aria-label="Close"
class="closeButton"
role="button"
>
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
</div>
<div
aria-hidden="true"
class="esc"
>
ESC
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered renders 1`] = `
<div>
<div
@ -610,15 +1395,37 @@ exports[`preferences - navigation to extension specific preferences given in pre
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extensions"
role="tab"
tabindex="0"
data-testid="extension-settings"
>
<hr />
<div
class="label"
class="header flex items-center"
>
Extensions
<i
class="Icon mr-3 material focusable smallest"
>
<span
class="icon"
data-icon-name="extension"
>
extension
</span>
</i>
Extensions
</div>
<div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-some-test-extension-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
some-test-extension-id
</div>
</div>
</div>
</div>
</div>
@ -1151,15 +1958,37 @@ exports[`preferences - navigation to extension specific preferences given in pre
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extensions"
role="tab"
tabindex="0"
data-testid="extension-settings"
>
<hr />
<div
class="label"
class="header flex items-center"
>
Extensions
<i
class="Icon mr-3 material focusable smallest"
>
<span
class="icon"
data-icon-name="extension"
>
extension
</span>
</i>
Extensions
</div>
<div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-extension-some-test-extension-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
some-test-extension-id
</div>
</div>
</div>
</div>
</div>
@ -1176,7 +2005,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
id="extensions"
>
<h2>
Extensions
some-test-extension-id
preferences
</h2>
<section
class="small"

View File

@ -279,8 +279,8 @@ describe("preferences - navigation to extension specific preferences", () => {
});
const extensionStubWithExtensionSpecificPreferenceItems: FakeExtensionData = {
id: "some-extension-id",
name: "some-extension-name",
id: "some-test-extension-id",
name: "some-test-extension-id",
appPreferences: [
{
title: "Some preference item",
@ -307,7 +307,7 @@ const extensionStubWithExtensionSpecificPreferenceItems: FakeExtensionData = {
const someOtherExtensionStubWithExtensionSpecificPreferenceItems: FakeExtensionData = {
id: "some-other-test-extension-id",
name: "some-other-test-extension-name",
name: "some-other-test-extension-id",
appPreferences: [
{
@ -324,7 +324,7 @@ const someOtherExtensionStubWithExtensionSpecificPreferenceItems: FakeExtensionD
const extensionStubWithoutPreferences: FakeExtensionData = {
id: "without-preferences-id",
name: "without-preferences-name",
name: "without-preferences-id",
};
const extensionStubWithShowInPreferencesTab: FakeExtensionData = {
@ -347,7 +347,7 @@ const extensionStubWithShowInPreferencesTab: FakeExtensionData = {
const extensionStubWithWithRegisteredTab: FakeExtensionData = {
id: "registered-tab-page-id",
name: "registered-tab-page-name",
name: "registered-tab-page-id",
appPreferences: [
{
@ -391,7 +391,7 @@ const extensionStubWithWithRegisteredTab: FakeExtensionData = {
const extensionStubWithWithRegisteredTabs: FakeExtensionData = {
id: "hello-world-tab-page-id",
name: "hello-world-tab-page-name",
name: "hello-world-tab-page-id",
appPreferences: [
{
@ -429,7 +429,7 @@ const extensionStubWithWithRegisteredTabs: FakeExtensionData = {
const extensionStubWithWithSameRegisteredTab: FakeExtensionData = {
id: "duplicated-tab-page-id",
name: "duplicated-tab-page-name",
name: "duplicated-tab-page-id",
appPreferences: [
{

View File

@ -15,12 +15,14 @@ import { pipeline } from "@ogre-tools/fp";
import extensionPreferencesRouteInjectable from "../../../../common/front-end-routing/routes/preferences/extension/extension-preferences-route.injectable";
import currentPathParametersInjectable from "../../../routes/current-path-parameters.injectable";
import navigateToExtensionPreferencesInjectable from "../../../../common/front-end-routing/routes/preferences/extension/navigate-to-extension-preferences.injectable";
import type { LensExtension } from "../../../../extensions/lens-extension";
const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
id: "extension-specific-tab-preferences-navigation-items",
instantiate: (di) => {
return (extension: LensRendererExtension) => {
return (ext: LensExtension) => {
const extension = ext as LensRendererExtension;
const navigateToExtensionPreferences = di.inject(
navigateToExtensionPreferencesInjectable,
);
@ -41,7 +43,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
instantiate: () => ({
id,
label: tab.title,
orderNumber: tab.orderNumber,
orderNumber: tab.orderNumber || 100,
navigate: () => navigateToExtensionPreferences(extension.sanitizedExtensionId, tab.id),
isVisible: computed(() => true),
isActive,
@ -50,7 +52,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
}),
);
injectables.forEach(di.register);
di.register(...injectables)
return;
};