fleet/frontend/pages/hosts/details/cards/HostHeader/HostHeader.tests.tsx at 1badbd20e4352c0236b99b5ddaa959a796fbb3f4 · fleetdm/fleet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";

import { renderWithSetup } from "test/test-utils";
import HostHeader from "./HostHeader";
import { HostMdmDeviceStatusUIState } from "../../helpers";

const renderActionDropdown = jest.fn(() => <div data-testid="dropdown" />);

const defaultSummaryData = {
  platform: "darwin",
  status: "online",
  display_name: "Test Host",
  detail_updated_at: "2024-04-27T12:00:00Z",
};

describe("HostHeader", () => {
  it("renders host display name and last fetched", () => {
    render(
      <HostHeader
        summaryData={defaultSummaryData}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
      />
    );
    expect(screen.getByText("Test Host")).toBeInTheDocument();
    expect(screen.getByText(/Last fetched/i)).toBeInTheDocument();
  });

  it("renders 'My device' when deviceUser is true and  unavailable when no last fetched date", () => {
    render(
      <HostHeader
        summaryData={{ ...defaultSummaryData, detail_updated_at: undefined }}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
        deviceUser
      />
    );
    expect(screen.getByText("My device")).toBeInTheDocument();
    expect(screen.getByText(/unavailable/i)).toBeInTheDocument();
  });
  it("renders a disabled refetch button with tooltip for Android", async () => {
    const { user } = renderWithSetup(
      <HostHeader
        summaryData={{ ...defaultSummaryData, platform: "android" }}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
      />
    );
    const refetchButton = screen.getByRole("button", { name: /refetch/i });
    expect(refetchButton).toBeDisabled();

    await user.hover(screen.getByText("Refetch"));

    expect(
      await screen.findByText(/Android devices sync automatically/i)
    ).toBeInTheDocument();
  });

  it("disables refetch button when host is offline", () => {
    render(
      <HostHeader
        summaryData={{ ...defaultSummaryData, status: "offline" }}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
      />
    );
    const refetchButton = screen.getByRole("button", { name: /refetch/i });
    expect(refetchButton).toBeDisabled();
  });

  it("shows refetch spinner text when fetching", () => {
    render(
      <HostHeader
        summaryData={defaultSummaryData}
        showRefetchSpinner
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
      />
    );
    expect(screen.getByText(/Fetching fresh vitals/i)).toBeInTheDocument();
  });

  it("calls onRefetchHost when refetch button is clicked", () => {
    const onRefetchHost = jest.fn();
    render(
      <HostHeader
        summaryData={defaultSummaryData}
        showRefetchSpinner={false}
        onRefetchHost={onRefetchHost}
        renderActionsDropdown={renderActionDropdown}
      />
    );
    fireEvent.click(screen.getByText("Refetch"));
    expect(onRefetchHost).toHaveBeenCalled();
  });

  it("shows tooltip when host is offline", async () => {
    const { user } = renderWithSetup(
      <HostHeader
        summaryData={{ ...defaultSummaryData, status: "offline" }}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
      />
    );

    await user.hover(screen.getByText("Refetch"));

    expect(await screen.findByText(/an offline host/i)).toBeInTheDocument();
  });

  it("prioritises showing host status tooltips over offline tooltips on the refetch button", async () => {
    const { user } = renderWithSetup(
      <HostHeader
        summaryData={{ ...defaultSummaryData, status: "offline" }}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
        hostMdmDeviceStatus={"locked" as HostMdmDeviceStatusUIState}
      />
    );

    await user.hover(screen.getByText("Refetch"));

    expect(await screen.findByText(/a locked host/i)).toBeInTheDocument();
  });

  it("renders device status tag and tooltip if hostMdmDeviceStatus is set", async () => {
    const { user } = renderWithSetup(
      <HostHeader
        summaryData={defaultSummaryData}
        showRefetchSpinner={false}
        onRefetchHost={jest.fn()}
        renderActionsDropdown={renderActionDropdown}
        hostMdmDeviceStatus={"locked" as HostMdmDeviceStatusUIState}
      />
    );

    await user.hover(screen.getByText("Locked"));

    expect(await screen.findByText(/Host is locked/i)).toBeInTheDocument();
  });
});