Sync branch to template

build/esbuild-build.ts

@@ -1,8 +1,10 @@
-// @ts-expect-error - Could not find a declaration file for module
 import esbuild from "esbuild";
-const typescriptEntries = ["static/scripts/key-generator/keygen.ts"];
-const cssEntries = ["static/styles/rewards/rewards.css", "static/styles/audit-report/audit.css", "static/styles/onboarding/onboarding.css"];
-export const entries = [...typescriptEntries, ...cssEntries];
+const typescriptEntries = ["static/main.ts"];
+// const cssEntries = ["static/style.css"];
+const entries = [
+  ...typescriptEntries,
+  //  ...cssEntries
+];
 
 export const esBuildContext: esbuild.BuildOptions = {
   sourcemap: true,
@@ -17,7 +19,7 @@ export const esBuildContext: esbuild.BuildOptions = {
     ".ttf": "dataurl",
     ".svg": "dataurl",
   },
-  outdir: "static/out",
+  outdir: "static/dist",
 };
 
 esbuild

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents() {
+      // implement node event listeners here
+    },
+    experimentalStudio: true,
+    baseUrl: "http://localhost:8080",
+  },
+});

cypress/e2e/main.cy.ts

@@ -0,0 +1,12 @@
+describe("Homepage tests", () => {
+  it("Console is cleared of errors and warnings", () => {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "error").as("consoleError");
+      },
+    });
+    cy.get("@consoleError").should("not.be.called");
+    cy.get("body").should("exist");
+    cy.get("h1").should("exist");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

jest.config.json

@@ -0,0 +1,10 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "node",
+  "roots": ["./tests"],
+  "coveragePathIgnorePatterns": ["node_modules", "mocks"],
+  "collectCoverage": true,
+  "coverageReporters": ["json", "lcov", "text", "clover", "json-summary"],
+  "reporters": ["default", "jest-junit", "jest-md-dashboard"],
+  "coverageDirectory": "coverage"
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts-template",
   "version": "1.0.0",
-  "description": "X25519 Cipher generator for Ubiquity",
+  "description": "Template repository with TypeScript support.",
   "main": "build/index.ts",
   "author": "Ubiquity DAO",
   "license": "MIT",
@@ -15,9 +15,12 @@
     "format:lint": "eslint --fix .",
     "format:prettier": "prettier --write .",
     "format:cspell": "cspell **/*",
-    "knip": "knip",
-    "knip-ci": "knip --no-exit-code --reporter json",
-    "prepare": "husky install"
+    "knip": "knip --config .github/knip.ts",
+    "knip-ci": "knip --no-exit-code --reporter json --config .github/knip.ts",
+    "prepare": "husky install",
+    "test": "jest --setupFiles dotenv/config --coverage",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run"
   },
   "keywords": [
     "typescript",
@@ -27,29 +30,37 @@
     "open-source"
   ],
   "dependencies": {
-    "dotenv": "^16.4.4",
-    "libsodium-wrappers": "^0.7.13"
+    "dotenv": "^16.4.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
     "@cspell/dict-node": "^4.0.3",
     "@cspell/dict-software-terms": "^3.3.18",
     "@cspell/dict-typescript": "^3.1.2",
+    "@jest/globals": "29.7.0",
+    "@mswjs/data": "0.16.1",
+    "@types/jest": "29.5.12",
     "@types/node": "^20.11.19",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
     "cspell": "^8.4.0",
+    "cypress": "13.6.6",
     "esbuild": "^0.20.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-filename-rules": "^1.3.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-sonarjs": "^0.24.0",
     "husky": "^9.0.11",
+    "jest": "29.7.0",
+    "jest-junit": "16.0.0",
+    "jest-md-dashboard": "0.8.0",
     "knip": "^5.0.1",
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
+    "ts-jest": "29.1.2",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3"
   },

static/index.html

@@ -1,40 +1,13 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <title>Key Generator</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="out/styles/onboarding/onboarding.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ubiquity TypeScript Template</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="container" id="keyGenContent">
-      <h1 class="title">Key Generator</h1>
-      <div class="mb-3">
-        <label for="privKey" class="form-label">x25519_PRIVATE_KEY</label>
-        <input type="text" class="form-control" id="privKey" />
-      </div>
-      <div class="mb-3">
-        <label for="pubKey" class="form-label">x25519_PUBLIC_KEY (Optional if private key is supplied)</label>
-        <input type="text" class="form-control" id="pubKey" />
-      </div>
-      <div class="mb-3">
-        <label for="plainKey" class="form-label">PLAIN_TEXT</label>
-        <input type="text" class="form-control" id="plainKey" />
-      </div>
-      <div class="mb-3">
-        <label for="cipherKey" class="form-label">CIPHER_TEXT</label>
-        <input type="text" class="form-control" id="cipherKey" />
-      </div>
-      <div class="mb-3">
-        <label for="statusKey" class="form-label">STATUS</label>
-        <input type="text" class="form-control" id="statusKey" disabled="true" />
-      </div>
-      <div class="btn-container">
-        <button type="button" class="btn btn-primary mb-3" id="genBtn">🔑 Generate</button>
-        <button type="button" class="btn btn-primary mb-3" id="encryptBtn">🔒 Encrypt</button>
-        <button type="button" class="btn btn-primary mb-3" id="decryptBtn">🔓 Decrypt</button>
-      </div>
-    </div>
-    <script src="out/scripts/key-generator/keygen.js" type="application/javascript"></script>
+    <h1>Ubiquity TypeScript Template</h1>
+    <script type="module" src="dist/main.js"></script>
   </body>
 </html>

static/main.ts

@@ -0,0 +1,11 @@
+export async function mainModule() {
+  console.log(`Hello from mainModule`);
+}
+
+mainModule()
+  .then(() => {
+    console.log("mainModule loaded");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

tests/__mocks__/db.ts

@@ -0,0 +1,12 @@
+// cSpell:disable
+import { factory, primaryKey } from "@mswjs/data";
+
+/**
+ * Creates an object that can be used as a db to persist data within tests
+ */
+export const db = factory({
+  users: {
+    id: primaryKey(Number),
+    name: String,
+  },
+});

tests/__mocks__/handlers.ts

@@ -0,0 +1,11 @@
+import { http, HttpResponse } from "msw";
+import { db } from "./db";
+
+/**
+ * Intercepts the routes and returns a custom payload
+ */
+export const handlers = [
+  http.get("https://api.ubiquity.com/users", () => {
+    return HttpResponse.json(db.users.getAll());
+  }),
+];

tests/__mocks__/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

tests/__mocks__/users-get.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": 1,
+    "name": "user1"
+  },
+  {
+    "id": 2,
+    "name": "user2"
+  }
+]

tests/main.test.ts

@@ -0,0 +1,24 @@
+import { mainModule } from "../static/main";
+import { db } from "./__mocks__/db";
+import { server } from "./__mocks__/node";
+import usersGet from "./__mocks__/users-get.json";
+import { expect, describe, beforeAll, beforeEach, afterAll, afterEach, it } from "@jest/globals";
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe("User tests", () => {
+  beforeEach(() => {
+    for (const item of usersGet) {
+      db.users.create(item);
+    }
+  });
+
+  it("Should fetch all the users", async () => {
+    const res = await fetch("https://api.ubiquity.com/users");
+    const data = await res.json();
+    expect(data).toMatchObject(usersGet);
+    expect(async () => await mainModule()).not.toThrow();
+  });
+});

tsconfig.json

@@ -104,6 +104,7 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "resolveJsonModule": true
   }
 }