From 6baf6c4e31d401217d47ccfb4575d8c5c28effa2 Mon Sep 17 00:00:00 2001
From: Fynn Heintz <fynn.heintz@gmail.com>
Date: Sat, 27 Jan 2024 13:20:22 +0100
Subject: [PATCH] fix: adjust specs for the new layout

---
 cypress/e2e/accounts.cy.ts             |  6 +--
 cypress/e2e/budgets.cy.ts              |  8 ++-
 cypress/e2e/categories-envelopes.cy.ts | 12 ++---
 cypress/e2e/dashboard.cy.ts            |  2 +-
 cypress/e2e/transaction-import.cy.ts   | 33 ++++++------
 cypress/e2e/transactions.cy.ts         | 71 +++++++++++++-------------
 cypress/support/commands.ts            | 11 +++-
 cypress/support/e2e.ts                 | 11 ++++
 cypress/support/index.d.ts             |  1 +
 cypress/tsconfig.json                  |  3 +-
 src/components/AccountForm.tsx         |  2 +-
 11 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/cypress/e2e/accounts.cy.ts b/cypress/e2e/accounts.cy.ts
index e5f9d12e..1a906991 100644
--- a/cypress/e2e/accounts.cy.ts
+++ b/cypress/e2e/accounts.cy.ts
@@ -5,7 +5,7 @@ describe('Account: Creation', () => {
     // prepare & select a budget
     cy.wrap(createBudget({ name: 'Account Test' })).then(budget => {
       cy.wrap(budget).as('budget')
-      cy.visit('/').get('h3').contains('Account Test').click()
+      cy.visit('/').get('li').contains('Open').click()
     })
   })
 
