add cypress e2e tests (#92)

Closes #6

.github/workflows/ci.yml

@@ -39,6 +39,25 @@ jobs:
       - name: Run Smoke Tests
         run: make test-smoke
 
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Google Cloud Auth
+        uses: google-github-actions/auth@6fc4af4b145ae7821d527454aa9bd537d1f2dc5f # v2.1.7
+        with:
+          project_id: "groovy-momentum-434802-g9"
+          workload_identity_provider: ${{ secrets.WORKLOAD_IDENTITY_PROVIDER }}
+
+      - name: Adjust permissions of GCP credentials file
+        # allows user in the docker container used by e2e tests to read the file
+        run: chmod 644 "$GOOGLE_APPLICATION_CREDENTIALS"
+
+      - name: Run E2E Tests
+        run: make test-e2e
+
   lint:
     runs-on: ubuntu-latest
     steps:

Makefile

@@ -12,7 +12,17 @@ test-smoke:
 	./scripts/smoke-tests.sh
 	@echo "================FINISHED RUNNING SMOKE TESTS================\n"
 
-test: test-unit test-smoke
+test-e2e:
+	@echo "================RUNNING E2E TESTS================\n"
+	./scripts/e2e-tests.sh
+	@echo "================FINISHED E2E TESTS================\n"
+
+test-e2e-dev:
+	@echo "================RUNNING E2E TESTS================\n"
+	npm --prefix=ui run test:e2e-dev
+	@echo "================FINISHED E2E TESTS================\n"
+
+test: test-unit test-smoke test-e2e
 
 lint:
 	npm --prefix ui run lint

docker-compose.yml

@@ -4,7 +4,7 @@ services:
       context: .
       platforms:
         - linux/amd64
-    image: oss-contribute:smoke-test
+    image: oss-contribute:test
     container_name: oss-contribute
     ports:
       - "8080:8080"

scripts/e2e-tests.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+set -euo pipefail
+
+BLUE='\033[0;34m'
+NONE='\033[0m'
+
+cleanup() {
+    echo -e "${BLUE}=== Application logs ===${NONE}"
+    docker logs oss-contribute
+    echo -e "${BLUE}=== Application logs ===${NONE}"
+    docker compose down
+}
+
+trap cleanup EXIT
+
+health_check() {
+  echo "Waiting for app to be ready..."
+
+  start_time=$(date +%s)
+
+  until curl -fsL "http://localhost:8080" > /dev/null; do
+    sleep 2
+    current_time=$(date +%s)
+    elapsed_time=$((current_time - start_time))
+    if [ $elapsed_time -ge 10 ]; then
+        echo "Error: Timed out waiting for app to become healthy."
+        exit 1
+    fi
+  done
+
+  echo "app is ready!"
+}
+
+npm --prefix ui ci
+npm --prefix ui run build
+CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o ./bin/api
+
+docker compose up -d --build
+health_check
+npm --prefix ui run test:e2e

ui/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+	e2e: {
+		baseUrl: "http://localhost:8080/",
+		supportFile: false,
+	},
+});

ui/cypress/e2e/ui.cy.ts

@@ -0,0 +1,68 @@
+describe("Check Page Title", () => {
+	it("has title", () => {
+		cy.visit("/");
+		cy.title().should("eq", "Explore Top Open Source Projects");
+	});
+});
+
+describe("GitHub Documentation Link", () => {
+	it("should open the correct GitHub documentation link", () => {
+		cy.visit("/");
+		cy.contains("Learn more in the GitHub documentation").invoke("removeAttr", "target").click();
+		// https://docs.cypress.io/app/guides/cross-origin-testing#External-Navigation
+		cy.origin("https://docs.github.com", () => {
+			cy.url().should(
+				"eq",
+				"https://docs.github.com/en/issues/tracking-your-work-with-issues/using-issues/filtering-and-searching-issues-and-pull-requests#filtering-issues-and-pull-requests-by-labels"
+			);
+		});
+	});
+});
+
+describe("Navbar Link", () => {
+	it("clicking 'osscontribute.com' in navbar takes user to top of the page", () => {
+		cy.visit("/");
+		cy.scrollTo(0, 500);
+		cy.contains("osscontribute.com").click();
+		cy.window().should("have.property", "scrollY", 0);
+	});
+});
+
+describe("Filter Dropdown", () => {
+	it("clicking each language in the filter dropdown shows at least 1 card", () => {
+		cy.visit("/");
+		cy.get("#language-select").click();
+		cy.get('li[role="option"]').each(($language) => {
+			cy.get("#language-select").click({ force: true });
+			cy.wrap($language).click();
+			cy.get("a.MuiCard-root").should("have.length.greaterThan", 0);
+		});
+	});
+});
+
+describe("Pagination", () => {
+	beforeEach(() => {
+		cy.visit("/");
+	});
+
+	it("should navigate to the next page and show different content", () => {
+		cy.get("a.MuiCard-root").should("have.length", 20);
+		cy.get('button[aria-label="Go to next page"]').click();
+		cy.get("a.MuiCard-root").should("have.length", 20);
+	});
+
+	it("should navigate to a specific page and show correct content", () => {
+		cy.get('button[aria-label="Go to page 2"]').click();
+		cy.get("a.MuiCard-root").should("have.length", 20);
+	});
+
+	it("should show the correct number of cards when filtering", () => {
+		cy.get("#language-select").click({ force: true });
+		cy.get('li[role="option"]').contains("TypeScript").click();
+		cy.get("a.MuiCard-root").should("have.length.greaterThan", 0);
+
+		// ensure pagination still works after filtering
+		cy.get('button[aria-label="Go to next page"]').click();
+		cy.get("a.MuiCard-root").should("have.length.greaterThan", 0);
+	});
+});