From 0590ae5bc362e38e65252f27fb59cf605530864c Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Tue, 2 Apr 2024 15:35:09 +0200
Subject: [PATCH] fix: cypress test issues with trimmed strings

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 cypress/components/UploadPicker.cy.ts |  6 +++---
 cypress/cypress.d.ts                  | 14 ++++++++++++++
 cypress/support/commands.ts           |  9 +++++++++
 cypress/tsconfig.json                 |  5 ++++-
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 cypress/cypress.d.ts

diff --git a/cypress/components/UploadPicker.cy.ts b/cypress/components/UploadPicker.cy.ts
index efc37496..e8ddabe1 100644
--- a/cypress/components/UploadPicker.cy.ts
+++ b/cypress/components/UploadPicker.cy.ts
@@ -25,7 +25,7 @@ describe('UploadPicker rendering', () => {
 		}
 		cy.mount(UploadPicker, { propsData })
 		cy.get('[data-cy-upload-picker]').should('be.visible')
-		cy.get('[data-cy-upload-picker]').should('have.text', ' New ')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').should('exist')
 	})
 
@@ -54,7 +54,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.mount(UploadPicker, { propsData }).as('uploadPicker')
 
 		// Label is displayed before upload
-		cy.get('[data-cy-upload-picker]').should('have.text', ' New ')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
 
 		// Check and init aliases
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
@@ -99,7 +99,7 @@ describe('UploadPicker valid uploads', () => {
 				.should('not.be.visible')
 
 			// Label is displayed again after upload
-			cy.get('[data-cy-upload-picker] button').should('have.text', ' New ')
+			cy.get('[data-cy-upload-picker] button').shouldHaveTrimmedText('New')
 		})
 	})
 })
diff --git a/cypress/cypress.d.ts b/cypress/cypress.d.ts
new file mode 100644
index 00000000..a1693ddd
--- /dev/null
+++ b/cypress/cypress.d.ts
@@ -0,0 +1,14 @@
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+	  shouldHaveTrimmedText: (text: string) => Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index be54c257..e497993d 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -9,3 +9,12 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 import 'cypress-file-upload'
+
+Cypress.Commands.add(
+	'shouldHaveTrimmedText',
+	{ prevSubject: true },
+	(subject: JQuery<HTMLElement>, text: string) => {
+		cy.wrap(subject)
+			.should(element => expect(element.text().trim()).to.equal(text))
+	},
+)
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index a4a6d089..73d30021 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -3,7 +3,10 @@
 		"@tsconfig/cypress/tsconfig.json",
 		"../tsconfig.json"
 	],
-	"include": ["./**/*.ts"],
+	"include": [
+		"./**/*.ts", 
+		"./cypress.d.ts"
+	],
 	"compilerOptions": {
 		"types": ["cypress"],
 		"rootDir": "..",