Add e2e tests for account

apps/builder/cypress/plugins/database.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '.prisma/client'
-import { Block, StartBlock, StepType } from 'bot-engine'
+import { parseNewTypebot } from 'bot-engine'
+import { Plan, PrismaClient } from 'db'
 
 const prisma = new PrismaClient()
 
@@ -16,7 +16,13 @@ const createUsers = () =>
   prisma.user.createMany({
     data: [
       { id: 'test1', email: 'test1@gmail.com', emailVerified: new Date() },
-      { id: 'test2', email: 'test2@gmail.com', emailVerified: new Date() },
+      {
+        id: 'test2',
+        email: 'test2@gmail.com',
+        emailVerified: new Date(),
+        plan: Plan.PRO,
+        stripeId: 'stripe-test2',
+      },
     ],
   })
 
@@ -26,52 +32,23 @@ const createFolders = () =>
   })
 
 const createTypebots = () => {
-  const startBlock: StartBlock = {
-    graphCoordinates: { x: 0, y: 0 },
-    id: 'start-block',
-    steps: [
-      {
-        id: 'start-step',
-        blockId: 'start-block',
-        type: StepType.START,
-        label: 'Start',
-      },
-    ],
-    title: 'Home',
-  }
-  const blocks: Block[] = [
-    {
-      id: 'block1',
-      title: 'Block1',
-      graphCoordinates: { x: 150, y: 150 },
-      steps: [
-        { id: 'step1', blockId: 'block1', type: StepType.TEXT, content: '' },
-        {
-          id: 'step2',
-          blockId: 'block1',
-          type: StepType.DATE_PICKER,
-          content: '',
-        },
-      ],
-    },
-    {
-      id: 'block2',
-      title: 'Block2',
-      graphCoordinates: { x: 300, y: 300 },
-      steps: [
-        { id: 'step1', blockId: 'block2', type: StepType.TEXT, content: '' },
-      ],
-    },
-  ]
   return prisma.typebot.createMany({
     data: [
-      { id: 'typebot1', name: 'Typebot #1', ownerId: 'test2', startBlock },
       {
+        ...parseNewTypebot({
+          name: 'Typebot #1',
+          ownerId: 'test2',
+          folderId: null,
+        }),
+        id: 'typebot1',
+      },
+      {
+        ...parseNewTypebot({
+          name: 'Typebot #2',
+          ownerId: 'test2',
+          folderId: null,
+        }),
         id: 'typebot2',
-        name: 'Typebot #2',
-        ownerId: 'test2',
-        startBlock,
-        blocks,
       },
     ],
   })

apps/builder/cypress/support/index.ts

@@ -40,6 +40,7 @@ declare global {
 
 // Import commands.js using ES2015 syntax:
 import '@testing-library/cypress/add-commands'
+import 'cypress-file-upload'
 import './commands'
 
 // Alternatively you can use CommonJS syntax:

apps/builder/cypress/tests/account.ts

@@ -0,0 +1,67 @@
+describe('Dashboard page', () => {
+  before(() => {
+    cy.intercept({
+      url: 'https://s3.eu-west-3.amazonaws.com/typebot',
+      method: 'POST',
+    }).as('postImage')
+    cy.intercept({ url: '/api/auth/session?update', method: 'GET' }).as(
+      'getUpdatedSession'
+    )
+  })
+
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  it('should edit user info properly', () => {
+    cy.signIn('test1@gmail.com')
+    cy.visit('/account')
+    cy.findByRole('button', { name: 'Save' }).should('not.exist')
+    cy.findByRole('textbox', { name: 'Email address' }).should(
+      'have.attr',
+      'disabled'
+    )
+    cy.findByRole('textbox', { name: 'Name' })
+      .should('have.value', '')
+      .type('John Doe')
+
+    cy.findByRole('img').should('not.have.attr', 'src')
+    cy.findByLabelText('Change photo').attachFile('avatar.jpg')
+    cy.wait('@postImage')
+    cy.findByRole('img')
+      .should('have.attr', 'src')
+      .should(
+        'include',
+        'https://s3.eu-west-3.amazonaws.com/typebot/test1/avatar'
+      )
+    cy.findByRole('button', { name: 'Save' }).should('exist').click()
+    cy.wait('@getUpdatedSession')
+    cy.reload()
+    cy.findByRole('textbox', { name: 'Name' }).should('have.value', 'John Doe')
+    cy.findByRole('img')
+      .should('have.attr', 'src')
+      .should(
+        'include',
+        'https://s3.eu-west-3.amazonaws.com/typebot/test1/avatar'
+      )
+    cy.findByRole('button', { name: 'Save' }).should('not.exist')
+  })
+
+  it('should display valid plans', () => {
+    cy.signIn('test1@gmail.com')
+    cy.visit('/account')
+    cy.findByText('Free plan').should('exist')
+    cy.findByRole('link', { name: 'Manage my subscription' }).should(
+      'not.exist'
+    )
+    cy.findByRole('button', { name: 'Upgrade' }).should('exist')
+    cy.signOut()
+    cy.signIn('test2@gmail.com')
+    cy.visit('/account')
+    cy.findByText('Pro plan').should('exist')
+    cy.findByRole('link', { name: 'Manage my subscription' })
+      .should('have.attr', 'href')
+      .should('include', 'customer-portal')
+  })
+})

apps/builder/cypress/tests/board.ts

@@ -6,7 +6,7 @@ describe('BoardPage', () => {
 
   it('steps should be droppable', () => {
     cy.signIn('test2@gmail.com')
-    cy.visit('/typebots/typebot1')
+    cy.visit('/typebots/typebot1/edit')
     // Can't find an easy way to implement this
   })
 })

apps/builder/cypress/tsconfig.json

@@ -3,7 +3,7 @@
   "include": ["**/*.ts"],
   "exclude": [],
   "compilerOptions": {
-    "types": ["cypress", "@testing-library/cypress"],
+    "types": ["cypress", "@testing-library/cypress", "cypress-file-upload"],
     "lib": ["es2015", "dom"],
     "target": "es5",
     "isolatedModules": false,