Setup e2e testing

.github/workflows/code-qa.yaml

@@ -44,3 +44,5 @@ jobs:
               run: npm run eslint:check
             - name: Quality check - unit testing (Jest)
               run: npm run test
+            - name: Quality check - end-to-end testing (Cypress)
+              run: npm run e2e:headless

cypress.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+	e2e: {
+		setupNodeEvents(on, config) {},
+		// Include shadow DOM elements in command results
+		includeShadowDom: true,
+		// Allow certain Content Security Policies
+		experimentalCspAllowList: true,
+		// Run all specs together
+		experimentalRunAllSpecs: true,
+		// Enable experimental Cypress Studio feature
+		experimentalStudio: true,
+		// Enable experimental interactive run events
+		experimentalInteractiveRunEvents: true,
+		// Enable experimental memory management
+		experimentalMemoryManagement: true,
+	},
+});

cypress/e2e/landing.cy.js

@@ -0,0 +1,30 @@
+describe("Landing Page", () => {
+	beforeEach(() => {
+		// Visit the landing page (adjust port if needed)
+		cy.visit("http://localhost:3000");
+	});
+
+	it("should render page", () => {
+		// Featured Articles section
+		cy.get("#featuredArticles").should("exist").and("be.visible");
+		cy.get("#featuredArticles h2.title").should("contain", "Featured Articles");
+
+		// Carousel and indicators
+		cy.get("#carouselExampleIndicators").should("exist");
+		cy.get("#carouselInner").should("exist");
+		cy.get("#carouselIndicator").should("exist");
+
+		// Display Articles section should have content (not be empty)
+		cy.get("#displayArticles")
+			.should("exist")
+			.and(($el) => {
+				expect($el.text().trim().length).to.be.greaterThan(0);
+			});
+
+		// SVG Title image
+		cy.get('img[src*="title.svg"]').should("exist").and("be.visible");
+
+		// Article body exists (may be hidden initially)
+		cy.get("#articleBody").should("exist");
+	});
+});

cypress/support/commands.js

@@ -0,0 +1,27 @@
+/// <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) => { ... })
+//

cypress/support/e2e.js

@@ -0,0 +1,19 @@
+// ***********************************************************
+// 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')

eslint.config.js

@@ -3,7 +3,13 @@ import globals from "globals";
 
 export default [
 	{
-		ignores: ["**/*.min.js", "node_modules/**/*", "src/scripts/libraries/**/*", "src/serviceWorker/**/*"],
+		ignores: [
+			"**/*.min.js",
+			"cypress.config.js",
+			"node_modules/**/*",
+			"src/scripts/libraries/**/*",
+			"src/serviceWorker/**/*",
+		],
 	},
 	{
 		languageOptions: {