Merge 001b017 into 425e44f

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')
+  })
+})

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')
+  })
+})

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')
+  })
+})

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()
+  })
+})

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 + '/')
+})

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>
+  }
+}

cypress/support/reusableConstants.ts

@@ -0,0 +1,2 @@
+export const planWithChargesName = `a plan with charges`
+export const customerName = 'George de la jungle'

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>

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}
                 >

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(

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"

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'
             )}

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={() =>
             (

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>