Rename old directory for behaviours as "features" to better communicate new intent with new directory structure to organize code and tests around features instead of technicalities (#6033)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Iku-tursoandJanne Savolainen authored and GitHub committed 2022-08-16 15:09:08 +03:00
1 parent 36077a9fea
commit 299922c8a7
107 files changed

No files matched your search

@@ -0,0 +1,321 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`extension special characters in page registrations renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`extension special characters in page registrations when navigating to route with ID having special characters renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
Some page
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,729 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`navigate to extension page renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`navigate to extension page when extension navigates to child route renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
Child page
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`navigate to extension page when extension navigates to route with parameters renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
<ul>
<li>
some-string-value-from-navigate
</li>
<li>
126
</li>
<li>
some-array-value-from-navigate
</li>
</ul>
<button
data-testid="button-to-change-page-parameters"
type="button"
>
Some button
</button>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`navigate to extension page when extension navigates to route without parameters renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
<ul>
<li>
some-string-value
</li>
<li>
42
</li>
<li>
some-array-value,some-other-array-value
</li>
</ul>
<button
data-testid="button-to-change-page-parameters"
type="button"
>
Some button
</button>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`navigate to extension page when extension navigates to route without parameters when changing page parameters renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
<ul>
<li>
some-changed-string-value
</li>
<li>
84
</li>
<li>
some-changed-array-value,some-other-changed-array-value
</li>
</ul>
<button
data-testid="button-to-change-page-parameters"
type="button"
>
Some button
</button>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,244 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`navigating between routes given route with optional path parameters when navigating to route with path parameters renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<pre>
{
"someParameter": "some-value",
"someOtherParameter": "some-other-value"
}
</pre>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`navigating between routes given route without path parameters when navigating to route renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div>
Some component
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,404 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`add-cluster - navigation using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`add-cluster - navigation using application menu when navigating to add cluster using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout AddClusters"
data-testid="add-cluster-page"
>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content flex column gaps"
>
<h2>
Add Clusters from Kubeconfig
</h2>
<p>
Clusters added here are
<b>
not
</b>
merged into the
<code>
~/.kube/config
</code>
file.
<a
href="https://docs.k8slens.dev/main/catalog/add-cluster/"
rel="noreferrer"
target="_blank"
>
Read more about adding clusters.
</a>
</p>
<div
class="flex column"
>
<textarea
data-testid="monaco-editor-for-undefined"
/>
</div>
<div
class="actions-panel"
>
<button
class="Button primary"
disabled=""
type="button"
>
Add clusters
</button>
<div />
</div>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div>
<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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,45 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("add-cluster - navigation using application menu", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show add cluster page yet", () => {
const actual = rendered.queryByTestId("add-cluster-page");
expect(actual).toBeNull();
});
describe("when navigating to add cluster using application menu", () => {
beforeEach(async () => {
await applicationBuilder.applicationMenu.click("file.add-cluster");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows add cluster page", () => {
const actual = rendered.getByTestId("add-cluster-page");
expect(actual).not.toBeNull();
});
});
});
@@ -0,0 +1,708 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`force user to update when too long since update was downloaded when application is started given checking for updates and it resolves, when update was downloaded renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
<button
class="updateButton"
data-testid="update-button"
data-warning-level="light"
id="update-lens-button"
>
Update
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</button>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
exports[`force user to update when too long since update was downloaded when application is started given checking for updates and it resolves, when update was downloaded when enough time passes to consider that update must be installed renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
<button
class="updateButton"
data-testid="update-button"
data-warning-level="light"
id="update-lens-button"
>
Update
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</button>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
<div
class="Animate opacity-scale Dialog flex center modal pinned enter"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
>
<div
class="box"
>
<div
class="ForceUpdateModal"
data-testid="must-update-immediately"
>
<div
class="header"
>
<h2>
Please update
</h2>
</div>
<div
class="content"
>
<p>
An update to Lens Desktop is required to continue using the application.
</p>
</div>
<div
class="footer"
>
<button
class="Button primary"
data-testid="update-now-from-must-update-immediately-modal"
type="button"
>
Update
(
<span
data-testid="countdown-to-automatic-update"
>
5
</span>
)
</button>
</div>
</div>
</div>
</div>
</body>
`;
exports[`force user to update when too long since update was downloaded when application is started given checking for updates and it resolves, when update was downloaded when not enough time passes to consider that update must be installed renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
<button
class="updateButton"
data-testid="update-button"
data-warning-level="light"
id="update-lens-button"
>
Update
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</button>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
@@ -0,0 +1,423 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`encourage user to update when sufficient time passed since update was downloaded when started given the update check when update downloaded given some time passes, when checking for updates again when checking for updates resolves with same version that was previously downloaded renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
<button
class="updateButton"
data-testid="update-button"
data-warning-level="light"
id="update-lens-button"
>
Update
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</button>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
exports[`encourage user to update when sufficient time passed since update was downloaded when started renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
File diff suppressed because it is too large. Load diff
@@ -0,0 +1,203 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`periodical checking of updates given updater is enabled and configuration exists, when started renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
@@ -0,0 +1,203 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`selection of update stability when started renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
@@ -0,0 +1,264 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import appEventBusInjectable from "../../common/app-event-bus/app-event-bus.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import quitAndInstallUpdateInjectable from "../../main/application-update/quit-and-install-update.injectable";
import appVersionInjectable from "../../common/vars/app-version.injectable";
import periodicalCheckForUpdatesInjectable from "../../main/application-update/periodical-check-for-updates/periodical-check-for-updates.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
describe("analytics for installing update", () => {
let applicationBuilder: ApplicationBuilder;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
let analyticsListenerMock: jest.Mock;
let mainDi: DiContainer;
beforeEach(async () => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
analyticsListenerMock = jest.fn();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(appVersionInjectable, () => "42.0.0");
checkForPlatformUpdatesMock = asyncFn();
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
downloadPlatformUpdateMock = asyncFn();
mainDi.override(downloadPlatformUpdateInjectable, () => downloadPlatformUpdateMock);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
const eventBus = mainDi.inject(appEventBusInjectable);
eventBus.addListener(analyticsListenerMock);
});
mainDi = applicationBuilder.dis.mainDi;
});
describe("given application is started and checking updates periodically", () => {
beforeEach(async () => {
mainDi.unoverride(periodicalCheckForUpdatesInjectable);
mainDi.permitSideEffects(periodicalCheckForUpdatesInjectable);
await applicationBuilder.render();
});
it("sends event to analytics for being checked periodically", () => {
expect(analyticsListenerMock).toHaveBeenCalledWith({
name: "app",
action: "checking-for-updates",
params: {
currentDateTime: "2015-10-21T07:28:00Z",
source: "periodic",
},
});
});
it("when enough time passes to check for updates again, sends event to analytics for being checked periodically", () => {
analyticsListenerMock.mockClear();
advanceFakeTime(1000 * 60 * 60 * 2);
expect(analyticsListenerMock).toHaveBeenCalledWith({
name: "app",
action: "checking-for-updates",
params: {
currentDateTime: "2015-10-21T09:28:00Z",
source: "periodic",
},
});
});
});
describe("when application is started", () => {
beforeEach(async () => {
analyticsListenerMock.mockClear();
await applicationBuilder.render();
});
it("sends event to analytics about the current version", () => {
expect(analyticsListenerMock).toHaveBeenCalledWith({
name: "app",
action: "current-version",
params: {
version: "42.0.0",
currentDateTime: "2015-10-21T07:28:00Z",
},
});
});
it("when checking for updates using tray, sends event to analytics for being checked from tray", async () => {
analyticsListenerMock.mockClear();
applicationBuilder.tray.click("check-for-updates");
expect(analyticsListenerMock.mock.calls).toEqual([
[
{
name: "app",
action: "checking-for-updates",
params: {
currentDateTime: "2015-10-21T07:28:00Z",
source: "tray",
},
},
],
]);
});
it("when checking for updates using application menu, sends event to analytics for being checked from application menu", async () => {
analyticsListenerMock.mockClear();
applicationBuilder.applicationMenu.click("root.check-for-updates");
expect(analyticsListenerMock.mock.calls).toEqual([
[
{
name: "app",
action: "checking-for-updates",
params: {
currentDateTime: "2015-10-21T07:28:00Z",
source: "application-menu",
},
},
],
]);
});
describe("given checking for updates, when check for updates resolves with new update being available", () => {
beforeEach(async () => {
const processCheckingForUpdates = mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
analyticsListenerMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "43.0.0",
});
});
it("sends event to analytics about new update being available", () => {
expect(analyticsListenerMock.mock.calls).toEqual([
[
{
name: "app",
action: "update-was-discovered",
params: {
version: "43.0.0",
currentDateTime: "2015-10-21T07:28:00Z",
},
},
],
]);
});
describe("given update is downloaded", () => {
beforeEach(async () => {
analyticsListenerMock.mockClear();
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
});
describe("given checking for updates again", () => {
beforeEach(() => {
const processCheckingForUpdates = mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
analyticsListenerMock.mockClear();
});
it("when check resolves with same version that was previously downloaded, does not send event to analytics about update discovered", async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "43.0.0",
});
expect(analyticsListenerMock).not.toHaveBeenCalled();
});
it("when check resolves with different version that was previously downloaded, sends event to analytics about update discovered", async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "44.0.0",
});
expect(analyticsListenerMock.mock.calls).toEqual([
[
{
name: "app",
action: "update-was-discovered",
params: {
version: "44.0.0",
currentDateTime: "2015-10-21T07:28:00Z",
},
},
],
]);
});
});
it("does not send event to analytics about update downloaded being successful", () => {
expect(analyticsListenerMock).not.toHaveBeenCalled();
});
it("when installing the update, sends event to analytics about installing the update", () => {
const quitAndInstallUpdate = mainDi.inject(quitAndInstallUpdateInjectable);
quitAndInstallUpdate();
expect(analyticsListenerMock.mock.calls).toEqual([
[
{
name: "app",
action: "start-installing-update",
params: {
version: "43.0.0",
currentDateTime: "2015-10-21T07:28:00Z",
updateChannel: "latest",
},
},
],
]);
});
});
});
});
});
@@ -0,0 +1,85 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import selectedUpdateChannelInjectable from "../../common/application-update/selected-update-channel/selected-update-channel.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
import appVersionInjectable from "../../common/vars/app-version.injectable";
import { updateChannels } from "../../common/application-update/update-channels";
describe("downgrading version update", () => {
let applicationBuilder: ApplicationBuilder;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let mainDi: DiContainer;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
checkForPlatformUpdatesMock = asyncFn();
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
mainDi = applicationBuilder.dis.mainDi;
});
[
{
updateChannel: updateChannels.latest,
appVersion: "4.0.0-beta",
downgradeIsAllowed: true,
},
{
updateChannel: updateChannels.beta,
appVersion: "4.0.0-beta",
downgradeIsAllowed: false,
},
{
updateChannel: updateChannels.beta,
appVersion: "4.0.0-beta.1",
downgradeIsAllowed: false,
},
{
updateChannel: updateChannels.alpha,
appVersion: "4.0.0-beta",
downgradeIsAllowed: true,
},
{
updateChannel: updateChannels.alpha,
appVersion: "4.0.0-alpha",
downgradeIsAllowed: false,
},
].forEach(({ appVersion, updateChannel, downgradeIsAllowed }) => {
it(`given application version "${appVersion}" and update channel "${updateChannel.id}", when checking for updates, can${downgradeIsAllowed ? "": "not"} downgrade`, async () => {
mainDi.override(appVersionInjectable, () => appVersion);
await applicationBuilder.render();
const selectedUpdateChannel = mainDi.inject(selectedUpdateChannelInjectable);
selectedUpdateChannel.setValue(updateChannel.id);
const processCheckingForUpdates = mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(expect.any(Object), { allowDowngrade: downgradeIsAllowed });
});
});
});
@@ -0,0 +1,152 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { DiContainer } from "@ogre-tools/injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
import quitAndInstallUpdateInjectable from "../../main/application-update/quit-and-install-update.injectable";
import timeAfterUpdateMustBeInstalledInjectable from "../../renderer/application-update/force-update-modal/time-after-update-must-be-installed.injectable";
import secondsAfterInstallStartsInjectable from "../../renderer/application-update/force-update-modal/seconds-after-install-starts.injectable";
import forceUpdateModalRootFrameComponentInjectable from "../../renderer/application-update/force-update-modal/force-update-modal-root-frame-component.injectable";
const TIME_AFTER_UPDATE_MUST_BE_INSTALLED = 1000;
const TIME_AFTER_INSTALL_STARTS = 5 * 1000;
describe("force user to update when too long since update was downloaded", () => {
let applicationBuilder: ApplicationBuilder;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
let mainDi: DiContainer;
let quitAndInstallUpdateMock: jest.Mock;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
rendererDi.unoverride(forceUpdateModalRootFrameComponentInjectable);
rendererDi.permitSideEffects(forceUpdateModalRootFrameComponentInjectable);
checkForPlatformUpdatesMock = asyncFn();
mainDi.override(checkForPlatformUpdatesInjectable, () => checkForPlatformUpdatesMock);
downloadPlatformUpdateMock = asyncFn();
mainDi.override(downloadPlatformUpdateInjectable, () => downloadPlatformUpdateMock);
quitAndInstallUpdateMock = jest.fn();
mainDi.override(quitAndInstallUpdateInjectable, () => quitAndInstallUpdateMock);
rendererDi.override(timeAfterUpdateMustBeInstalledInjectable, () => TIME_AFTER_UPDATE_MUST_BE_INSTALLED);
rendererDi.override(secondsAfterInstallStartsInjectable, () => TIME_AFTER_INSTALL_STARTS / 1000);
});
mainDi = applicationBuilder.dis.mainDi;
});
describe("when application is started", () => {
let rendered: RenderResult;
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
describe("given checking for updates and it resolves, when update was downloaded", () => {
beforeEach(async () => {
const processCheckingForUpdates = mainDi.inject(
processCheckingForUpdatesInjectable,
);
processCheckingForUpdates("irrelevant");
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "42.0.0",
});
await downloadPlatformUpdateMock.resolve({
downloadWasSuccessful: true,
});
});
it("does not show modal yet", () => {
expect(rendered.queryByTestId("must-update-immediately")).not.toBeInTheDocument();
});
describe("when not enough time passes to consider that update must be installed", () => {
beforeEach(() => {
advanceFakeTime(TIME_AFTER_UPDATE_MUST_BE_INSTALLED - 1);
});
it("does not show modal yet", () => {
expect(rendered.queryByTestId("must-update-immediately")).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when enough time passes to consider that update must be installed", () => {
beforeEach(() => {
advanceFakeTime(TIME_AFTER_UPDATE_MUST_BE_INSTALLED);
});
it("shows modal to inform about forced update", () => {
expect(rendered.getByTestId("must-update-immediately")).toBeInTheDocument();
});
it("when selected to update now, restarts the application to update", () => {
fireEvent.click(rendered.getByTestId("update-now-from-must-update-immediately-modal"));
expect(quitAndInstallUpdateMock).toHaveBeenCalled();
});
it("shows countdown for automatic update", () => {
expect(rendered.getByTestId("countdown-to-automatic-update")).toHaveTextContent("5");
});
it("when some time passes, updates the countdown for automatic update", () => {
advanceFakeTime(1000);
expect(rendered.getByTestId("countdown-to-automatic-update")).toHaveTextContent("4");
});
it("when not enough time passes for automatic update, does not restart the application yet", () => {
advanceFakeTime(TIME_AFTER_INSTALL_STARTS - 1);
expect(quitAndInstallUpdateMock).not.toHaveBeenCalled();
});
it("when enough time passes for automatically update, restarts the application to update", () => {
advanceFakeTime(TIME_AFTER_INSTALL_STARTS);
expect(quitAndInstallUpdateMock).toHaveBeenCalled();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
});
});
});
@@ -0,0 +1,178 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import { act } from "@testing-library/react";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import quitAndInstallUpdateInjectable from "../../main/application-update/quit-and-install-update.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
function daysToMilliseconds(days: number) {
return Math.round(days * 24 * 60 * 60 * 1000);
}
describe("encourage user to update when sufficient time passed since update was downloaded", () => {
let applicationBuilder: ApplicationBuilder;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
let quitAndInstallUpdateMock: jest.MockedFunction<() => void>;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
checkForPlatformUpdatesMock = asyncFn();
downloadPlatformUpdateMock = asyncFn();
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
mainDi.override(
downloadPlatformUpdateInjectable,
() => downloadPlatformUpdateMock,
);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
quitAndInstallUpdateMock = jest.fn();
mainDi.override(quitAndInstallUpdateInjectable, () => quitAndInstallUpdateMock);
});
});
describe("when started", () => {
let rendered: RenderResult;
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show update button yet", () => {
const button = rendered.queryByTestId("update-button");
expect(button).toBeNull();
});
describe("given the update check", () => {
let processCheckingForUpdates: (source: string) => Promise<{ updateIsReadyToBeInstalled: boolean }>;
beforeEach(async () => {
processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(
processCheckingForUpdatesInjectable,
);
processCheckingForUpdates("irrelevant");
});
describe("when update downloaded", () => {
let button: HTMLElement;
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
button = rendered.getByTestId("update-button");
});
it("shows update button to help user to update", () => {
expect(button).toBeInTheDocument();
});
it("has soft emotional indication in the button", () => {
expect(button).toHaveAttribute("data-warning-level", "light");
});
// TODO: Implement after starting main and renderer is separated in ApplicationBuilder
xit("given closing the application window, when starting the application window again, still shows the button", () => {
expect(button).toBeInTheDocument();
});
describe("given some time passes, when checking for updates again", () => {
beforeEach(() => {
advanceFakeTime(daysToMilliseconds(2));
processCheckingForUpdates("irrelevant");
});
describe("when checking for updates resolves with same version that was previously downloaded", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
});
it("when enough time from download passes for medium update encouragement, has medium emotional indication in the button", () => {
advanceFakeTime(daysToMilliseconds(20));
expect(button).toHaveAttribute("data-warning-level", "medium");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
});
describe("when button is clicked", () => {
beforeEach(() => {
act(() => button.click());
});
it("shows dropdown with update item", () => {
expect(rendered.getByTestId("update-lens-menu-item")).toBeInTheDocument();
});
it("when selected update now, restarts the application to update", () => {
const updateMenuItem = rendered.getByTestId("update-lens-menu-item");
act(() => updateMenuItem.click());
expect(quitAndInstallUpdateMock).toBeCalled();
});
it("when dropdown closed without clicking update item, does not restart the application to update", () => {
act(() => button.click());
expect(quitAndInstallUpdateMock).not.toBeCalled();
});
});
it("given just enough time passes for medium update encouragement, has medium emotional indication in the button", () => {
advanceFakeTime(daysToMilliseconds(22));
expect(button).toHaveAttribute("data-warning-level", "medium");
});
it("given just enough time passes for severe update encouragement, has severe emotional indication in the button", () => {
advanceFakeTime(daysToMilliseconds(26));
expect(button).toHaveAttribute("data-warning-level", "high");
});
});
});
});
});
@@ -0,0 +1,277 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { RenderResult } from "@testing-library/react";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import closeAllWindowsInjectable from "../../main/start-main-application/lens-window/hide-all-windows/close-all-windows.injectable";
import applicationWindowInjectable from "../../main/start-main-application/lens-window/application-window/application-window.injectable";
import type { LensWindow } from "../../main/start-main-application/lens-window/application-window/lens-window-injection-token";
describe("installing update using tray", () => {
let applicationBuilder: ApplicationBuilder;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
checkForPlatformUpdatesMock = asyncFn();
downloadPlatformUpdateMock = asyncFn();
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
mainDi.override(
downloadPlatformUpdateInjectable,
() => downloadPlatformUpdateMock,
);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
});
describe("when started", () => {
let rendered: RenderResult;
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("user cannot install update yet", () => {
expect(applicationBuilder.tray.get("install-update")).toBeNull();
});
describe("given all application windows are closed, when checking for updates", () => {
let applicationWindow: LensWindow;
let closeAllWindows: () => void;
beforeEach(() => {
const mainDi = applicationBuilder.dis.mainDi;
closeAllWindows = mainDi.inject(closeAllWindowsInjectable);
applicationWindow = mainDi.inject(applicationWindowInjectable);
closeAllWindows();
applicationBuilder.tray.click("check-for-updates");
});
describe("when check for update resolves with new update", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
});
it("does not show application window yet", () => {
expect(applicationWindow.isVisible).toBe(false);
});
describe("when download of update resolves with success", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
});
it("shows the application window", () => {
expect(applicationWindow.isVisible).toBe(true);
});
it("given closing application window again and checking for updates again using tray, when check resolves with same version that was earlier downloaded, shows the application window", async () => {
closeAllWindows();
applicationBuilder.tray.click("check-for-updates");
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
expect(applicationWindow.isVisible).toBe(true);
});
});
it("when download of update resolves with failure, does not show the application window", async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: false });
expect(applicationWindow.isVisible).toBe(false);
});
});
it("when process resolves without new update, does not show the application window", async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: false,
});
expect(applicationWindow.isVisible).toBe(false);
});
});
describe("when user checks for updates using tray", () => {
beforeEach(() => {
applicationBuilder.tray.click("check-for-updates");
});
it("user cannot check for updates again", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.enabled,
).toBe(false);
});
it("name of tray item for checking updates indicates that checking is happening", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Checking for updates...");
});
it("user cannot install update yet", () => {
expect(applicationBuilder.tray.get("install-update")).toBeNull();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when no new update is discovered", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: false,
});
});
it("user cannot install update", () => {
expect(applicationBuilder.tray.get("install-update")).toBeNull();
});
it("user can check for updates again", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.enabled,
).toBe(true);
});
it("name of tray item for checking updates no longer indicates that checking is happening", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Check for updates");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when new update is discovered", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
});
it("user cannot check for updates again yet", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.enabled,
).toBe(false);
});
it("name of tray item for checking updates indicates that downloading is happening", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Downloading update some-version (0%)...");
});
it("when download progresses with decimals, percentage increases as integers", () => {
downloadPlatformUpdateMock.mock.calls[0][0]({ percentage: 42.424242 });
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Downloading update some-version (42%)...");
});
it("user still cannot install update", () => {
expect(applicationBuilder.tray.get("install-update")).toBeNull();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when download fails", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: false });
});
it("user cannot install update", () => {
expect(
applicationBuilder.tray.get("install-update"),
).toBeNull();
});
it("user can check for updates again", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.enabled,
).toBe(true);
});
it("name of tray item for checking updates no longer indicates that downloading is happening", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Check for updates");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when download succeeds", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
});
it("user can install update", () => {
expect(
applicationBuilder.tray.get("install-update")?.label,
).toBe("Install update some-version");
});
it("user can check for updates again", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.enabled,
).toBe(true);
});
it("name of tray item for checking updates no longer indicates that downloading is happening", () => {
expect(
applicationBuilder.tray.get("check-for-updates")?.label,
).toBe("Check for updates");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
});
});
});
});
@@ -0,0 +1,246 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import quitAndInstallUpdateInjectable from "../../main/application-update/quit-and-install-update.injectable";
import type { RenderResult } from "@testing-library/react";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import setUpdateOnQuitInjectable from "../../main/electron-app/features/set-update-on-quit.injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import { useFakeTime } from "../../common/test-utils/use-fake-time";
import staticFilesDirectoryInjectable from "../../common/vars/static-files-directory.injectable";
describe("installing update", () => {
let applicationBuilder: ApplicationBuilder;
let quitAndInstallUpdateMock: jest.Mock;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
let setUpdateOnQuitMock: jest.Mock;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
quitAndInstallUpdateMock = jest.fn();
checkForPlatformUpdatesMock = asyncFn();
downloadPlatformUpdateMock = asyncFn();
setUpdateOnQuitMock = jest.fn();
mainDi.override(staticFilesDirectoryInjectable, () => "/some-static-files-directory");
mainDi.override(setUpdateOnQuitInjectable, () => setUpdateOnQuitMock);
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
mainDi.override(
downloadPlatformUpdateInjectable,
() => downloadPlatformUpdateMock,
);
mainDi.override(
quitAndInstallUpdateInjectable,
() => quitAndInstallUpdateMock,
);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
});
describe("when started", () => {
let rendered: RenderResult;
let processCheckingForUpdates: (source: string) => Promise<{ updateIsReadyToBeInstalled: boolean }>;
beforeEach(async () => {
rendered = await applicationBuilder.render();
processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(
processCheckingForUpdatesInjectable,
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows normal tray icon", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconTemplate.png",
);
});
describe("when user checks for updates", () => {
beforeEach(() => {
processCheckingForUpdates("irrelevant");
});
it("checks for updates", () => {
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(
expect.any(Object),
{ allowDowngrade: true },
);
});
it("shows tray icon for checking for updates", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconCheckingForUpdatesTemplate.png",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when no new update is discovered", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: false,
});
});
it("shows tray icon for normal", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconTemplate.png",
);
});
it("does not start downloading update", () => {
expect(downloadPlatformUpdateMock).not.toHaveBeenCalled();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when new update is discovered", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
});
it("starts downloading the update", () => {
expect(downloadPlatformUpdateMock).toHaveBeenCalled();
});
it("still shows tray icon for downloading", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconCheckingForUpdatesTemplate.png",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when download fails", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: false });
});
it("does not quit and install update yet", () => {
expect(quitAndInstallUpdateMock).not.toHaveBeenCalled();
});
it("still shows normal tray icon", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconTemplate.png",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when download succeeds", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
});
it("does not quit and install update yet", () => {
expect(quitAndInstallUpdateMock).not.toHaveBeenCalled();
});
it("shows tray icon for update being available", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconUpdateAvailableTemplate.png",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("given checking for updates again", () => {
beforeEach(() => {
downloadPlatformUpdateMock.mockClear();
processCheckingForUpdates("irrelevant");
});
it("shows tray icon for checking for updates", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconCheckingForUpdatesTemplate.png",
);
});
describe("when check resolves with same update that is already downloaded", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
});
it("does not re-download the update", () => {
expect(downloadPlatformUpdateMock).not.toHaveBeenCalled();
});
it("shows tray icon for update being available", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconUpdateAvailableTemplate.png",
);
});
});
describe("when check resolves with different update that was previously downloaded", () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-other-version",
});
});
it("downloads the update", () => {
expect(downloadPlatformUpdateMock).toHaveBeenCalled();
});
it("shows tray icon for downloading update", () => {
expect(applicationBuilder.tray.getIconPath()).toBe(
"/some-static-files-directory/icons/trayIconCheckingForUpdatesTemplate.png",
);
});
});
});
});
});
});
});
});
@@ -0,0 +1,116 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { RenderResult } from "@testing-library/react";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import periodicalCheckForUpdatesInjectable from "../../main/application-update/periodical-check-for-updates/periodical-check-for-updates.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
const ENOUGH_TIME = 1000 * 60 * 60 * 2;
describe("periodical checking of updates", () => {
let applicationBuilder: ApplicationBuilder;
let processCheckingForUpdatesMock: jest.Mock;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.unoverride(periodicalCheckForUpdatesInjectable);
mainDi.permitSideEffects(periodicalCheckForUpdatesInjectable);
processCheckingForUpdatesMock = jest.fn();
mainDi.override(
processCheckingForUpdatesInjectable,
() => processCheckingForUpdatesMock,
);
});
});
describe("given updater is enabled and configuration exists, when started", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("checks for updates", () => {
expect(processCheckingForUpdatesMock).toHaveBeenCalled();
});
it("when just not enough time passes, does not check for updates again automatically yet", () => {
processCheckingForUpdatesMock.mockClear();
advanceFakeTime(ENOUGH_TIME - 1);
expect(processCheckingForUpdatesMock).not.toHaveBeenCalled();
});
it("when just enough time passes, checks for updates again automatically", () => {
processCheckingForUpdatesMock.mockClear();
advanceFakeTime(ENOUGH_TIME);
expect(processCheckingForUpdatesMock).toHaveBeenCalled();
});
});
describe("given updater is enabled but no configuration exist, when started", () => {
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => false);
});
await applicationBuilder.render();
});
it("does not check for updates", () => {
expect(processCheckingForUpdatesMock).not.toHaveBeenCalled();
});
it("when time passes, never checks for updates", () => {
jest.runOnlyPendingTimers();
expect(processCheckingForUpdatesMock).not.toHaveBeenCalled();
});
});
describe("given updater is not enabled but and configuration exist, when started", () => {
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(electronUpdaterIsActiveInjectable, () => false);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
await applicationBuilder.render();
});
it("does not check for updates", () => {
expect(processCheckingForUpdatesMock).not.toHaveBeenCalled();
});
it("when time passes, never checks for updates", () => {
jest.runOnlyPendingTimers();
expect(processCheckingForUpdatesMock).not.toHaveBeenCalled();
});
});
});
@@ -0,0 +1,326 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import quitAndInstallUpdateInjectable from "../../main/application-update/quit-and-install-update.injectable";
import type { RenderResult } from "@testing-library/react";
import electronUpdaterIsActiveInjectable from "../../main/electron-app/features/electron-updater-is-active.injectable";
import publishIsConfiguredInjectable from "../../main/application-update/publish-is-configured.injectable";
import type { CheckForPlatformUpdates } from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import checkForPlatformUpdatesInjectable from "../../main/application-update/check-for-platform-updates/check-for-platform-updates.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { UpdateChannel, UpdateChannelId } from "../../common/application-update/update-channels";
import { updateChannels } from "../../common/application-update/update-channels";
import type { DownloadPlatformUpdate } from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import downloadPlatformUpdateInjectable from "../../main/application-update/download-platform-update/download-platform-update.injectable";
import selectedUpdateChannelInjectable from "../../common/application-update/selected-update-channel/selected-update-channel.injectable";
import type { IComputedValue } from "mobx";
import setUpdateOnQuitInjectable from "../../main/electron-app/features/set-update-on-quit.injectable";
import showInfoNotificationInjectable from "../../renderer/components/notifications/show-info-notification.injectable";
import processCheckingForUpdatesInjectable from "../../main/application-update/check-for-updates/process-checking-for-updates.injectable";
import appVersionInjectable from "../../common/vars/app-version.injectable";
describe("selection of update stability", () => {
let applicationBuilder: ApplicationBuilder;
let quitAndInstallUpdateMock: jest.Mock;
let checkForPlatformUpdatesMock: AsyncFnMock<CheckForPlatformUpdates>;
let downloadPlatformUpdateMock: AsyncFnMock<DownloadPlatformUpdate>;
let setUpdateOnQuitMock: jest.Mock;
let showInfoNotificationMock: jest.Mock;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
quitAndInstallUpdateMock = jest.fn();
checkForPlatformUpdatesMock = asyncFn();
downloadPlatformUpdateMock = asyncFn();
setUpdateOnQuitMock = jest.fn();
showInfoNotificationMock = jest.fn(() => () => {});
rendererDi.override(showInfoNotificationInjectable, () => showInfoNotificationMock);
mainDi.override(setUpdateOnQuitInjectable, () => setUpdateOnQuitMock);
mainDi.override(
checkForPlatformUpdatesInjectable,
() => checkForPlatformUpdatesMock,
);
mainDi.override(
downloadPlatformUpdateInjectable,
() => downloadPlatformUpdateMock,
);
mainDi.override(
quitAndInstallUpdateInjectable,
() => quitAndInstallUpdateMock,
);
mainDi.override(electronUpdaterIsActiveInjectable, () => true);
mainDi.override(publishIsConfiguredInjectable, () => true);
});
});
describe("when started", () => {
let rendered: RenderResult;
let processCheckingForUpdates: (source: string) => Promise<{ updateIsReadyToBeInstalled: boolean }>;
beforeEach(async () => {
rendered = await applicationBuilder.render();
processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe('given update channel "alpha" is selected, when checking for updates', () => {
let selectedUpdateChannel: {
value: IComputedValue<UpdateChannel>;
setValue: (channelId: UpdateChannelId) => void;
};
beforeEach(() => {
selectedUpdateChannel = applicationBuilder.dis.mainDi.inject(
selectedUpdateChannelInjectable,
);
selectedUpdateChannel.setValue(updateChannels.alpha.id);
processCheckingForUpdates("irrelevant");
});
it('checks updates from update channel "alpha"', () => {
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(
updateChannels.alpha,
{ allowDowngrade: true },
);
});
it("when update is discovered, does not check update from other update channels", async () => {
checkForPlatformUpdatesMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
expect(checkForPlatformUpdatesMock).not.toHaveBeenCalled();
});
describe("when no update is discovered", () => {
beforeEach(async () => {
checkForPlatformUpdatesMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: false,
});
});
it('checks updates from update channel "beta"', () => {
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(
updateChannels.beta,
{ allowDowngrade: true },
);
});
it("when update is discovered, does not check update from other update channels", async () => {
checkForPlatformUpdatesMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
expect(checkForPlatformUpdatesMock).not.toHaveBeenCalled();
});
describe("when no update is discovered again", () => {
beforeEach(async () => {
checkForPlatformUpdatesMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: false,
});
});
it('finally checks updates from update channel "latest"', () => {
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(
updateChannels.latest,
{ allowDowngrade: true },
);
});
it("when update is discovered, does not check update from other update channels", async () => {
checkForPlatformUpdatesMock.mockClear();
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-version",
});
expect(checkForPlatformUpdatesMock).not.toHaveBeenCalled();
});
});
});
});
describe('given update channel "beta" is selected', () => {
let selectedUpdateChannel: {
value: IComputedValue<UpdateChannel>;
setValue: (channelId: UpdateChannelId) => void;
};
beforeEach(() => {
selectedUpdateChannel = applicationBuilder.dis.mainDi.inject(
selectedUpdateChannelInjectable,
);
selectedUpdateChannel.setValue(updateChannels.beta.id);
});
describe("when checking for updates", () => {
beforeEach(() => {
processCheckingForUpdates("irrelevant");
});
describe('when update from "beta" channel is discovered', () => {
beforeEach(async () => {
await checkForPlatformUpdatesMock.resolve({
updateWasDiscovered: true,
version: "some-beta-version",
});
});
describe("when update is downloaded", () => {
beforeEach(async () => {
await downloadPlatformUpdateMock.resolve({ downloadWasSuccessful: true });
});
it("when user would close the application, installs the update", () => {
expect(setUpdateOnQuitMock).toHaveBeenLastCalledWith(true);
});
it('given user changes update channel to "latest", when user would close the application, does not install the update for not being stable enough', () => {
selectedUpdateChannel.setValue(updateChannels.latest.id);
expect(setUpdateOnQuitMock).toHaveBeenLastCalledWith(false);
});
it('given user changes update channel to "alpha", when user would close the application, installs the update for being stable enough', () => {
selectedUpdateChannel.setValue(updateChannels.alpha.id);
expect(setUpdateOnQuitMock).toHaveBeenLastCalledWith(false);
});
});
});
});
});
});
it("given valid update channel selection is stored, when checking for updates, checks for updates from the update channel", async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
// TODO: Switch to more natural way of setting initial value
// TODO: UserStore is currently responsible for getting and setting initial value
const selectedUpdateChannel = mainDi.inject(selectedUpdateChannelInjectable);
selectedUpdateChannel.setValue(updateChannels.beta.id);
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(updateChannels.beta, expect.any(Object));
});
it("given invalid update channel selection is stored, when checking for updates, checks for updates from the update channel", async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
// TODO: Switch to more natural way of setting initial value
// TODO: UserStore is currently responsible for getting and setting initial value
const selectedUpdateChannel = mainDi.inject(selectedUpdateChannelInjectable);
selectedUpdateChannel.setValue("something-invalid" as UpdateChannelId);
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(updateChannels.latest, expect.any(Object));
});
it('given no update channel selection is stored and currently using stable release, when user checks for updates, checks for updates from "latest" update channel by default', async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(appVersionInjectable, () => "1.0.0");
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(
updateChannels.latest,
{ allowDowngrade: true },
);
});
it('given no update channel selection is stored and currently using alpha release, when checking for updates, checks for updates from "alpha" channel', async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(appVersionInjectable, () => "1.0.0-alpha");
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(updateChannels.alpha, expect.any(Object));
});
it('given no update channel selection is stored and currently using beta release, when checking for updates, checks for updates from "beta" channel', async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(appVersionInjectable, () => "1.0.0-beta");
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(updateChannels.beta, expect.any(Object));
});
it("given update channel selection is stored and currently using prerelease, when checking for updates, checks for updates from stored channel", async () => {
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(appVersionInjectable, () => "1.0.0-alpha");
// TODO: Switch to more natural way of setting initial value
// TODO: UserStore is currently responsible for getting and setting initial value
const selectedUpdateChannel = mainDi.inject(selectedUpdateChannelInjectable);
selectedUpdateChannel.setValue(updateChannels.beta.id);
});
await applicationBuilder.render();
const processCheckingForUpdates = applicationBuilder.dis.mainDi.inject(processCheckingForUpdatesInjectable);
processCheckingForUpdates("irrelevant");
expect(checkForPlatformUpdatesMock).toHaveBeenCalledWith(updateChannels.beta, expect.any(Object));
});
});
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
@@ -0,0 +1,106 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import type { TestExtensionRenderer } from "../../../renderer/components/test-utils/get-extension-fake";
import { getExtensionFakeFor } from "../../../renderer/components/test-utils/get-extension-fake";
import type { KubernetesCluster } from "../../../common/catalog-entities";
import React from "react";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
describe("disable-cluster-pages-when-cluster-is-not-relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let rendererTestExtension: TestExtensionRenderer;
let isEnabledForClusterMock: AsyncFnMock<(cluster: KubernetesCluster) => Promise<boolean>>;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
builder.dis.rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
clusterPages: [{
components: {
Page: () => <div data-testid="some-test-page">Some page</div>,
},
}],
},
});
rendererTestExtension = testExtension.renderer;
rendered = await builder.render();
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster, when navigating", () => {
beforeEach(() => {
rendererTestExtension.navigate();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the page", () => {
const actual = rendered.queryByTestId("some-test-page");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension shouldn't be enabled for the cluster, when navigating", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
rendererTestExtension.navigate();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the page", () => {
const actual = rendered.queryByTestId("some-test-page");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension should be enabled for the cluster, when navigating", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
rendererTestExtension.navigate();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the page", () => {
const actual = rendered.getByTestId("some-test-page");
expect(actual).toBeInTheDocument();
});
});
});
@@ -0,0 +1,111 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../renderer/components/test-utils/get-extension-fake";
import type { KubernetesCluster } from "../../../common/catalog-entities";
import React from "react";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
describe("disable sidebar items when cluster is not relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let isEnabledForClusterMock: AsyncFnMock<(cluster: KubernetesCluster) => Promise<boolean>>;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
builder.dis.rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
clusterPages: [{
components: {
Page: () => <div data-testid="some-test-page">Some page</div>,
},
}],
clusterPageMenus: [
{
id: "some-sidebar-item",
title: "Some sidebar item",
components: {
Icon: () => <div>Some icon</div>,
},
},
],
},
});
rendered = await builder.render();
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster", () => {
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the sidebar item", () => {
const actual = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-sidebar-item",
);
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension shouldn't be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the sidebar item", () => {
const actual = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-sidebar-item",
);
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension should be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the sidebar item", () => {
const actual = rendered.getByTestId(
"sidebar-item-test-extension-some-sidebar-item",
);
expect(actual).toBeInTheDocument();
});
});
});
@@ -0,0 +1,70 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { IObservableValue } from "mobx";
import { observable, runInAction, computed } from "mobx";
import React from "react";
import type { TestExtensionRenderer } from "../../../renderer/components/test-utils/get-extension-fake";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../renderer/components/test-utils/get-extension-fake";
describe("reactively disable cluster pages", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
let rendererTestExtension: TestExtensionRenderer;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
clusterPages: [{
components: {
Page: () => <div data-testid="some-test-page">Some page</div>,
},
enabled: computed(() => someObservable.get()),
}],
},
});
rendered = await builder.render();
builder.extensions.enable(testExtension);
rendererTestExtension = testExtension.renderer;
});
it("when navigating to the page, does not show the page", () => {
rendererTestExtension.navigate();
const actual = rendered.queryByTestId("some-test-page");
expect(actual).not.toBeInTheDocument();
});
it("given page becomes enabled, when navigating to the page, shows the page", () => {
runInAction(() => {
someObservable.set(true);
});
rendererTestExtension.navigate();
const actual = rendered.queryByTestId("some-test-page");
expect(actual).toBeInTheDocument();
});
});
@@ -0,0 +1,172 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import type { KubernetesCluster } from "../../../../common/catalog-entities";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import { computed } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
import apiManagerInjectable from "../../../../common/k8s-api/api-manager/manager.injectable";
import { KubeObjectDetails } from "../../../../renderer/components/kube-object-details";
import type { ApiManager } from "../../../../common/k8s-api/api-manager";
describe("disable kube object detail items when cluster is not relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let isEnabledForClusterMock: AsyncFnMock<
(cluster: KubernetesCluster) => Promise<boolean>
>;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
apiManagerInjectable,
() =>
({
getStore: () => ({
getByPath: () =>
getKubeObjectStub("some-kind", "some-api-version"),
}),
} as unknown as ApiManager),
);
});
const rendererDi = builder.dis.rendererDi;
rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
kubeObjectDetailItems: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
components: {
Details: () => (
<div data-testid="some-kube-object-detail-item">
Some detail
</div>
),
},
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster", () => {
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the kube object detail item", () => {
const actual = rendered.queryByTestId("some-kube-object-detail-item");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension shouldn't be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the kube object detail item", () => {
const actual = rendered.queryByTestId("some-kube-object-detail-item");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension should be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the kube object detail item", () => {
const actual = rendered.getByTestId("some-kube-object-detail-item");
expect(actual).toBeInTheDocument();
});
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => <KubeObjectDetails />,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "",
},
});
@@ -0,0 +1,138 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import type { IObservableValue } from "mobx";
import { runInAction, computed, observable } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import apiManagerInjectable from "../../../../common/k8s-api/api-manager/manager.injectable";
import { KubeObjectDetails } from "../../../../renderer/components/kube-object-details";
import type { ApiManager } from "../../../../common/k8s-api/api-manager";
describe("reactively hide kube object detail item", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
apiManagerInjectable,
() =>
({
getStore: () => ({
getByPath: () =>
getKubeObjectStub("some-kind", "some-api-version"),
}),
} as unknown as ApiManager),
);
});
const rendererDi = builder.dis.rendererDi;
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
kubeObjectDetailItems: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
components: {
Details: () => (
<div data-testid="some-kube-object-detail-item">
Some detail
</div>
),
},
visible: computed(() => someObservable.get()),
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
it("does not show the kube object detail item", () => {
const actual = rendered.queryByTestId("some-kube-object-detail-item");
expect(actual).not.toBeInTheDocument();
});
it("given item should be shown, shows the kube object detail item", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.queryByTestId("some-kube-object-detail-item");
expect(actual).toBeInTheDocument();
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => <KubeObjectDetails />,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "",
},
});
@@ -0,0 +1,160 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import type { KubernetesCluster } from "../../../../common/catalog-entities";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import { computed } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
import { KubeObjectMenu } from "../../../../renderer/components/kube-object-menu";
describe("disable kube object menu items when cluster is not relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let isEnabledForClusterMock: AsyncFnMock<
(cluster: KubernetesCluster) => Promise<boolean>
>;
beforeEach(async () => {
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
kubeObjectMenuItems: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
components: {
MenuItem: () => (
<div data-testid="some-test-id">Some menu item</div>
),
},
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster", () => {
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the kube object menu item", () => {
const actual = rendered.queryByTestId("some-test-id");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension shouldn't be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the kube object menu item", () => {
const actual = rendered.queryByTestId("some-test-id");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension should be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the kube object menu item", () => {
const actual = rendered.getByTestId("some-test-id");
expect(actual).toBeInTheDocument();
});
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => (
<KubeObjectMenu
toolbar={true}
object={getKubeObjectStub("some-kind", "some-api-version")}
/>
),
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "",
},
});
@@ -0,0 +1,126 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import type { IObservableValue } from "mobx";
import { observable, runInAction, computed } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import { KubeObjectMenu } from "../../../../renderer/components/kube-object-menu";
describe("reactively hide kube object menu item", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
kubeObjectMenuItems: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
components: {
MenuItem: () => (
<div data-testid="some-kube-object-menu-item">Some menu item</div>
),
},
visible: computed(() => someObservable.get()),
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
it("does not show the kube object menu item", () => {
const actual = rendered.queryByTestId("some-kube-object-menu-item");
expect(actual).not.toBeInTheDocument();
});
it("given item should be shown, shows the kube object menu item", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.queryByTestId("some-kube-object-menu-item");
expect(actual).toBeInTheDocument();
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => (
<KubeObjectMenu
toolbar={true}
object={getKubeObjectStub("some-kind", "some-api-version")}
/>
),
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "",
},
});
@@ -0,0 +1,160 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import type { KubernetesCluster } from "../../../../common/catalog-entities";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import { computed } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import { KubeObjectStatusIcon } from "../../../../renderer/components/kube-object-status-icon/kube-object-status-icon";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import { KubeObjectStatusLevel } from "../../../../common/k8s-api/kube-object-status";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
describe("disable kube object statuses when cluster is not relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let isEnabledForClusterMock: AsyncFnMock<
(cluster: KubernetesCluster) => Promise<boolean>
>;
beforeEach(async () => {
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
kubeObjectStatusTexts: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
resolve: () => ({
level: KubeObjectStatusLevel.CRITICAL,
text: "some-kube-object-status-text",
}),
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster", () => {
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the status", () => {
const actual = rendered.baseElement.querySelectorAll(".KubeObjectStatusIcon");
expect(actual).toHaveLength(0);
});
});
describe("given extension shouldn't be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the status", () => {
const actual = rendered.baseElement.querySelectorAll(".KubeObjectStatusIcon");
expect(actual).toHaveLength(0);
});
});
describe("given extension should be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the status", () => {
const actual = rendered.baseElement.querySelectorAll(".KubeObjectStatusIcon");
expect(actual).toHaveLength(1);
});
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => (
<KubeObjectStatusIcon
object={getKubeObjectStub("some-kind", "some-api-version")}
/>
),
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "/foo",
},
});
@@ -0,0 +1,132 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
import { getInjectable } from "@ogre-tools/injectable";
import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
import type { IObservableValue } from "mobx";
import { observable, runInAction, computed } from "mobx";
import React from "react";
import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
import { KubeObject } from "../../../../common/k8s-api/kube-object";
import { KubeObjectStatusLevel } from "../../../../common/k8s-api/kube-object-status";
import { KubeObjectStatusIcon } from "../../../../renderer/components/kube-object-status-icon";
describe("reactively hide kube object status", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
kubeObjectStatusTexts: [
{
kind: "some-kind",
apiVersions: ["some-api-version"],
resolve: () => ({
level: KubeObjectStatusLevel.CRITICAL,
text: "some-kube-object-status-text",
}),
visible: computed(() => someObservable.get()),
},
],
},
});
rendered = await builder.render();
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
builder.extensions.enable(testExtension);
});
it("does not show the kube object status", () => {
const actual = rendered.baseElement.querySelectorAll(
".KubeObjectStatusIcon",
);
expect(actual).toHaveLength(0);
});
it("given item should be shown, shows the kube object status", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.baseElement.querySelectorAll(
".KubeObjectStatusIcon",
);
expect(actual).toHaveLength(1);
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => (
<KubeObjectStatusIcon
object={getKubeObjectStub("some-kind", "some-api-version")}
/>
),
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "",
},
});
@@ -0,0 +1,351 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { KubeObjectStatusLevel } from "../../../common/k8s-api/kube-object-status";
import { KubeObject } from "../../../common/k8s-api/kube-object";
import React from "react";
import { useFakeTime } from "../../../common/test-utils/use-fake-time";
import type { DiContainer } from "@ogre-tools/injectable";
import { getInjectable } from "@ogre-tools/injectable";
import type { IAtom } from "mobx";
import { createAtom, computed } from "mobx";
import { frontEndRouteInjectionToken } from "../../../common/front-end-routing/front-end-route-injection-token";
import { routeSpecificComponentInjectionToken } from "../../../renderer/routes/route-specific-component-injection-token";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { navigateToRouteInjectionToken } from "../../../common/front-end-routing/navigate-to-route-injection-token";
import type { RenderResult } from "@testing-library/react";
import { act } from "@testing-library/react";
import { observer } from "mobx-react";
import { kubeObjectStatusTextInjectionToken } from "../../../renderer/components/kube-object-status-icon/kube-object-status-text-injection-token";
import { KubeObjectStatusIcon } from "../../../renderer/components/kube-object-status-icon";
describe("show status for a kube object", () => {
let builder: ApplicationBuilder;
let infoStatusIsShown: boolean;
let warningStatusIsShown: boolean;
let criticalStatusIsShown: boolean;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
infoStatusIsShown = false;
const infoStatusInjectable = getInjectable({
id: "some-info-status",
injectionToken: kubeObjectStatusTextInjectionToken,
instantiate: () => ({
apiVersions: ["some-api-version"],
kind: "some-kind",
enabled: computed(() => true),
resolve: (resource) => infoStatusIsShown ? ({
level: KubeObjectStatusLevel.INFO,
text: `Some info status for ${resource.getName()}`,
timestamp: "2015-10-19T07:28:00Z",
}) : null,
}),
});
warningStatusIsShown = false;
const warningStatusInjectable = getInjectable({
id: "some-warning-status",
injectionToken: kubeObjectStatusTextInjectionToken,
instantiate: () => ({
apiVersions: ["some-api-version"],
kind: "some-kind",
enabled: computed(() => true),
resolve: (resource) => warningStatusIsShown ? ({
level: KubeObjectStatusLevel.WARNING,
text: `Some warning status for ${resource.getName()}`,
timestamp: "2015-10-19T07:28:00Z",
}) : null,
}),
});
criticalStatusIsShown = false;
const criticalStatusInjectable = getInjectable({
id: "some-critical-status",
injectionToken: kubeObjectStatusTextInjectionToken,
instantiate: () => ({
apiVersions: ["some-api-version"],
kind: "some-kind",
enabled: computed(() => true),
resolve: (resource) => {
return criticalStatusIsShown
? {
level: KubeObjectStatusLevel.CRITICAL,
text: `Some critical status for ${resource.getName()}`,
timestamp: "2015-10-19T07:28:00Z",
}
: null;
},
}),
});
rendererDi.register(
testRouteInjectable,
testRouteComponentInjectable,
infoStatusInjectable,
warningStatusInjectable,
criticalStatusInjectable,
someAtomInjectable,
);
builder.setEnvironmentToClusterFrame();
});
describe("given application starts and in test page", () => {
let rendererDi: DiContainer;
let rendered: RenderResult;
let rerenderParent: () => void;
beforeEach(async () => {
rendered = await builder.render();
rendererDi = builder.dis.rendererDi;
const someAtom = rendererDi.inject(someAtomInjectable);
rerenderParent = rerenderParentFor(someAtom);
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const testRoute = rendererDi.inject(testRouteInjectable);
navigateToRoute(testRoute);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show any statuses yet", () => {
const status = rendered.queryByTestId(
"kube-object-status-icon-for-some-uid",
);
expect(status).not.toBeInTheDocument();
});
describe("when status for irrelevant kube object kind emerges", () => {
beforeEach(() => {
rendererDi.register(statusForIrrelevantKubeObjectKindInjectable);
rerenderParent();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show any statuses", () => {
const status = rendered.queryByTestId(
"kube-object-status-icon-for-some-uid",
);
expect(status).not.toBeInTheDocument();
});
});
describe("when status for irrelevant kube object api version emerges", () => {
beforeEach(() => {
rendererDi.register(statusForIrrelevantKubeObjectApiVersionInjectable);
rerenderParent();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show any statuses", () => {
const status = rendered.queryByTestId(
"kube-object-status-icon-for-some-uid",
);
expect(status).not.toBeInTheDocument();
});
});
describe("when info status emerges", () => {
beforeEach(() => {
infoStatusIsShown = true;
rerenderParent();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows status", () => {
const status = rendered.getByTestId(
"kube-object-status-icon-for-some-uid",
);
expect(status).toBeInTheDocument();
});
it("show info status", () => {
const tooltipContent = rendered.getByTestId(
"tooltip-content-for-kube-object-status-icon-for-some-uid",
);
expect(tooltipContent).toHaveTextContent(
"Some info status for some-name",
);
});
});
describe("when warning status emerges", () => {
beforeEach(() => {
warningStatusIsShown = true;
rerenderParent();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("show warning status", () => {
const tooltipContent = rendered.getByTestId(
"tooltip-content-for-kube-object-status-icon-for-some-uid",
);
expect(tooltipContent).toHaveTextContent(
"Some warning status for some-name",
);
});
});
describe("when critical status emerges", () => {
beforeEach(() => {
criticalStatusIsShown = true;
rerenderParent();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("show critical status", () => {
const tooltipContent = rendered.getByTestId(
"tooltip-content-for-kube-object-status-icon-for-some-uid",
);
expect(tooltipContent).toHaveTextContent(
"Some critical status for some-name",
);
});
});
});
});
const testRouteInjectable = getInjectable({
id: "test-route",
instantiate: () => ({
path: "/test-route",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const rerenderParentFor = (atom: IAtom) => () => {
act(() => {
atom.reportChanged();
});
};
const TestComponent = observer(({ someAtom }: { someAtom: IAtom }) => {
void someAtom.reportObserved();
return (
<KubeObjectStatusIcon
object={getKubeObjectStub("some-kind", "some-api-version")}
/>
);
});
const testRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => {
const someAtom = di.inject(someAtomInjectable);
return {
route: di.inject(testRouteInjectable),
Component: () => <TestComponent someAtom={someAtom} />,
};
},
injectionToken: routeSpecificComponentInjectionToken,
});
const someAtomInjectable = getInjectable({
id: "some-atom",
instantiate: () => createAtom("some-atom"),
});
const getKubeObjectStub = (kind: string, apiVersion: string) =>
KubeObject.create({
apiVersion,
kind,
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
namespace: "some-namespace",
selfLink: "/foo",
},
});
const statusForIrrelevantKubeObjectKindInjectable = getInjectable({
id: "status-for-irrelevant-kube-object-kind",
injectionToken: kubeObjectStatusTextInjectionToken,
instantiate: () => ({
apiVersions: ["some-api-version"],
kind: "some-other-kind",
enabled: computed(() => true),
resolve: () => ({
level: KubeObjectStatusLevel.INFO,
text: "irrelevant",
timestamp: "2015-10-19T07:28:00Z",
}),
}),
});
const statusForIrrelevantKubeObjectApiVersionInjectable = getInjectable({
id: "status-for-irrelevant-kube-object-api-version",
injectionToken: kubeObjectStatusTextInjectionToken,
instantiate: () => ({
apiVersions: ["some-other-api-version"],
kind: "some-kind",
enabled: computed(() => true),
resolve: () => ({
level: KubeObjectStatusLevel.INFO,
text: "irrelevant",
timestamp: "2015-10-19T07:28:00Z",
}),
}),
});
@@ -0,0 +1,966 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainer } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import navigateToNamespacesInjectable from "../../../common/front-end-routing/routes/cluster/namespaces/navigate-to-namespaces.injectable";
import createEditResourceTabInjectable from "../../../renderer/components/dock/edit-resource/edit-resource-tab.injectable";
import getRandomIdForEditResourceTabInjectable from "../../../renderer/components/dock/edit-resource/get-random-id-for-edit-resource-tab.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { CallForResource } from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-resource/call-for-resource.injectable";
import callForResourceInjectable from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-resource/call-for-resource.injectable";
import type { CallForPatchResource } from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-patch-resource/call-for-patch-resource.injectable";
import callForPatchResourceInjectable from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-patch-resource/call-for-patch-resource.injectable";
import dockStoreInjectable from "../../../renderer/components/dock/dock/store.injectable";
import { Namespace } from "../../../common/k8s-api/endpoints";
import showSuccessNotificationInjectable from "../../../renderer/components/notifications/show-success-notification.injectable";
import showErrorNotificationInjectable from "../../../renderer/components/notifications/show-error-notification.injectable";
import readJsonFileInjectable from "../../../common/fs/read-json-file.injectable";
import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { controlWhenStoragesAreReady } from "../../../renderer/utils/create-storage/storages-are-ready";
describe("cluster/namespaces - edit namespace from new tab", () => {
let builder: ApplicationBuilder;
let callForNamespaceMock: AsyncFnMock<CallForResource>;
let callForPatchNamespaceMock: AsyncFnMock<CallForPatchResource>;
let showSuccessNotificationMock: jest.Mock;
let showErrorNotificationMock: jest.Mock;
let storagesAreReady: () => Promise<void>;
beforeEach(() => {
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
callForNamespaceMock = asyncFn();
callForPatchNamespaceMock = asyncFn();
showSuccessNotificationMock = jest.fn();
showErrorNotificationMock = jest.fn();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
storagesAreReady = controlWhenStoragesAreReady(rendererDi);
rendererDi.override(
showSuccessNotificationInjectable,
() => showSuccessNotificationMock,
);
rendererDi.override(
showErrorNotificationInjectable,
() => showErrorNotificationMock,
);
rendererDi.override(getRandomIdForEditResourceTabInjectable, () =>
jest
.fn(() => "some-irrelevant-random-id")
.mockReturnValueOnce("some-first-tab-id")
.mockReturnValueOnce("some-second-tab-id"),
);
rendererDi.override(callForResourceInjectable, () => async (selfLink: string) => {
if (
[
"/apis/some-api-version/namespaces/some-uid",
"/apis/some-api-version/namespaces/some-other-uid",
].includes(selfLink)
) {
return await callForNamespaceMock(selfLink);
}
return undefined;
});
rendererDi.override(callForPatchResourceInjectable, () => async (namespace, ...args) => {
if (
[
"/apis/some-api-version/namespaces/some-uid",
"/apis/some-api-version/namespaces/some-other-uid",
].includes(namespace.selfLink)
) {
return await callForPatchNamespaceMock(namespace, ...args);
}
return undefined;
});
});
builder.allowKubeResource("namespaces");
});
describe("when navigating to namespaces", () => {
let rendered: RenderResult;
let rendererDi: DiContainer;
beforeEach(async () => {
rendered = await builder.render();
await storagesAreReady();
rendererDi = builder.dis.rendererDi;
const navigateToNamespaces = rendererDi.inject(
navigateToNamespacesInjectable,
);
navigateToNamespaces();
const dockStore = rendererDi.inject(dockStoreInjectable);
// TODO: Make TerminalWindow unit testable to allow realistic behaviour
dockStore.closeTab("terminal");
});
// TODO: Implement skipped tests when loading of resources can be tested
xit("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
xit("calls for namespaces", () => {
});
xit("shows spinner", () => {
});
describe("when namespaces resolve", () => {
beforeEach(() => {
});
xit("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
xit("does not show spinner anymore", () => {
});
describe("when clicking the context menu for a namespace", () => {
beforeEach(() => {
});
xit("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
xit("does not show edit resource tab yet", () => {
});
describe("when clicking to edit namespace", () => {
beforeEach(() => {
// TODO: Make implementation match the description (tests above)
const namespaceStub = new Namespace(someNamespaceDataStub);
const createEditResourceTab = rendererDi.inject(createEditResourceTabInjectable);
createEditResourceTab(namespaceStub);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows dock tab for editing namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows spinner in the dock tab", () => {
expect(
rendered.getByTestId("edit-resource-tab-spinner"),
).toBeInTheDocument();
});
it("calls for namespace", () => {
expect(callForNamespaceMock).toHaveBeenCalledWith(
"/apis/some-api-version/namespaces/some-uid",
);
});
describe("when call for namespace resolves with namespace", () => {
let someNamespace: Namespace;
beforeEach(async () => {
someNamespace = new Namespace({
apiVersion: "some-api-version",
kind: "Namespace",
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
selfLink: "/apis/some-api-version/namespaces/some-uid",
somePropertyToBeRemoved: "some-value",
somePropertyToBeChanged: "some-old-value",
},
});
await callForNamespaceMock.resolve({
callWasSuccessful: true,
response: someNamespace,
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
expect(
rendered.queryByTestId("edit-resource-tab-spinner"),
).not.toBeInTheDocument();
});
it("has the configuration in editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe(`apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeRemoved: some-value
somePropertyToBeChanged: some-old-value
`);
});
describe("given no changes in the configuration, when selecting to save", () => {
beforeEach(() => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(saveButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for save with empty values", () => {
expect(callForPatchNamespaceMock).toHaveBeenCalledWith(
someNamespace,
[],
);
});
it("shows spinner", () => {
expect(
rendered.getByTestId("saving-edit-resource-from-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("save button is disabled", () => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).toHaveAttribute("disabled");
});
it("save and close button is disabled", () => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).toHaveAttribute("disabled");
});
describe("when saving resolves with success", () => {
beforeEach(async () => {
await callForPatchNamespaceMock.resolve({
callWasSuccessful: true,
response: { name: "some-name", kind: "Namespace" },
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
expect(
rendered.queryByTestId("saving-edit-resource-from-tab-for-some-first-tab-id"),
).not.toBeInTheDocument();
});
it("save button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
it("save and close button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
it("shows success notification", () => {
expect(showSuccessNotificationMock).toHaveBeenCalled();
});
it("does not show error notification", () => {
expect(showErrorNotificationMock).not.toHaveBeenCalled();
});
it("does not close the dock tab", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
});
describe("when saving resolves with failure", () => {
beforeEach(async () => {
await callForPatchNamespaceMock.resolve({
callWasSuccessful: false,
error: "some-error",
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
expect(
rendered.queryByTestId("edit-resource-tab-spinner"),
).not.toBeInTheDocument();
});
it("save button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
it("save and close button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
it("does not show success notification", () => {
expect(showSuccessNotificationMock).not.toHaveBeenCalled();
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalled();
});
it("does not close the dock tab", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
});
});
describe("when selecting to save and close", () => {
beforeEach(() => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(saveButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not close the tab yet", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
describe("when saving resolves with success", () => {
beforeEach(async () => {
await callForPatchNamespaceMock.resolve({
callWasSuccessful: true,
response: { name: "some-name", kind: "Namespace" },
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("closes the dock tab", () => {
expect(
rendered.queryByTestId("dock-tab-for-some-first-tab-id"),
).not.toBeInTheDocument();
});
});
describe("when saving resolves with failure", () => {
beforeEach(async () => {
await callForPatchNamespaceMock.resolve({
callWasSuccessful: false,
error: "Some error",
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
// TODO: Not doable at the moment because info panel controls closing of the tab
xit("does not close the dock tab", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
});
});
describe("when selecting to cancel", () => {
beforeEach(() => {
const cancelButton = rendered.getByTestId(
"cancel-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(cancelButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not have dock tab anymore", () => {
expect(
rendered.queryByTestId("dock-tab-for-some-first-tab-id"),
).not.toBeInTheDocument();
});
});
describe("given change in configuration", () => {
beforeEach(() => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLInputElement;
fireEvent.change(input, {
target: {
value: `apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeChanged: some-changed-value
someAddedProperty: some-new-value
`,
},
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the changed configuration in editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe(`apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeChanged: some-changed-value
someAddedProperty: some-new-value
`);
});
it("stores the changed configuration", async () => {
const readJsonFile = rendererDi.inject(
readJsonFileInjectable,
);
const actual = (await readJsonFile(
"/some-directory-for-lens-local-storage/some-cluster-id.json",
)) as any;
expect(
actual.edit_resource_store["some-first-tab-id"],
).toEqual({
resource: "/apis/some-api-version/namespaces/some-uid",
firstDraft: `apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeRemoved: some-value
somePropertyToBeChanged: some-old-value
`,
draft: `apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeChanged: some-changed-value
someAddedProperty: some-new-value
`,
});
});
describe("when selecting to save", () => {
beforeEach(() => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(saveButton);
});
it("calls for save with changed configuration", () => {
expect(callForPatchNamespaceMock).toHaveBeenCalledWith(
someNamespace,
[
{
op: "remove",
path: "/metadata/somePropertyToBeRemoved",
},
{
op: "add",
path: "/metadata/someAddedProperty",
value: "some-new-value",
},
{
op: "replace",
path: "/metadata/somePropertyToBeChanged",
value: "some-changed-value",
},
],
);
});
it("given save resolves and another change in configuration, when saving, calls for save with changed configuration", async () => {
await callForPatchNamespaceMock.resolve({
callWasSuccessful: true,
response: {
name: "some-name",
kind: "Namespace",
},
});
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLInputElement;
fireEvent.change(input, {
target: {
value: `apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeChanged: some-changed-value
someAddedProperty: some-new-value
someOtherAddedProperty: some-other-new-value
`,
},
});
callForPatchNamespaceMock.mockClear();
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(saveButton);
expect(callForPatchNamespaceMock).toHaveBeenCalledWith(
someNamespace,
[
{
op: "add",
path: "/metadata/someOtherAddedProperty",
value: "some-other-new-value",
},
],
);
});
});
});
describe("given invalid change in configuration", () => {
beforeEach(() => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLInputElement;
fireEvent.change(input, {
target: {
value: "@some-invalid-configuration@",
},
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the changed configuration in editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe(`@some-invalid-configuration@`);
});
it("save button is disabled", () => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).toHaveAttribute("disabled");
});
it("save and close button is disabled", () => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).toHaveAttribute("disabled");
});
describe("when valid change in configuration", () => {
beforeEach(() => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLInputElement;
fireEvent.change(input, {
target: {
value: `apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
`,
},
});
});
it("save button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
it("save and close button is enabled", () => {
const saveButton = rendered.getByTestId(
"save-and-close-edit-resource-from-tab-for-some-first-tab-id",
);
expect(saveButton).not.toHaveAttribute("disabled");
});
});
});
describe("given clicking the context menu for second namespace, when clicking to edit namespace", () => {
beforeEach(() => {
callForNamespaceMock.mockClear();
// TODO: Make implementation match the description
const namespaceStub = new Namespace(someOtherNamespaceDataStub);
const createEditResourceTab = rendererDi.inject(createEditResourceTabInjectable);
createEditResourceTab(namespaceStub);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows dock tab for editing second namespace", () => {
expect(
rendered.getByTestId("dock-tab-content-for-some-second-tab-id"),
).toBeInTheDocument();
});
it("still has dock tab for first namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows spinner in the dock tab", () => {
expect(
rendered.getByTestId("edit-resource-tab-spinner"),
).toBeInTheDocument();
});
it("calls for second namespace", () => {
expect(callForNamespaceMock).toHaveBeenCalledWith(
"/apis/some-api-version/namespaces/some-other-uid",
);
});
describe("when second namespace resolves", () => {
let someOtherNamespace: Namespace;
beforeEach(async () => {
someOtherNamespace = new Namespace({
apiVersion: "some-api-version",
kind: "Namespace",
metadata: {
uid: "some-other-uid",
name: "some-other-name",
resourceVersion: "some-resource-version",
selfLink:
"/apis/some-api-version/namespaces/some-other-uid",
},
});
await callForNamespaceMock.resolve({
callWasSuccessful: true,
response: someOtherNamespace,
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the configuration in editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-second-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe(`apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-other-uid
name: some-other-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-other-uid
`);
});
it("when selecting to save, calls for save of second namespace", () => {
callForPatchNamespaceMock.mockClear();
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-second-tab-id",
);
fireEvent.click(saveButton);
expect(callForPatchNamespaceMock).toHaveBeenCalledWith(
someOtherNamespace,
[],
);
});
describe("when clicking dock tab for the first namespace", () => {
beforeEach(() => {
callForNamespaceMock.mockClear();
const tab = rendered.getByTestId("dock-tab-for-some-first-tab-id");
fireEvent.click(tab);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows dock tab for editing first namespace", () => {
expect(
rendered.getByTestId("dock-tab-content-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("still has dock tab for second namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-second-tab-id"),
).toBeInTheDocument();
});
it("does not show spinner in the dock tab", () => {
expect(
rendered.queryByTestId("edit-resource-tab-spinner"),
).not.toBeInTheDocument();
});
it("does not call for namespace", () => {
expect(callForNamespaceMock).not.toHaveBeenCalled();
});
it("has configuration in the editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe(`apiVersion: some-api-version
kind: Namespace
metadata:
uid: some-uid
name: some-name
resourceVersion: some-resource-version
selfLink: /apis/some-api-version/namespaces/some-uid
somePropertyToBeRemoved: some-value
somePropertyToBeChanged: some-old-value
`);
});
it("when selecting to save, calls for save of first namespace", () => {
callForPatchNamespaceMock.mockClear();
const saveButton = rendered.getByTestId(
"save-edit-resource-from-tab-for-some-first-tab-id",
);
fireEvent.click(saveButton);
expect(callForPatchNamespaceMock).toHaveBeenCalledWith(
someNamespace,
[],
);
});
});
});
});
});
describe("when call for namespace resolves without namespace", () => {
beforeEach(async () => {
await callForNamespaceMock.resolve({
callWasSuccessful: true,
response: undefined,
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("still shows the dock tab for editing namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows error message", () => {
expect(
rendered.getByTestId("dock-tab-content-for-some-first-tab-id"),
).toHaveTextContent("Resource not found");
});
it("does not show error notification", () => {
expect(showErrorNotificationMock).not.toHaveBeenCalled();
});
});
describe("when call for namespace resolves with failure", () => {
beforeEach(async () => {
await callForNamespaceMock.resolve({
callWasSuccessful: false,
error: "some-error",
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("still shows the dock tab for editing namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows error message", () => {
expect(
rendered.getByTestId("dock-tab-content-for-some-first-tab-id"),
).toHaveTextContent("Resource not found");
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalled();
});
});
});
});
});
});
});
const someNamespaceDataStub = {
apiVersion: "some-api-version",
kind: "Namespace",
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
selfLink: "/apis/some-api-version/namespaces/some-uid",
},
};
const someOtherNamespaceDataStub = {
apiVersion: "some-api-version",
kind: "Namespace",
metadata: {
uid: "some-other-uid",
name: "some-other-name",
resourceVersion: "some-resource-version",
selfLink: "/apis/some-api-version/namespaces/some-other-uid",
},
};
@@ -0,0 +1,147 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { act } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { CallForResource } from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-resource/call-for-resource.injectable";
import callForResourceInjectable from "../../../renderer/components/dock/edit-resource/edit-resource-model/call-for-resource/call-for-resource.injectable";
import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { controlWhenStoragesAreReady } from "../../../renderer/utils/create-storage/storages-are-ready";
import writeJsonFileInjectable from "../../../common/fs/write-json-file.injectable";
import { TabKind } from "../../../renderer/components/dock/dock/store";
import { Namespace } from "../../../common/k8s-api/endpoints";
describe("cluster/namespaces - edit namespaces from previously opened tab", () => {
let builder: ApplicationBuilder;
let callForNamespaceMock: AsyncFnMock<CallForResource>;
let storagesAreReady: () => Promise<void>;
beforeEach(() => {
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
callForNamespaceMock = asyncFn();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
storagesAreReady = controlWhenStoragesAreReady(rendererDi);
rendererDi.override(callForResourceInjectable, () => callForNamespaceMock);
});
builder.allowKubeResource("namespaces");
});
describe("given tab was previously opened, when application is started", () => {
let rendered: RenderResult;
beforeEach(async () => {
const writeJsonFile = builder.dis.rendererDi.inject(writeJsonFileInjectable);
await writeJsonFile(
"/some-directory-for-lens-local-storage/some-cluster-id.json",
{
dock: {
height: 300,
tabs: [
{
id: "some-first-tab-id",
kind: TabKind.EDIT_RESOURCE,
title: "Namespace: some-namespace",
pinned: false,
},
],
isOpen: true,
},
edit_resource_store: {
"some-first-tab-id": {
resource: "/apis/some-api-version/namespaces/some-uid",
draft: "some-saved-configuration",
},
},
},
);
rendered = await builder.render();
await storagesAreReady();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows dock tab for editing namespace", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows spinner in the dock tab", () => {
expect(
rendered.getByTestId("edit-resource-tab-spinner"),
).toBeInTheDocument();
});
it("calls for namespace", () => {
expect(callForNamespaceMock).toHaveBeenCalledWith(
"/apis/some-api-version/namespaces/some-uid",
);
});
describe("when call for namespace resolves with namespace", () => {
let someNamespace: Namespace;
beforeEach(async () => {
someNamespace = new Namespace({
apiVersion: "some-api-version",
kind: "Namespace",
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
selfLink: "/apis/some-api-version/namespaces/some-uid",
somePropertyToBeRemoved: "some-value",
somePropertyToBeChanged: "some-old-value",
},
});
// TODO: Figure out why act is needed here. In CI it works without it.
await act(async () => {
await callForNamespaceMock.resolve({
callWasSuccessful: true,
response: someNamespace,
});
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the saved configuration in editor", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
) as HTMLTextAreaElement;
expect(input.value).toBe("some-saved-configuration");
});
});
});
});
@@ -0,0 +1,127 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
import { computed } from "mobx";
import { noop } from "lodash/fp";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("cluster - order of sidebar items", () => {
let rendered: RenderResult;
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder().setEnvironmentToClusterFrame();
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(testSidebarItemsInjectable);
});
});
describe("when rendered", () => {
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("has parent items in order", () => {
const actual = rendered
.queryAllByTestId(/^sidebar-item-(some-parent-id|some-other-parent-id|some-another-parent-id)/)
.map(elem => elem.dataset.testid);
expect(actual).toEqual([
"sidebar-item-some-parent-id",
"sidebar-item-some-another-parent-id",
"sidebar-item-some-other-parent-id",
]);
});
describe("when parent is expanded", () => {
beforeEach(() => {
const parentLink = rendered.getByTestId(
"sidebar-item-link-for-some-parent-id",
);
fireEvent.click(parentLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("has child items in order", () => {
const actual = rendered
.queryAllByTestId(/^sidebar-item-*/)
.filter((element) => element.dataset.parentIdTest === "some-parent-id")
.map(elem => elem.dataset.testid);
expect(actual).toEqual([
"sidebar-item-some-child-id",
"sidebar-item-some-another-child-id",
"sidebar-item-some-other-child-id",
]);
});
});
});
});
const testSidebarItemsInjectable = getInjectable({
id: "some-sidebar-item-injectable",
instantiate: () =>
computed((): SidebarItemRegistration[] => [
{
id: "some-parent-id",
parentId: null,
title: "Some parent",
onClick: noop,
orderNumber: 42,
},
{
id: "some-other-parent-id",
parentId: null,
title: "Some other parent",
onClick: noop,
orderNumber: 126,
},
{
id: "some-another-parent-id",
parentId: null,
title: "Some another parent",
onClick: noop,
orderNumber: 84,
},
{
id: "some-child-id",
parentId: "some-parent-id",
title: "Some child",
onClick: noop,
orderNumber: 168,
},
{
id: "some-other-child-id",
parentId: "some-parent-id",
title: "Some other child",
onClick: noop,
orderNumber: 252,
},
{
id: "some-another-child-id",
parentId: "some-parent-id",
title: "Some another child",
onClick: noop,
orderNumber: 210,
},
]),
injectionToken: sidebarItemsInjectionToken,
});
@@ -0,0 +1,358 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainer } from "@ogre-tools/injectable";
import { getInjectable } from "@ogre-tools/injectable";
import React from "react";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import directoryForLensLocalStorageInjectable from "../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
import { computed } from "mobx";
import { noop } from "lodash/fp";
import routeIsActiveInjectable from "../../renderer/routes/route-is-active.injectable";
import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import writeJsonFileInjectable from "../../common/fs/write-json-file.injectable";
import pathExistsInjectable from "../../common/fs/path-exists.injectable";
import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
import sidebarStorageInjectable from "../../renderer/components/layout/sidebar-storage/sidebar-storage.injectable";
import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";
describe("cluster - sidebar and tab navigation for core", () => {
let applicationBuilder: ApplicationBuilder;
let rendererDi: DiContainer;
let rendered: RenderResult;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
rendererDi = applicationBuilder.dis.rendererDi;
applicationBuilder.setEnvironmentToClusterFrame();
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");
rendererDi.override(storageSaveDelayInjectable, () => 250);
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
});
});
describe("given core registrations", () => {
beforeEach(() => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(testRouteInjectable);
rendererDi.register(testRouteComponentInjectable);
rendererDi.register(testSidebarItemsInjectable);
});
});
describe("given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(({ rendererDi }) => {
const route = rendererDi.inject(testRouteInjectable);
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
navigateToRoute(route);
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent is highlighted", () => {
const parent = rendered.queryByTestId("sidebar-item-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("true");
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).toBeNull();
});
it("child page is shown", () => {
expect(rendered.getByTestId("some-child-page")).not.toBeNull();
});
});
describe("given state for expanded sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
sidebar: {
expanded: { "some-parent-id": true },
width: 200,
},
},
);
});
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const sidebarStorage = rendererDi.inject(sidebarStorageInjectable);
await sidebarStorage.whenReady;
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.queryByTestId("sidebar-item-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).not.toBeNull();
});
});
describe("given state for expanded unknown sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
sidebar: {
expanded: { "some-unknown-parent-id": true },
width: 200,
},
},
);
});
rendered = await applicationBuilder.render();
});
it("renders without errors", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).toBeNull();
});
});
describe("given empty state for expanded sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
someThingButSidebar: {},
},
);
});
rendered = await applicationBuilder.render();
});
it("renders without errors", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).toBeNull();
});
});
describe("given no initially persisted state for sidebar items, when rendered", () => {
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.queryByTestId("sidebar-item-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).toBeNull();
});
describe("when a parent sidebar item is expanded", () => {
beforeEach(() => {
const parentLink = rendered.getByTestId(
"sidebar-item-link-for-some-parent-id",
);
fireEvent.click(parentLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.queryByTestId("sidebar-item-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child).not.toBeNull();
});
describe("when a child of the parent is selected", () => {
beforeEach(() => {
const childLink = rendered.getByTestId(
"sidebar-item-link-for-some-child-id",
);
fireEvent.click(childLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent is highlighted", () => {
const parent = rendered.queryByTestId("sidebar-item-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("true");
});
it("child is highlighted", () => {
const child = rendered.queryByTestId("sidebar-item-some-child-id");
expect(child?.dataset.isActiveTest).toBe("true");
});
it("child page is shown", () => {
expect(rendered.getByTestId("some-child-page")).not.toBeNull();
});
it("when not enough time passes, does not store state for expanded sidebar items to file system yet", async () => {
advanceFakeTime(250 - 1);
const pathExistsFake = rendererDi.inject(pathExistsInjectable);
const actual = await pathExistsFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
);
expect(actual).toBe(false);
});
it("when enough time passes, stores state for expanded sidebar items to file system", async () => {
advanceFakeTime(250);
const readJsonFileFake = rendererDi.inject(readJsonFileInjectable);
const actual = await readJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
);
expect(actual).toEqual({
sidebar: {
expanded: { "some-parent-id": true },
width: 200,
},
});
});
});
});
});
});
});
const testSidebarItemsInjectable = getInjectable({
id: "some-sidebar-items-injectable",
instantiate: (di) => {
const route = di.inject(testRouteInjectable);
const navigateToRoute = di.inject(navigateToRouteInjectionToken);
const routeIsActive = di.inject(routeIsActiveInjectable, route);
return computed((): SidebarItemRegistration[] => [
{
id: "some-parent-id",
parentId: null,
title: "Some parent",
onClick: noop,
getIcon: () => <div data-testid="some-icon-for-parent" />,
orderNumber: 42,
},
{
id: "some-child-id",
parentId: "some-parent-id",
title: "Some child",
onClick: () => navigateToRoute(route),
isActive: routeIsActive,
orderNumber: 42,
},
]);
},
injectionToken: sidebarItemsInjectionToken,
});
const testRouteInjectable = getInjectable({
id: "some-route-injectable-id",
instantiate: () => ({
path: "/some-child-page",
clusterFrame: true,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "some-child-page-route-component-injectable",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => <div data-testid="some-child-page" />,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
@@ -0,0 +1,455 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import directoryForLensLocalStorageInjectable from "../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import routesInjectable from "../../renderer/routes/routes.injectable";
import { matches } from "lodash/fp";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import writeJsonFileInjectable from "../../common/fs/write-json-file.injectable";
import pathExistsInjectable from "../../common/fs/path-exists.injectable";
import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
import assert from "assert";
import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
import type { IObservableValue } from "mobx";
import { runInAction, computed, observable } from "mobx";
import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";
describe("cluster - sidebar and tab navigation for extensions", () => {
let applicationBuilder: ApplicationBuilder;
let rendererDi: DiContainer;
let rendered: RenderResult;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder();
rendererDi = applicationBuilder.dis.rendererDi;
applicationBuilder.setEnvironmentToClusterFrame();
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");
rendererDi.override(storageSaveDelayInjectable, () => 250);
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
});
});
describe("given extension with cluster pages and cluster page menus", () => {
let someObservable: IObservableValue<boolean>;
beforeEach(() => {
someObservable = observable.box(false);
const getExtensionFake = getExtensionFakeFor(applicationBuilder);
const testExtension = getExtensionFake({
id: "some-extension-id",
name: "some-extension-name",
rendererOptions: {
clusterPages: [
{
components: {
Page: () => {
throw new Error("should never come here");
},
},
},
{
id: "some-child-page-id",
components: {
Page: () => <div data-testid="some-child-page">Some child page</div>,
},
},
{
id: "some-other-child-page-id",
components: {
Page: () => (
<div data-testid="some-other-child-page">Some other child page</div>
),
},
},
],
clusterPageMenus: [
{
id: "some-parent-id",
title: "Parent",
components: {
Icon: () => <div>Some icon</div>,
},
},
{
id: "some-child-id",
target: { pageId: "some-child-page-id" },
parentId: "some-parent-id",
title: "Child 1",
components: {
Icon: null as never,
},
},
{
id: "some-other-child-id",
target: { pageId: "some-other-child-page-id" },
parentId: "some-parent-id",
title: "Child 2",
components: {
Icon: null as never,
},
},
{
id: "some-menu-with-controlled-visibility",
title: "Some menu with controlled visibility",
visible: computed(() => someObservable.get()),
components: {
Icon: () => <div>Some icon</div>,
},
},
],
},
});
applicationBuilder.extensions.enable(testExtension);
});
describe("given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(({ rendererDi }) => {
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const route = rendererDi
.inject(routesInjectable)
.get()
.find(
matches({
path: "/extension/some-extension-name/some-child-page-id",
}),
);
assert(route);
navigateToRoute(route);
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent is highlighted", () => {
const parent = rendered.getByTestId("sidebar-item-some-extension-name-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("true");
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).toBeNull();
});
it("child page is shown", () => {
expect(rendered.getByTestId("some-child-page")).not.toBeNull();
});
});
describe("given state for expanded sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
sidebar: {
expanded: { "some-extension-name-some-parent-id": true },
width: 200,
},
},
);
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.getByTestId("sidebar-item-some-extension-name-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).not.toBeNull();
});
});
describe("given state for expanded unknown sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
sidebar: {
expanded: { "some-extension-name-some-unknown-parent-id": true },
width: 200,
},
},
);
});
rendered = await applicationBuilder.render();
});
it("renders without errors", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).toBeNull();
});
});
describe("given empty state for expanded sidebar items already exists, when rendered", () => {
beforeEach(async () => {
applicationBuilder.beforeRender(async ({ rendererDi }) => {
const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
await writeJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
{
someThingButSidebar: {},
},
);
});
rendered = await applicationBuilder.render();
});
it("renders without errors", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).toBeNull();
});
});
describe("given no initially persisted state for sidebar items, when rendered", () => {
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.getByTestId("sidebar-item-some-extension-name-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is not expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).toBeNull();
});
it("does not show the sidebar item that should be hidden", () => {
const child = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-menu-with-controlled-visibility",
);
expect(child).not.toBeInTheDocument();
});
it("when sidebar item becomes visible, shows the sidebar item", () => {
runInAction(() => {
someObservable.set(true);
});
const child = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-menu-with-controlled-visibility",
);
expect(child).toBeInTheDocument();
});
describe("when a parent sidebar item is expanded", () => {
beforeEach(() => {
const parentLink = rendered.getByTestId(
"sidebar-item-link-for-some-extension-name-some-parent-id",
);
fireEvent.click(parentLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent sidebar item is not highlighted", () => {
const parent = rendered.getByTestId("sidebar-item-some-extension-name-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("false");
});
it("parent sidebar item is expanded", () => {
const child = rendered.queryByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child).not.toBeNull();
});
describe("when a child of the parent is selected", () => {
beforeEach(() => {
const childLink = rendered.getByTestId(
"sidebar-item-link-for-some-extension-name-some-child-id",
);
fireEvent.click(childLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("parent is highlighted", () => {
const parent = rendered.getByTestId("sidebar-item-some-extension-name-some-parent-id");
expect(parent?.dataset.isActiveTest).toBe("true");
});
it("child is highlighted", () => {
const child = rendered.getByTestId("sidebar-item-some-extension-name-some-child-id");
expect(child?.dataset.isActiveTest).toBe("true");
});
it("child page is shown", () => {
expect(rendered.getByTestId("some-child-page")).not.toBeNull();
});
it("renders tabs", () => {
expect(rendered.getByTestId("tab-layout")).not.toBeNull();
});
it("tab for child page is active", () => {
const tabLink = rendered.getByTestId(
"tab-link-for-some-extension-name-some-child-id",
);
expect(tabLink.dataset.isActiveTest).toBe("true");
});
it("tab for sibling page is not active", () => {
const tabLink = rendered.getByTestId(
"tab-link-for-some-extension-name-some-other-child-id",
);
expect(tabLink.dataset.isActiveTest).toBe("false");
});
it("when not enough time passes, does not store state for expanded sidebar items to file system yet", async () => {
advanceFakeTime(250 - 1);
const pathExistsFake = rendererDi.inject(pathExistsInjectable);
const actual = await pathExistsFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
);
expect(actual).toBe(false);
});
it("when enough time passes, stores state for expanded sidebar items to file system", async () => {
advanceFakeTime(250);
const readJsonFileFake = rendererDi.inject(readJsonFileInjectable);
const actual = await readJsonFileFake(
"/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
);
expect(actual).toEqual({
sidebar: {
expanded: { "some-extension-name-some-parent-id": true },
width: 200,
},
});
});
describe("when selecting sibling tab", () => {
beforeEach(() => {
const childTabLink = rendered.getByTestId(
"tab-link-for-some-extension-name-some-other-child-id",
);
fireEvent.click(childTabLink);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("sibling child page is shown", () => {
expect(
rendered.getByTestId("some-other-child-page"),
).not.toBeNull();
});
it("tab for sibling page is active", () => {
const tabLink = rendered.getByTestId(
"tab-link-for-some-extension-name-some-other-child-id",
);
expect(tabLink.dataset.isActiveTest).toBe("true");
});
it("tab for previous page is not active", () => {
const tabLink = rendered.getByTestId(
"tab-link-for-some-extension-name-some-child-id",
);
expect(tabLink.dataset.isActiveTest).toBe("false");
});
});
});
});
});
});
});
@@ -0,0 +1,120 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
import { computed } from "mobx";
import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
import React from "react";
import isAllowedResourceInjectable from "../../common/utils/is-allowed-resource.injectable";
import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
describe("cluster - visibility of sidebar items", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
applicationBuilder.setEnvironmentToClusterFrame();
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(testRouteInjectable);
rendererDi.register(testRouteComponentInjectable);
rendererDi.register(testSidebarItemsInjectable);
});
});
describe("given kube resource for route is not allowed", () => {
beforeEach(async () => {
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("related sidebar item does not exist", () => {
const item = rendered.queryByTestId("sidebar-item-some-item-id");
expect(item).toBeNull();
});
describe("when kube resource becomes allowed", () => {
beforeEach(() => {
applicationBuilder.allowKubeResource("namespaces");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("related sidebar item exists", () => {
const item = rendered.queryByTestId("sidebar-item-some-item-id");
expect(item).not.toBeNull();
});
});
});
});
const testRouteInjectable = getInjectable({
id: "some-route-injectable-id",
instantiate: (di) => {
const someKubeResourceName = "namespaces";
const kubeResourceIsAllowed = di.inject(
isAllowedResourceInjectable,
someKubeResourceName,
);
return {
path: "/some-child-page",
isEnabled: kubeResourceIsAllowed,
clusterFrame: true,
};
},
injectionToken: frontEndRouteInjectionToken,
});
const testRouteComponentInjectable = getInjectable({
id: "some-child-page-route-component-injectable",
instantiate: (di) => ({
route: di.inject(testRouteInjectable),
Component: () => <div data-testid="some-child-page" />,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const testSidebarItemsInjectable = getInjectable({
id: "some-sidebar-item-injectable",
instantiate: (di) => {
const testRoute = di.inject(testRouteInjectable);
const navigateToRoute = di.inject(navigateToRouteInjectionToken);
return computed((): SidebarItemRegistration[] => [
{
id: "some-item-id",
parentId: null,
title: "Some item",
onClick: () => navigateToRoute(testRoute),
isVisible: testRoute.isEnabled,
orderNumber: 42,
},
]);
},
injectionToken: sidebarItemsInjectionToken,
});
@@ -0,0 +1,114 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
import type { KubernetesCluster } from "../../../../../common/catalog-entities";
import { getApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../../renderer/components/test-utils/get-extension-fake";
import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
import apiManagerInjectable from "../../../../../common/k8s-api/api-manager/manager.injectable";
import navigateToWorkloadsOverviewInjectable from "../../../../../common/front-end-routing/routes/cluster/workloads/overview/navigate-to-workloads-overview.injectable";
import React from "react";
describe("disable workloads overview details when cluster is not relevant", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let isEnabledForClusterMock: AsyncFnMock<
(cluster: KubernetesCluster) => Promise<boolean>
>;
beforeEach(async () => {
builder = getApplicationBuilder();
builder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(apiManagerInjectable, () => ({}));
});
const rendererDi = builder.dis.rendererDi;
rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
isEnabledForClusterMock = asyncFn();
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
isEnabledForCluster: isEnabledForClusterMock,
kubeWorkloadsOverviewItems: [
{
components: {
Details: () => (
<div data-testid="some-detail-component">Some detail component</div>
),
},
},
],
},
});
rendered = await builder.render();
const navigateToWorkloadsOverview = rendererDi.inject(
navigateToWorkloadsOverviewInjectable,
);
navigateToWorkloadsOverview();
builder.extensions.enable(testExtension);
});
describe("given not yet known if extension should be enabled for the cluster", () => {
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the detail", () => {
const actual = rendered.queryByTestId("some-detail-component");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension shouldn't be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(false);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the detail", () => {
const actual = rendered.queryByTestId("some-detail-component");
expect(actual).not.toBeInTheDocument();
});
});
describe("given extension should be enabled for the cluster", () => {
beforeEach(async () => {
await isEnabledForClusterMock.resolve(true);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the detail", () => {
const actual = rendered.getByTestId("some-detail-component");
expect(actual).toBeInTheDocument();
});
});
});
@@ -0,0 +1,147 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { getApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../../renderer/components/test-utils/get-extension-fake";
import React from "react";
import getRandomIdInjectable from "../../../../../common/utils/get-random-id.injectable";
import { workloadOverviewDetailInjectionToken } from "../../../../../renderer/components/+workloads-overview/workload-overview-details/workload-overview-detail-injection-token";
import { getInjectable } from "@ogre-tools/injectable";
import { computed } from "mobx";
describe("order of workload overview details", () => {
let rendered: RenderResult;
beforeEach(async () => {
const builder = getApplicationBuilder();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.unoverride(getRandomIdInjectable);
rendererDi.permitSideEffects(getRandomIdInjectable);
});
builder.setEnvironmentToClusterFrame();
rendered = await builder.render();
const testExtension = getExtensionFakeFor(builder)({
id: "some-extension-id",
name: "some-extension",
rendererOptions: {
kubeWorkloadsOverviewItems: [
{
components: {
Details: () => (
<div
data-testid="workload-overview-detail"
id="some-extension-item-without-priority"
/>
),
},
},
{
priority: 70,
components: {
Details: () => (
<div
data-testid="workload-overview-detail"
id="some-extension-item-with-high-priority"
/>
),
},
},
{
priority: 10,
components: {
Details: () => (
<div
data-testid="workload-overview-detail"
id="some-extension-item-with-low-priority"
/>
),
},
},
],
},
});
builder.extensions.enable(testExtension);
builder.dis.rendererDi.register(
someCoreItemWithLowOrderNumberInjectable,
someCoreItemWithHighOrderNumberInjectable,
someCoreItemWithDefaultOrderNumberInjectable,
);
});
it("shows items in correct order", () => {
const actual = rendered.queryAllByTestId("workload-overview-detail").map(x => x.id);
expect(actual).toEqual([
"some-core-item-with-low-order-number",
"some-extension-item-with-high-priority",
"some-core-item-with-default-order-number",
"some-extension-item-without-priority",
"some-core-item-with-high-order-number",
"some-extension-item-with-low-priority",
]);
});
});
const someCoreItemWithLowOrderNumberInjectable = getInjectable({
id: "some-core-item-with-low-order-number",
instantiate: () => ({
orderNumber: 30,
enabled: computed(() => true),
Component: () => (
<div
data-testid="workload-overview-detail"
id="some-core-item-with-low-order-number"
/>
),
}),
injectionToken: workloadOverviewDetailInjectionToken,
});
const someCoreItemWithDefaultOrderNumberInjectable = getInjectable({
id: "some-core-item-with-default-order-number",
instantiate: () => ({
orderNumber: 50,
enabled: computed(() => true),
Component: () => (
<div
data-testid="workload-overview-detail"
id="some-core-item-with-default-order-number"
/>
),
}),
injectionToken: workloadOverviewDetailInjectionToken,
});
const someCoreItemWithHighOrderNumberInjectable = getInjectable({
id: "some-core-item-high-order-number",
instantiate: () => ({
orderNumber: 60,
enabled: computed(() => true),
Component: () => (
<div
data-testid="workload-overview-detail"
id="some-core-item-with-high-order-number"
/>
),
}),
injectionToken: workloadOverviewDetailInjectionToken,
});
@@ -0,0 +1,75 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { IObservableValue } from "mobx";
import { computed, observable, runInAction } from "mobx";
import React from "react";
import navigateToWorkloadsOverviewInjectable from "../../../../../common/front-end-routing/routes/cluster/workloads/overview/navigate-to-workloads-overview.injectable";
import type { ApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../../../renderer/components/test-utils/get-extension-fake";
describe("reactively hide workloads overview details item", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
builder = getApplicationBuilder();
const rendererDi = builder.dis.rendererDi;
builder.setEnvironmentToClusterFrame();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
kubeWorkloadsOverviewItems: [
{
components: {
Details: () => (
<div data-testid="some-workload-overview-detail-item">Some detail component</div>
),
},
visible: computed(() => someObservable.get()),
},
],
},
});
rendered = await builder.render();
const navigateToWorkloadsOverview = rendererDi.inject(
navigateToWorkloadsOverviewInjectable,
);
navigateToWorkloadsOverview();
builder.extensions.enable(testExtension);
});
it("does not show the workload overview detail item", () => {
const actual = rendered.queryByTestId("some-workload-overview-detail-item");
expect(actual).not.toBeInTheDocument();
});
it("given item should be shown, shows the workload overview detail item", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.queryByTestId("some-workload-overview-detail-item");
expect(actual).toBeInTheDocument();
});
});
File diff suppressed because it is too large. Load diff
@@ -0,0 +1,148 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import platformInjectable from "../../common/vars/platform.injectable";
import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("Command Pallet: keyboard shortcut tests", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
});
describe("when on macOS", () => {
beforeEach(async () => {
applicationBuilder.dis.rendererDi.override(platformInjectable, () => "darwin");
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the command pallet yet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
describe("when pressing ESC", () => {
beforeEach(() => {
userEvent.keyboard("{Escape}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the command pallet yet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
});
describe("when pressing SHIFT+CMD+P", () => {
beforeEach(() => {
userEvent.keyboard("{Shift>}{Meta>}P{/Meta}{/Shift}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the command pallet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeInTheDocument();
});
describe("when pressing ESC", () => {
beforeEach(() => {
userEvent.keyboard("{Escape}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("no longer shows the command pallet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
});
});
});
describe("when on linux", () => {
beforeEach(async () => {
applicationBuilder.dis.rendererDi.override(platformInjectable, () => "linux");
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the command pallet yet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
describe("when pressing ESC", () => {
beforeEach(() => {
userEvent.keyboard("{Escape}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show the command pallet yet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
});
describe("when pressing SHIFT+CTRL+P", () => {
beforeEach(() => {
userEvent.keyboard("{Shift>}{Control>}P{/Control}{/Shift}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the command pallet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeInTheDocument();
});
describe("when pressing ESC", () => {
beforeEach(() => {
userEvent.keyboard("{Escape}");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("no longer shows the command pallet", () => {
const actual = rendered.queryByTestId("command-container");
expect(actual).toBeNull();
});
});
});
});
});
@@ -0,0 +1,63 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { FakeExtensionData, TestExtension } from "../renderer/components/test-utils/get-renderer-extension-fake";
import { getRendererExtensionFakeFor } from "../renderer/components/test-utils/get-renderer-extension-fake";
import React from "react";
import type { RenderResult } from "@testing-library/react";
import currentPathInjectable from "../renderer/routes/current-path.injectable";
import type { ApplicationBuilder } from "../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../renderer/components/test-utils/get-application-builder";
describe("extension special characters in page registrations", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
let testExtension: TestExtension;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
testExtension = getRendererExtensionFake(
extensionWithPagesHavingSpecialCharacters,
);
applicationBuilder.extensions.renderer.enable(testExtension);
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when navigating to route with ID having special characters", () => {
beforeEach(() => {
testExtension.navigate("/some-page-id/");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("knows URL", () => {
const currentPath = applicationBuilder.dis.rendererDi.inject(currentPathInjectable);
expect(currentPath.get()).toBe("/extension/some-extension-name--/some-page-id");
});
});
});
const extensionWithPagesHavingSpecialCharacters: FakeExtensionData = {
id: "some-extension-id",
name: "@some-extension-name/",
globalPages: [
{
id: "/some-page-id/",
components: {
Page: () => <div>Some page</div>,
},
},
],
};
@@ -0,0 +1,426 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`extensions - navigation using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`extensions - navigation using application menu when navigating to extensions using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout DropFileInput Extensions"
data-testid="extensions-page"
>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section>
<h1>
Extensions
</h1>
<div
class="notice"
>
<p>
Add new features via Lens Extensions. Check out the
<a
href="https://docs.k8slens.dev/main/extensions/"
rel="noreferrer"
target="_blank"
>
docs
</a>
and list of
<a
href="https://github.com/lensapp/lens-extensions/blob/main/README.md"
rel="noreferrer"
target="_blank"
>
available extensions
</a>
.
</p>
</div>
<section>
<div
class="SubTitle"
>
Name or file path or URL to an extension package (tar, tgz)
</div>
<div
class="inputs"
>
<div />
<div>
<button
class="Button button primary"
type="button"
>
Install
</button>
</div>
</div>
<small
class="proTip"
>
<b>
Pro-Tip
</b>
: you can drag-n-drop tarball-file to this area
</small>
</section>
<div>
<div
class="Spinner singleColor center"
/>
</div>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div>
<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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,58 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import focusWindowInjectable from "../../renderer/navigation/focus-window.injectable";
// TODO: Make components free of side effects by making them deterministic
jest.mock("../../renderer/components/input/input");
describe("extensions - navigation using application menu", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
let focusWindowMock: jest.Mock;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder().beforeApplicationStart(({ rendererDi }) => {
focusWindowMock = jest.fn();
rendererDi.override(focusWindowInjectable, () => focusWindowMock);
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show extensions page yet", () => {
const actual = rendered.queryByTestId("extensions-page");
expect(actual).toBeNull();
});
describe("when navigating to extensions using application menu", () => {
beforeEach(() => {
applicationBuilder.applicationMenu.click("root.extensions");
});
it("focuses the window", () => {
expect(focusWindowMock).toHaveBeenCalled();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows extensions page", () => {
const actual = rendered.getByTestId("extensions-page");
expect(actual).not.toBeNull();
});
});
});
@@ -0,0 +1,382 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import execFileInjectable from "../../common/fs/exec-file.injectable";
import helmBinaryPathInjectable from "../../main/helm/helm-binary-path.injectable";
import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
import type { HelmRepo } from "../../common/helm/helm-repo";
import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/adding-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
import isPathInjectable from "../../renderer/components/input/validators/is-path.injectable";
import showSuccessNotificationInjectable from "../../renderer/components/notifications/show-success-notification.injectable";
import showErrorNotificationInjectable from "../../renderer/components/notifications/show-error-notification.injectable";
import type { AsyncResult } from "../../common/utils/async-result";
describe("add custom helm repository in preferences", () => {
let applicationBuilder: ApplicationBuilder;
let showSuccessNotificationMock: jest.Mock;
let showErrorNotificationMock: jest.Mock;
let rendered: RenderResult;
let execFileMock: AsyncFnMock<
ReturnType<typeof execFileInjectable["instantiate"]>
>;
let getActiveHelmRepositoriesMock: AsyncFnMock<() => Promise<AsyncResult<HelmRepo[]>>>;
beforeEach(async () => {
jest.useFakeTimers();
applicationBuilder = getApplicationBuilder();
execFileMock = asyncFn();
getActiveHelmRepositoriesMock = asyncFn();
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
rendererDi.override(callForPublicHelmRepositoriesInjectable, () => async () => []);
showSuccessNotificationMock = jest.fn();
rendererDi.override(showSuccessNotificationInjectable, () => showSuccessNotificationMock);
showErrorNotificationMock = jest.fn();
rendererDi.override(showErrorNotificationInjectable, () => showErrorNotificationMock);
// TODO: Figure out how to make async validators unit testable
rendererDi.override(isPathInjectable, () => ({ debounce: 0, validate: async () => {} }));
mainDi.override(
getActiveHelmRepositoriesInjectable,
() => getActiveHelmRepositoriesMock,
);
mainDi.override(execFileInjectable, () => execFileMock);
mainDi.override(helmBinaryPathInjectable, () => "some-helm-binary-path");
});
rendered = await applicationBuilder.render();
});
describe("when navigating to preferences containing helm repositories", () => {
beforeEach(async () => {
applicationBuilder.preferences.navigate();
applicationBuilder.preferences.navigation.click("kubernetes");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when active repositories resolve", () => {
beforeEach(async () => {
await Promise.all([
getActiveHelmRepositoriesMock.resolve({
callWasSuccessful: true,
response: [
{ name: "Some active repository", url: "some-url" },
],
}),
]);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when selecting to add custom repository", () => {
beforeEach(() => {
const button = rendered.getByTestId("add-custom-helm-repo-button");
fireEvent.click(button);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows dialog", () => {
expect(
rendered.queryByTestId("add-custom-helm-repository-dialog"),
).toBeInTheDocument();
});
// TODO: Figure out how to close dialog by clicking outside of it
xdescribe("when closing the dialog by clicking outside", () => {
beforeEach(() => {});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show dialog anymore", () => {
expect(
rendered.queryByTestId("add-custom-helm-repository-dialog"),
).not.toBeInTheDocument();
});
});
describe("when closing the dialog by clicking cancel", () => {
beforeEach(() => {
const button = rendered.getByTestId("custom-helm-repository-cancel-button");
fireEvent.click(button);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show dialog anymore", () => {
expect(
rendered.queryByTestId("add-custom-helm-repository-dialog"),
).not.toBeInTheDocument();
});
});
describe("when inputted minimal options for the repository", () => {
beforeEach(() => {
getActiveHelmRepositoriesMock.mockClear();
const nameInput = rendered.getByTestId("custom-helm-repository-name-input");
fireEvent.change(nameInput, { target: { value: "some-custom-repository" }});
const urlInput = rendered.getByTestId("custom-helm-repository-url-input");
fireEvent.change(urlInput, { target: { value: "http://some.url" }});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when submitted and some time passes", () => {
beforeEach(() => {
const submitButton = rendered.getByTestId("custom-helm-repository-submit-button");
fireEvent.click(submitButton);
// TODO: Remove when debounce is removed from WizardStep.submit
jest.runOnlyPendingTimers();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("adds the repository", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "add", "some-custom-repository", "http://some.url"],
);
});
it("does not reload active repositories yet", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
it("does not show notification yet", () => {
expect(showSuccessNotificationMock).not.toHaveBeenCalled();
});
describe("when activation rejects", () => {
beforeEach(async () => {
await execFileMock.reject(
"Some error",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Some error",
);
});
it("does not show success notification", () => {
expect(showSuccessNotificationMock).not.toHaveBeenCalled();
});
it("does not show dialog anymore", () => {
expect(rendered.queryByTestId("add-custom-helm-repository-dialog")).not.toBeInTheDocument();
});
it("does not reload active repositories", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
});
describe("when activation resolves with success", () => {
beforeEach(async () => {
await execFileMock.resolveSpecific(
[
"some-helm-binary-path",
["repo", "add", "some-custom-repository", "http://some.url"],
],
"",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show dialog anymore", () => {
expect(rendered.queryByTestId("add-custom-helm-repository-dialog")).not.toBeInTheDocument();
});
it("reloads active repositories", () => {
expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
});
it("shows success notification", () => {
expect(showSuccessNotificationMock).toHaveBeenCalledWith(
"Helm repository some-custom-repository has been added.",
);
});
describe("when adding custom repository again", () => {
beforeEach(() => {
const button = rendered.getByTestId("add-custom-helm-repo-button");
fireEvent.click(button);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("repository name is empty", () => {
const input = rendered.getByTestId("custom-helm-repository-name-input") as HTMLInputElement;
expect(input.value).toBe("");
});
it("repository url is empty", () => {
const input = rendered.getByTestId("custom-helm-repository-url-input") as HTMLInputElement;
expect(input.value).toBe("");
});
});
});
});
describe("when showing the maximal options", () => {
beforeEach(() => {
const button = rendered.getByTestId("toggle-maximal-options-for-custom-helm-repository-button");
fireEvent.click(button);
});
it("shows maximal options", () => {
const maximalOptions = rendered.getByTestId("maximal-options-for-custom-helm-repository-dialog");
expect(maximalOptions).toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("given closing the dialog, when reopening the dialog, still shows maximal options", () => {
const cancelButton = rendered.getByTestId("custom-helm-repository-cancel-button");
fireEvent.click(cancelButton);
const openButton = rendered.getByTestId("add-custom-helm-repo-button");
fireEvent.click(openButton);
const maximalOptions = rendered.getByTestId("maximal-options-for-custom-helm-repository-dialog");
expect(maximalOptions).toBeInTheDocument();
});
describe("when hiding maximal options", () => {
beforeEach(() => {
const button = rendered.getByTestId("toggle-maximal-options-for-custom-helm-repository-button");
fireEvent.click(button);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show maximal options anymore", () => {
const maximalOptions = rendered.queryByTestId("maximal-options-for-custom-helm-repository-dialog");
expect(maximalOptions).not.toBeInTheDocument();
});
});
describe("when inputted maximal options", () => {
beforeEach(async () => {
[
{ selector: "username-input", value: "some-username" },
{ selector: "password-input", value: "some-password" },
{ selector: "ca-cert-file-input", value: "some-ca-cert-file" },
{ selector: "cert-file-input", value: "some-cert-file" },
{ selector: "key-file-input", value: "some-key-file" },
].forEach(({ selector, value }) => {
const input = rendered.getByTestId(`custom-helm-repository-${selector}`);
fireEvent.change(input, { target: { value }});
});
const checkbox = rendered.getByTestId(`custom-helm-repository-verify-tls-input`);
fireEvent.click(checkbox);
jest.runOnlyPendingTimers();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("when submitted and some time passes, adds the repository with maximal options", () => {
const submitButton = rendered.getByTestId("custom-helm-repository-submit-button");
fireEvent.click(submitButton);
// TODO: Remove when debounce is removed from WizardStep.submit
jest.runOnlyPendingTimers();
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
[
"repo",
"add",
"some-custom-repository",
"http://some.url",
"--insecure-skip-tls-verify",
"--username",
"some-username",
"--password",
"some-password",
"--ca-file",
"some-ca-cert-file",
"--key-file",
"some-key-file",
"--cert-file",
"some-cert-file",
],
);
});
});
});
});
});
});
});
});
@@ -0,0 +1,273 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import execFileInjectable from "../../common/fs/exec-file.injectable";
import helmBinaryPathInjectable from "../../main/helm/helm-binary-path.injectable";
import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
import type { HelmRepo } from "../../common/helm/helm-repo";
import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/adding-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
import showSuccessNotificationInjectable from "../../renderer/components/notifications/show-success-notification.injectable";
import showErrorNotificationInjectable from "../../renderer/components/notifications/show-error-notification.injectable";
import type { AsyncResult } from "../../common/utils/async-result";
describe("add helm repository from list in preferences", () => {
let applicationBuilder: ApplicationBuilder;
let showSuccessNotificationMock: jest.Mock;
let showErrorNotificationMock: jest.Mock;
let rendered: RenderResult;
let execFileMock: AsyncFnMock<
ReturnType<typeof execFileInjectable["instantiate"]>
>;
let getActiveHelmRepositoriesMock: AsyncFnMock<() => Promise<AsyncResult<HelmRepo[]>>>;
let callForPublicHelmRepositoriesMock: AsyncFnMock<() => Promise<HelmRepo[]>>;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
execFileMock = asyncFn();
getActiveHelmRepositoriesMock = asyncFn();
callForPublicHelmRepositoriesMock = asyncFn();
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
showSuccessNotificationMock = jest.fn();
rendererDi.override(showSuccessNotificationInjectable, () => showSuccessNotificationMock);
showErrorNotificationMock = jest.fn();
rendererDi.override(showErrorNotificationInjectable, () => showErrorNotificationMock);
rendererDi.override(
callForPublicHelmRepositoriesInjectable,
() => callForPublicHelmRepositoriesMock,
);
mainDi.override(
getActiveHelmRepositoriesInjectable,
() => getActiveHelmRepositoriesMock,
);
mainDi.override(execFileInjectable, () => execFileMock);
mainDi.override(helmBinaryPathInjectable, () => "some-helm-binary-path");
});
rendered = await applicationBuilder.render();
});
describe("when navigating to preferences containing helm repositories", () => {
beforeEach(async () => {
applicationBuilder.preferences.navigate();
applicationBuilder.preferences.navigation.click("kubernetes");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for public repositories", () => {
expect(callForPublicHelmRepositoriesMock).toHaveBeenCalled();
});
it("calls for active repositories", () => {
expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
});
describe("when both active and public repositories resolve", () => {
beforeEach(async () => {
await Promise.all([
callForPublicHelmRepositoriesMock.resolve([
{ name: "Some already active repository", url: "some-url" },
{ name: "Some to be added repository", url: "some-other-url" },
]),
getActiveHelmRepositoriesMock.resolve({
callWasSuccessful: true,
response: [
{ name: "Some already active repository", url: "some-url" },
],
}),
]);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when select for adding public repositories is clicked", () => {
beforeEach(() => {
applicationBuilder.select.openMenu(
"selection-of-active-public-helm-repository",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when deactive public repository is selected", () => {
beforeEach(async () => {
getActiveHelmRepositoriesMock.mockClear();
applicationBuilder.select.selectOption(
"selection-of-active-public-helm-repository",
"Some to be added repository",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("adds the repository", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "add", "Some to be added repository", "some-other-url"],
);
});
it("does not reload active repositories yet", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
describe("when adding rejects", () => {
beforeEach(async () => {
await execFileMock.reject(
"Some error",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Some error",
);
});
it("does not show success notification", () => {
expect(showSuccessNotificationMock).not.toHaveBeenCalled();
});
it("does not show dialog anymore", () => {
expect(rendered.queryByTestId("add-custom-helm-repository-dialog")).not.toBeInTheDocument();
});
it("does not reload active repositories", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
});
describe("when adding resolves", () => {
beforeEach(async () => {
await execFileMock.resolveSpecific(
[
"some-helm-binary-path",
["repo", "add", "Some to be added repository", "some-other-url"],
],
"",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("reloads active repositories", () => {
expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
});
it("shows success notification", () => {
expect(showSuccessNotificationMock).toHaveBeenCalledWith(
"Helm repository Some to be added repository has been added.",
);
});
describe("when active repositories resolve again", () => {
beforeEach(async () => {
await getActiveHelmRepositoriesMock.resolve({
callWasSuccessful: true,
response: [
{ name: "Some already active repository", url: "some-url" },
{ name: "Some to be added repository", url: "some-other-url" },
],
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when select for selecting active repositories is clicked", () => {
beforeEach(() => {
applicationBuilder.select.openMenu(
"selection-of-active-public-helm-repository",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when active repository is selected", () => {
beforeEach(() => {
execFileMock.mockClear();
getActiveHelmRepositoriesMock.mockClear();
applicationBuilder.select.selectOption(
"selection-of-active-public-helm-repository",
"Some already active repository",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("removes the repository", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "remove", "Some already active repository"],
);
});
it("does not reload active repositories yet", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
describe("when removing resolves", () => {
beforeEach(async () => {
await execFileMock.resolveSpecific(
[
"some-helm-binary-path",
["repo", "remove", "Some already active repository"],
],
"",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("reloads active repositories", () => {
expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
});
});
});
});
});
});
});
});
});
});
});
@@ -0,0 +1,255 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
import getRandomInstallChartTabIdInjectable from "../../../renderer/components/dock/install-chart/get-random-install-chart-tab-id.injectable";
import type { CallForHelmChartValues } from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
import callForHelmChartValuesInjectable from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
import namespaceStoreInjectable from "../../../renderer/components/+namespaces/store.injectable";
import type { NamespaceStore } from "../../../renderer/components/+namespaces/store";
import type { CallForHelmChartVersions } from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
import callForHelmChartVersionsInjectable from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
import { overrideFsWithFakes } from "../../../test-utils/override-fs-with-fakes";
import writeJsonFileInjectable from "../../../common/fs/write-json-file.injectable";
import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { TabKind } from "../../../renderer/components/dock/dock/store";
import { controlWhenStoragesAreReady } from "../../../renderer/utils/create-storage/storages-are-ready";
import type { DiContainer } from "@ogre-tools/injectable";
import callForCreateHelmReleaseInjectable from "../../../renderer/components/+helm-releases/create-release/call-for-create-helm-release.injectable";
describe("installing helm chart from previously opened tab", () => {
let builder: ApplicationBuilder;
let rendererDi: DiContainer;
let callForHelmChartVersionsMock: AsyncFnMock<CallForHelmChartVersions>;
let callForHelmChartValuesMock: AsyncFnMock<CallForHelmChartValues>;
let storagesAreReady: () => Promise<void>;
beforeEach(() => {
builder = getApplicationBuilder();
rendererDi = builder.dis.rendererDi;
overrideFsWithFakes(rendererDi);
callForHelmChartVersionsMock = asyncFn();
callForHelmChartValuesMock = asyncFn();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
storagesAreReady = controlWhenStoragesAreReady(rendererDi);
rendererDi.override(
callForHelmChartVersionsInjectable,
() => callForHelmChartVersionsMock,
);
rendererDi.override(
callForHelmChartValuesInjectable,
() => callForHelmChartValuesMock,
);
rendererDi.override(
callForHelmChartValuesInjectable,
() => callForHelmChartValuesMock,
);
rendererDi.override(
callForCreateHelmReleaseInjectable,
() => jest.fn(),
);
// TODO: Replace store mocking with mock for the actual side-effect (where the namespaces are coming from)
rendererDi.override(
namespaceStoreInjectable,
() =>
({
contextNamespaces: [],
items: [
{ getName: () => "default" },
{ getName: () => "some-other-namespace" },
],
selectNamespaces: () => {},
} as unknown as NamespaceStore),
);
rendererDi.override(getRandomInstallChartTabIdInjectable, () =>
jest
.fn(() => "some-irrelevant-tab-id")
.mockReturnValueOnce("some-first-tab-id"),
);
});
builder.setEnvironmentToClusterFrame();
});
describe("given tab for installing chart was previously opened, when application is started", () => {
let rendered: RenderResult;
beforeEach(async () => {
const writeJsonFile = rendererDi.inject(writeJsonFileInjectable);
writeJsonFile(
"/some-directory-for-lens-local-storage/some-cluster-id.json",
{
dock: {
height: 300,
tabs: [
{
id: "some-first-tab-id",
kind: TabKind.INSTALL_CHART,
title: "Helm Install: some-repository/some-name",
pinned: false,
},
],
isOpen: true,
},
install_charts: {
"some-first-tab-id": {
name: "some-name",
repo: "some-repository",
version: "some-other-version",
values: "some-stored-configuration",
releaseName: "some-stored-custom-name",
namespace: "some-other-namespace",
},
},
},
);
rendered = await builder.render();
await storagesAreReady();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("still has the dock tab for installing chart", () => {
expect(
rendered.getByTestId("dock-tab-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows dock tab for installing the chart", () => {
expect(
rendered.getByTestId("dock-tab-content-for-some-first-tab-id"),
).toBeInTheDocument();
});
it("shows spinner in dock tab", () => {
expect(
rendered.getByTestId("install-chart-tab-spinner"),
).toBeInTheDocument();
});
it("calls for default configuration of the chart", () => {
expect(callForHelmChartValuesMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
"some-other-version",
);
});
it("calls for available versions", () => {
expect(callForHelmChartVersionsMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
);
});
describe("when configuration and version resolves", () => {
beforeEach(async () => {
await callForHelmChartValuesMock.resolve(
"some-default-configuration",
);
await callForHelmChartVersionsMock.resolve([
HelmChart.create({
apiVersion: "some-api-version",
name: "some-name",
version: "some-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
HelmChart.create({
apiVersion: "some-api-version",
name: "some-name",
version: "some-other-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
]);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the stored configuration", () => {
const input = rendered.getByTestId(
"monaco-editor-for-some-first-tab-id",
);
expect(input).toHaveValue("some-stored-configuration");
});
it("has the stored custom name", () => {
const input = rendered.getByTestId(
"install-chart-custom-name-input-for-some-first-tab-id",
);
expect(input).toHaveValue("some-stored-custom-name");
});
it("has the stored version", () => {
const actual = builder.select.getValue(
"install-chart-version-select-for-some-first-tab-id",
);
expect(actual).toBe("some-other-version");
});
it("has the stored namespace", () => {
const actual = builder.select.getValue(
"install-chart-namespace-select-for-some-first-tab-id",
);
expect(actual).toBe("some-other-namespace");
});
});
});
});
@@ -0,0 +1,356 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import type { CallForHelmCharts } from "../../../renderer/components/+helm-charts/helm-charts/call-for-helm-charts.injectable";
import callForHelmChartsInjectable from "../../../renderer/components/+helm-charts/helm-charts/call-for-helm-charts.injectable";
import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
import getRandomInstallChartTabIdInjectable from "../../../renderer/components/dock/install-chart/get-random-install-chart-tab-id.injectable";
import callForHelmChartValuesInjectable from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
import callForCreateHelmReleaseInjectable from "../../../renderer/components/+helm-releases/create-release/call-for-create-helm-release.injectable";
import type { CallForHelmChartReadme } from "../../../renderer/components/+helm-charts/details/readme/call-for-helm-chart-readme.injectable";
import callForHelmChartReadmeInjectable from "../../../renderer/components/+helm-charts/details/readme/call-for-helm-chart-readme.injectable";
import type { CallForHelmChartVersions } from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
import callForHelmChartVersionsInjectable from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
import { flushPromises } from "../../../common/test-utils/flush-promises";
import { overrideFsWithFakes } from "../../../test-utils/override-fs-with-fakes";
import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import dockStoreInjectable from "../../../renderer/components/dock/dock/store.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
describe("opening dock tab for installing helm chart", () => {
let builder: ApplicationBuilder;
let rendererDi: DiContainer;
let callForHelmChartsMock: AsyncFnMock<CallForHelmCharts>;
let callForHelmChartVersionsMock: AsyncFnMock<CallForHelmChartVersions>;
let callForHelmChartReadmeMock: AsyncFnMock<CallForHelmChartReadme>;
let callForHelmChartValuesMock: jest.Mock;
beforeEach(() => {
builder = getApplicationBuilder();
rendererDi = builder.dis.rendererDi;
overrideFsWithFakes(rendererDi);
callForHelmChartsMock = asyncFn();
callForHelmChartVersionsMock = asyncFn();
callForHelmChartReadmeMock = asyncFn();
callForHelmChartValuesMock = jest.fn();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
directoryForLensLocalStorageInjectable,
() => "/some-directory-for-lens-local-storage",
);
rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
rendererDi.override(
callForHelmChartsInjectable,
() => callForHelmChartsMock,
);
rendererDi.override(
callForHelmChartVersionsInjectable,
() => callForHelmChartVersionsMock,
);
rendererDi.override(
callForHelmChartReadmeInjectable,
() => callForHelmChartReadmeMock,
);
rendererDi.override(
callForHelmChartValuesInjectable,
() => callForHelmChartValuesMock,
);
rendererDi.override(
callForCreateHelmReleaseInjectable,
() => jest.fn(),
);
rendererDi.override(getRandomInstallChartTabIdInjectable, () =>
jest
.fn(() => "some-irrelevant-tab-id")
.mockReturnValueOnce("some-tab-id"),
);
});
builder.setEnvironmentToClusterFrame();
});
describe("given application is started, when navigating to helm charts", () => {
let rendered: RenderResult;
beforeEach(async () => {
rendered = await builder.render();
builder.helmCharts.navigate();
const dockStore = rendererDi.inject(dockStoreInjectable);
// TODO: Make TerminalWindow unit testable to allow realistic behaviour
dockStore.closeTab("terminal");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for charts", () => {
expect(callForHelmChartsMock).toHaveBeenCalled();
});
describe("when charts resolve", () => {
beforeEach(async () => {
await callForHelmChartsMock.resolve([
HelmChart.create({
apiVersion: "some-api-version",
name: "some-name",
version: "some-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
HelmChart.create({
apiVersion: "some-api-version",
name: "some-other-name",
version: "some-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
]);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when opening details of a chart", () => {
beforeEach(() => {
const row = rendered.getByTestId(
"helm-chart-row-for-some-repository-some-name",
);
fireEvent.click(row);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for chart versions", () => {
expect(callForHelmChartVersionsMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
);
});
it("shows spinner", () => {
expect(
rendered.getByTestId("spinner-for-chart-details"),
).toBeInTheDocument();
});
describe("when chart versions resolve", () => {
beforeEach(async () => {
await callForHelmChartVersionsMock.resolve([
HelmChart.create({
apiVersion: "some-api-version",
name: "some-name",
version: "some-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
HelmChart.create({
apiVersion: "some-api-version",
name: "some-name",
version: "some-other-version",
repo: "some-repository",
created: "2015-10-21T07:28:00Z",
description: "some-description",
keywords: [],
sources: [],
urls: [],
annotations: {},
dependencies: [],
maintainers: [],
deprecated: false,
}),
]);
});
it("calls for chart readme for the version", () => {
expect(callForHelmChartReadmeMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
"some-version",
);
});
it("has the latest version as selected", () => {
const actual = builder.select.getValue(
"helm-chart-version-selector-some-repository-some-name",
);
expect(actual).toBe("some-version");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not shows spinner for details", () => {
expect(
rendered.queryByTestId("spinner-for-chart-details"),
).not.toBeInTheDocument();
});
it("shows spinner for readme", () => {
expect(
rendered.getByTestId("spinner-for-chart-readme"),
).toBeInTheDocument();
});
describe("when readme resolves", () => {
beforeEach(async () => {
await callForHelmChartReadmeMock.resolve("some-readme");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
expect(
rendered.queryByTestId("spinner-for-chart-readme"),
).not.toBeInTheDocument();
});
describe("when selecting different version", () => {
beforeEach(() => {
callForHelmChartReadmeMock.mockClear();
builder.select
.openMenu(
"helm-chart-version-selector-some-repository-some-name",
)
.selectOption("some-other-version");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("selects the version", () => {
const actual = builder.select.getValue(
"helm-chart-version-selector-some-repository-some-name",
);
expect(actual).toBe("some-other-version");
});
it("calls for chart readme for the version", () => {
expect(callForHelmChartReadmeMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
"some-other-version",
);
});
describe("when readme resolves", () => {
beforeEach(async () => {
await callForHelmChartReadmeMock.resolve("some-readme");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("when selecting to install chart, calls for the default configuration of the chart with specific version", async () => {
const installButton = rendered.getByTestId(
"install-chart-for-some-repository-some-name",
);
fireEvent.click(installButton);
await flushPromises();
expect(callForHelmChartValuesMock).toHaveBeenCalledWith(
"some-repository",
"some-name",
"some-other-version",
);
});
});
});
describe("when selecting to install the chart", () => {
beforeEach(() => {
callForHelmChartVersionsMock.mockClear();
const installButton = rendered.getByTestId(
"install-chart-for-some-repository-some-name",
);
fireEvent.click(installButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the dock tab for installing chart", () => {
expect(
rendered.getByTestId("dock-tab-for-some-tab-id"),
).toBeInTheDocument();
});
it("shows dock tab for installing chart", () => {
expect(
rendered.getByTestId(
"dock-tab-content-for-some-tab-id",
),
).toBeInTheDocument();
});
});
});
});
});
});
});
});
@@ -0,0 +1,453 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { ReadYamlFile } from "../../common/fs/read-yaml-file.injectable";
import readYamlFileInjectable from "../../common/fs/read-yaml-file.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { HelmRepositoriesFromYaml } from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
import execFileInjectable from "../../common/fs/exec-file.injectable";
import helmBinaryPathInjectable from "../../main/helm/helm-binary-path.injectable";
import loggerInjectable from "../../common/logger.injectable";
import type { Logger } from "../../common/logger";
import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/adding-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
import showErrorNotificationInjectable from "../../renderer/components/notifications/show-error-notification.injectable";
describe("listing active helm repositories in preferences", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
let readYamlFileMock: AsyncFnMock<ReadYamlFile>;
let execFileMock: AsyncFnMock<ReturnType<typeof execFileInjectable["instantiate"]>>;
let loggerStub: Logger;
let showErrorNotificationMock: jest.Mock;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
readYamlFileMock = asyncFn();
execFileMock = asyncFn();
loggerStub = { error: jest.fn() } as unknown as Logger;
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
showErrorNotificationMock = jest.fn();
rendererDi.override(showErrorNotificationInjectable, () => showErrorNotificationMock);
rendererDi.override(callForPublicHelmRepositoriesInjectable, () => async () => []);
mainDi.override(readYamlFileInjectable, () => readYamlFileMock);
mainDi.override(execFileInjectable, () => execFileMock);
mainDi.override(helmBinaryPathInjectable, () => "some-helm-binary-path");
mainDi.override(loggerInjectable, () => loggerStub);
});
rendered = await applicationBuilder.render();
});
describe("when navigating to preferences containing helm repositories", () => {
beforeEach(async () => {
applicationBuilder.preferences.navigate();
applicationBuilder.preferences.navigation.click("kubernetes");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows loader for repositories", () => {
expect(
rendered.getByTestId("helm-repositories-are-loading"),
).toBeInTheDocument();
});
it("calls for helm configuration", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["env"],
);
});
it("does not call for updating of repositories yet", () => {
expect(execFileMock).not.toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "update"],
);
});
describe("when getting configuration rejects", () => {
beforeEach(async () => {
await execFileMock.reject("some-error");
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Error getting Helm configuration: some-error",
);
});
it("removes all helm controls", () => {
expect(
rendered.queryByTestId("helm-controls"),
).not.toBeInTheDocument();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when configuration resolves without path to repository config file", () => {
beforeEach(async () => {
execFileMock.mockClear();
await execFileMock.resolveSpecific(
["some-helm-binary-path", ["env"]],
"HELM_REPOSITORY_CACHE=some-helm-repository-cache-path",
);
});
it("logs error", () => {
expect(loggerStub.error).toHaveBeenCalledWith(
"Tried to get Helm repositories, but HELM_REPOSITORY_CONFIG was not present in `$ helm env`.",
);
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Error getting Helm configuration: Tried to get Helm repositories, but HELM_REPOSITORY_CONFIG was not present in `$ helm env`.",
);
});
it("removes all helm controls", () => {
expect(
rendered.queryByTestId("helm-controls"),
).not.toBeInTheDocument();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when configuration resolves without path to repository cache directory", () => {
beforeEach(async () => {
execFileMock.mockClear();
await execFileMock.resolveSpecific(
["some-helm-binary-path", ["env"]],
"HELM_REPOSITORY_CONFIG=some-helm-repository-config-file.yaml",
);
});
it("logs error", () => {
expect(loggerStub.error).toHaveBeenCalledWith(
"Tried to get Helm repositories, but HELM_REPOSITORY_CACHE was not present in `$ helm env`.",
);
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Error getting Helm configuration: Tried to get Helm repositories, but HELM_REPOSITORY_CACHE was not present in `$ helm env`.",
);
});
it("removes all helm controls", () => {
expect(
rendered.queryByTestId("helm-controls"),
).not.toBeInTheDocument();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when configuration resolves", () => {
beforeEach(async () => {
execFileMock.mockClear();
await execFileMock.resolveSpecific(
["some-helm-binary-path", ["env"]],
[
"HELM_REPOSITORY_CONFIG=some-helm-repository-config-file.yaml",
"HELM_REPOSITORY_CACHE=some-helm-repository-cache-path",
].join("\n"),
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for update of repositories", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "update"],
);
});
it("does not call for repositories yet", () => {
expect(readYamlFileMock).not.toHaveBeenCalled();
});
describe("when updating repositories reject with any other error", () => {
beforeEach(async () => {
await execFileMock.reject("Some error");
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Error updating Helm repositories: Some error",
);
});
it("removes all helm controls", () => {
expect(
rendered.queryByTestId("helm-controls"),
).not.toBeInTheDocument();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when updating repositories reject with error about no existing repositories", () => {
beforeEach(async () => {
execFileMock.mockClear();
await execFileMock.reject(
"Error: no repositories found. You must add one before updating",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("still shows the loader for repositories", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).toBeInTheDocument();
});
it('adds "bitnami" as default repository', () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "add", "bitnami", "https://charts.bitnami.com/bitnami"],
);
});
describe("when adding default repository reject", () => {
beforeEach(async () => {
await execFileMock.reject("Some error");
});
it("shows error notification", () => {
expect(showErrorNotificationMock).toHaveBeenCalledWith(
"Error when adding default Helm repository: Some error",
);
});
it("removes all helm controls", () => {
expect(
rendered.queryByTestId("helm-controls"),
).not.toBeInTheDocument();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
});
describe("when adding of default repository resolves", () => {
beforeEach(async () => {
readYamlFileMock.mockClear();
await execFileMock.resolveSpecific(
[
"some-helm-binary-path",
[
"repo",
"add",
"bitnami",
"https://charts.bitnami.com/bitnami",
],
],
"",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("still shows the loader for repositories", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).toBeInTheDocument();
});
it("calls for repositories again", () => {
expect(readYamlFileMock).toHaveBeenCalledWith(
"some-helm-repository-config-file.yaml",
);
});
describe("when another call for repositories resolve", () => {
beforeEach(async () => {
await readYamlFileMock.resolveSpecific(
["some-helm-repository-config-file.yaml"],
{
repositories: [
{
name: "bitnami",
url: "https://charts.bitnami.com/bitnami",
caFile: "irrelevant",
certFile: "irrelevant",
insecure_skip_tls_verify: false,
keyFile: "irrelevant",
pass_credentials_all: false,
password: "irrelevant",
username: "irrelevant",
},
],
},
);
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("shows the added repository", () => {
const actual = rendered.getByTestId("helm-repository-bitnami");
expect(actual).toBeInTheDocument();
});
});
});
});
describe("when updating repositories resolve", () => {
beforeEach(async () => {
execFileMock.mockClear();
await execFileMock.resolveSpecific(
["some-helm-binary-path", ["repo", "update"]],
"",
);
});
it("loads repositories from file system", () => {
expect(readYamlFileMock).toHaveBeenCalledWith(
"some-helm-repository-config-file.yaml",
);
});
describe("when repositories resolves", () => {
beforeEach(async () => {
execFileMock.mockClear();
await readYamlFileMock.resolveSpecific(
["some-helm-repository-config-file.yaml"],
repositoryConfigStub,
);
});
it("does not add default repository", () => {
expect(execFileMock).not.toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "add", "bitnami", "https://charts.bitnami.com/bitnami"],
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show loader for repositories anymore", () => {
expect(
rendered.queryByTestId("helm-repositories-are-loading"),
).not.toBeInTheDocument();
});
it("shows repositories in use", () => {
const actual = rendered.getAllByTestId(
/^helm-repository-(some-repository|some-other-repository)$/,
);
expect(actual).toHaveLength(2);
});
});
});
});
});
});
const repositoryConfigStub: HelmRepositoriesFromYaml = {
repositories: [
{
name: "some-repository",
url: "some-repository-url",
caFile: "irrelevant",
certFile: "irrelevant",
insecure_skip_tls_verify: false,
keyFile: "irrelevant",
pass_credentials_all: false,
password: "irrelevant",
username: "irrelevant",
},
{
name: "some-other-repository",
url: "some-other-repository-url",
caFile: "irrelevant",
certFile: "irrelevant",
insecure_skip_tls_verify: false,
keyFile: "irrelevant",
pass_credentials_all: false,
password: "irrelevant",
username: "irrelevant",
},
],
};
@@ -0,0 +1,121 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import execFileInjectable from "../../common/fs/exec-file.injectable";
import helmBinaryPathInjectable from "../../main/helm/helm-binary-path.injectable";
import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
import type { HelmRepo } from "../../common/helm/helm-repo";
import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/adding-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
import type { AsyncResult } from "../../common/utils/async-result";
describe("remove helm repository from list of active repositories in preferences", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
let getActiveHelmRepositoriesMock: AsyncFnMock<() => Promise<AsyncResult<HelmRepo[]>>>;
let execFileMock: AsyncFnMock<
ReturnType<typeof execFileInjectable["instantiate"]>
>;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
execFileMock = asyncFn();
getActiveHelmRepositoriesMock = asyncFn();
applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
rendererDi.override(callForPublicHelmRepositoriesInjectable, () => async () => []);
mainDi.override(
getActiveHelmRepositoriesInjectable,
() => getActiveHelmRepositoriesMock,
);
mainDi.override(execFileInjectable, () => execFileMock);
mainDi.override(helmBinaryPathInjectable, () => "some-helm-binary-path");
});
rendered = await applicationBuilder.render();
});
describe("when navigating to preferences containing helm repositories", () => {
beforeEach(async () => {
applicationBuilder.preferences.navigate();
applicationBuilder.preferences.navigation.click("kubernetes");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when active repositories resolve", () => {
beforeEach(async () => {
getActiveHelmRepositoriesMock.resolve({
callWasSuccessful: true,
response: [
{ name: "some-active-repository", url: "some-url" },
],
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when removing repository", () => {
beforeEach(() => {
execFileMock.mockClear();
getActiveHelmRepositoriesMock.mockClear();
const removeButton = rendered.getByTestId(
"remove-helm-repository-some-active-repository",
);
fireEvent.click(removeButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("removes the repository", () => {
expect(execFileMock).toHaveBeenCalledWith(
"some-helm-binary-path",
["repo", "remove", "some-active-repository"],
);
});
it("does not reload active repositories yet", () => {
expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
});
describe("when removing resolves", () => {
beforeEach(async () => {
await execFileMock.resolveSpecific(
[
"some-helm-binary-path",
["repo", "remove", "some-active-repository"],
],
"",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("reloads active repositories", () => {
expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
});
});
});
});
});
});
@@ -0,0 +1,599 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import navigateToHelmReleasesInjectable from "../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { CallForHelmReleases } from "../../renderer/components/+helm-releases/call-for-helm-releases/call-for-helm-releases.injectable";
import callForHelmReleasesInjectable from "../../renderer/components/+helm-releases/call-for-helm-releases/call-for-helm-releases.injectable";
import namespaceStoreInjectable from "../../renderer/components/+namespaces/store.injectable";
import type { NamespaceStore } from "../../renderer/components/+namespaces/store";
import type { CallForHelmReleaseConfiguration } from "../../renderer/components/+helm-releases/release-details/release-details-model/call-for-helm-release-configuration/call-for-helm-release-configuration.injectable";
import callForHelmReleaseConfigurationInjectable from "../../renderer/components/+helm-releases/release-details/release-details-model/call-for-helm-release-configuration/call-for-helm-release-configuration.injectable";
import type { CallForHelmReleaseUpdate } from "../../renderer/components/+helm-releases/update-release/call-for-helm-release-update/call-for-helm-release-update.injectable";
import callForHelmReleaseUpdateInjectable from "../../renderer/components/+helm-releases/update-release/call-for-helm-release-update/call-for-helm-release-update.injectable";
import { useFakeTime } from "../../common/test-utils/use-fake-time";
import type { CallForHelmRelease, DetailedHelmRelease } from "../../renderer/components/+helm-releases/release-details/release-details-model/call-for-helm-release/call-for-helm-release.injectable";
import callForHelmReleaseInjectable from "../../renderer/components/+helm-releases/release-details/release-details-model/call-for-helm-release/call-for-helm-release.injectable";
import showSuccessNotificationInjectable from "../../renderer/components/notifications/show-success-notification.injectable";
import showCheckedErrorInjectable from "../../renderer/components/notifications/show-checked-error.injectable";
import getRandomUpgradeChartTabIdInjectable from "../../renderer/components/dock/upgrade-chart/get-random-upgrade-chart-tab-id.injectable";
describe("showing details for helm release", () => {
let builder: ApplicationBuilder;
let callForHelmReleasesMock: AsyncFnMock<CallForHelmReleases>;
let callForHelmReleaseMock: AsyncFnMock<CallForHelmRelease>;
let callForHelmReleaseConfigurationMock: AsyncFnMock<CallForHelmReleaseConfiguration>;
let callForHelmReleaseUpdateMock: AsyncFnMock<CallForHelmReleaseUpdate>;
let showSuccessNotificationMock: jest.Mock;
let showCheckedErrorNotificationMock: jest.Mock;
beforeEach(() => {
useFakeTime("2015-10-21T07:28:00Z");
builder = getApplicationBuilder();
builder.setEnvironmentToClusterFrame();
callForHelmReleasesMock = asyncFn();
callForHelmReleaseMock = asyncFn();
callForHelmReleaseConfigurationMock = asyncFn();
callForHelmReleaseUpdateMock = asyncFn();
showSuccessNotificationMock = jest.fn();
showCheckedErrorNotificationMock = jest.fn();
builder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(
getRandomUpgradeChartTabIdInjectable,
() => () => "some-tab-id",
);
rendererDi.override(
showSuccessNotificationInjectable,
() => showSuccessNotificationMock,
);
rendererDi.override(
showCheckedErrorInjectable,
() => showCheckedErrorNotificationMock,
);
rendererDi.override(
callForHelmReleasesInjectable,
() => callForHelmReleasesMock,
);
rendererDi.override(
callForHelmReleaseInjectable,
() => callForHelmReleaseMock,
);
rendererDi.override(
callForHelmReleaseConfigurationInjectable,
() => callForHelmReleaseConfigurationMock,
);
rendererDi.override(
callForHelmReleaseUpdateInjectable,
() => callForHelmReleaseUpdateMock,
);
rendererDi.override(
namespaceStoreInjectable,
() =>
({
contextNamespaces: ["some-namespace", "some-other-namespace"],
items: [],
selectNamespaces: () => {},
} as unknown as NamespaceStore),
);
});
});
describe("given application is started", () => {
let rendered: RenderResult;
beforeEach(async () => {
rendered = await builder.render();
});
describe("when navigating to helm releases", () => {
beforeEach(() => {
const rendererDi = builder.dis.rendererDi;
const navigateToHelmReleases = rendererDi.inject(
navigateToHelmReleasesInjectable,
);
navigateToHelmReleases();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for releases for each selected namespace", () => {
expect(callForHelmReleasesMock.mock.calls).toEqual([
["some-namespace"],
["some-other-namespace"],
]);
});
it("shows spinner", () => {
expect(
rendered.getByTestId("helm-releases-spinner"),
).toBeInTheDocument();
});
it("when releases resolve but there is none, renders", async () => {
await callForHelmReleasesMock.resolve([]);
await callForHelmReleasesMock.resolve([]);
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when releases resolve", () => {
beforeEach(async () => {
await callForHelmReleasesMock.resolveSpecific(
([namespace]) => namespace === "some-namespace",
[
{
appVersion: "some-app-version",
name: "some-name",
namespace: "some-namespace",
chart: "some-chart",
status: "some-status",
updated: "some-updated",
revision: "some-revision",
},
],
);
await callForHelmReleasesMock.resolveSpecific(
([namespace]) => namespace === "some-other-namespace",
[
{
appVersion: "some-other-app-version",
name: "some-other-name",
namespace: "some-other-namespace",
chart: "some-other-chart",
status: "some-other-status",
updated: "some-other-updated",
revision: "some-other-revision",
},
],
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
expect(
rendered.queryByTestId("helm-releases-spinner"),
).not.toBeInTheDocument();
});
describe("when selecting release to see details", () => {
beforeEach(() => {
const row = rendered.getByTestId(
"helm-release-row-for-some-namespace/some-name",
);
fireEvent.click(row);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("opens the details", () => {
expect(
rendered.getByTestId("helm-release-details-for-some-namespace/some-name"),
).toBeInTheDocument();
});
it("calls for release", () => {
expect(callForHelmReleaseMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
);
});
it("shows spinner", () => {
expect(
rendered.getByTestId("helm-release-detail-content-spinner"),
).toBeInTheDocument();
});
describe("when opening details for second release", () => {
beforeEach(() => {
callForHelmReleaseMock.mockClear();
const row = rendered.getByTestId(
"helm-release-row-for-some-other-namespace/some-other-name",
);
fireEvent.click(row);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for another release", () => {
expect(callForHelmReleaseMock).toHaveBeenCalledWith(
"some-other-name",
"some-other-namespace",
);
});
it("closes details for first release", () => {
expect(
rendered.queryByTestId("helm-release-details-for-some-namespace/some-name"),
).not.toBeInTheDocument();
});
it("opens details for second release", () => {
expect(
rendered.getByTestId("helm-release-details-for-some-other-namespace/some-other-name"),
).toBeInTheDocument();
});
});
describe("when details is closed", () => {
beforeEach(() => {
const closeButton = rendered.getByTestId(
"close-helm-release-detail",
);
fireEvent.click(closeButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("closes the details", () => {
expect(
rendered.queryByTestId("helm-release-details-for-some-namespace/some-name"),
).not.toBeInTheDocument();
});
describe("when opening details for same release", () => {
beforeEach(() => {
callForHelmReleaseMock.mockClear();
const row = rendered.getByTestId(
"helm-release-row-for-some-namespace/some-name",
);
fireEvent.click(row);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not reload", () => {
expect(callForHelmReleaseMock).not.toHaveBeenCalled();
});
});
});
it("when release resolve with no data, renders", async () => {
await callForHelmReleaseMock.resolve(undefined);
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when details resolve", () => {
beforeEach(async () => {
await callForHelmReleaseMock.resolve(detailedReleaseFake);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for release configuration", () => {
expect(callForHelmReleaseConfigurationMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
true,
);
});
describe("when configuration resolves", () => {
beforeEach(async () => {
await callForHelmReleaseConfigurationMock.resolve(
"some-configuration",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not have tab for upgrading chart yet", () => {
expect(
rendered.queryByTestId("dock-tab-for-some-tab-id"),
).not.toBeInTheDocument();
});
describe("when selecting to upgrade chart", () => {
beforeEach(() => {
const upgradeButton = rendered.getByTestId(
"helm-release-upgrade-button",
);
fireEvent.click(upgradeButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("opens tab for upgrading chart", () => {
expect(
rendered.getByTestId("dock-tab-for-some-tab-id"),
).toBeInTheDocument();
});
it("closes the details", () => {
expect(
rendered.queryByTestId("helm-release-details-for-some-namespace/some-name"),
).not.toBeInTheDocument();
});
});
describe("when changing the configuration", () => {
beforeEach(() => {
const configuration = rendered.getByTestId(
"monaco-editor-for-helm-release-configuration",
);
fireEvent.change(configuration, {
target: { value: "some-new-configuration" },
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("has the configuration", () => {
const input = rendered.getByTestId(
"monaco-editor-for-helm-release-configuration",
);
expect(input).toHaveValue("some-new-configuration");
});
it("does not save changes yet", () => {
expect(callForHelmReleaseUpdateMock).not.toHaveBeenCalled();
});
describe("when toggling to see only user defined values", () => {
beforeEach(() => {
callForHelmReleaseConfigurationMock.mockClear();
const toggle = rendered.getByTestId(
"user-supplied-values-only-checkbox",
);
fireEvent.click(toggle);
});
it("calls for only user defined configuration", () => {
expect(callForHelmReleaseConfigurationMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
false,
);
});
describe("when configuration resolves", () => {
beforeEach(async () => {
await callForHelmReleaseConfigurationMock.resolve(
"some-other-configuration",
);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("overrides the user inputted configuration with new configuration", () => {
const input = rendered.getByTestId(
"monaco-editor-for-helm-release-configuration",
);
expect(input).toHaveValue("some-other-configuration");
});
it("when toggling again, calls for all configuration", () => {
callForHelmReleaseConfigurationMock.mockClear();
const toggle = rendered.getByTestId(
"user-supplied-values-only-checkbox",
);
fireEvent.click(toggle);
expect(callForHelmReleaseConfigurationMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
true,
);
});
});
});
describe("when saving", () => {
beforeEach(() => {
const saveButton = rendered.getByTestId(
"helm-release-configuration-save-button",
);
fireEvent.click(saveButton);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("calls for update", () => {
expect(callForHelmReleaseUpdateMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
{
chart: "some-chart",
repo: "",
values: "some-new-configuration",
version: "",
},
);
});
it("shows spinner", () => {
const saveButton = rendered.getByTestId(
"helm-release-configuration-save-button",
);
expect(saveButton).toHaveClass("waiting");
});
describe("when update resolves with success", () => {
beforeEach(async () => {
callForHelmReleasesMock.mockClear();
callForHelmReleaseConfigurationMock.mockClear();
await callForHelmReleaseUpdateMock.resolve({
updateWasSuccessful: true,
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
const saveButton = rendered.getByTestId(
"helm-release-configuration-save-button",
);
expect(saveButton).not.toHaveClass("waiting");
});
it("reloads the configuration", () => {
expect(callForHelmReleaseConfigurationMock).toHaveBeenCalledWith(
"some-name",
"some-namespace",
true,
);
});
it("shows success notification", () => {
expect(showSuccessNotificationMock).toHaveBeenCalled();
});
it("does not show error notification", () => {
expect(showCheckedErrorNotificationMock).not.toHaveBeenCalled();
});
});
describe("when update resolves with failure", () => {
beforeEach(async () => {
callForHelmReleasesMock.mockClear();
callForHelmReleaseConfigurationMock.mockClear();
await callForHelmReleaseUpdateMock.resolve({
updateWasSuccessful: false,
error: "some-error",
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show spinner anymore", () => {
const saveButton = rendered.getByTestId(
"helm-release-configuration-save-button",
);
expect(saveButton).not.toHaveClass("waiting");
});
it("does not reload the configuration", () => {
expect(callForHelmReleaseConfigurationMock).not.toHaveBeenCalled();
});
it("does not show success notification", () => {
expect(showSuccessNotificationMock).not.toHaveBeenCalled();
});
it("shows error notification", () => {
expect(showCheckedErrorNotificationMock).toHaveBeenCalled();
});
});
});
});
});
});
});
});
});
});
});
const detailedReleaseFake: DetailedHelmRelease = {
release: {
appVersion: "some-app-version",
chart: "some-chart",
status: "some-status",
updated: "some-updated",
revision: "some-revision",
name: "some-name",
namespace: "some-namespace",
},
details: {
name: "some-name",
namespace: "some-namespace",
version: "some-version",
config: "some-config",
manifest: "some-manifest",
info: {
deleted: "some-deleted",
description: "some-description",
first_deployed: "some-first-deployed",
last_deployed: "some-last-deployed",
notes: "some-notes",
status: "some-status",
},
resources: [
{
kind: "some-kind",
apiVersion: "some-api-version",
metadata: {
uid: "some-uid",
name: "some-resource",
namespace: "some-namespace",
creationTimestamp: "2015-10-22T07:28:00Z",
},
},
],
},
};
@@ -0,0 +1,181 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { FakeExtensionData, TestExtension } from "../renderer/components/test-utils/get-renderer-extension-fake";
import { getRendererExtensionFakeFor } from "../renderer/components/test-utils/get-renderer-extension-fake";
import React from "react";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import isEmpty from "lodash/isEmpty";
import queryParametersInjectable from "../renderer/routes/query-parameters.injectable";
import currentPathInjectable from "../renderer/routes/current-path.injectable";
import type { IComputedValue } from "mobx";
import { getApplicationBuilder } from "../renderer/components/test-utils/get-application-builder";
describe("navigate to extension page", () => {
let rendered: RenderResult;
let testExtension: TestExtension;
let queryParameters: IComputedValue<object>;
let currentPath: IComputedValue<string>;
beforeEach(async () => {
const applicationBuilder = getApplicationBuilder();
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
testExtension = getRendererExtensionFake(
extensionWithPagesHavingParameters,
);
applicationBuilder.extensions.renderer.enable(testExtension);
rendered = await applicationBuilder.render();
const rendererDi = applicationBuilder.dis.rendererDi;
queryParameters = rendererDi.inject(queryParametersInjectable);
currentPath = rendererDi.inject(currentPathInjectable);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when extension navigates to route without parameters", () => {
beforeEach(() => {
testExtension.navigate();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("URL is correct", () => {
expect(currentPath.get()).toBe("/extension/some-extension-name");
});
it("query parameters is empty", () => {
expect(queryParameters.get()).toEqual({});
});
describe("when changing page parameters", () => {
beforeEach(() => {
const button = rendered.getByTestId("button-to-change-page-parameters");
fireEvent.click(button);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("URL is correct", () => {
expect(currentPath.get()).toBe("/extension/some-extension-name");
});
it("knows query parameters", () => {
expect(queryParameters.get()).toEqual({
someStringParameter: "some-changed-string-value",
someNumberParameter: "84",
someArrayParameter:
"some-changed-array-value,some-other-changed-array-value",
});
});
});
});
describe("when extension navigates to route with parameters", () => {
beforeEach(() => {
testExtension.navigate(undefined, {
someStringParameter: "some-string-value-from-navigate",
someNumberParameter: 126,
someArrayParameter: ["some-array-value-from-navigate"],
});
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("URL is correct", () => {
expect(currentPath.get()).toBe("/extension/some-extension-name");
});
it("knows query parameters", () => {
expect(queryParameters.get()).toEqual({
someStringParameter: "some-string-value-from-navigate",
someNumberParameter: "126",
someArrayParameter: "some-array-value-from-navigate",
});
});
});
describe("when extension navigates to child route", () => {
beforeEach(() => {
testExtension.navigate("some-child-page-id");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("URL is correct", () => {
expect(currentPath.get()).toBe("/extension/some-extension-name/some-child-page-id");
});
});
});
const extensionWithPagesHavingParameters: FakeExtensionData = {
id: "some-extension-id",
name: "some-extension-name",
globalPages: [
{
components: {
Page: ({ params }) => (
<div>
<ul>
<li>{params.someStringParameter.get()}</li>
<li>{params.someNumberParameter.get()}</li>
<li>{params.someArrayParameter.get().join(",")}</li>
</ul>
<button
type="button"
data-testid="button-to-change-page-parameters"
onClick={() => {
params.someStringParameter.set("some-changed-string-value");
params.someNumberParameter.set(84);
params.someArrayParameter.set([
"some-changed-array-value",
"some-other-changed-array-value",
]);
}}
>
Some button
</button>
</div>
),
},
params: {
someStringParameter: "some-string-value",
someNumberParameter: {
defaultValue: 42,
stringify: (value) => value.toString(),
parse: (value) => (value ? Number(value) : undefined),
},
someArrayParameter: {
defaultValue: ["some-array-value", "some-other-array-value"],
stringify: (value) => value.join(","),
parse: (value: string[]) => (!isEmpty(value) ? value : undefined),
},
},
},
{
id: "some-child-page-id",
components: {
Page: () => <div>Child page</div>,
},
},
],
};
@@ -0,0 +1,243 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainer } from "@ogre-tools/injectable";
import { getInjectable } from "@ogre-tools/injectable";
import React from "react";
import { computed } from "mobx";
import type { RenderResult } from "@testing-library/react";
import { routeSpecificComponentInjectionToken } from "../renderer/routes/route-specific-component-injection-token";
import { observer } from "mobx-react";
import type { Route } from "../common/front-end-routing/front-end-route-injection-token";
import { frontEndRouteInjectionToken } from "../common/front-end-routing/front-end-route-injection-token";
import type { ApplicationBuilder } from "../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../renderer/components/test-utils/get-application-builder";
import currentRouteInjectable from "../renderer/routes/current-route.injectable";
import currentPathInjectable from "../renderer/routes/current-path.injectable";
import queryParametersInjectable from "../renderer/routes/query-parameters.injectable";
import { navigateToRouteInjectionToken } from "../common/front-end-routing/navigate-to-route-injection-token";
import routePathParametersInjectable from "../renderer/routes/route-path-parameters.injectable";
describe("navigating between routes", () => {
let rendererDi: DiContainer;
let rendered: RenderResult;
let applicationBuilder: ApplicationBuilder;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
rendererDi = applicationBuilder.dis.rendererDi;
});
describe("given route without path parameters", () => {
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(testRouteWithoutPathParametersInjectable);
rendererDi.register(testRouteWithoutPathParametersComponentInjectable);
});
rendered = await applicationBuilder.render();
});
describe("when navigating to route", () => {
let route: Route;
beforeEach(() => {
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
route = rendererDi.inject(testRouteWithoutPathParametersInjectable);
navigateToRoute(route);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("knows current route", () => {
const currentRoute = rendererDi.inject(currentRouteInjectable);
expect(currentRoute.get()).toBe(route);
});
it("knows current path", () => {
const currentPath = rendererDi.inject(currentPathInjectable);
expect(currentPath.get()).toBe("/some-path");
});
it("does not have query parameters", () => {
const queryParameters = rendererDi.inject(queryParametersInjectable);
expect(queryParameters.get()).toEqual({});
});
it("does not have path parameters", () => {
const pathParameters = rendererDi.inject(routePathParametersInjectable, route);
expect(pathParameters.get()).toEqual({});
});
});
it("when navigating to route with query parameters, knows query parameters", () => {
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
const queryParameters = rendererDi.inject(queryParametersInjectable);
const route = rendererDi.inject(testRouteWithoutPathParametersInjectable);
navigateToRoute(route, {
query: {
someParameter: "some-value",
someOtherParameter: "some-other-value",
},
});
expect(queryParameters.get()).toEqual({
someParameter: "some-value",
someOtherParameter: "some-other-value",
});
});
});
describe("given route with optional path parameters", () => {
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(routeWithOptionalPathParametersInjectable);
rendererDi.register(routeWithOptionalPathParametersComponentInjectable);
});
rendered = await applicationBuilder.render();
});
describe("when navigating to route with path parameters", () => {
let route: Route<any>;
beforeEach(() => {
route = rendererDi.inject(routeWithOptionalPathParametersInjectable);
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
navigateToRoute(route, {
parameters: {
someParameter: "some-value",
someOtherParameter: "some-other-value",
},
});
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("knows current route", () => {
const currentRoute = rendererDi.inject(currentRouteInjectable);
expect(currentRoute.get()).toBe(route);
});
it("knows current path", () => {
const currentPath = rendererDi.inject(currentPathInjectable);
expect(currentPath.get()).toBe(
"/some-path/some-value/some-other-value",
);
});
it("knows path parameters", () => {
const pathParameters = rendererDi.inject(routePathParametersInjectable, route);
expect(pathParameters.get()).toEqual({
someParameter: "some-value",
someOtherParameter: "some-other-value",
});
});
});
describe("when navigating to route without path parameters", () => {
let route: Route<any>;
beforeEach(() => {
route = rendererDi.inject(routeWithOptionalPathParametersInjectable);
const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
navigateToRoute(route);
});
it("knows current route", () => {
const currentRoute = rendererDi.inject(currentRouteInjectable);
expect(currentRoute.get()).toBe(route);
});
it("knows current path", () => {
const currentPath = rendererDi.inject(currentPathInjectable);
expect(currentPath.get()).toBe("/some-path");
});
it("knows path parameters", () => {
const pathParameters = rendererDi.inject(routePathParametersInjectable, route);
expect(pathParameters.get()).toEqual({
someParameter: undefined,
someOtherParameter: undefined,
});
});
});
});
});
const testRouteWithoutPathParametersInjectable = getInjectable({
id: "some-route",
injectionToken: frontEndRouteInjectionToken,
instantiate: () => ({
path: "/some-path",
clusterFrame: false,
isEnabled: computed(() => true),
}),
});
const testRouteWithoutPathParametersComponentInjectable = getInjectable({
id: "some-route-component",
instantiate: (di) => ({
route: di.inject(testRouteWithoutPathParametersInjectable),
Component: () => <div>Some component</div>,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const routeWithOptionalPathParametersInjectable = getInjectable({
id: "some-route",
injectionToken: frontEndRouteInjectionToken,
instantiate: (): Route<{ someParameter?: string; someOtherParameter?: string }> => ({
path: "/some-path/:someParameter?/:someOtherParameter?",
clusterFrame: false,
isEnabled: computed(() => true),
}),
});
const routeWithOptionalPathParametersComponentInjectable = getInjectable({
id: "some-route-component",
instantiate: (di) => {
const route = di.inject(routeWithOptionalPathParametersInjectable);
const pathParameters = di.inject(routePathParametersInjectable, route);
return {
route,
Component: observer(() => (
<pre>{JSON.stringify(pathParameters.get(), null, 2)}</pre>
)),
};
},
injectionToken: routeSpecificComponentInjectionToken,
});
File diff suppressed because it is too large. Load diff
@@ -0,0 +1,665 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences: extension adding preference tabs given in preferences, when extension with preference tabs is enabled renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-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-extension-some-extension-nav-item-some-other-preference-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some other title
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-some-extension-nav-item-some-preference-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some title
</div>
</div>
<div
class="Tab flex gaps align-center active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
@@ -0,0 +1,953 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="proxy-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="proxy"
>
<section>
<h2
data-testid="proxy-header"
>
Proxy
</h2>
<div
class="SubTitle"
>
HTTP Proxy
</div>
<div
class="Input theme round black"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
spellcheck="false"
value=""
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
<small
class="hint"
>
Proxy is used only for non-cluster communication.
</small>
</section>
<hr
class="small"
/>
<section
class="small"
>
<div
class="SubTitle"
>
Certificate Trust
</div>
<label
class="Switch"
data-testid="switch"
>
Allow untrusted Certificate Authorities
<input
role="switch"
type="checkbox"
/>
</label>
<small
class="hint"
>
This will make Lens to trust ANY certificate authority without any validations.
Needed with some corporate proxies that do certificate re-writing.
Does not affect cluster communications!
</small>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered when navigating to application preferences using navigation renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,953 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences - navigation to proxy preferences given in preferences, when rendered renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`preferences - navigation to proxy preferences given in preferences, when rendered when navigating to proxy preferences using navigation renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="proxy-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="proxy"
>
<section>
<h2
data-testid="proxy-header"
>
Proxy
</h2>
<div
class="SubTitle"
>
HTTP Proxy
</div>
<div
class="Input theme round black"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
spellcheck="false"
value=""
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
<small
class="hint"
>
Proxy is used only for non-cluster communication.
</small>
</section>
<hr
class="small"
/>
<section
class="small"
>
<div
class="SubTitle"
>
Certificate Trust
</div>
<label
class="Switch"
data-testid="switch"
>
Allow untrusted Certificate Authorities
<input
role="switch"
type="checkbox"
/>
</label>
<small
class="hint"
>
This will make Lens to trust ANY certificate authority without any validations.
Needed with some corporate proxies that do certificate re-writing.
Does not affect cluster communications!
</small>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,839 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences - navigation using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
exports[`preferences - navigation using application menu when navigating to preferences using application menu renders 1`] = `
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
`;
@@ -0,0 +1,843 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`show-about-using-tray renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="flex justify-center Welcome align-center"
data-testid="welcome-page"
>
<div
data-testid="welcome-banner-container"
style="width: 320px;"
>
<i
class="Icon logo svg focusable"
>
<span
class="icon"
/>
</i>
<div
class="flex justify-center"
>
<div
data-testid="welcome-text-container"
style="width: 320px;"
>
<h2>
Welcome to OpenLens!
</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our
<a
class="link"
href="https://join.slack.com/t/k8slens/shared_invite/zt-wcl8jq3k-68R5Wcmk1o95MLBE5igUDQ"
rel="noreferrer"
target="_blank"
>
Lens Community slack channel
</a>
.
</p>
<ul
class="block"
data-testid="welcome-menu-container"
style="width: 320px;"
>
<li
class="flex grid-12"
>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="view_list"
>
view_list
</span>
</i>
<a
class="box col-10"
>
Browse Clusters in Catalog
</a>
<i
class="Icon box col-1 material focusable"
>
<span
class="icon"
data-icon-name="navigate_next"
>
navigate_next
</span>
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
exports[`show-about-using-tray when navigating using tray renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-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 active"
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>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</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>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;
@@ -0,0 +1,262 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainer } from "@ogre-tools/injectable";
import { getInjectable } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import currentPathInjectable from "../../renderer/routes/current-path.injectable";
import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
import { computed } from "mobx";
import { preferenceNavigationItemInjectionToken } from "../../renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable";
import routeIsActiveInjectable from "../../renderer/routes/route-is-active.injectable";
import { Preferences } from "../../renderer/components/+preferences";
import React from "react";
import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
import observableHistoryInjectable from "../../renderer/navigation/observable-history.injectable";
import { searchParamsOptions } from "../../renderer/navigation";
import { createMemoryHistory } from "history";
import { createObservableHistory } from "mobx-observable-history";
import navigateToPreferenceTabInjectable from "../../renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab.injectable";
import navigateToFrontPageInjectable from "../../common/front-end-routing/navigate-to-front-page.injectable";
import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
describe("preferences - closing-preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.register(testPreferencesRouteInjectable);
rendererDi.register(testPreferencesRouteComponentInjectable);
rendererDi.register(testFrontPageRouteInjectable);
rendererDi.register(testFrontPageRouteComponentInjectable);
rendererDi.register(testNavigationItemInjectable);
rendererDi.override(navigateToFrontPageInjectable, (di) => {
const navigateToRoute = di.inject(navigateToRouteInjectionToken);
const testFrontPage = di.inject(testFrontPageRouteInjectable);
return () => {
navigateToRoute(testFrontPage);
};
});
});
});
describe("given already in a page and then navigated to preferences", () => {
let rendered: RenderResult;
let rendererDi: DiContainer;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(observableHistoryInjectable, () => {
const historyFake = createMemoryHistory({
initialEntries: ["/some-test-path"],
initialIndex: 0,
});
return createObservableHistory(historyFake, {
searchParams: searchParamsOptions,
});
});
});
rendered = await applicationBuilder.render();
rendererDi = applicationBuilder.dis.rendererDi;
applicationBuilder.preferences.navigate();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when preferences are closed", () => {
beforeEach(() => {
applicationBuilder.preferences.close();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("navigates back to the original page", () => {
const currentPath = rendererDi.inject(currentPathInjectable).get();
expect(currentPath).toBe("/some-test-path");
});
});
describe("when navigating to a tab in preferences", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click(
"some-test-preference-navigation-item-id",
);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when preferences are closed", () => {
beforeEach(() => {
applicationBuilder.preferences.close();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("navigates back to the original page", () => {
const currentPath = rendererDi.inject(currentPathInjectable).get();
expect(currentPath).toBe("/some-test-path");
});
});
});
});
describe("given accessing preferences directly", () => {
let rendered: RenderResult;
let rendererDi: DiContainer;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(observableHistoryInjectable, () => {
const historyFake = createMemoryHistory({
initialEntries: ["/preferences/app"],
initialIndex: 0,
});
return createObservableHistory(historyFake, {
searchParams: searchParamsOptions,
});
});
});
rendered = await applicationBuilder.render();
rendererDi = applicationBuilder.dis.rendererDi;
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when preferences are closed", () => {
beforeEach(() => {
applicationBuilder.preferences.close();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("navigates back to the front page", () => {
const currentPath = rendererDi.inject(currentPathInjectable).get();
expect(currentPath).toBe("/some-front-page");
});
});
describe("when navigating to a tab in preferences", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click(
"some-test-preference-navigation-item-id",
);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
describe("when preferences are closed", () => {
beforeEach(() => {
applicationBuilder.preferences.close();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("navigates back to the front page", () => {
const currentPath = rendererDi.inject(currentPathInjectable).get();
expect(currentPath).toBe("/some-front-page");
});
});
});
});
});
const testPreferencesRouteInjectable = getInjectable({
id: "test-preferences-route",
instantiate: () => ({
path: "/some-test-path",
clusterFrame: false,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testPreferencesRouteComponentInjectable = getInjectable({
id: "test-route-component",
instantiate: (di) => ({
route: di.inject(testPreferencesRouteInjectable),
Component: () => <Preferences>Some test page</Preferences>,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const testFrontPageRouteInjectable = getInjectable({
id: "test-front-page-route",
instantiate: () => ({
path: "/some-front-page",
clusterFrame: false,
isEnabled: computed(() => true),
}),
injectionToken: frontEndRouteInjectionToken,
});
const testFrontPageRouteComponentInjectable = getInjectable({
id: "test-front-page-route-component",
instantiate: (di) => ({
route: di.inject(testFrontPageRouteInjectable),
Component: () => <div>Some front page</div>,
}),
injectionToken: routeSpecificComponentInjectionToken,
});
const testNavigationItemInjectable = getInjectable({
id: "some-test-preference-navigation-item-id",
instantiate: (di) => {
const testRoute = di.inject(testPreferencesRouteInjectable);
const navigateToPreferenceTab = di.inject(navigateToPreferenceTabInjectable);
const routeIsActive = di.inject(routeIsActiveInjectable, testRoute);
return {
id: "some-test-preference-navigation-item-id",
label: "Some preference navigation item",
parent: "general",
isActive: routeIsActive,
isVisible: testRoute.isEnabled,
navigate: navigateToPreferenceTab(testRoute),
orderNumber: 100,
};
},
injectionToken: preferenceNavigationItemInjectionToken,
});
@@ -0,0 +1,95 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { IObservableValue } from "mobx";
import { runInAction, computed, observable } from "mobx";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
describe("preferences: extension adding preference tabs", () => {
let builder: ApplicationBuilder;
beforeEach(() => {
builder = getApplicationBuilder();
});
describe("given in preferences, when extension with preference tabs is enabled", () => {
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
rendered = await builder.render();
builder.preferences.navigate();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "some-extension-id",
name: "some-extension",
rendererOptions: {
appPreferenceTabs: [
{
title: "Some title",
id: "some-preference-tab-id",
orderNumber: 2,
},
{
title: "Some other title",
id: "some-other-preference-tab-id",
orderNumber: 1,
},
{
title: "Some title for item with controlled visibility",
id: "some-preference-tab-id-with-controlled-visibility",
orderNumber: 3,
visible: computed(() => someObservable.get()),
},
],
},
});
builder.extensions.enable(testExtension);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows tabs in order", () => {
const actual = rendered.queryAllByTestId(/tab-link-for-extension-some-extension-nav-item-(.*)/).map(x => x.dataset.testid);
expect(actual).toEqual([
"tab-link-for-extension-some-extension-nav-item-some-other-preference-tab-id",
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id",
]);
});
it("does not show hidden tab", () => {
const actual = rendered.queryByTestId(
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility",
);
expect(actual).not.toBeInTheDocument();
});
it("when item becomes visible, shows the tab", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.queryByTestId(
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility",
);
expect(actual).toBeInTheDocument();
});
});
});
@@ -0,0 +1,56 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import navigateToProxyPreferencesInjectable from "../../common/front-end-routing/routes/preferences/proxy/navigate-to-proxy-preferences.injectable";
describe("preferences - navigation to application preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in some child page of preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(({ rendererDi }) => {
const navigateToProxyPreferences = rendererDi.inject(navigateToProxyPreferencesInjectable);
navigateToProxyPreferences();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show application preferences yet", () => {
const page = rendered.queryByTestId("application-preferences-page");
expect(page).toBeNull();
});
describe("when navigating to application preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("application");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows application preferences", () => {
const page = rendered.getByTestId("application-preferences-page");
expect(page).not.toBeNull();
});
});
});
});
@@ -0,0 +1,53 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("preferences - navigation to editor preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show editor preferences yet", () => {
const page = rendered.queryByTestId("editor-preferences-page");
expect(page).toBeNull();
});
describe("when navigating to editor preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("editor");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows editor preferences", () => {
const page = rendered.getByTestId("editor-preferences-page");
expect(page).not.toBeNull();
});
});
});
});
@@ -0,0 +1,588 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import React from "react";
import "@testing-library/jest-dom/extend-expect";
import type { FakeExtensionData, TestExtension } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import { getRendererExtensionFakeFor } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import type { DiContainer } from "@ogre-tools/injectable";
import { getDiForUnitTesting } from "../../renderer/getDiForUnitTesting";
import extensionPreferencesRouteInjectable from "../../common/front-end-routing/routes/preferences/extension/extension-preferences-route.injectable";
describe("preferences - navigation to extension specific preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show extension preferences yet", () => {
const page = rendered.queryByTestId("extension-preferences-page");
expect(page).toBeNull();
});
it("does not show link for extension preferences", () => {
const actual = rendered.queryByTestId("tab-link-for-extensions");
expect(actual).toBeNull();
});
describe("given multiple extensions with specific preferences, when navigating to extension specific preferences page", () => {
beforeEach(async () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const someTestExtension = getRendererExtensionFake(extensionStubWithExtensionSpecificPreferenceItems);
const someOtherTestExtension = getRendererExtensionFake(someOtherExtensionStubWithExtensionSpecificPreferenceItems);
await applicationBuilder.extensions.renderer.enable(someTestExtension, someOtherTestExtension);
applicationBuilder.preferences.navigation.click("extension-some-test-extension-id");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("doesn't show preferences from unrelated extension", () => {
const actual = rendered.queryByTestId("extension-preference-item-for-some-other-preference-item-id");
expect(actual).toBeNull();
});
it("shows preferences from related extension", () => {
const actual = rendered.getByTestId("extension-preference-item-for-some-preference-item-id");
expect(actual).not.toBeNull();
});
});
describe("given multiple extensions with and without specific preferences", () => {
beforeEach(async () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const someTestExtension = getRendererExtensionFake(extensionStubWithExtensionSpecificPreferenceItems);
const extensionWithoutPreferences = getRendererExtensionFake(extensionStubWithoutPreferences);
const extensionWithSpecificTab = getRendererExtensionFake(extensionStubWithShowInPreferencesTab);
await applicationBuilder.extensions.renderer.enable(someTestExtension, extensionWithoutPreferences, extensionWithSpecificTab);
});
it("doesn't show link for extension without preferences", () => {
const actual = rendered.queryByTestId("tab-link-for-extension-without-preferences-id");
expect(actual).toBeNull();
});
it("doesn't show link for preferences intended for a specific tab", () => {
const actual = rendered.queryByTestId("tab-link-for-extension-specified-preferences-page-id");
expect(actual).toBeNull();
});
});
describe("when extension with specific preferences is enabled", () => {
let testExtension: TestExtension;
beforeEach(() => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
testExtension = getRendererExtensionFake(
extensionStubWithExtensionSpecificPreferenceItems,
);
applicationBuilder.extensions.renderer.enable(testExtension);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows link for extension preferences", () => {
const actual = rendered.getByTestId("tab-link-for-extension-some-test-extension-id");
expect(actual).not.toBeNull();
});
it("link should not be active", () => {
const actual = rendered.getByTestId("tab-link-for-extension-some-test-extension-id");
expect(actual).not.toHaveClass("active");
});
describe("when navigating to extension preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("extension-some-test-extension-id");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows proper page title", () => {
const title = rendered.getByText("some-test-extension-id preferences");
expect(title).toBeInTheDocument();
});
it("shows extension specific preferences", () => {
const page = rendered.getByTestId("extension-preferences-page");
expect(page).not.toBeNull();
});
it("shows extension specific preference item", () => {
const actual = rendered.getByTestId("extension-preference-item-for-some-preference-item-id");
expect(actual).not.toBeNull();
});
it("does not show unrelated preference tab items", () => {
const actual = rendered.queryByTestId("extension-preference-item-for-some-unrelated-preference-item-id");
expect(actual).toBeNull();
});
it("link is active", () => {
const actual = rendered.getByTestId("tab-link-for-extension-some-test-extension-id");
expect(actual).toHaveClass("active");
});
describe("when extension is disabled", () => {
beforeEach(() => {
applicationBuilder.extensions.renderer.disable(testExtension);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows the error message about extension not being present", () => {
expect(rendered.getByTestId("error-for-extension-not-being-present")).toBeInTheDocument();
});
it("when extension is enabled again, does not show the error message anymore", () => {
applicationBuilder.extensions.renderer.enable(testExtension);
expect(rendered.queryByTestId("error-for-extension-not-being-present")).not.toBeInTheDocument();
});
});
});
});
describe("given extension with registered tab", () => {
beforeEach(async () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab);
await applicationBuilder.extensions.renderer.enable(extension);
});
it("shows extension tab in general area", () => {
const actual = rendered.getByTestId("tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab");
expect(actual).toMatchSnapshot();
});
it("does not show custom settings block", () => {
const actual = rendered.queryByTestId("extension-settings");
expect(actual).not.toBeInTheDocument();
});
describe("when navigating to specific 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("survey-preference-item-hint");
expect(actual).not.toBeInTheDocument();
});
it("shows page title", () => {
const pageTitle = rendered.queryByTestId("extension-preferences-page-title");
expect(pageTitle).toBeInTheDocument();
});
it("shows page title same as tab title", () => {
const pageTitle = rendered.queryByTestId("extension-preferences-page-title");
const tabs = extensionStubWithWithRegisteredTab.appPreferenceTabs;
const tabTitle = tabs && tabs[0].title;
expect(pageTitle?.innerHTML).toBe(tabTitle);
});
});
});
describe("given extension with few registered tabs", () => {
const tabs = [
"tab-link-for-extension-hello-world-tab-page-id-nav-item-hello-extension-tab",
"tab-link-for-extension-hello-world-tab-page-id-nav-item-logs-extension-tab",
];
beforeEach(async () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTabs);
await applicationBuilder.extensions.renderer.enable(extension);
});
it.each(tabs)("shows '%s' tab in general area", (tab) => {
const tabElement = rendered.getByTestId(tab);
expect(tabElement).toBeInTheDocument();
});
});
describe("given extensions with tabs having same id", () => {
beforeEach(async () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab);
const otherExtension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab);
await applicationBuilder.extensions.renderer.enable(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();
});
});
});
});
describe("when navigating to extension specific tab", () => {
let rendered: RenderResult;
let di: DiContainer;
beforeEach(async () => {
di = getDiForUnitTesting({ doGeneralOverrides: true });
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const extension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab);
const otherExtension = getRendererExtensionFake(extensionUsingSomeoneElseTab);
applicationBuilder.beforeRender(() => {
const extensionRoute = di.inject(extensionPreferencesRouteInjectable);
const params = { parameters: {
extensionId: "duplicated-tab-page-id",
tabId: "metrics-extension-tab",
}};
applicationBuilder.preferences.navigateTo(extensionRoute, params);
});
await applicationBuilder.extensions.renderer.enable(extension, otherExtension);
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does render related preferences for specific tab", () => {
expect(rendered.getByTestId("another-metrics-preference-item-hint")).toBeInTheDocument();
});
it("does not render related preferences for specific tab", () => {
expect(rendered.queryByTestId("my-preferences-item-hint")).not.toBeInTheDocument();
});
});
describe("when navigating to someone else extension specific tab", () => {
let rendered: RenderResult;
let di: DiContainer;
beforeEach(async () => {
di = getDiForUnitTesting({ doGeneralOverrides: true });
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const extension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab);
const extensionUsingOtherTab = getRendererExtensionFake(extensionUsingSomeoneElseTab);
applicationBuilder.beforeRender(() => {
const extensionRoute = di.inject(extensionPreferencesRouteInjectable);
const params = { parameters: {
extensionId: "extension-using-someone-else-tab-id",
tabId: "metrics-extension-tab",
}};
applicationBuilder.preferences.navigateTo(extensionRoute, params);
});
await applicationBuilder.extensions.renderer.enable(extension, extensionUsingOtherTab);
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
});
});
const extensionStubWithExtensionSpecificPreferenceItems: FakeExtensionData = {
id: "some-test-extension-id",
name: "some-test-extension-id",
appPreferences: [
{
title: "Some preference item",
id: "some-preference-item-id",
components: {
Hint: () => <div data-testid="some-preference-item-hint" />,
Input: () => <div data-testid="some-preference-item-input" />,
},
},
{
title: "irrelevant",
id: "some-unrelated-preference-item-id",
showInPreferencesTab: "some-tab",
components: {
Hint: () => <div />,
Input: () => <div />,
},
},
],
};
const someOtherExtensionStubWithExtensionSpecificPreferenceItems: FakeExtensionData = {
id: "some-other-test-extension-id",
name: "some-other-test-extension-id",
appPreferences: [
{
title: "Test preference item",
id: "some-other-preference-item-id",
components: {
Hint: () => <div data-testid="some-other-preference-item-hint" />,
Input: () => <div data-testid="some-other-preference-item-input" />,
},
},
],
};
const extensionStubWithoutPreferences: FakeExtensionData = {
id: "without-preferences-id",
name: "without-preferences-id",
};
const extensionStubWithShowInPreferencesTab: FakeExtensionData = {
id: "specified-preferences-page-id",
name: "specified-preferences-page-name",
appPreferences: [
{
title: "Test preference item",
id: "very-other-preference-item-id",
showInPreferencesTab: "some-tab",
components: {
Hint: () => <div data-testid="very-other-preference-item-hint" />,
Input: () => <div data-testid="very-other-preference-item-input" />,
},
},
],
};
const extensionStubWithWithRegisteredTab: FakeExtensionData = {
id: "registered-tab-page-id",
name: "registered-tab-page-id",
appPreferences: [
{
title: "License item",
id: "metrics-preference-item-id",
showInPreferencesTab: "metrics-extension-tab",
components: {
Hint: () => <div data-testid="metrics-preference-item-hint" />,
Input: () => <div data-testid="metrics-preference-item-input" />,
},
},
{
title: "Menu item",
id: "menu-preference-item-id",
showInPreferencesTab: "menu-extension-tab",
components: {
Hint: () => <div data-testid="menu-preference-item-hint" />,
Input: () => <div data-testid="menu-preference-item-input" />,
},
},
{
title: "Survey item",
id: "survey-preference-item-id",
showInPreferencesTab: "survey-extension-tab",
components: {
Hint: () => <div data-testid="survey-preference-item-hint" />,
Input: () => <div data-testid="survey-preference-item-input" />,
},
},
],
appPreferenceTabs: [{
title: "Metrics tab",
id: "metrics-extension-tab",
orderNumber: 100,
}],
};
const extensionStubWithWithRegisteredTabs: FakeExtensionData = {
id: "hello-world-tab-page-id",
name: "hello-world-tab-page-id",
appPreferences: [
{
title: "Hello world",
id: "hello-preference-item-id",
showInPreferencesTab: "hello-extension-tab",
components: {
Hint: () => <div data-testid="hello-preference-item-hint" />,
Input: () => <div data-testid="hello-preference-item-input" />,
},
},
{
title: "Logs",
id: "logs-preference-item-id",
showInPreferencesTab: "logs-extension-tab",
components: {
Hint: () => <div data-testid="logs-preference-item-hint" />,
Input: () => <div data-testid="logs-preference-item-input" />,
},
},
],
appPreferenceTabs: [{
title: "Metrics tab",
id: "hello-extension-tab",
orderNumber: 100,
}, {
title: "Logs tab",
id: "logs-extension-tab",
orderNumber: 200,
}],
};
const extensionStubWithWithSameRegisteredTab: FakeExtensionData = {
id: "duplicated-tab-page-id",
name: "duplicated-tab-page-id",
appPreferences: [
{
title: "Another metrics",
id: "another-metrics-preference-item-id",
showInPreferencesTab: "metrics-extension-tab",
components: {
Hint: () => <div data-testid="another-metrics-preference-item-hint" />,
Input: () => <div data-testid="another-metrics-preference-item-input" />,
},
},
],
appPreferenceTabs: [{
title: "Metrics tab",
id: "metrics-extension-tab",
orderNumber: 100,
}],
};
const extensionUsingSomeoneElseTab: FakeExtensionData = {
id: "extension-using-someone-else-tab-id",
name: "extension-using-someone-else-tab-id",
appPreferences: [
{
title: "My preferences",
id: "my-preferences-item-id",
showInPreferencesTab: "metrics-extension-tab",
components: {
Hint: () => <div data-testid="my-preferences-item-hint" />,
Input: () => <div data-testid="my-preferences-item-input" />,
},
},
],
};
@@ -0,0 +1,64 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/adding-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
describe("preferences - navigation to kubernetes preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi, mainDi }) => {
rendererDi.override(callForPublicHelmRepositoriesInjectable, () => async () => []);
mainDi.override(
getActiveHelmRepositoriesInjectable,
() => async () => ({ callWasSuccessful: true, response: [] }),
);
});
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show kubernetes preferences yet", () => {
const page = rendered.queryByTestId("kubernetes-preferences-page");
expect(page).toBeNull();
});
describe("when navigating to kubernetes preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("kubernetes");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows kubernetes preferences", () => {
const page = rendered.getByTestId("kubernetes-preferences-page");
expect(page).not.toBeNull();
});
});
});
});
@@ -0,0 +1,53 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("preferences - navigation to proxy preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show proxy preferences yet", () => {
const page = rendered.queryByTestId("proxy-preferences-page");
expect(page).toBeNull();
});
describe("when navigating to proxy preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("proxy");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows proxy preferences", () => {
const page = rendered.getByTestId("proxy-preferences-page");
expect(page).not.toBeNull();
});
});
});
});
@@ -0,0 +1,190 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import React from "react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { FakeExtensionData } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import { getRendererExtensionFakeFor } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import navigateToTelemetryPreferencesInjectable from "../../common/front-end-routing/routes/preferences/telemetry/navigate-to-telemetry-preferences.injectable";
import sentryDnsUrlInjectable from "../../renderer/components/+preferences/sentry-dns-url.injectable";
describe("preferences - navigation to telemetry preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show telemetry preferences yet", () => {
const page = rendered.queryByTestId("telemetry-preferences-page");
expect(page).toBeNull();
});
it("does not show link for telemetry preferences", () => {
const actual = rendered.queryByTestId("tab-link-for-telemetry");
expect(actual).toBeNull();
});
describe("when extension with telemetry preference items gets enabled", () => {
beforeEach(() => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const testExtensionWithTelemetryPreferenceItems = getRendererExtensionFake(extensionStubWithTelemetryPreferenceItems);
applicationBuilder.extensions.renderer.enable(
testExtensionWithTelemetryPreferenceItems,
);
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows link for telemetry preferences", () => {
const actual = rendered.getByTestId("tab-link-for-telemetry");
expect(actual).not.toBeNull();
});
describe("when clicking link to telemetry preferences from navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("telemetry");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows telemetry preferences", () => {
const page = rendered.getByTestId("telemetry-preferences-page");
expect(page).not.toBeNull();
});
it("shows extension telemetry preference items", () => {
const actual = rendered.getByTestId(
"telemetry-preference-item-for-some-telemetry-preference-item-id",
);
expect(actual).not.toBeNull();
});
});
});
it("given extensions but no telemetry preference items, does not show link for telemetry preferences", () => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const testExtensionWithTelemetryPreferenceItems = getRendererExtensionFake({
id: "some-test-extension-id",
name: "some-test-extension-name",
appPreferences: [
{
title: "irrelevant",
id: "irrelevant",
showInPreferencesTab: "not-telemetry",
components: { Hint: () => <div />, Input: () => <div /> },
},
],
});
applicationBuilder.extensions.renderer.enable(
testExtensionWithTelemetryPreferenceItems,
);
const actual = rendered.queryByTestId("tab-link-for-telemetry");
expect(actual).toBeNull();
});
});
describe("given URL for Sentry DNS, when navigating to preferences", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(sentryDnsUrlInjectable, () => "some-sentry-dns-url");
});
rendered = await applicationBuilder.render();
applicationBuilder.preferences.navigate();
});
describe("when navigating to telemetry preferences", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("telemetry");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("allows configuration of automatic error reporting", () => {
const actual = rendered.getByTestId("telemetry-preferences-for-automatic-error-reporting");
expect(actual).not.toBeNull();
});
});
});
describe("given no URL for Sentry DNS, when navigating to telemetry preferences", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
rendererDi.override(sentryDnsUrlInjectable, () => null);
});
rendered = await applicationBuilder.render();
const navigateToTelemetryPreferences = applicationBuilder.dis.rendererDi.inject(navigateToTelemetryPreferencesInjectable);
navigateToTelemetryPreferences();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not allow configuration of automatic error reporting", () => {
const actual = rendered.queryByTestId("telemetry-preferences-for-automatic-error-reporting");
expect(actual).toBeNull();
});
});
});
const extensionStubWithTelemetryPreferenceItems: FakeExtensionData = {
id: "some-test-extension-id",
name: "some-test-extension-name",
appPreferences: [
{
title: "Some telemetry-preference item",
id: "some-telemetry-preference-item-id",
showInPreferencesTab: "telemetry",
components: {
Hint: () => <div data-testid="some-preference-item-hint" />,
Input: () => <div data-testid="some-preference-item-input" />,
},
},
],
};
@@ -0,0 +1,53 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("preferences - navigation to terminal preferences", () => {
let applicationBuilder: ApplicationBuilder;
beforeEach(() => {
applicationBuilder = getApplicationBuilder();
});
describe("given in preferences, when rendered", () => {
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder.beforeRender(() => {
applicationBuilder.preferences.navigate();
});
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show terminal preferences yet", () => {
const page = rendered.queryByTestId("terminal-preferences-page");
expect(page).toBeNull();
});
describe("when navigating to terminal preferences using navigation", () => {
beforeEach(() => {
applicationBuilder.preferences.navigation.click("terminal");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows terminal preferences", () => {
const page = rendered.getByTestId("terminal-preferences-page");
expect(page).not.toBeNull();
});
});
});
});
@@ -0,0 +1,45 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("preferences - navigation using application menu", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("does not show application preferences page yet", () => {
const actual = rendered.queryByTestId("application-preferences-page");
expect(actual).toBeNull();
});
describe("when navigating to preferences using application menu", () => {
beforeEach(() => {
applicationBuilder.applicationMenu.click("root.preferences");
});
it("renders", () => {
expect(rendered.container).toMatchSnapshot();
});
it("shows application preferences page", () => {
const actual = rendered.getByTestId("application-preferences-page");
expect(actual).not.toBeNull();
});
});
});
@@ -0,0 +1,44 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("show-about-using-tray", () => {
let applicationBuilder: ApplicationBuilder;
let rendered: RenderResult;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
rendered = await applicationBuilder.render();
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not show application preferences page yet", () => {
const actual = rendered.queryByTestId("application-preferences-page");
expect(actual).toBeNull();
});
describe("when navigating using tray", () => {
beforeEach(async () => {
await applicationBuilder.tray.click("open-preferences");
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows application preferences page", () => {
const actual = rendered.getByTestId("application-preferences-page");
expect(actual).not.toBeNull();
});
});
});
@@ -0,0 +1,250 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { lensWindowInjectionToken } from "../../main/start-main-application/lens-window/application-window/lens-window-injection-token";
import applicationWindowInjectable from "../../main/start-main-application/lens-window/application-window/application-window.injectable";
import createElectronWindowForInjectable from "../../main/start-main-application/lens-window/application-window/create-electron-window.injectable";
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { ElectronWindow, LensWindowConfiguration } from "../../main/start-main-application/lens-window/application-window/create-lens-window.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
import lensResourcesDirInjectable from "../../common/vars/lens-resources-dir.injectable";
import focusApplicationInjectable from "../../main/electron-app/features/focus-application.injectable";
describe("opening application window using tray", () => {
describe("given application has started", () => {
let applicationBuilder: ApplicationBuilder;
let createElectronWindowMock: jest.Mock;
let expectWindowsToBeOpen: (windowIds: string[]) => void;
let callForSplashWindowHtmlMock: AsyncFnMock<() => Promise<void>>;
let callForApplicationWindowHtmlMock: AsyncFnMock<() => Promise<void>>;
let focusApplicationMock: jest.Mock;
beforeEach(async () => {
callForSplashWindowHtmlMock = asyncFn();
callForApplicationWindowHtmlMock = asyncFn();
focusApplicationMock = jest.fn();
applicationBuilder = getApplicationBuilder().beforeApplicationStart(
({ mainDi }) => {
mainDi.override(focusApplicationInjectable, () => focusApplicationMock);
mainDi.override(lensResourcesDirInjectable, () => "some-lens-resources-directory");
const loadFileMock = jest
.fn(callForSplashWindowHtmlMock)
.mockImplementationOnce(() => Promise.resolve());
const loadUrlMock = jest
.fn(callForApplicationWindowHtmlMock)
.mockImplementationOnce(() => Promise.resolve());
createElectronWindowMock = jest.fn((configuration: LensWindowConfiguration) =>
({
splash: {
send: () => {},
close: () => {},
show: () => {},
loadFile: loadFileMock,
loadUrl: () => { throw new Error("Should never come here"); },
},
"only-application-window": {
send: () => {},
close: () => {},
show: () => {},
loadFile: () => { throw new Error("Should never come here"); },
loadUrl: loadUrlMock,
},
}[configuration.id] as ElectronWindow));
mainDi.override(
createElectronWindowForInjectable,
() => createElectronWindowMock,
);
expectWindowsToBeOpen = expectWindowsToBeOpenFor(mainDi);
},
);
await applicationBuilder.render();
});
it("only an application window is open", () => {
expectWindowsToBeOpen(["only-application-window"]);
});
describe("when an attempt to reopen the already started application is made using tray", () => {
beforeEach(() => {
applicationBuilder.tray.click("open-app");
});
it("still shows only the application window", () => {
expectWindowsToBeOpen(["only-application-window"]);
});
});
describe("when the application window is closed", () => {
beforeEach(() => {
const applicationWindow = applicationBuilder.dis.mainDi.inject(
applicationWindowInjectable,
);
applicationWindow.close();
});
it("no windows are open", () => {
expectWindowsToBeOpen([]);
});
describe("when an application window is reopened using tray", () => {
beforeEach(() => {
focusApplicationMock.mockClear();
callForSplashWindowHtmlMock.mockClear();
callForApplicationWindowHtmlMock.mockClear();
applicationBuilder.tray.click("open-app");
});
it("focuses the application", () => {
expect(focusApplicationMock).toHaveBeenCalled();
});
it("still no windows are open", () => {
expectWindowsToBeOpen([]);
});
it("starts loading static HTML of splash window", () => {
expect(callForSplashWindowHtmlMock).toHaveBeenCalledWith("/some-absolute-root-directory/some-lens-resources-directory/static/splash.html");
});
describe("when loading of splash window HTML resolves", () => {
beforeEach(async () => {
await callForSplashWindowHtmlMock.resolve();
});
it("shows just the splash window", () => {
expectWindowsToBeOpen(["splash"]);
});
it("starts loading of content for the application window", () => {
expect(callForApplicationWindowHtmlMock).toHaveBeenCalledWith("http://localhost:42");
});
describe("given static HTML of application window has not resolved yet, when opening from tray again", () => {
beforeEach(() => {
callForApplicationWindowHtmlMock.mockClear();
callForSplashWindowHtmlMock.mockClear();
applicationBuilder.tray.click("open-app");
});
it("does not load contents of splash window again", () => {
expect(callForSplashWindowHtmlMock).not.toHaveBeenCalled();
});
it("does not load contents of application window again", () => {
expect(callForApplicationWindowHtmlMock).not.toHaveBeenCalled();
});
it("shows just the blank application window to permit developer tool access", () => {
expectWindowsToBeOpen(["only-application-window"]);
});
});
describe("when static HTML of application window resolves", () => {
beforeEach(async () => {
await callForApplicationWindowHtmlMock.resolve();
});
it("shows just the application window", () => {
expectWindowsToBeOpen(["only-application-window"]);
});
describe("when reopening the application using tray", () => {
beforeEach(() => {
callForSplashWindowHtmlMock.mockClear();
callForApplicationWindowHtmlMock.mockClear();
applicationBuilder.tray.click("open-app");
});
it("still shows just the application window", () => {
expectWindowsToBeOpen(["only-application-window"]);
});
it("does not load HTML for splash window again", () => {
expect(callForSplashWindowHtmlMock).not.toHaveBeenCalled();
});
it("does not load HTML for application window again", () => {
expect(callForApplicationWindowHtmlMock).not.toHaveBeenCalled();
});
});
});
});
describe("given opening of splash window has not finished yet, but another attempt to open the application is made", () => {
beforeEach(() => {
createElectronWindowMock.mockClear();
applicationBuilder.tray.click("open-app");
});
it("does not open any new windows", () => {
expect(createElectronWindowMock).not.toHaveBeenCalled();
});
});
describe("when opening of splash window resolves", () => {
beforeEach(async () => {
await callForSplashWindowHtmlMock.resolve();
});
it("still only splash window is open", () => {
expectWindowsToBeOpen(["splash"]);
});
it("when opening of application window finishes, only an application window is open", async () => {
await callForApplicationWindowHtmlMock.resolve();
expectWindowsToBeOpen(["only-application-window"]);
});
describe("given opening of application window has not finished yet, but another attempt to open the application is made", () => {
beforeEach(() => {
createElectronWindowMock.mockClear();
applicationBuilder.tray.click("open-app");
});
it("does not open any new windows", () => {
expect(createElectronWindowMock).not.toHaveBeenCalled();
});
it("when opening finishes, only an application window is open", async () => {
await callForApplicationWindowHtmlMock.resolve();
expectWindowsToBeOpen(["only-application-window"]);
});
});
});
});
});
});
});
const expectWindowsToBeOpenFor = (di: DiContainer) => (windowIds: string[]) => {
const windows = di.injectMany(lensWindowInjectionToken);
expect(
windows.filter((window) => window.isVisible).map((window) => window.id),
).toEqual(windowIds);
};
@@ -0,0 +1,91 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { ClusterManager } from "../../main/cluster-manager";
import { lensWindowInjectionToken } from "../../main/start-main-application/lens-window/application-window/lens-window-injection-token";
import exitAppInjectable from "../../main/electron-app/features/exit-app.injectable";
import clusterManagerInjectable from "../../main/cluster-manager.injectable";
import stopServicesAndExitAppInjectable from "../../main/stop-services-and-exit-app.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
describe("quitting the app using application menu", () => {
describe("given application has started", () => {
let applicationBuilder: ApplicationBuilder;
let clusterManagerStub: ClusterManager;
let exitAppMock: jest.Mock;
beforeEach(async () => {
useFakeTime("2015-10-21T07:28:00Z");
applicationBuilder = getApplicationBuilder().beforeApplicationStart(
({ mainDi }) => {
mainDi.unoverride(stopServicesAndExitAppInjectable);
clusterManagerStub = { stop: jest.fn() } as unknown as ClusterManager;
mainDi.override(clusterManagerInjectable, () => clusterManagerStub);
exitAppMock = jest.fn();
mainDi.override(exitAppInjectable, () => exitAppMock);
},
);
await applicationBuilder.render();
});
it("only an application window is open", () => {
const windows = applicationBuilder.dis.mainDi.injectMany(
lensWindowInjectionToken,
);
expect(
windows.map((window) => ({ id: window.id, visible: window.isVisible })),
).toEqual([
{ id: "only-application-window", visible: true },
{ id: "splash", visible: false },
]);
});
describe("when application is quit", () => {
beforeEach(() => {
applicationBuilder.applicationMenu.click("root.quit");
});
it("closes all windows", () => {
const windows = applicationBuilder.dis.mainDi.injectMany(
lensWindowInjectionToken,
);
expect(
windows.map((window) => ({ id: window.id, visible: window.isVisible })),
).toEqual([
{ id: "only-application-window", visible: false },
{ id: "splash", visible: false },
]);
});
it("disconnects all clusters", () => {
expect(clusterManagerStub.stop).toHaveBeenCalled();
});
it("after insufficient time passes, does not terminate application yet", () => {
advanceFakeTime(999);
expect(exitAppMock).not.toHaveBeenCalled();
});
describe("after sufficient time passes", () => {
beforeEach(() => {
advanceFakeTime(1000);
});
it("terminates application", () => {
expect(exitAppMock).toHaveBeenCalled();
});
});
});
});
});
@@ -0,0 +1,85 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import type { ResolveSystemProxy } from "../../common/utils/resolve-system-proxy/resolve-system-proxy-injection-token";
import { resolveSystemProxyInjectionToken } from "../../common/utils/resolve-system-proxy/resolve-system-proxy-injection-token";
import resolveSystemProxyFromElectronInjectable from "../../main/utils/resolve-system-proxy/resolve-system-proxy-from-electron.injectable";
import { getPromiseStatus } from "../../common/test-utils/get-promise-status";
describe("resolve-system-proxy", () => {
let applicationBuilder: ApplicationBuilder;
let actualPromise: Promise<string>;
let resolveSystemProxyFromElectronMock: AsyncFnMock<ResolveSystemProxy>;
beforeEach(async () => {
applicationBuilder = getApplicationBuilder();
resolveSystemProxyFromElectronMock = asyncFn();
applicationBuilder.beforeApplicationStart(({ mainDi }) => {
mainDi.override(
resolveSystemProxyFromElectronInjectable,
() => resolveSystemProxyFromElectronMock,
);
});
await applicationBuilder.render();
});
describe("given in main, when called with URL", () => {
beforeEach(async () => {
const resolveSystemProxyInMain = applicationBuilder.dis.mainDi.inject(
resolveSystemProxyInjectionToken,
);
actualPromise = resolveSystemProxyInMain("some-url");
});
it("calls for proxy of the URL from Electron", () => {
expect(resolveSystemProxyFromElectronMock).toHaveBeenCalledWith("some-url");
});
it("does not resolve yet", async () => {
const promiseStatus = await getPromiseStatus(actualPromise);
expect(promiseStatus.fulfilled).toBe(false);
});
it("when the call for proxy resolves, resolves with the proxy", async () => {
resolveSystemProxyFromElectronMock.resolve("some-proxy");
expect(await actualPromise).toBe("some-proxy");
});
});
describe("given in renderer, when called with URL", () => {
beforeEach(async () => {
const resolveSystemProxyInRenderer = applicationBuilder.dis.rendererDi.inject(
resolveSystemProxyInjectionToken,
);
actualPromise = resolveSystemProxyInRenderer("some-url");
});
it("calls for proxy of the URL from Electron", () => {
expect(resolveSystemProxyFromElectronMock).toHaveBeenCalledWith("some-url");
});
it("does not resolve yet", async () => {
const promiseStatus = await getPromiseStatus(actualPromise);
expect(promiseStatus.fulfilled).toBe(false);
});
it("when the call for proxy resolves, resolves with the proxy", async () => {
resolveSystemProxyFromElectronMock.resolve("some-proxy");
expect(await actualPromise).toBe("some-proxy");
});
});
});
@@ -0,0 +1,68 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { IObservableValue } from "mobx";
import { observable, runInAction, computed } from "mobx";
import React from "react";
import type { TestExtensionRenderer } from "../../../renderer/components/test-utils/get-extension-fake";
import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../../renderer/components/test-utils/get-extension-fake";
describe("reactively disable global pages", () => {
let builder: ApplicationBuilder;
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
let rendererTestExtension: TestExtensionRenderer;
beforeEach(async () => {
builder = getApplicationBuilder();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "test-extension-id",
name: "test-extension",
rendererOptions: {
globalPages: [{
components: {
Page: () => <div data-testid="some-test-page">Some page</div>,
},
enabled: computed(() => someObservable.get()),
}],
},
});
rendered = await builder.render();
builder.extensions.enable(testExtension);
rendererTestExtension = testExtension.renderer;
});
it("when navigating to the page, does not show the page", () => {
rendererTestExtension.navigate();
const actual = rendered.queryByTestId("some-test-page");
expect(actual).not.toBeInTheDocument();
});
it("given page becomes enabled, when navigating to the page, shows the page", () => {
runInAction(() => {
someObservable.set(true);
});
rendererTestExtension.navigate();
const actual = rendered.queryByTestId("some-test-page");
expect(actual).toBeInTheDocument();
});
});
Loaded 100 of 107 files, more files were not shown because too many files have changed in this diff. Show more