Cypress unit testing

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+	e2e: {
+		baseUrl: "http://localhost:3000",
+	},
+});

cypress/e2e/spec.cy.js

@@ -0,0 +1,163 @@
+describe("The Home Page", () => {
+	beforeEach(() => {
+	});
+
+	it("successfully loads", () => {
+		cy.visit("/");
+	});
+
+	it("sets auth cookie when logging in via form submission", () => {
+		const username = "admin";
+		const password = "changeme";
+
+		cy.visit("/login");
+
+		cy.get("input[name=username]").type(username);
+		cy.get("input[name=password]").type(`${password}{enter}`);
+
+		cy.url().should("include", "/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+	});
+
+	it("fails to log in with wrong password", () => {
+		const username = "admin";
+		const password = "wrongpassword";
+
+		cy.visit("/login");
+
+		cy.get("input[name=username]").type(username);
+		cy.get("input[name=password]").type(`${password}{enter}`);
+
+		cy.url().should("include", "/login");
+
+		cy.getCookie("connect.sid").should("not.exist");
+	});
+
+	it("logs out", () => {
+		const username = "admin";
+		const password = "changeme";
+
+		cy.visit("/login");
+
+		cy.get("input[name=username]").type(username);
+		cy.get("input[name=password]").type(`${password}{enter}`);
+
+		cy.url().should("include", "/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+
+		cy.get("button").contains("Sign out").click();
+
+		cy.get("a").contains("Sign in");
+	});
+});
+
+describe("The Upload Page", () => {
+	beforeEach(() => {
+		cy.request("POST", "/login/password", {
+			username: "admin",
+			password: "changeme"
+		});
+	});
+
+	it("successfully loads", () => {
+		cy.visit("/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+	});
+
+	it("successfully uploads a file", () => {
+		cy.visit("/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+
+		cy.get("input[type=file]").attachFile("test.png");
+
+		cy.get("input[type=button][value=Upload]").click();
+
+		cy.url().should("include", "/");
+
+		cy.get("img").should("exist");
+	});
+
+	it("successfully deletes a file", () => {
+		cy.visit("/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+
+		cy.get("input[type=button][value=Upload]").click();
+
+		cy.url().should("include", "/");
+
+		cy.get("img").should("exist");
+
+		cy.get("img").realHover();
+
+		cy.get("button[class=destroy]").click();
+
+		cy.url().should("include", "/");
+
+		cy.get("img").should("not.exist");
+	});
+
+	it("file successfully expires", () => {
+		cy.visit("/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+
+		cy.get("input[type=file]").attachFile("test.png");
+
+		cy.get("input[type=button][value=Upload]").click();
+
+		cy.url().should("include", "/");
+
+		cy.get("img").should("exist");
+
+		cy.wait(120000); //2 minutes
+
+		cy.reload();
+
+		cy.get("img").should("not.exist");
+	});
+
+	it("ShareX successfully uploads a file", () => {
+		cy.fixture("test.png", "base64")
+			.then((file) => Cypress.Blob.base64StringToBlob(file))
+			.then((blob) => {
+				let formdata = new FormData();
+				formdata.append("fileupload", blob, "test.png");
+
+				cy.request({
+					url: "/sharex",
+					method: "POST",
+					headers: {
+						"Content-Type": "multipart/form-data",
+						"key": "pleaseSetAPI_KEY"
+					},
+					body: formdata
+				}).its('status').should('be.equal', 200);
+			});
+
+		cy.visit("/");
+
+		cy.getCookie("connect.sid").should("exist");
+
+		cy.get("li").contains("admin");
+
+		cy.get("img").should("exist");
+
+	});
+});

cypress/fixtures/example.json

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

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js 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) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/e2e.js 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'
+import 'cypress-file-upload'
+import 'cypress-real-events'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -28,6 +28,7 @@
     "@ffprobe-installer/ffprobe": "^1.4.1",
     "connect-sqlite3": "^0.9.13",
     "cookie-parser": "~1.4.4",
+    "cypress-real-events": "^1.7.4",
     "dotenv": "^8.6.0",
     "ejs": "^3.1.8",
     "express": "~4.16.1",
@@ -42,6 +43,8 @@
     "sqlite3": "^5.0.2"
   },
   "devDependencies": {
+    "cypress": "^11.1.0",
+    "cypress-file-upload": "^5.0.8",
     "eslint": "^8.28.0"
   }
 }

views/index.ejs

@@ -39,6 +39,7 @@ return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
                         <br>
                         <br>
                         <p class="dragregion">Select file expiration date: <select name="expire" id="expire">
+                            <option value="0.00069">1 minute</option>
                             <option value="0.00347">5 minutes</option>
                             <option value="0.0417">1 hour</option>
                             <option value="0.25">6 hours</option>