fix(analytics): port over the contextual analytics spec (#216)

cypress/e2e/fixtures/consts.ts

@@ -90,4 +90,8 @@ const defaultContext: PortalContext = {
   allowed_time_period: '2022-03-25T13:15:02.104Z'
 }
 
-export { versions, product, productVersion, productRegistration, apps, defaultContext }
+const productRegistrations: GetRegistrationResponse[] = [
+  productRegistration
+]
+
+export { versions, product, productVersion, productRegistration, productRegistrations, apps, defaultContext }

cypress/e2e/specs/contextual-analytics.spec.ts

@@ -0,0 +1,114 @@
+import { apps, productRegistration, productRegistrations, versions } from '../fixtures/consts'
+
+describe('Contextual Developer Analytics', () => {
+  beforeEach(() => {
+    cy.mockPrivatePortal()
+    cy.mockApplications(apps, 4)
+    cy.intercept('POST', '**/api/v2/stats*', {
+      statusCode: 200,
+      body: {
+        records: []
+      },
+      delay: 0
+    })
+  })
+
+  const selectors = {
+    chartsParent: '[data-testid="analytics-charts"]',
+    dashboardDropdownLink: '[data-testid="dropdown-analytics-dashboard"]',
+    dateTimePicker: '[data-testid="analytics-timepicker"]',
+    metricCardsParent: '[data-testid="analytics-metric-cards"]',
+    viewAnalyticsButton: '[data-testid="application-dashboard-button"]'
+  }
+
+  it('My Apps – displays displays metric cards if the feature flag is on', () => {
+    cy.mockLaunchDarklyFlags([{ name: 'ma-1002-dev-portal-contextual-analytics', value: true }])
+
+    cy.mockApplications(apps, 4)
+
+    cy.visit('/', { useOriginalFn: true })
+    cy.visit('/my-apps')
+
+    cy.get(selectors.metricCardsParent).should('exist')
+    cy.get(selectors.metricCardsParent).find('.metricscard').should('have.length', 3)
+
+    cy.get('[data-testid="applications-table"]').find('.actions-badge').first().click()
+    cy.get(selectors.dashboardDropdownLink).should('exist')
+  })
+
+  it('My Apps – does not display metric cards or the analytics dropdown link if the feature flag is off', () => {
+    cy.mockLaunchDarklyFlags([{ name: 'ma-1002-dev-portal-contextual-analytics', value: false }])
+
+    cy.mockApplications(apps, 5)
+    cy.visit('/my-apps')
+
+    cy.get(selectors.metricCardsParent).should('not.exist')
+    cy.get('[data-testid="applications-table"]').find('.actions-badge').first().click()
+    cy.get(selectors.dashboardDropdownLink).should('not.exist')
+  })
+
+  it('My App details page – does not display Metrics Card, View Analytics button if the feature flag is off', () => {
+    cy.mockLaunchDarklyFlags([{ name: 'ma-1002-dev-portal-contextual-analytics', value: true }])
+    cy.mockApplications(apps, 4)
+
+    cy.intercept(
+      'GET',
+      `**/api/v2/applications/${apps[0].id}`, {
+        statusCode: 200,
+        body: { ...apps[0] }
+      }
+    ).as('getSingleApplication')
+
+    cy.mockApplicationWithCredAndReg(apps[0])
+
+    cy.visit(`/application/${apps[0].id}`)
+    cy.get('[data-testid="analytics-metric-cards"]').should('not.exist')
+    cy.get('[data-testid="application-dashboard-button"]').should('not.exist')
+  })
+
+  it('App Dashboard - vitals elements load when contextual analytics feature flag is on', () => {
+    cy.mockLaunchDarklyFlags([{ name: 'ma-1002-dev-portal-contextual-analytics', value: true }])
+    cy.mockApplications(apps, 4)
+
+    cy.intercept('GET', `**/api/v2/applications/${apps[0].id}`, {
+      statusCode: 200,
+      body: apps[0],
+      delay: 0
+    }).as('getSingleApplication')
+
+    cy.intercept(
+      'GET',
+      `**/api/v2/applications/${apps[0].id}/registrations*`,
+      {
+        body: {
+          data: productRegistrations,
+          meta: {
+            page: {
+              total: 1,
+              number: 1,
+              size: 1
+            }
+          }
+        },
+        delay: 0
+      }
+    ).as('getApplicationRegistration')
+
+    cy.visit('/my-apps')
+
+    // Navigate to Application Dashboard page
+    cy.get('[data-testid="applications-table"]').find('.actions-badge').first().click()
+    cy.get(selectors.dashboardDropdownLink).first().click()
+
+    // All application dashboard elements should be present
+    cy.get('.analytics-filters').should('exist')
+    cy.get(selectors.metricCardsParent).should('exist')
+    cy.get(selectors.chartsParent).should('exist')
+
+    // Check that the Service Versions filter bar contains at least one item
+    const mockedServiceVersionName = `${productRegistrations[0].product_name} - ${productRegistrations[0].product_version_name}`
+
+    cy.get('[data-testid="k-multiselect-input"]').should('exist').click()
+    cy.get('.k-multiselect-item').first().should('contain', mockedServiceVersionName)
+  })
+})

cypress/e2e/support/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 // Import commands.js using ES2015 syntax:
-import { GetApplicationResponse, GetRegistrationResponse, PortalAppearance, PortalContext, Product, ProductCatalogIndexSource, ProductVersion, ProductVersionSpecOperationsOperationsInner } from '@kong/sdk-portal-js'
+import { GetApplicationResponse, GetRegistrationResponse, ListCredentialsResponseDataInner, PortalAppearance, PortalContext, Product, ProductCatalogIndexSource, ProductVersion, ProductVersionSpecOperationsOperationsInner } from '@kong/sdk-portal-js'
 import './mock-commands'
 import { SinonStub } from 'cypress/types/sinon'
 
@@ -25,6 +25,7 @@ declare global {
       mockProductApiDocument(productId?: string, options?: Partial<TypeOptions> & {body: any}): Chainable<JQuery<HTMLElement>>
       mockProduct(productId?: string, mockProduct?: Product, mockVersions?: ProductVersion[]): Chainable<JQuery<HTMLElement>>
       mockApplications(searchResults?: Array<GetApplicationResponse>, totalCount?: number, pageSize?: number, pageNumber?: number): Chainable<JQuery<HTMLElement>>
+      mockApplicationWithCredAndReg(data: GetApplicationResponse, credentials?: ListCredentialsResponseDataInner[], registrations?: Array<GetRegistrationResponse>): Chainable<JQuery<HTMLElement>>,
       mockContextualAnalytics(): Chainable<JQuery<HTMLElement>>
       mockRegistrations(applicationId?: string, registrations?: Array<GetRegistrationResponse>, totalCount?: number): Chainable<JQuery<HTMLElement>>
       mockProductVersionApplicationRegistration(value:any): Chainable<JQuery<HTMLElement>>

cypress/e2e/support/mock-commands.ts

@@ -7,7 +7,23 @@ import document from '../fixtures/dochub_mocks/document.json'
 import documentTreeJson from '../fixtures/dochub_mocks/documentTree.json'
 import apiDocumentationJson from '../fixtures/dochub_mocks/parentApiDocumentation.json'
 import petstoreOperationsV2 from '../fixtures/v2/petstoreOperations.json'
-import { ListApplicationsResponse, ListDocumentsTree, PortalAppearance, PortalContext, Product, ProductDocument, ProductDocumentRaw, ProductVersionListPage, ProductVersionSpec, ProductVersionSpecOperations, ProductVersionSpecOperationsOperationsInner, SearchResults } from '@kong/sdk-portal-js'
+import { 
+  GetApplicationResponse,
+  ListApplicationsResponse,
+  ListCredentialsResponse,
+  ListDocumentsTree,
+  ListRegistrationsResponse,
+  PortalAppearance,
+  PortalContext,
+  Product,
+  ProductDocument,
+  ProductDocumentRaw,
+  ProductVersionListPage,
+  ProductVersionSpecDocument,
+  ProductVersionSpecOperations,
+  ProductVersionSpecOperationsOperationsInner,
+  SearchResults 
+} from '@kong/sdk-portal-js'
 import { THEMES } from '../fixtures/theme.constant'
 
 Cypress.Commands.add('mockStylesheetCss', (theme = 'mint_rocket', fonts = {
@@ -331,6 +347,51 @@ Cypress.Commands.add('mockRegistrations', (applicationId = '*', registrations =
   }).as('getRegistrations')
 })
 
+Cypress.Commands.add('mockApplicationWithCredAndReg', (
+  data: GetApplicationResponse,
+  credentials = [],
+  registrations = []
+) => {
+  const applicationResponse: GetApplicationResponse = data
+
+  cy.intercept('GET', `**/api/v2/applications/${data.id}`, {
+    statusCode: 200,
+    body: applicationResponse
+  }).as('getApplication')
+
+  const credsResponse: ListCredentialsResponse = {
+    data: credentials,
+    meta: {
+      page: {
+        total: credentials.length,
+        size: 10,
+        number: 1
+      }
+    }
+  }
+
+  cy.intercept('GET', `**/api/v2/applications/${data.id}/credentials*`, {
+    statusCode: 200,
+    body: credsResponse
+  }).as('getApplicationCredentials')
+
+  const registrationsResponse: ListRegistrationsResponse = {
+    data: registrations,
+    meta: {
+      page: {
+        total: registrations.length,
+        size: 10,
+        number: 1
+      }
+    }
+  }
+
+  cy.intercept('GET', `**/api/v2/applications/${data.id}/registrations*`, {
+    statusCode: 200,
+    body: registrationsResponse
+  }).as('getApplicationRegistrations')
+})
+
 Cypress.Commands.add('mockContextualAnalytics', () => {
   return cy.intercept(
     'POST', '**/api/v2/stats', {
@@ -445,7 +506,7 @@ Cypress.Commands.add('mockGetProductDocumentTree', (productId) => {
 })
 
 Cypress.Commands.add('mockProductVersionSpec', (productId = '*', versionId = '*', content = JSON.stringify(petstoreJson30)) => {
-  const specResponse: ProductVersionSpec = {
+  const specResponse: ProductVersionSpecDocument = {
     api_type: 'openapi',
     content
   }