Merge pull request #106 from rtjord/75-add-tests-to-frontend-using-se…

…lenium

75 add tests to frontend using selenium

frontend/.mocharc.json

@@ -0,0 +1,5 @@
+{
+    "require": "ts-node/register",
+    "extension": ["ts"],
+    "spec": "tests/**/*.test.ts"
+  }

frontend/package.json

@@ -6,8 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "NODE_OPTIONS=--experimental-loader=ts-node/esm mocha tests/**/*.test.ts"
   },
+  "type": "module",
   "dependencies": {
     "aws-amplify": "^6.6.6",
     "next": "14.2.15",
@@ -17,18 +19,25 @@
   "devDependencies": {
     "@aws-amplify/backend": "^1.5.1",
     "@aws-amplify/backend-cli": "^1.3.0",
-    "@types/node": "^20",
+    "@types/chai": "^5.0.1",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20.17.9",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/selenium-webdriver": "^4.1.27",
     "aws-cdk": "^2.164.0",
     "aws-cdk-lib": "^2.164.0",
+    "chai": "^5.1.2",
     "constructs": "^10.4.2",
     "esbuild": "^0.24.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.15",
+    "mocha": "^11.0.1",
     "postcss": "^8",
+    "selenium-webdriver": "^4.27.0",
     "tailwindcss": "^3.4.14",
+    "ts-node": "^10.9.2",
     "tsx": "^4.19.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   }
 }

frontend/tests/mocha.opts

@@ -0,0 +1,2 @@
+--require ts-node/register
+tests/**/*.test.ts

frontend/tests/selenium/recommend.test.ts

@@ -0,0 +1,32 @@
+import { Builder, By, until, WebDriver, WebElement } from "selenium-webdriver";
+import { expect } from "chai";
+
+describe("Recommendation Feature Tests", function () {
+  let driver: WebDriver; // Replace 'any' with 'WebDriver'
+
+  before(async function () {
+    driver = await new Builder().forBrowser("chrome").build();
+  });
+
+  after(async function () {
+    await driver.quit();
+  });
+
+  it("should return package recommendations", async function () {
+    await driver.get("https://www.teamfivepackages.com/recommend");
+
+    const inputField: WebElement = await driver.findElement(By.id("recommend-description-input"));
+    await inputField.sendKeys("A tool for web development");
+
+    const recommendButton: WebElement = await driver.findElement(By.id("recommend-button"));
+    await recommendButton.click();
+
+    const recommendations: WebElement = await driver.wait(
+      until.elementLocated(By.id("recommend-results")),
+      5000
+    );
+
+    const items: WebElement[] = await recommendations.findElements(By.tagName("li"));
+    expect(items.length).to.be.greaterThan(0);
+  });
+});

frontend/tests/selenium/search.test.ts

@@ -0,0 +1,29 @@
+import { Builder, By, until, WebDriver, WebElement } from "selenium-webdriver";
+import { expect } from "chai";
+
+describe("Search Package Tests", function () {
+  let driver: WebDriver; 
+
+  before(async function () {
+    driver = await new Builder().forBrowser("chrome").build();
+  });
+
+  after(async function () {
+    await driver.quit();
+  });
+
+  it("should return results for a valid package search", async function () {
+    await driver.get("https://www.teamfivepackages.com");
+
+    const searchBar: WebElement = await driver.findElement(By.id("express")); // Replace 'any' with 'WebElement'
+    await searchBar.sendKeys("popular-package");
+    await searchBar.sendKeys("\n");
+
+    const results: WebElement = await driver.wait(
+      until.elementLocated(By.id("search-results")),
+      5000
+    );
+    const text: string = await results.getText(); // Ensure 'text' is a string
+    expect(text).to.include("popular-package");
+  });
+});

frontend/tests/selenium/submit.test.ts

@@ -0,0 +1,32 @@
+import { Builder, By, until, WebDriver, WebElement } from "selenium-webdriver";
+import { expect } from "chai";
+
+describe("Submit Package Tests", function () {
+  let driver: WebDriver; // Replace 'any' with 'WebDriver'
+
+  before(async function () {
+    driver = await new Builder().forBrowser("chrome").build();
+  });
+
+  after(async function () {
+    await driver.quit();
+  });
+
+  it("should submit a package successfully", async function () {
+    await driver.get("https://www.teamfivepackages.com/submit");
+
+    // Find and interact with elements
+    await driver.findElement(By.id("package-name-input")).sendKeys("test-package");
+    await driver.findElement(By.id("package-description-input")).sendKeys("This is a test package.");
+    await driver.findElement(By.id("package-tags-input")).sendKeys("test, selenium");
+    await driver.findElement(By.id("submit-button")).click();
+
+    // Wait for success message and get text
+    const successMessage: WebElement = await driver.wait(
+      until.elementLocated(By.id("success-message")),
+      5000
+    );
+    const text: string = await successMessage.getText(); // Ensure 'text' is a string
+    expect(text).to.include("Package submitted successfully");
+  });
+});

frontend/tests/selenium/website.test.ts

@@ -0,0 +1,48 @@
+import { Builder, By, until, WebDriver } from 'selenium-webdriver';
+import { expect } from 'chai';
+import 'mocha';
+
+describe('Team Five Packages Website', function () {
+    let driver: WebDriver;
+
+    // Initialize WebDriver
+    before(async function () {
+      driver = await new Builder().forBrowser('chrome').build();
+    });
+
+
+    it('should load the homepage with correct title', async function () {
+        await driver.get('https://www.teamfivepackages.com');
+        const title = await driver.getTitle();
+        expect(title).to.include('Team Five Packages'); // Replace with expected title
+    });
+
+
+    it('should navigate to the Packages page', async function () {
+        const packagesLink = await driver.findElement(By.linkText('Packages'));
+        await packagesLink.click();
+
+        await driver.wait(until.urlContains('/packages'), 5000); // Adjust timeout as needed
+        const currentUrl = await driver.getCurrentUrl();
+        expect(currentUrl).to.include('/packages');
+    });
+
+
+    it('should search for a package and display results', async function () {
+    const searchBox = await driver.findElement(By.name('search')); // Adjust selector
+    await searchBox.sendKeys('example-package');
+
+    const searchButton = await driver.findElement(By.css('button[type="submit"]'));
+    await searchButton.click();
+
+    await driver.wait(until.elementLocated(By.css('.package-result')), 5000); // Adjust selector
+    const results = await driver.findElements(By.css('.package-result'));
+    expect(results.length).to.be.greaterThan(0); // Ensure results are displayed
+    });
+
+
+  // Quit WebDriver after tests
+  after(async function () {
+    await driver.quit();
+  });
+});

frontend/tsconfig.json

@@ -1,16 +1,22 @@
 {
+  "ts-node": {
+    "esm": true
+  },
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "bundler",
+    "target": "ESNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "typeRoots": ["./node_modules/@types", "./types"],
+    "types": ["node", "mocha"],
     "incremental": true,
     "plugins": [
       {
@@ -19,8 +25,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    } 
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tests/**/*.ts"],
   "exclude": ["node_modules"]
 }