test: [M3-7395] Add new cypress tests to longview landing page

packages/manager/.changeset/pr-10321-tests-1712172117252.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add new Cypress tests for Longview landing page ([#10321](https://github.com/linode/manager/pull/10321))

packages/manager/cypress/e2e/core/longview/longview.spec.ts

@@ -1,14 +1,22 @@
 import type { Linode, LongviewClient } from '@linode/api-v4';
 import { createLongviewClient } from '@linode/api-v4';
+import { longviewResponseFactory, longviewClientFactory } from 'src/factories';
+import { LongviewResponse } from 'src/features/Longview/request.types';
 import { authenticate } from 'support/api/authentication';
 import {
   longviewInstallTimeout,
   longviewStatusTimeout,
+  longviewEmptyStateMessage,
+  longviewAddClientButtonText,
 } from 'support/constants/longview';
 import {
   interceptFetchLongviewStatus,
   interceptGetLongviewClients,
+  mockGetLongviewClients,
+  mockFetchLongviewStatus,
+  mockCreateLongviewClient,
 } from 'support/intercepts/longview';
+import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
 import { createAndBootLinode } from 'support/util/linodes';
 import { randomLabel, randomString } from 'support/util/random';
@@ -176,4 +184,44 @@ describe('longview', () => {
         });
     });
   });
+
+  /*
+   * - Confirms that the landing page empty state message is displayed when no Longview clients are present.
+   * - Confirms that UI updates to show the new client when creating one.
+   */
+  it('displays empty state message when no clients are present and shows the new client when creating one', () => {
+    const client: LongviewClient = longviewClientFactory.build();
+    const status: LongviewResponse = longviewResponseFactory.build();
+    mockGetLongviewClients([]).as('getLongviewClients');
+    mockCreateLongviewClient(client).as('createLongviewClient');
+    mockFetchLongviewStatus(status).as('fetchLongviewStatus');
+
+    cy.visitWithLogin('/longview');
+    cy.wait('@getLongviewClients');
+
+    // Confirms that a landing page empty state message is displayed
+    cy.findByText(longviewEmptyStateMessage).should('be.visible');
+    cy.findByText(longviewAddClientButtonText).should('be.visible');
+
+    ui.button
+      .findByTitle(longviewAddClientButtonText)
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+    cy.wait('@createLongviewClient');
+
+    // Confirms that UI updates to show the new client when creating one.
+    cy.findByText(`${client.label}`).should('be.visible');
+    cy.get(`[data-qa-longview-client="${client.id}"]`)
+      .should('be.visible')
+      .within(() => {
+        cy.findByText('Waiting for data...').should('not.exist');
+        cy.findByText('CPU').should('be.visible');
+        cy.findByText('RAM').should('be.visible');
+        cy.findByText('Swap').should('be.visible');
+        cy.findByText('Load').should('be.visible');
+        cy.findByText('Network').should('be.visible');
+        cy.findByText('Storage').should('be.visible');
+      });
+  });
 });

packages/manager/cypress/support/constants/longview.ts

@@ -11,3 +11,14 @@ export const longviewInstallTimeout = 255000;
  * Equates to 1 minute.
  */
 export const longviewStatusTimeout = 60000;
+
+/**
+ * Message that will be displayed when no clients are present.
+ */
+export const longviewEmptyStateMessage =
+  'You have no Longview clients configured.';
+
+/**
+ * Button text to add a new Longview client.
+ */
+export const longviewAddClientButtonText = 'Click here to add one.';

packages/manager/cypress/support/intercepts/longview.ts

@@ -1,4 +1,8 @@
 import { apiMatcher } from 'support/util/intercepts';
+import { paginateResponse } from 'support/util/paginate';
+import { makeResponse } from 'support/util/response';
+import { LongviewClient } from '@linode/api-v4';
+import { LongviewResponse } from 'src/features/Longview/request.types';
 
 /**
  * Intercepts request to retrieve Longview status for a Longview client.
@@ -9,6 +13,21 @@ export const interceptFetchLongviewStatus = (): Cypress.Chainable<null> => {
   return cy.intercept('POST', 'https://longview.linode.com/fetch');
 };
 
+/**
+ * Mocks request to retrieve Longview status for a Longview client.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockFetchLongviewStatus = (
+  status: LongviewResponse
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    'https://longview.linode.com/fetch',
+    makeResponse(status)
+  );
+};
+
 /**
  * Intercepts GET request to fetch Longview clients.
  *
@@ -17,3 +36,33 @@ export const interceptFetchLongviewStatus = (): Cypress.Chainable<null> => {
 export const interceptGetLongviewClients = (): Cypress.Chainable<null> => {
   return cy.intercept('GET', apiMatcher('longview/clients*'));
 };
+
+/**
+ * Mocks GET request to fetch Longview clients.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetLongviewClients = (
+  clients: LongviewClient[]
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'GET',
+    apiMatcher('longview/clients*'),
+    paginateResponse(clients)
+  );
+};
+
+/**
+ * Mocks request to create a Longview client.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockCreateLongviewClient = (
+  client: LongviewClient
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher('longview/clients*'),
+    makeResponse(client)
+  );
+};