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

Test for dropdown if no logs available in the tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-31 12:15:19 +03:00
parent d12b4241a0
commit 4e9f52f066
2 changed files with 902 additions and 39 deletions

View File

@ -1,6 +1,870 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`download logs options in logs dock tab opening pod logs when logs presented renders 1`] = `
exports[`download logs options in logs dock tab opening pod logs when logs available renders 1`] = `
<body>
<div>
<div
class="Notifications flex column align-flex-end"
/>
<div
class="mainLayout"
style="--sidebar-width: 200px;"
>
<div
class="sidebar"
>
<div
class="flex flex-col"
data-testid="cluster-sidebar"
>
<div
class="SidebarCluster"
>
<div
class="Avatar rounded loadingAvatar"
style="width: 40px; height: 40px;"
>
??
</div>
<div
class="loadingClusterName"
/>
</div>
<div
class="sidebarNav sidebar-active-status"
>
<div
class="SidebarItem"
data-is-active-test="true"
data-testid="sidebar-item-workloads"
>
<a
aria-current="page"
class="nav-item flex gaps align-center expandable active"
data-testid="sidebar-item-link-for-workloads"
href="/"
>
<i
class="Icon svg focusable"
>
<span
class="icon"
/>
</i>
<span
class="link-text box grow"
>
Workloads
</span>
<i
class="Icon expand-icon box right material focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-config"
>
<a
class="nav-item flex gaps align-center"
data-testid="sidebar-item-link-for-config"
href="/"
>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="list"
>
list
</span>
</i>
<span
class="link-text box grow"
>
Config
</span>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-network"
>
<a
class="nav-item flex gaps align-center expandable"
data-testid="sidebar-item-link-for-network"
href="/"
>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="device_hub"
>
device_hub
</span>
</i>
<span
class="link-text box grow"
>
Network
</span>
<i
class="Icon expand-icon box right material focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-storage"
>
<a
class="nav-item flex gaps align-center"
data-testid="sidebar-item-link-for-storage"
href="/"
>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="storage"
>
storage
</span>
</i>
<span
class="link-text box grow"
>
Storage
</span>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-helm"
>
<a
class="nav-item flex gaps align-center expandable"
data-testid="sidebar-item-link-for-helm"
href="/"
>
<i
class="Icon svg focusable"
>
<span
class="icon"
/>
</i>
<span
class="link-text box grow"
>
Helm
</span>
<i
class="Icon expand-icon box right material focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-user-management"
>
<a
class="nav-item flex gaps align-center"
data-testid="sidebar-item-link-for-user-management"
href="/"
>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="security"
>
security
</span>
</i>
<span
class="link-text box grow"
>
Access Control
</span>
</a>
</div>
<div
class="SidebarItem"
data-is-active-test="false"
data-testid="sidebar-item-custom-resources"
>
<a
class="nav-item flex gaps align-center expandable"
data-testid="sidebar-item-link-for-custom-resources"
href="/"
>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="extension"
>
extension
</span>
</i>
<span
class="link-text box grow"
>
Custom Resources
</span>
<i
class="Icon expand-icon box right material focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
</a>
</div>
</div>
</div>
<div
class="ResizingAnchor horizontal trailing"
/>
</div>
<div
class="contents"
>
<div
class="TabLayout"
data-testid="tab-layout"
>
<div
class="Tabs center scrollable"
>
<div
class="Tab flex gaps align-center active"
data-is-active-test="true"
data-testid="tab-link-for-overview"
role="tab"
tabindex="0"
>
<div
class="label"
>
Overview
</div>
</div>
</div>
<main>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
>
<div
class="header flex gaps align-center"
>
<h5
class="box grow"
>
Overview
</h5>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-overview-namespace-select-filter-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--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-overview-namespace-select-filter-input-placeholder"
>
All namespaces
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="overview-namespace-select-filter-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>
</div>
</div>
<div
class="OverviewStatuses"
>
<div
class="workloads"
/>
</div>
</div>
</main>
</div>
</div>
<div
class="footer"
>
<div
class="Dock isOpen"
tabindex="-1"
>
<div
class="ResizingAnchor vertical leading"
/>
<div
class="tabs-container flex align-center"
>
<div
class="dockTabs"
role="tablist"
>
<div
class="Tabs tabs"
>
<div
class="Tab flex gaps align-center DockTab active"
data-testid="dock-tab-for-log-tab-some-irrelevant-random-id"
id="tab-log-tab-some-irrelevant-random-id"
role="tab"
tabindex="0"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="subject"
>
subject
</span>
</i>
<div
class="label"
>
<div
class="flex align-center"
>
<span
class="title"
>
Pod dockerExporter
</span>
<div
class="close"
>
<i
class="Icon material interactive focusable small"
tabindex="0"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
<div>
Close ⌘+W
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="toolbar flex gaps align-center box grow"
>
<div
class="dock-menu box grow"
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu-actions-for-dock"
tabindex="0"
>
<span
class="icon"
data-icon-name="add"
>
add
</span>
</i>
<div>
New tab
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="fullscreen"
>
fullscreen
</span>
</i>
<div>
Fit to window
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
<div>
Minimize
</div>
</div>
</div>
<div
class="tab-content pod-logs"
data-testid="dock-tab-content-for-log-tab-some-irrelevant-random-id"
style="flex-basis: 300px;"
>
<div
class="PodLogs flex column"
>
<div
class="InfoPanel flex gaps align-center"
>
<div
class="controls"
>
<div
class="flex gaps"
>
<div
class="LogResourceSelector flex gaps align-center"
>
<span>
Namespace
</span>
<div
class="badge"
data-testid="namespace-badge"
>
default
</div>
<span>
Pod
</span>
<div
class="Select theme-dark pod-selector css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-4-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"
>
dockerExporter
</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="react-select-4-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>
<span>
Container
</span>
<div
class="Select theme-dark container-selector css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-container-selector-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"
>
docker-exporter
</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="container-selector-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>
</div>
<div
class="LogSearch flex box grow justify-flex-end gaps align-center"
>
<div
class="Input SearchInput focused"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
placeholder="Search..."
spellcheck="false"
value=""
/>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="search"
>
search
</span>
</i>
</label>
<div
class="input-info flex gaps"
/>
</div>
<i
class="Icon material interactive disabled focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_up"
>
keyboard_arrow_up
</span>
</i>
<div>
Previous
</div>
<i
class="Icon material interactive disabled focusable"
>
<span
class="icon"
data-icon-name="keyboard_arrow_down"
>
keyboard_arrow_down
</span>
</i>
<div>
Next
</div>
</div>
</div>
</div>
</div>
<div
class="LogList flex"
>
<div
class="VirtualList box grow"
>
<div>
<div
class="list"
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
>
<div
style="height: 18px; width: 100%;"
>
<div
class="LogRow"
style="position: absolute; left: 0px; top: 0px; height: 18px; width: 100%;"
>
<span>
some-logs
</span>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="controls"
data-testid="log-controls"
>
<div>
<span>
Logs from
<b>
Invalid Date
</b>
</span>
</div>
<div
class="flex gaps align-center"
>
<label
class="Checkbox flex align-center show-timestamps"
>
<input
type="checkbox"
/>
<i
class="box flex align-center"
/>
<span
class="label"
>
Show timestamps
</span>
</label>
<label
class="Checkbox flex align-center show-previous checked"
>
<input
checked=""
type="checkbox"
/>
<i
class="box flex align-center"
/>
<span
class="label"
>
Show previous terminated container
</span>
</label>
<div>
<div
id="download-logs-dropdown"
>
<button
class="dropdown"
data-testid="download-logs-dropdown"
>
Download
<i
class="Icon material focusable smallest"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`download logs options in logs dock tab opening pod logs when logs not available renders 1`] = `
<body>
<div>
<div
@ -757,46 +1621,17 @@ exports[`download logs options in logs dock tab opening pod logs when logs prese
</div>
</div>
<div
class="LogList flex"
class="LogList flex box grow align-center justify-center"
>
<div
class="VirtualList box grow"
>
<div>
<div
class="list"
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
>
<div
style="height: 18px; width: 100%;"
>
<div
class="LogRow"
style="position: absolute; left: 0px; top: 0px; height: 18px; width: 100%;"
>
<span>
some-logs
</span>
<br />
</div>
</div>
</div>
</div>
</div>
There are no logs available for container
docker-exporter
</div>
<div
class="controls"
data-testid="log-controls"
>
<div>
<span>
Logs from
<b>
Invalid Date
</b>
</span>
</div>
<div />
<div
class="flex gaps align-center"
>
@ -838,6 +1673,7 @@ exports[`download logs options in logs dock tab opening pod logs when logs prese
<button
class="dropdown"
data-testid="download-logs-dropdown"
disabled=""
>
Download
<i

View File

@ -35,6 +35,7 @@ describe("download logs options in logs dock tab", () => {
let openSaveFileDialogMock: jest.MockedFunction<() => void>;
let callForLogsMock: jest.MockedFunction<CallForLogs>;
let getLogsMock: jest.Mock;
let getSplittedLogsMock: jest.Mock;
let showErrorNotificationMock: jest.Mock;
const logs = new Map([["timestamp", "some-logs"]]);
const pod = dockerPod;;loadLogsInjectable.lifecycle;
@ -53,6 +54,7 @@ describe("download logs options in logs dock tab", () => {
callForLogsMock = jest.fn();
getLogsMock = jest.fn();
getSplittedLogsMock = jest.fn();
builder.beforeWindowStart((windowDi) => {
windowDi.override(callForLogsInjectable, () => callForLogsMock);
@ -60,7 +62,7 @@ describe("download logs options in logs dock tab", () => {
// Overriding internals of logsViewModelInjectable
windowDi.override(getLogsInjectable, () => getLogsMock);
windowDi.override(getLogsWithoutTimestampsInjectable, () => getLogsMock);
windowDi.override(getTimestampSplitLogsInjectable, () => () => [...logs]);
windowDi.override(getTimestampSplitLogsInjectable, () => getSplittedLogsMock);
windowDi.override(reloadLogsInjectable, () => jest.fn());
windowDi.override(getLogTabDataInjectable, () => () => ({
selectedPodId: selectedPod.getId(),
@ -92,7 +94,7 @@ describe("download logs options in logs dock tab", () => {
});
});
describe.only("opening pod logs", () => {
describe("opening pod logs", () => {
beforeEach(async () => {
rendered = await builder.render();
windowDi = builder.applicationWindow.only.di;
@ -102,11 +104,36 @@ describe("download logs options in logs dock tab", () => {
dockStore.closeTab("terminal");
});
describe("when logs presented", () => {
describe("when logs not available", () => {
beforeEach(async () => {
const createLogsTab = windowDi.inject(createPodLogsTabInjectable);
getLogsMock.mockReturnValue([]);
getSplittedLogsMock.mockReturnValue([]);
createLogsTab({
selectedPod: pod,
selectedContainer: container,
});
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("dropdown being disabled", () => {
const downloadButton = rendered.getByTestId("download-logs-dropdown");
expect(downloadButton).toBeDisabled();
});
});
describe("when logs available", () => {
beforeEach(async () => {
const createLogsTab = windowDi.inject(createPodLogsTabInjectable);
getLogsMock.mockReturnValue(["some-logs"]);
getSplittedLogsMock.mockReturnValue([...logs]);
createLogsTab({
selectedPod: pod,
@ -140,7 +167,7 @@ describe("download logs options in logs dock tab", () => {
button.click();
});
it.only("shows save dialog with proper attributes", () => {
it("shows save dialog with proper attributes", () => {
expect(openSaveFileDialogMock).toHaveBeenCalledWith("dockerExporter.log", "some-logs", "text/plain");
});
});