@@ -29,7 +29,7 @@ describe('Account: Creation', () => {
   it('can create an external account for a budget', () => {
     cy.contains('Accounts').click()
     cy.contains('External Accounts').click()
-    cy.getByTitle('Create Account').click()
+    cy.getByTitle('Create Account').first().click()
 
     cy.getInputFor('Name').type('Cash Test Account')
     cy.contains('On Budget').should('not.exist')
@@ -52,7 +52,7 @@ describe('Account: Creation', () => {
 
     cy.contains('Accounts').click()
     cy.awaitLoading()
-    cy.contains('Old account').click()
+    cy.contains('Old account').closest('li').contains('Edit Account').click()
     cy.awaitLoading()
     cy.contains('Archive Account').click()
     cy.contains('This Account is archived')
diff --git a/cypress/e2e/budgets.cy.ts b/cypress/e2e/budgets.cy.ts
index b8c419ac..059575e7 100644
--- a/cypress/e2e/budgets.cy.ts
+++ b/cypress/e2e/budgets.cy.ts
@@ -42,11 +42,15 @@ describe('Budget: Switch', () => {
     cy.awaitLoading()
 
     cy.contains('Switch Budget').click()
-    cy.get('h3').contains('First Budget').click()
+    cy.get('h3').contains('First Budget').closest('li').contains('Open').click()
     cy.get('h1').contains('First Budget')
 
     cy.contains('Switch Budget').click()
-    cy.get('h3').contains('Second Budget').click()
+    cy.get('h3')
+      .contains('Second Budget')
+      .closest('li')
+      .contains('Open')
+      .click()
     cy.get('h1').contains('Second Budget')
   })
 
diff --git a/cypress/e2e/categories-envelopes.cy.ts b/cypress/e2e/categories-envelopes.cy.ts
index ac4568a5..8d6ad8c1 100644
--- a/cypress/e2e/categories-envelopes.cy.ts
+++ b/cypress/e2e/categories-envelopes.cy.ts
@@ -4,7 +4,7 @@ describe('Envelope: Creation', () => {
   beforeEach(() => {
     // prepare & select a budget
     cy.wrap(createBudget({ name: 'Category Test' })).then(() => {
-      cy.visit('/').get('h3').contains('Category Test').click()
+      cy.visit('/').get('li').contains('Open').click()
     })
   })
 
@@ -14,7 +14,7 @@ describe('Envelope: Creation', () => {
     // Grocery Envelope (category Daily Spending)
     cy.getByTitle('Create Envelope').first().click()
     cy.getInputFor('Name').type('Grocery Envelope')
-    cy.getInputFor('Category').type('Daily Spending')
+    cy.getAutocompleteFor('Category').type('Daily Spending')
     cy.contains('Create "Daily Spending"').click()
     cy.getInputFor('Note').type(
       'Groceries.{enter}{enter}Usually bought at a supermarket.'
@@ -24,14 +24,14 @@ describe('Envelope: Creation', () => {
     // Restaurant Envelope (category Daily Spending)
     cy.getByTitle('Create Envelope').first().click()
     cy.getInputFor('Name').type('Restaurants')
-    cy.getInputFor('Category').type('Dail')
+    cy.getAutocompleteFor('Category').type('Dail')
     cy.contains('Daily Spending').click()
     cy.clickAndWait('Save')
 
     // Rent Envelope (category Running Costs)
     cy.getByTitle('Create Envelope').first().click()
     cy.getInputFor('Name').type('Rent')
-    cy.getInputFor('Category').type('Running Costs')
+    cy.getAutocompleteFor('Category').type('Running Costs')
     cy.contains('Create "Running Costs"').click()
     cy.clickAndWait('Save')
 
@@ -50,7 +50,7 @@ describe('Envelope: Creation', () => {
     // envelopes from other categories are still visible
     cy.contains('Rent')
 
-    cy.getByTitle('Edit category').first().click()
+    cy.getByTitle('Edit Category').first().click()
     cy.contains('Grocery Envelope')
     cy.contains('Restaurants')
     cy.contains('Rent').should('not.exist')
@@ -58,7 +58,7 @@ describe('Envelope: Creation', () => {
     // edit the envelope again to create a new category
     cy.clickAndWait('Cancel')
     cy.contains('Restaurants').click()
-    cy.getInputFor('Category').clear().type('New Category')
+    cy.getAutocompleteFor('Category').clear().type('New Category')
     cy.contains('Create "New Category"').click()
     cy.clickAndWait('Save')
     cy.contains('New Category')
diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts
index 241e181c..52ec288a 100644
--- a/cypress/e2e/dashboard.cy.ts
+++ b/cypress/e2e/dashboard.cy.ts
@@ -43,7 +43,7 @@ describe('Dashboard', () => {
       ).then(([firstEnvelope, secondEnvelope]: Envelope[]) => {
         cy.wrap(firstEnvelope).as('firstEnvelope')
         cy.wrap(secondEnvelope).as('secondEnvelope')
-        cy.visit('/').get('h3').contains('Dashboard Test').click()
+        cy.visit('/').get('li').contains('Open').click()
         cy.awaitLoading()
         cy.getCookie('budgetId').should('exist')
       })
diff --git a/cypress/e2e/transaction-import.cy.ts b/cypress/e2e/transaction-import.cy.ts
index 9021c237..e79fe21f 100644
--- a/cypress/e2e/transaction-import.cy.ts
+++ b/cypress/e2e/transaction-import.cy.ts
@@ -20,7 +20,7 @@ describe('Transaction Import', () => {
       ).then(([ownAccount, otherOwnAccount, externalAccount]: Account[]) => {
         cy.wrap(externalAccount).as('externalAccount')
         // select budget
-        cy.visit('/').get('h3').contains('My Budget').click()
+        cy.visit('/').get('li').contains('Open').click()
       })
     })
   })
@@ -30,7 +30,7 @@ describe('Transaction Import', () => {
     cy.getByTitle('Import Transactions').click()
     cy.awaitLoading()
 
-    cy.getInputFor('Account').type('account')
+    cy.getAutocompleteFor('Account').type('account')
     cy.contains('External Account').should('not.exist')
     cy.contains('My Other Account')
     cy.contains('My Account').click()
@@ -45,15 +45,18 @@ describe('Transaction Import', () => {
     // first transaction - checked prefilled values
     cy.getInputFor('Note').should('have.value', 'Text').clear().type('MY NOTE')
     cy.getInputFor('Amount').should('have.value', '84.76')
-    cy.getInputFor('Source')
+    cy.getAutocompleteFor('Source')
       .should('have.value', 'My Account')
       .should('be.disabled')
-    cy.getInputFor('Destination').should('have.value', 'Non Existing Account')
+    cy.getAutocompleteFor('Destination').should(
+      'have.value',
+      'Non Existing Account'
+    )
     // only result in destination drop down is 'Create "Non Existing Account"'
-    cy.getInputFor('Destination').type('{downArrow}')
+    cy.getAutocompleteFor('Destination').type('{downArrow}')
     cy.get('ul').find('li').should('have.length', 1)
     cy.get('li').contains('Create "Non Existing Account"')
-    cy.getInputFor('Destination').clear().type('EDITED ACCOUNT{enter}')
+    cy.getAutocompleteFor('Destination').clear().type('EDITED ACCOUNT{enter}')
     cy.getInputFor('Date').should('have.value', '2023-06-20')
     cy.contains('Available From').should('not.exist')
 
@@ -63,12 +66,12 @@ describe('Transaction Import', () => {
       'have.value',
       'Transfer from my other account'
     )
-    cy.getInputFor('Destination')
+    cy.getAutocompleteFor('Destination')
       .should('have.value', 'My Account')
       .should('be.disabled')
     cy.getByTitle('Previous Transaction').click()
     cy.getInputFor('Note').should('have.value', 'MY NOTE')
-    cy.getInputFor('Destination').should('have.value', 'EDITED ACCOUNT')
+    cy.getAutocompleteFor('Destination').should('have.value', 'EDITED ACCOUNT')
 
     // import this transaction
     cy.get('button').contains('Import').click()
@@ -96,18 +99,18 @@ describe('Transaction Import', () => {
     // second transaction
     cy.contains('2 of 5')
     cy.getByTitle('Previous Transaction').should('be.disabled')
-    cy.getInputFor('Source').should('have.value', 'My Other Account')
+    cy.getAutocompleteFor('Source').should('have.value', 'My Other Account')
     // dropdown results in source should be "My Other Account" & 'Create "My Other Account"'
-    cy.getInputFor('Source').type('{downArrow}')
+    cy.getAutocompleteFor('Source').type('{downArrow}')
     cy.get('ul').find('li').should('have.length', 2)
     cy.get('li').contains(/^My Other Account$/) // match "My Other Account" exactly
     cy.get('li').contains('Create "My Other Account"')
     // newly created account is available for selection
-    cy.getInputFor('Source').clear().type('EDITE')
+    cy.getAutocompleteFor('Source').clear().type('EDITE')
     cy.contains('EDITED ACCOUNT')
     cy.contains('Available From').should('not.exist')
 
-    cy.getInputFor('Destination')
+    cy.getAutocompleteFor('Destination')
       .should('have.value', 'My Account')
       .should('be.disabled')
 
@@ -176,7 +179,7 @@ describe('Transaction Import', () => {
     cy.getByTitle('Import Transactions').click()
     cy.awaitLoading()
 
-    cy.getInputFor('Account').type('My account{enter}')
+    cy.getAutocompleteFor('Account').type('My account{enter}')
     cy.getInputFor('File').selectFile('cypress/fixtures/comdirect.csv')
 
     cy.clickAndWait('Submit')
@@ -188,7 +191,7 @@ describe('Transaction Import', () => {
     cy.getByTitle('Import Transactions').click()
     cy.awaitLoading()
 
-    cy.getInputFor('Account').type('account')
+    cy.getAutocompleteFor('Account').type('account')
     cy.contains('External Account').should('not.exist')
     cy.contains('My Other Account')
     cy.contains('My Account').click()
@@ -206,7 +209,7 @@ describe('Transaction Import', () => {
     cy.getByTitle('Import Transactions').click()
     cy.awaitLoading()
 
-    cy.getInputFor('Account').type('account')
+    cy.getAutocompleteFor('Account').type('account')
     cy.contains('External Account').should('not.exist')
     cy.contains('My Other Account')
     cy.contains('My Account').click()
diff --git a/cypress/e2e/transactions.cy.ts b/cypress/e2e/transactions.cy.ts
index f3d36a6f..19dd36c8 100644
--- a/cypress/e2e/transactions.cy.ts
+++ b/cypress/e2e/transactions.cy.ts
@@ -40,7 +40,7 @@ describe('Transactions', () => {
           cy.wrap(envelope).as('envelope')
 
           // select budget
-          cy.visit('/').get('h3').contains('Transactions Test').click()
+          cy.visit('/').get('li').contains('Open').click()
           cy.awaitLoading()
         })
       }
@@ -55,13 +55,13 @@ describe('Transactions', () => {
     cy.getInputFor('Note').type('Birthday Present')
     cy.getInputFor('Amount').type('42.7')
 
-    cy.getInputFor('Source').type('Bank ac')
+    cy.getAutocompleteFor('Source').type('Bank ac')
     cy.contains('Bank account').click()
 
-    cy.getInputFor('Destination').type('Best fri')
+    cy.getAutocompleteFor('Destination').type('Best fri')
     cy.contains('Best Friend').click()
 
-    cy.getInputFor('Envelope').type('Onl')
+    cy.getAutocompleteFor('Envelope').type('Onl')
     cy.contains('Only one').click()
 
     cy.contains('Available From').should('not.exist')
@@ -73,7 +73,7 @@ describe('Transactions', () => {
     // "Latest Transactions" per Account
 
     cy.contains('Accounts').click()
-    cy.contains('Bank account').click()
+    cy.contains('Bank account').closest('li').contains('Edit Account').click()
     cy.contains('Latest Transactions').click()
     cy.awaitLoading()
     cy.contains('Birthday Present (Bank account → Best Friend)')
@@ -104,16 +104,16 @@ describe('Transactions', () => {
 
     cy.getInputFor('Amount').type('13.37')
 
-    cy.getInputFor('Source').type('Best fri')
+    cy.getAutocompleteFor('Source').type('Best fri')
     cy.contains('Best Friend').click()
 
-    cy.getInputFor('Destination').type('Bank ac')
+    cy.getAutocompleteFor('Destination').type('Bank ac')
     cy.contains('Bank account').click()
 
     cy.getInputFor('Available From').type(currentMonth)
     cy.getInputFor('Available From').should('have.value', currentMonth)
 
-    cy.getInputFor('Envelope').type('Onl')
+    cy.getAutocompleteFor('Envelope').type('Onl')
     cy.contains('Only one').click()
 
     cy.contains('Available From').should('not.exist')
@@ -133,10 +133,10 @@ describe('Transactions', () => {
 
     cy.getInputFor('Amount').type('0.04')
 
-    cy.getInputFor('Source').type('Bank ac')
+    cy.getAutocompleteFor('Source').type('Bank ac')
     cy.contains('Bank account').click()
 
-    cy.getInputFor('Destination').type('Ca')
+    cy.getAutocompleteFor('Destination').type('Ca')
     cy.contains('Cash').click()
 
     cy.clickAndWait('Save')
@@ -151,16 +151,16 @@ describe('Transactions', () => {
 
     cy.getInputFor('Amount').type('13')
 
-    cy.getInputFor('Source').type('Bank ac')
+    cy.getAutocompleteFor('Source').type('Bank ac')
     cy.contains('Bank account').click()
 
-    cy.getInputFor('Destination').type('Someone else')
+    cy.getAutocompleteFor('Destination').type('Someone else')
     cy.contains('Create "Someone else"').click()
 
-    cy.getInputFor('Envelope').type('Onl')
+    cy.getAutocompleteFor('Envelope').type('Onl')
     cy.contains('Only one').click()
 
-    cy.getInputFor('Destination').clear().type('New Best Friend')
+    cy.getAutocompleteFor('Destination').clear().type('New Best Friend')
     cy.contains('Create "New Best Friend"').click()
 
     cy.clickAndWait('Save')
@@ -168,7 +168,8 @@ describe('Transactions', () => {
     cy.contains('-13.00')
 
     cy.contains('Accounts').click()
-    cy.contains('Bank account').click()
+    cy.contains('Bank account').closest('li').contains('Edit Account').click()
+
     cy.contains('Latest Transactions').click()
     cy.awaitLoading()
     cy.contains('Bank account → New Best Friend')
@@ -190,9 +191,9 @@ describe('Transactions', () => {
     cy.getByTitle('Create Transaction').click()
     cy.awaitLoading()
 
-    cy.getInputFor('Destination').type('Archived Acc')
+    cy.getAutocompleteFor('Destination').type('Archived Acc')
     cy.contains('Archived Account').should('not.exist')
-    cy.getInputFor('Destination').clear().type('Archived Account')
+    cy.getAutocompleteFor('Destination').clear().type('Archived Account')
     cy.contains('Archived Account')
   })
 
@@ -204,9 +205,9 @@ describe('Transactions', () => {
     cy.getInputFor('Note').type('Burgers')
     cy.getInputFor('Amount').type('5')
     cy.getInputFor('Date').type('2012-12-21')
-    cy.getInputFor('Source').type('Cas{enter}') // {enter} selects the first result in the dropdown
-    cy.getInputFor('Destination').type('Best fri{enter}') // {enter} selects the first result in the dropdown
-    cy.getInputFor('Envelope').type('Onl{enter}')
+    cy.getAutocompleteFor('Source').type('Cas{enter}') // {enter} selects the first result in the dropdown
+    cy.getAutocompleteFor('Destination').type('Best fri{enter}') // {enter} selects the first result in the dropdown
+    cy.getAutocompleteFor('Envelope').type('Onl{enter}')
 
     cy.clickAndWait('Save')
     cy.contains('Burgers').click()
@@ -218,9 +219,9 @@ describe('Transactions', () => {
       'have.value',
       dateFromIsoString(new Date().toISOString())
     )
-    cy.getInputFor('Source').should('have.value', 'Cash')
-    cy.getInputFor('Destination').should('have.value', 'Best Friend')
-    cy.getInputFor('Envelope').should('have.value', 'Only one')
+    cy.getAutocompleteFor('Source').should('have.value', 'Cash')
+    cy.getAutocompleteFor('Destination').should('have.value', 'Best Friend')
+    cy.getAutocompleteFor('Envelope').should('have.value', 'Only one')
 
     cy.getInputFor('Amount').clear().type('5.5')
 
@@ -238,9 +239,9 @@ describe('Transactions', () => {
 
     cy.getInputFor('Note').type("I shouldn't be buying this")
     cy.getInputFor('Amount').type('1000000')
-    cy.getInputFor('Source').type('Bank ac{enter}')
-    cy.getInputFor('Destination').type('Best fri{enter}')
-    cy.getInputFor('Envelope').type('Onl{enter}')
+    cy.getAutocompleteFor('Source').type('Bank ac{enter}')
+    cy.getAutocompleteFor('Destination').type('Best fri{enter}')
+    cy.getAutocompleteFor('Envelope').type('Onl{enter}')
 
     cy.clickAndWait('Save')
     cy.contains("I shouldn't be buying this").click()
@@ -248,7 +249,7 @@ describe('Transactions', () => {
     cy.getInputFor('Note').should('have.value', "I shouldn't be buying this")
     cy.getInputFor('Amount').should('have.value', '1000000')
 
-    cy.contains('Add transaction').click()
+    cy.contains('Add Transaction').click()
     cy.awaitLoading()
 
     cy.getInputFor('Note').should('have.value', '')
@@ -271,12 +272,12 @@ describe('Transactions', () => {
 
     cy.visit('/transactions/new')
 
-    cy.getInputFor('Envelope').should('have.value', '')
+    cy.getAutocompleteFor('Envelope').should('have.value', '')
 
-    cy.getInputFor('Destination').type('Best fri')
+    cy.getAutocompleteFor('Destination').type('Best fri')
     cy.contains('Best Friend').click()
 
-    cy.getInputFor('Envelope').should('have.value', 'Only one')
+    cy.getAutocompleteFor('Envelope').should('have.value', 'Only one')
   })
 
   // This needs to be a declared function to have a binding for 'this'
@@ -296,12 +297,12 @@ describe('Transactions', () => {
 
     cy.visit('/transactions/new')
 
-    cy.getInputFor('Envelope').should('have.value', '')
+    cy.getAutocompleteFor('Envelope').should('have.value', '')
 
-    cy.getInputFor('Source').type('Best fri')
+    cy.getAutocompleteFor('Source').type('Best fri')
     cy.contains('Best Friend').click()
 
-    cy.getInputFor('Envelope').should('have.value', '')
+    cy.getAutocompleteFor('Envelope').should('have.value', '')
   })
 
   it('can search for transactions by their note', function () {
@@ -382,10 +383,10 @@ describe('Transactions', () => {
     // This is needed so that auto-completion works
     cy.awaitLoading()
 
-    cy.getInputFor('Account').type('Bank Acc{enter}')
+    cy.getAutocompleteFor('Account').type('Bank Acc{enter}')
     cy.getInputFor('Amount (Min)').type('12')
     cy.getInputFor('Amount (Max)').type('100')
-    cy.getInputFor('Envelope').type('Only on{enter}')
+    cy.getAutocompleteFor('Envelope').type('Only on{enter}')
     cy.getInputFor('From').type('2022-12-24')
     cy.getInputFor('Until').type('2022-12-31')
 
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index a547f366..97a4f59e 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,6 +1,15 @@
 Cypress.Commands.add('getByTitle', title => cy.get(`[title="${title}"]`))
 
-Cypress.Commands.add('getInputFor', label =>
+Cypress.Commands.add('getInputFor', label => {
+  return cy
+    .contains('label', label)
+    .invoke('attr', 'for')
+    .then(id => {
+      return cy.get(`#${id}`)
+    })
+})
+
+Cypress.Commands.add('getAutocompleteFor', label =>
   cy.contains('label', label).siblings().find('input, textarea, select')
 )
 
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index c1078192..f9adf508 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -4,3 +4,14 @@ beforeEach(() => {
   cy.resetDb()
   cy.visit('/')
 })
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  if (
+    err.message.includes(
+      'ResizeObserver loop completed with undelivered notifications.'
+    )
+  ) {
+    // ignore the error
+    return false
+  }
+})
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
index d3173014..80fca937 100644
--- a/cypress/support/index.d.ts
+++ b/cypress/support/index.d.ts
@@ -9,6 +9,7 @@ declare namespace Cypress {
      */
     getByTitle(title: string): Chainable<any>
     getInputFor(label: string): Chainable<any>
+    getAutocompleteFor(label: string): Chainable<any>
     clickAndWait(element: string): Chainable<any>
     awaitLoading(): Chainable<any>
     resetDb(): void
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 07569168..2c02f806 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["cypress"]
+    "types": ["cypress"],
+    "lib": ["esnext"]
   }
 }
diff --git a/src/components/AccountForm.tsx b/src/components/AccountForm.tsx
index 534d5bd8..85d44f09 100644
--- a/src/components/AccountForm.tsx
+++ b/src/components/AccountForm.tsx
@@ -169,7 +169,7 @@ const AccountForm = ({ budget, type }: Props) => {
                       </div>
                     </div>
                     <div className="ml-3 text-sm leading-6">
-                      <label className="form-field--label" htmlFor="onbudget">
+                      <label className="form-field--label" htmlFor="onBudget">
                         {t('accounts.onBudget')}
                       </label>
                       <p