From 001b017078135600408cac65fee4a6bb25033ae7 Mon Sep 17 00:00:00 2001
From: MorganeLecurieux <morgane.lecurieux.lafayette@gmail.com>
Date: Mon, 19 Sep 2022 11:52:08 -0600
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=99=88=20Test=20bm=20creation=20?=
 =?UTF-8?q?+=20plan=20creation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/t2-create-customer.cy.ts          |  18 +++
 cypress/e2e/t3-create-bm.cy.ts                | 120 ++++++++++++++++++
 cypress/e2e/t4-create-plan.cy.ts              |  62 +++++++++
 cypress/e2e/t5-edit-plan.cy.ts                |  70 ++++++++++
 cypress/support/commands.ts                   |   8 ++
 cypress/support/index.d.ts                    |  13 ++
 cypress/support/reusableConstants.ts          |   2 +
 src/components/GenericPlaceholder.tsx         |   3 +-
 .../billableMetrics/BillableMetricForm.tsx    |   1 +
 .../customers/AddCustomerDialog.tsx           |   1 +
 src/components/customers/CustomerItem.tsx     |   7 +-
 .../subscriptions/AddPlanToCustomerDialog.tsx |   6 +-
 .../CustomerSubscriptionsList.tsx             |   1 +
 src/components/designSystem/ButtonLink.tsx    |   4 +-
 src/components/designSystem/NavigationTab.tsx |   3 +-
 src/components/form/ComboBox/ComboBoxItem.tsx |   3 +-
 src/components/plans/AddChargeDialog.tsx      |   2 +
 src/components/plans/ChargeAccordion.tsx      |   2 +
 src/components/plans/PlanForm.tsx             |   2 +
 src/components/plans/PlanItem.tsx             |   8 +-
 src/pages/BillableMetricsList.tsx             |   2 +-
 src/pages/CreateBillableMetric.tsx            |   1 +
 src/pages/CreatePlan.tsx                      |   7 +-
 src/pages/CustomersList.tsx                   |   5 +-
 src/pages/PlansList.tsx                       |   3 +-
 25 files changed, 343 insertions(+), 11 deletions(-)
 create mode 100644 cypress/e2e/t2-create-customer.cy.ts
 create mode 100644 cypress/e2e/t3-create-bm.cy.ts
 create mode 100644 cypress/e2e/t4-create-plan.cy.ts
 create mode 100644 cypress/e2e/t5-edit-plan.cy.ts
 create mode 100644 cypress/support/index.d.ts
 create mode 100644 cypress/support/reusableConstants.ts

