From 4d62af42f5cfa92b21af8a04be4ec5cd1a743b5c Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Tue, 7 Jan 2025 15:29:47 +0100
Subject: [PATCH] Added type safety to custom data-cy command

As data-cy attributes are the preferred way to select element within Cypress, I've enhanced the custom `cy.dataCy()` command to use constants instead of a string. This ensures that custom data selectors cannot have typos or accidential changes.

To make this work, I had to consolidate cypress.d.ts and commands.ts as a d.ts file cannot import other files dynamically.
---
 components/global/header/Header.tsx |  3 ++-
 cypress/cypress.d.ts                |  8 --------
 cypress/e2e/frontpage.cy.ts         |  1 +
 cypress/support/commands.ts         | 13 ++++++++++++-
 cypress/support/constants.ts        |  5 +++++
 5 files changed, 20 insertions(+), 10 deletions(-)
 delete mode 100644 cypress/cypress.d.ts
 create mode 100644 cypress/support/constants.ts

diff --git a/components/global/header/Header.tsx b/components/global/header/Header.tsx
index faf55ee..94b0850 100644
--- a/components/global/header/Header.tsx
+++ b/components/global/header/Header.tsx
@@ -5,6 +5,7 @@ import DarkModeToggle from "@/components/shared/darkModeToggle/DarkModeToggle"
 import Icon from "@/components/shared/icon/Icon"
 import SearchInput from "@/components/shared/searchInput/SearchInput"
 import SmartLink from "@/components/shared/smartLink/SmartLink"
+import { cyKeys } from "@/cypress/support/constants"
 
 import ProfileButton from "./ProfileButton"
 
@@ -15,7 +16,7 @@ function Header() {
         <p className="text-typo-caption">Biblioterernes ebøger og lydbøger</p>
       </div>
       <div className="content-container grid h-navigation-height grid-cols-3 items-center">
-        <div className="flex-0 flex items-center">
+        <div className="flex-0 flex items-center" data-cy={cyKeys["go-logo"]}>
           <Button ariaLabel="Gå til forsiden" asChild className="inline-flex px-3">
             <SmartLink href="/" className="inline-flex">
               <Icon name="logo-borderless" />
diff --git a/cypress/cypress.d.ts b/cypress/cypress.d.ts
deleted file mode 100644
index 968738e..0000000
--- a/cypress/cypress.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// <reference types="cypress" />
-
-// custom namespace for Cypress commands
-declare namespace Cypress {
-  interface Chainable {
-    dataCy(selector: string): Chainable<JQuery<HTMLElement>>
-  }
-}
diff --git a/cypress/e2e/frontpage.cy.ts b/cypress/e2e/frontpage.cy.ts
index 8cae33d..6b8df28 100644
--- a/cypress/e2e/frontpage.cy.ts
+++ b/cypress/e2e/frontpage.cy.ts
@@ -4,5 +4,6 @@ describe("Front Page Tests", () => {
 
     cy.get("header").should("exist")
     cy.get("footer").should("exist")
+    cy.dataCy("go-logo").should("exist")
   })
 })
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index bd59283..bbc6660 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,3 +1,14 @@
-Cypress.Commands.add("dataCy", (selector: string) => {
+/* eslint-disable @typescript-eslint/no-namespace */
+import { CyKey } from "./constants"
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      dataCy(value: CyKey): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+Cypress.Commands.add("dataCy", selector => {
   return cy.get(`[data-cy="${selector}"]`)
 })
diff --git a/cypress/support/constants.ts b/cypress/support/constants.ts
new file mode 100644
index 0000000..d908efc
--- /dev/null
+++ b/cypress/support/constants.ts
@@ -0,0 +1,5 @@
+export const cyKeys = {
+  "go-logo": "go-logo",
+} as const
+
+export type CyKey = keyof typeof cyKeys