refactor(scripts): add typescript to cypress (#968)

Co-authored-by: Oliver Eyton-Williams <[email protected]>

.github/workflows/node.js-test.yml

@@ -87,5 +87,8 @@ jobs:
       - name: Run tests
         run: npm run test
 
+      - name: Perform Typescript Typecheck
+        run: npm run type-check
+
       - name: Stop Ghost containers
         run: npm run stop:containers

cypress/e2e/english/author/author.cy.js → cypress/e2e/english/author/author.cy.ts

@@ -62,7 +62,7 @@ describe('Author page', () => {
       });
 
       it("the author profile image should contain an `alt` attribute with the author's name", () => {
-        cy.get(selectors.authorProfileImage).then($el =>
+        cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el =>
           expect($el[0].alt).to.equal('Quincy Larson')
         );
       });
@@ -119,7 +119,7 @@ describe('Author page', () => {
       });
 
       it("the author profile image should contain an `alt` attribute with the author's name", () => {
-        cy.get(selectors.authorProfileImage).then($el =>
+        cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el =>
           expect($el[0].alt).to.equal('Abigail Rennemeyer')
         );
       });
@@ -149,14 +149,14 @@ describe('Author page', () => {
     });
 
     it("should show a default image from Hashnode's CDN", () => {
-      cy.get(selectors.authorProfileImage).then($el => {
+      cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el => {
         expect($el[0].src).to.include('cdn.hashnode.com');
         expect($el[0].tagName.toLowerCase()).to.equal('img');
       });
     });
 
     it("the default image should contain an `alt` attribute with the author's name", () => {
-      cy.get(selectors.authorProfileImage).then($el =>
+      cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el =>
         expect($el[0].alt).to.equal('Dionysia Lemonaki')
       );
     });

cypress/e2e/english/landing/landing.cy.js → cypress/e2e/english/landing/landing.cy.ts

@@ -49,7 +49,7 @@ describe('Landing', () => {
         'Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update'
       )
       .parentsUntil('article')
-      .find(selectors.authorProfileImage)
+      .find<HTMLImageElement>(selectors.authorProfileImage)
       .then($el => expect($el[0].alt).to.equal('Quincy Larson'));
   });
 

cypress/e2e/english/post/meta.cy.js → cypress/e2e/english/post/meta.cy.ts

@@ -370,14 +370,16 @@ describe('Post metadata', () => {
 
       // This article has two tags
       it('<meta> article:tag', () => {
-        cy.get('head meta[property="article:tag"]').then($metaEls => {
-          const tags = Array.from($metaEls).map(metaEl => metaEl.content);
-
-          expect(tags).to.have.members([
-            'freeCodeCamp.org',
-            'technical writing'
-          ]);
-        });
+        cy.get<HTMLMetaElement>('head meta[property="article:tag"]').then(
+          $metaEls => {
+            const tags = Array.from($metaEls).map(metaEl => metaEl.content);
+
+            expect(tags).to.have.members([
+              'freeCodeCamp.org',
+              'technical writing'
+            ]);
+          }
+        );
       });
 
       it('<meta> article:publisher', () => {

cypress/e2e/english/post/post.cy.js → cypress/e2e/english/post/post.cy.ts

@@ -114,7 +114,7 @@ describe('Post', () => {
       });
 
       it('posts with no feature image should fall back to the default fCC indigo image', () => {
-        cy.get(selectors.featureImage)
+        cy.get<HTMLImageElement>(selectors.featureImage)
           .should('exist')
           .then($el =>
             expect($el[0].src).to.equal(
@@ -226,14 +226,14 @@ describe('Post', () => {
       });
 
       it("should show a default image from Hashnode's CDN in the bylines at the top and bottom of the article", () => {
-        cy.get(selectors.authorProfileImage).then($el => {
+        cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el => {
           expect($el[0].src).to.include('cdn.hashnode.com');
           expect($el[0].tagName.toLowerCase()).to.equal('img');
         });
       });
 
       it("the default image in the bylines at the top and bottom of the article should contain an `alt` attribute with the author's name", () => {
-        cy.get(selectors.authorProfileImage).then($el =>
+        cy.get<HTMLImageElement>(selectors.authorProfileImage).then($el =>
           expect($el[0].alt).to.equal('Dionysia Lemonaki')
         );
       });
@@ -245,7 +245,7 @@ describe('Post', () => {
       });
 
       it('posts with no feature image should fall back to the default fCC indigo image', () => {
-        cy.get(selectors.featureImage)
+        cy.get<HTMLImageElement>(selectors.featureImage)
           .should('exist')
           .then($el =>
             expect($el[0].src).to.equal(

cypress/e2e/english/search-results/search-results.cy.js → cypress/e2e/english/search-results/search-results.cy.ts

@@ -37,7 +37,7 @@ describe('Search results', () => {
         'freeCodeCamp Just Got a Million Dollar Donation from an Alum to Build a Carbon-Neutral Web3 Curriculum'
       )
       .parentsUntil('article')
-      .find(selectors.authorProfileImage)
+      .find<HTMLImageElement>(selectors.authorProfileImage)
       .then($el => expect($el[0].alt).to.equal('Quincy Larson'));
   });
 

cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "allowJs": true,
+    "types": ["cypress", "node"],
+    "moduleDetection": "force",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "preserveValueImports": false
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -37,7 +37,8 @@
     "lint:i18n-schema": "node ./config/i18n/schema-validation.js",
     "lint:pretty": "prettier --check .",
     "format": "prettier --write .",
-    "prepare": "husky"
+    "prepare": "husky",
+    "type-check": "tsc -p ./cypress/tsconfig.json --noEmit"
   },
   "repository": {
     "type": "git",
@@ -101,9 +102,14 @@
     "prettier": "3.3.3",
     "probe-image-size": "7.2.3",
     "shx": "0.3.4",
-    "terser": "5.31.6"
+    "terser": "5.31.6",
+    "typescript": "^5.5.4"
   },
   "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
+    "!(*.ts)": "prettier --write --ignore-unknown",
+    "*.ts": [
+      "npm run type-check",
+      "prettier --write --ignore-unknown"
+    ]
   }
 }