diff --git a/cypress/e2e/t2-create-customer.cy.ts b/cypress/e2e/t2-create-customer.cy.ts
new file mode 100644
index 000000000..f7c3b2a43
--- /dev/null
+++ b/cypress/e2e/t2-create-customer.cy.ts
@@ -0,0 +1,18 @@
+import { customerName } from '../support/reusableConstants'
+
+describe('Create customer', () => {
+  beforeEach(() => {
+    cy.login('usertest@lago.com', 'P@ssw0rd')
+    cy.visit('/customers')
+  })
+
+  it('should create customer', () => {
+    cy.get('[data-test="create-customer"]').click()
+    cy.get('input[name="name"]').type(customerName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="externalId"]').type('id-george-de-la-jungle')
+    cy.get('[data-test="submit"]').click()
+    cy.url().should('include', '/customer/')
+    cy.contains(customerName).should('exist')
+  })
+})
diff --git a/cypress/e2e/t3-create-bm.cy.ts b/cypress/e2e/t3-create-bm.cy.ts
new file mode 100644
index 000000000..48c69573b
--- /dev/null
+++ b/cypress/e2e/t3-create-bm.cy.ts
@@ -0,0 +1,120 @@
+describe('Create billable metrics', () => {
+  beforeEach(() => {
+    cy.login('usertest@lago.com', 'P@ssw0rd')
+    cy.visit('/billable-metrics')
+  })
+
+  it('should create count billable metric', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const bmName = `bm count ${randomId}`
+
+    cy.get('[data-test="create-bm"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/billable-metrics')
+    cy.get('input[name="name"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="aggregationType"]').click()
+    cy.get('[data-test="count_agg"]').click()
+    cy.get('input[name="fieldName"]').should('not.exist')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')
+    cy.contains(bmName).should('exist')
+  })
+
+  it('should create uniq count billable metric', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const bmName = `bm uniq count ${randomId}`
+
+    cy.get('[data-test="create-bm"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/billable-metrics')
+    cy.get('input[name="name"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="aggregationType"]').click()
+    cy.get('[data-test="unique_count_agg"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="fieldName"]').type('whatever')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')
+    cy.contains(bmName).should('exist')
+  })
+
+  it('should create max billable metric', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const bmName = `bm max ${randomId}`
+
+    cy.get('[data-test="create-bm"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/billable-metrics')
+    cy.get('input[name="name"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="aggregationType"]').click()
+    cy.get('[data-test="max_agg"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="fieldName"]').type('whatever')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')
+    cy.contains(bmName).should('exist')
+  })
+
+  it('should create sum billable metric', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const bmName = `bm sum ${randomId}`
+
+    cy.get('[data-test="create-bm"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/billable-metrics')
+    cy.get('input[name="name"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="aggregationType"]').click()
+    cy.get('[data-test="sum_agg"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="fieldName"]').type('whatever')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')
+    cy.contains(bmName).should('exist')
+  })
+
+  it('should create recurring count billable metric', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const bmName = `bm recurring count ${randomId}`
+
+    cy.get('[data-test="create-bm"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/billable-metrics')
+    cy.get('input[name="name"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(bmName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="aggregationType"]').click()
+    cy.get('[data-test="recurring_count_agg"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="fieldName"]').type('whatever')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')
+    cy.contains(bmName).should('exist')
+  })
+})
diff --git a/cypress/e2e/t4-create-plan.cy.ts b/cypress/e2e/t4-create-plan.cy.ts
new file mode 100644
index 000000000..311aae942
--- /dev/null
+++ b/cypress/e2e/t4-create-plan.cy.ts
@@ -0,0 +1,62 @@
+import { planWithChargesName } from '../support/reusableConstants'
+
+describe('Create plan', () => {
+  beforeEach(() => {
+    cy.login('usertest@lago.com', 'P@ssw0rd')
+    cy.visit('/plans')
+  })
+
+  it('should be able to access plans', () => {
+    cy.get('[data-test="create-plan"]').should('exist')
+    cy.get('[data-test="empty"]').should('exist')
+  })
+
+  it('should be able to create a simple plan', () => {
+    const randomId = Math.round(Math.random() * 1000)
+    const planName = `plan ${randomId}`
+
+    cy.get('[data-test="create-plan"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/plans')
+    cy.get('input[name="name"]').type(planName)
+    cy.get('input[name="code"]').type(planName)
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('input[name="amountCents"]').type('30000')
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/plans')
+    cy.contains(planName).should('exist')
+  })
+
+  it('should be able to create a plan with charges', () => {
+    cy.get('[data-test="create-plan"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/create/plans')
+    cy.get('input[name="name"]').type(planWithChargesName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="code"]').type(planWithChargesName)
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('textarea[name="description"]').type('I am a description')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="amountCents"]').type('30000')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('input[name="amountCurrency"]').click()
+    cy.get('[data-test="UAH"]').click()
+
+    cy.get('[data-test="add-charge"]').click()
+    cy.get('[data-test="submit-add-charge"]').should('be.disabled')
+    cy.get('input[name="billableMetricId"]').click()
+    cy.get('[data-option-index="0"]').click()
+    cy.get('[data-test="submit-add-charge"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
+    cy.get('input[name="chargeModel"]').should('have.value', 'Standard pricing')
+    cy.get('input[name="amount"]').type('5000')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(1).should('be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(1).should('have.value', 'UAH')
+
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="go-back"]').click()
+    cy.url().should('be.equal', Cypress.config().baseUrl + '/plans')
+    cy.contains(planWithChargesName).should('exist')
+  })
+})
diff --git a/cypress/e2e/t5-edit-plan.cy.ts b/cypress/e2e/t5-edit-plan.cy.ts
new file mode 100644
index 000000000..0b3ac4e11
--- /dev/null
+++ b/cypress/e2e/t5-edit-plan.cy.ts
@@ -0,0 +1,70 @@
+import { planWithChargesName, customerName } from '../support/reusableConstants'
+
+describe('Create plan', () => {
+  beforeEach(() => {
+    cy.login('usertest@lago.com', 'P@ssw0rd')
+  })
+
+  it('should be able to update all information of unused plan', () => {
+    cy.visit('/plans')
+    cy.get(`[data-test="${planWithChargesName}"]`).click()
+    cy.get('input[name="name"]').should('not.be.disabled')
+    cy.get('input[name="code"]').should('not.be.disabled')
+    cy.get('textarea[name="description"]').should('not.be.disabled')
+    cy.get('input[name="amountCents"]').should('not.be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(0).should('not.be.disabled')
+    cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
+    cy.get('[data-test="open-charge"]').click()
+    cy.get('input[name="chargeModel"]').should('not.be.disabled')
+    cy.get('input[name="amount"]').should('not.be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(1).should('be.disabled')
+    cy.get('[data-test="submit"]').should('be.disabled')
+
+    cy.get('input[name="code"]').type('new code plan with charge')
+    cy.get('[data-test="submit"]').click()
+  })
+
+  it('should add plan to customer', () => {
+    cy.visit('/customers')
+    cy.get(`[data-test="${customerName}"]`).click()
+    cy.get(`[data-test="add-subscription"]`).click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('input[name="planId"]').click()
+    cy.get('[data-option-index="0"]').click()
+    cy.get('[data-test="submit"]').click()
+    cy.get('[data-test="submit"]').should('not.exist')
+    cy.contains(customerName).should('exist')
+  })
+
+  it('should not be able to update all information of unused plan', () => {
+    cy.visit('/plans')
+    cy.get(`[data-test="${planWithChargesName}"]`).click()
+    cy.get('input[name="name"]').should('not.be.disabled')
+    cy.get('input[name="code"]').should('be.disabled')
+    cy.get('textarea[name="description"]').should('not.be.disabled')
+    cy.get('input[name="amountCents"]').should('be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(0).should('be.disabled')
+    cy.get('[data-test="remove-charge"]').should('not.exist')
+    cy.get('[data-test="open-charge"]').click()
+    cy.get('input[name="chargeModel"]').should('be.disabled')
+    cy.get('input[name="amount"]').should('be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(1).should('be.disabled')
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('[data-test="open-charge"]').click()
+
+    cy.get('[data-test="add-charge"]').click()
+    cy.get('[data-test="submit-add-charge"]').should('be.disabled')
+    cy.get('input[name="billableMetricId"]').click()
+    cy.get('[data-option-index="1"]').click()
+    cy.get('[data-test="submit-add-charge"]').click()
+    cy.get('[data-test="submit"]').should('be.disabled')
+    cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
+    cy.get('input[name="chargeModel"]').eq(1).should('have.value', 'Standard pricing')
+    cy.get('input[name="amount"]').eq(1).type('3000')
+    cy.get('[data-test="submit"]').should('not.be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(2).should('be.disabled')
+    cy.get('input[name="amountCurrency"]').eq(2).should('have.value', 'UAH')
+
+    cy.get('[data-test="submit"]').click()
+  })
+})
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 95857aea4..9a0483051 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -35,3 +35,11 @@
 //     }
 //   }
 // }
+
+Cypress.Commands.add('login', (email: string, password: string) => {
+  cy.visit('/login')
+  cy.get('input[name="email"]').type(email)
+  cy.get('input[name="password"]').type(password)
+  cy.get('[data-test="submit"]').click()
+  cy.url().should('be.equal', Cypress.config().baseUrl + '/')
+})
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
new file mode 100644
index 000000000..eecf59137
--- /dev/null
+++ b/cypress/support/index.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    /**
+     * Login user
+     * @example
+     * cy.login('usertest@lago.com', 'P@ssw0rd')
+     */
+    login(email: string, password: string): Chainable<unknown>
+  }
+}
diff --git a/cypress/support/reusableConstants.ts b/cypress/support/reusableConstants.ts
new file mode 100644
index 000000000..ee0efb7fe
--- /dev/null
+++ b/cypress/support/reusableConstants.ts
@@ -0,0 +1,2 @@
+export const planWithChargesName = `a plan with charges`
+export const customerName = 'George de la jungle'
diff --git a/src/components/GenericPlaceholder.tsx b/src/components/GenericPlaceholder.tsx
index a850b542c..8e7810ce1 100644
--- a/src/components/GenericPlaceholder.tsx
+++ b/src/components/GenericPlaceholder.tsx
@@ -31,8 +31,9 @@ export const GenericPlaceholder = ({
   noMargins = false,
   buttonVariant,
   buttonAction,
+  ...props
 }: GenericPlaceholderProps | GenericPlaceholderNoButtonProps) => (
-  <Container className={className} $noMargins={noMargins}>
+  <Container className={className} $noMargins={noMargins} {...props}>
     {image}
     <Title variant="subhead">{title}</Title>
     <Body $withButton={!!buttonTitle && !!buttonAction}>{subtitle}</Body>
diff --git a/src/components/billableMetrics/BillableMetricForm.tsx b/src/components/billableMetrics/BillableMetricForm.tsx
index a5e5957d5..4b8e468a8 100644
--- a/src/components/billableMetrics/BillableMetricForm.tsx
+++ b/src/components/billableMetrics/BillableMetricForm.tsx
@@ -240,6 +240,7 @@ export const BillableMetricForm = ({
                 <SubmitButton
                   disabled={!formikProps.isValid || (isEdition && !formikProps.dirty)}
                   fullWidth
+                  data-test="submit"
                   size="large"
                   onClick={formikProps.submitForm}
                 >
diff --git a/src/components/customers/AddCustomerDialog.tsx b/src/components/customers/AddCustomerDialog.tsx
index 1773503b1..1238f7d2c 100644
--- a/src/components/customers/AddCustomerDialog.tsx
+++ b/src/components/customers/AddCustomerDialog.tsx
@@ -173,6 +173,7 @@ export const AddCustomerDialog = forwardRef<DialogRef, AddCustomerDialogProps>(
             <Button
               disabled={!formikProps.isValid || (isEdition && !formikProps.dirty)}
               loading={formikProps.isSubmitting}
+              data-test="submit"
               onClick={formikProps.submitForm}
             >
               {translate(
diff --git a/src/components/customers/CustomerItem.tsx b/src/components/customers/CustomerItem.tsx
index 7431bf72b..00cd87aa5 100644
--- a/src/components/customers/CustomerItem.tsx
+++ b/src/components/customers/CustomerItem.tsx
@@ -49,7 +49,12 @@ export const CustomerItem = memo(({ rowId, customer }: CustomerItemProps) => {
 
   return (
     <ItemContainer>
-      <Item id={rowId} to={generatePath(CUSTOMER_DETAILS_ROUTE, { id })} tabIndex={0}>
+      <Item
+        id={rowId}
+        to={generatePath(CUSTOMER_DETAILS_ROUTE, { id })}
+        tabIndex={0}
+        data-test={name}
+      >
         <CustomerNameSection>
           <ListAvatar
             variant="user"
diff --git a/src/components/customers/subscriptions/AddPlanToCustomerDialog.tsx b/src/components/customers/subscriptions/AddPlanToCustomerDialog.tsx
index 5547c524a..60e4688a0 100644
--- a/src/components/customers/subscriptions/AddPlanToCustomerDialog.tsx
+++ b/src/components/customers/subscriptions/AddPlanToCustomerDialog.tsx
@@ -212,7 +212,11 @@ export const AddPlanToCustomerDialog = forwardRef<
           >
             {translate('text_6244277fe0975300fe3fb94a')}
           </Button>
-          <Button disabled={!formikProps.isValid} onClick={formikProps.submitForm}>
+          <Button
+            data-test="submit"
+            disabled={!formikProps.isValid}
+            onClick={formikProps.submitForm}
+          >
             {translate(
               existingInfos ? 'text_62559eef7b0ccc015127e3a1' : 'text_625434c7bb2cb40124c81a41'
             )}
diff --git a/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx b/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
index 069d26d00..c96a0a276 100644
--- a/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
+++ b/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
@@ -67,6 +67,7 @@ export const CustomerSubscriptionsList = forwardRef<
       <Header variant="subhead" $loading={loading}>
         {translate('text_6250304370f0f700a8fdc28d')}
         <Button
+          data-test="add-subscription"
           variant="quaternary"
           onClick={() =>
             (
diff --git a/src/components/designSystem/ButtonLink.tsx b/src/components/designSystem/ButtonLink.tsx
index c261db5d6..5f470d6d3 100644
--- a/src/components/designSystem/ButtonLink.tsx
+++ b/src/components/designSystem/ButtonLink.tsx
@@ -54,6 +54,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       children,
       canBeClickedOnActive,
       onClick,
+      ...props
     }: ButtonLinkProps,
     ref
   ) => {
@@ -82,6 +83,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
             ref={ref}
             rel="noopener noreferrer"
             target="_blank"
+            {...props}
           >
             {wrapperChildren}
           </ExternalButtonLink>
@@ -93,7 +95,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         )}
       >
         {/* @ts-ignore */}
-        <Button onClick={onClick} disabled={disabled} {...updatedButtonProps}>
+        <Button onClick={onClick} disabled={disabled} {...props} {...updatedButtonProps}>
           {children}
         </Button>
       </ConditionalWrapper>
diff --git a/src/components/designSystem/NavigationTab.tsx b/src/components/designSystem/NavigationTab.tsx
index 7ba8e003f..5a21b4880 100644
--- a/src/components/designSystem/NavigationTab.tsx
+++ b/src/components/designSystem/NavigationTab.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 import { useLocation, matchPath } from 'react-router-dom'
+import _omit from 'lodash/omit'
 
 import { theme, NAV_HEIGHT } from '~/styles'
 
@@ -68,7 +69,7 @@ export const NavigationTab = ({
               type="tab"
               active={link === activeTab?.link}
               onClick={!!onClick ? () => onClick(tab) : undefined}
-              {...props}
+              {..._omit(props, ['component', 'match'])}
             >
               {title}
             </ButtonLink>
diff --git a/src/components/form/ComboBox/ComboBoxItem.tsx b/src/components/form/ComboBox/ComboBoxItem.tsx
index 05ca36e47..3fb1fe2b9 100644
--- a/src/components/form/ComboBox/ComboBoxItem.tsx
+++ b/src/components/form/ComboBox/ComboBoxItem.tsx
@@ -38,12 +38,13 @@ export const ComboBoxItem = ({
         },
         className
       )}
+      data-test={value}
       key={value}
       {...allProps}
     >
       {customValue ? (
         <>
-          <AddCustomValueIcon name={'plus'} />
+          <AddCustomValueIcon name="plus" />
           <Typography variant="body" noWrap>
             {labelNode ?? label}
           </Typography>
diff --git a/src/components/plans/AddChargeDialog.tsx b/src/components/plans/AddChargeDialog.tsx
index 3dd995d39..a52773cf6 100644
--- a/src/components/plans/AddChargeDialog.tsx
+++ b/src/components/plans/AddChargeDialog.tsx
@@ -75,6 +75,7 @@ export const AddChargeDialog = forwardRef<DialogRef, AddChargeDialogProps>(
               {translate('text_6244277fe0975300fe3fb94a')}
             </Button>
             <Button
+              data-test="submit-add-charge"
               disabled={!selectedId}
               onClick={async () => {
                 const selectedItem = data?.billableMetrics?.collection.find(
@@ -95,6 +96,7 @@ export const AddChargeDialog = forwardRef<DialogRef, AddChargeDialogProps>(
           label={translate('text_624c5eadff7db800acc4c995')}
           value={selectedId}
           data={billableMetrics}
+          name="billableMetricId"
           loading={loading}
           loadingText={translate('text_6246b6bc6b25f500b779aa84')}
           placeholder={translate('text_6246b6bc6b25f500b779aa6e')}
diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
index 399305d7e..b6908ef45 100644
--- a/src/components/plans/ChargeAccordion.tsx
+++ b/src/components/plans/ChargeAccordion.tsx
@@ -53,6 +53,7 @@ export const ChargeAccordion = ({
             )}
           >
             <Button
+              data-test="open-charge"
               variant="quaternary"
               size="small"
               icon={isOpen ? 'chevron-down' : 'chevron-right'}
@@ -79,6 +80,7 @@ export const ChargeAccordion = ({
                 variant="quaternary"
                 size="small"
                 icon="trash"
+                data-test="remove-charge"
                 onClick={(e: MouseEvent<HTMLButtonElement>) => {
                   e.stopPropagation()
                   e.preventDefault()
diff --git a/src/components/plans/PlanForm.tsx b/src/components/plans/PlanForm.tsx
index e7c803ee4..e0f0c9c61 100644
--- a/src/components/plans/PlanForm.tsx
+++ b/src/components/plans/PlanForm.tsx
@@ -417,6 +417,7 @@ export const PlanForm = ({ loading, plan, children, onSave, isEdition }: PlanFor
                     <Button
                       startIcon="plus"
                       variant="quaternary"
+                      data-test="add-charge"
                       onClick={() => addChargeDialogRef.current?.openDialog()}
                     >
                       {translate('text_624453d52e945301380e49d2')}
@@ -448,6 +449,7 @@ export const PlanForm = ({ loading, plan, children, onSave, isEdition }: PlanFor
                     fullWidth
                     size="large"
                     onClick={formikProps.submitForm}
+                    data-test="submit"
                   >
                     {translate(
                       isEdition ? 'text_625fd165963a7b00c8f598aa' : 'text_62ff5d01a306e274d4ffcc75'
diff --git a/src/components/plans/PlanItem.tsx b/src/components/plans/PlanItem.tsx
index 0c16a8ebd..95499b69a 100644
--- a/src/components/plans/PlanItem.tsx
+++ b/src/components/plans/PlanItem.tsx
@@ -56,7 +56,12 @@ export const PlanItem = memo(({ plan, navigationProps }: PlanItemProps) => {
 
   return (
     <ItemContainer>
-      <ListItemLink tabIndex={0} to={generatePath(UPDATE_PLAN_ROUTE, { id })} {...navigationProps}>
+      <ListItemLink
+        tabIndex={0}
+        to={generatePath(UPDATE_PLAN_ROUTE, { id })}
+        data-test={name}
+        {...navigationProps}
+      >
         <PlanNameSection>
           <ListAvatar variant="connector">
             <Icon name="board" color="dark" />
@@ -182,6 +187,7 @@ const SmallCell = styled(Typography)`
 
 const ButtonMock = styled.div`
   width: 40px;
+  min-width: 40px;
 `
 
 PlanItem.displayName = 'PlanItem'
diff --git a/src/pages/BillableMetricsList.tsx b/src/pages/BillableMetricsList.tsx
index 20c868fb4..e501fdbee 100644
--- a/src/pages/BillableMetricsList.tsx
+++ b/src/pages/BillableMetricsList.tsx
@@ -52,7 +52,7 @@ const BillableMetricsList = () => {
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_623b497ad05b960101be3438')}
         </Typography>
-        <StyledButton type="button" to={CREATE_BILLABLE_METRIC_ROUTE}>
+        <StyledButton data-test="create-bm" type="button" to={CREATE_BILLABLE_METRIC_ROUTE}>
           {translate('text_623b497ad05b960101be343a')}
         </StyledButton>
       </Header>
diff --git a/src/pages/CreateBillableMetric.tsx b/src/pages/CreateBillableMetric.tsx
index dd9b11250..e2ef6de2c 100644
--- a/src/pages/CreateBillableMetric.tsx
+++ b/src/pages/CreateBillableMetric.tsx
@@ -46,6 +46,7 @@ const CreateBillableMetric = () => {
             <ButtonLink
               type="button"
               to={BILLABLE_METRICS_ROUTE}
+              data-test="go-back"
               buttonProps={{ variant: 'secondary' }}
             >
               {translate('text_623dfd731788a100ec660f1a')}
diff --git a/src/pages/CreatePlan.tsx b/src/pages/CreatePlan.tsx
index 9d2d6c755..fe4a55e28 100644
--- a/src/pages/CreatePlan.tsx
+++ b/src/pages/CreatePlan.tsx
@@ -43,7 +43,12 @@ const CreatePlan = () => {
             <Button variant="secondary" onClick={resetIsCreated}>
               {translate('text_624455d859b1b000a8e17bf7')}
             </Button>
-            <ButtonLink type="button" to={PLANS_ROUTE} buttonProps={{ variant: 'secondary' }}>
+            <ButtonLink
+              data-test="go-back"
+              type="button"
+              to={PLANS_ROUTE}
+              buttonProps={{ variant: 'secondary' }}
+            >
               {translate('text_624455d859b1b000a8e17bf9')}
             </ButtonLink>
           </div>
diff --git a/src/pages/CustomersList.tsx b/src/pages/CustomersList.tsx
index 77b637746..bd0aa6c91 100644
--- a/src/pages/CustomersList.tsx
+++ b/src/pages/CustomersList.tsx
@@ -48,7 +48,10 @@ const CustomersList = () => {
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_624efab67eb2570101d117a5')}
         </Typography>
-        <Button onClick={() => addCustomerDialogRef.current?.openDialog()}>
+        <Button
+          data-test="create-customer"
+          onClick={() => addCustomerDialogRef.current?.openDialog()}
+        >
           {translate('text_624efab67eb2570101d117bc')}
         </Button>
       </Header>
diff --git a/src/pages/PlansList.tsx b/src/pages/PlansList.tsx
index a1ef658e5..6bb8d23fe 100644
--- a/src/pages/PlansList.tsx
+++ b/src/pages/PlansList.tsx
@@ -49,7 +49,7 @@ const PlansList = () => {
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_62442e40cea25600b0b6d84a')}
         </Typography>
-        <ButtonLink type="button" to={CREATE_PLAN_ROUTE}>
+        <ButtonLink type="button" to={CREATE_PLAN_ROUTE} data-test="create-plan">
           {translate('text_62442e40cea25600b0b6d84c')}
         </ButtonLink>
       </Header>
@@ -65,6 +65,7 @@ const PlansList = () => {
         />
       ) : !loading && (!list || !list.length) ? (
         <GenericPlaceholder
+          data-test="empty"
           title={translate('text_624451f920b6a500aab37618')}
           subtitle={translate('text_624451f920b6a500aab3761c')}
           buttonTitle={translate('text_624451f920b6a500aab37620')}