upcoming: [DI-19062] - Added test cases

packages/api-v4/.changeset/pr-10589-upcoming-features-1718971604339.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Added types needed for DashboardSelect component ([#10589](https://github.com/linode/manager/pull/10589))

packages/api-v4/src/cloudpulse/dashboards.ts

@@ -1,16 +1,13 @@
 import { ResourcePage } from 'src/types';
-import Request, { setHeaders, setMethod, setURL } from '../request';
+import Request, { setMethod, setURL } from '../request';
 import { Dashboard } from './types';
 import { API_ROOT } from 'src/constants';
 
 //Returns the list of all the dashboards available
 export const getDashboards = () =>
-    Request<ResourcePage<Dashboard>>(
-        setURL(
-            `${API_ROOT}/monitor/services/linode/dashboards`
-        ),
-        setMethod('GET'),
-        setHeaders({
-            Authorization: '',  //Authorization will be updated once the end-point is ready, till then will use mock data
-        })
-    );
+  Request<ResourcePage<Dashboard>>(
+    setURL(
+      `${API_ROOT}/monitor/services/linode/dashboards`
+    ),
+    setMethod('GET'),
+  );

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx

@@ -1,18 +1,72 @@
 import { renderWithTheme } from "src/utilities/testHelpers";
 import { CloudPulseDashboardSelect, CloudPulseDashboardSelectProps } from "./CloudPulseDashboardSelect";
 import React from "react";
+import { fireEvent, screen } from '@testing-library/react';
 
-const props : CloudPulseDashboardSelectProps = {
-    handleDashboardChange : vi.fn(),
+const props: CloudPulseDashboardSelectProps = {
+  handleDashboardChange: vi.fn(),
 }
 
-describe("CloudPulse Dashboard select", ()=>{
-    it("Should render dashboard select component", ()=>{
-        const {getByTestId} = renderWithTheme(
-            <CloudPulseDashboardSelect {...props} />
-        );
-
-        expect(getByTestId('cloudview-dashboard-select')).toBeInTheDocument();
+const queryMocks = vi.hoisted(() => ({
+  useCloudViewDashboardsQuery: vi.fn().mockReturnValue({}),
+}));
 
+vi.mock('src/queries/cloudpulse/dashboards', async () => {
+  const actual = await vi.importActual('src/queries/cloudpulse/dashboards');
+  return {
+    ...actual,
+    useCloudViewDashboardsQuery: queryMocks.useCloudViewDashboardsQuery,
+  };
+});
+
+queryMocks.useCloudViewDashboardsQuery.mockReturnValue({
+  data:
+  {
+    data: [
+      {
+        id: 1,
+        type: "standard",
+        service_type: "linode",
+        label: "Dashboard 1",
+        created: "2024-04-29T17:09:29",
+        updated: null,
+        widgets: {}
+      }
+    ]
+  }
+  ,
+  isLoading: false,
+  error: false
+});
+
+describe("CloudPulse Dashboard select", () => {
+  it("Should render dashboard select component", () => {
+    const { getByTestId, getByPlaceholderText } = renderWithTheme(
+      <CloudPulseDashboardSelect {...props} />
+    );
+
+    expect(getByTestId('cloudview-dashboard-select')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a Dashboard')).toBeInTheDocument();
+
+  }),
+
+    it("Should render dashboard select component with data", () => {
+
+
+      renderWithTheme(<CloudPulseDashboardSelect {...props} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'Open' }));
+
+      expect(screen.getByRole('option', { name: 'Dashboard 1' })).toBeInTheDocument();
+    }),
+
+    it("Should select the option on click", () => {
+
+      renderWithTheme(<CloudPulseDashboardSelect {...props} />);
+
+      fireEvent.click(screen.getByRole("button", { name: "Open" }));
+      fireEvent.click(screen.getByRole("option", { name: "Dashboard 1" }));
+
+      expect(screen.getByRole("combobox")).toHaveAttribute("value", "Dashboard 1");
     })
-})
+})

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx

@@ -23,7 +23,7 @@ export const CloudPulseDashboardSelect = React.memo((props: CloudPulseDashboardS
 
   const errorText: string = error ? 'Error loading dashboards' : '';
 
-  const placeHolder = "Select Dashboard";
+  const placeHolder = "Select a Dashboard";
 
   // sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour
   const getSortedDashboardsList = (options: Dashboard[]) => {

packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx

@@ -7,6 +7,8 @@ import { CloudPulseRegionSelect } from './CloudPulseRegionSelect';
 
 const props: CloudPulseRegionSelectProps = {
   handleRegionChange: vi.fn(),
+  selectedDashboard: undefined,
+  selectedRegion: undefined
 };
 
 describe('CloudViewRegionSelect', () => {

packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx

@@ -25,7 +25,7 @@ export const CloudPulseRegionSelect = React.memo(
         onChange={(e, region) => props.handleRegionChange(region?.id)}
         regions={regions ? regions : []}
         disabled={!props.selectedDashboard}
-        value={props.selectedRegion ?? null}
+        value={props.selectedRegion}
       />
     );
   }