Setup backend and updated workflow for publishing both frontend and backend to ghcr #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

saisab29 merged 22 commits into master from ghcr_push_try

Jan 3, 2025

.dockerignore

-Original file line number
+Diff line change
@@ -1,5 +1,4 @@
     .git
     .gitignore
-    Dockerfile
     node_modules/
     **/__tests__

.github/workflows/publish-ghcr-stack.yml

-Original file line number
+Diff line change
@@ -0,0 +1,97 @@
+    name: Create and publish Docker Compose stack to ghcr
+    on:
+      workflow_run:
+        workflows: ["Run Tests"]
+        types:
+          - completed
+    env:
+      REGISTRY: ghcr.io
+      BACKEND_IMAGE_NAME: ${{ github.repository }}-backend
+      FRONTEND_IMAGE_NAME: ${{ github.repository }}-frontend
+    jobs:
+      build-and-push-images:
+        runs-on: ubuntu-latest
+        permissions:
+          contents: read
+          packages: write
+          attestations: write
+          id-token: write
+        steps:
+          - name: Checkout repository
+            uses: actions/checkout@v4
+            with:
+              fetch-depth: 0
+          - name: Get latest tag and commit distance
+            id: get_version_info
+            run: |
+              # Get the latest tag
+              LATEST_TAG=$(git describe --tags --abbrev=0)
+              # Remove 'v' prefix from latest tag
+              BASE_VERSION=${LATEST_TAG#v}
+              # Get the number of commits since the last tag
+              COMMIT_DISTANCE=$(git rev-list --count ${LATEST_TAG}..HEAD)
+              # Construct new version with build number
+              NEW_VERSION="${BASE_VERSION}.${COMMIT_DISTANCE}"
+              echo "version=${NEW_VERSION}" >> $GITHUB_OUTPUT
+              echo "Generated version: ${NEW_VERSION}"
+          - name: Log in to the Container registry
+            uses: docker/login-action@v3
+            with:
+              registry: ${{ env.REGISTRY }}
+              username: ${{ github.actor }}
+              password: ${{ secrets.GITHUB_TOKEN }}
+          # Build and push backend image
+          - name: Extract metadata for Backend
+            id: meta-backend
+            uses: docker/metadata-action@v5
+            with:
+              images: ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE_NAME }}
+              tags: |
+                type=raw,value=${{ steps.get_version_info.outputs.version }}
+                type=raw,value=latest
+          - name: Build and push Backend image
+            id: push-backend
+            uses: docker/build-push-action@v5
+            with:
+              context: ./backend/api
+              file: ./backend/api/Dockerfile
+              push: true
+              tags: ${{ steps.meta-backend.outputs.tags }}
+              labels: ${{ steps.meta-backend.outputs.labels }}
+              build-args: |
+                DATABASE_URL=postgresql://admin:saisab@postgres:5432/rust_sqlx?schema=public
+          # Build and push frontend image
+          - name: Extract metadata for Frontend
+            id: meta-frontend
+            uses: docker/metadata-action@v5
+            with:
+              images: ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE_NAME }}
+              tags: |
+                type=raw,value=${{ steps.get_version_info.outputs.version }}
+                type=raw,value=latest
+          - name: Build and push Frontend image
+            id: push-frontend
+            uses: docker/build-push-action@v5
+            with:
+              context: .
+              file: ./Dockerfile
+              push: true
+              tags: ${{ steps.meta-frontend.outputs.tags }}
+              labels: ${{ steps.meta-frontend.outputs.labels }}
+              build-args: |
+                API_URL=http://backend:8000
+                NODE_ENV=production

.github/workflows/publish-ghcr.yml

This file was deleted.

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -38,3 +38,5 @@ yarn-error.log* @@
     # typescript
     *.tsbuildinfo
     next-env.d.ts
+    /target

__tests__/Home.test.tsx

-Original file line number
+Diff line change
@@ -1,143 +1,46 @@
-    import { render, screen, fireEvent } from "@testing-library/react";
-    import Home from "../src/app/page";
+    // __tests__/Home.test.tsx
+    import { render, screen } from "@testing-library/react";
+    import Home from "@/app/page";
     import "@testing-library/jest-dom";
-    // Mock data (assuming 10 projects for pagination test)
-    jest.mock("../src/data.json", () => [
+    // Mock fetch
+    global.fetch = jest.fn();
+    const mockProjects = [
       {
         id: "1",
-        projectName: "Project 1",
-        imageUrl: "/path/to/image1.jpg",
-        subImageUrl: "/path/to/subimage1.jpg",
+        projectname: "Project 1",
+        projecturl: "#",
+        imageurl: "/path/to/image1.jpg",
+        subimageurl: "/path/to/subimage1.jpg",
         description: "Description 1",
-        url: "#",
-      },
-      {
-        id: "2",
-        projectName: "Project 2",
-        imageUrl: "/path/to/image2.jpg",
-        subImageUrl: "/path/to/subimage2.jpg",
-        description: "Description 2",
-        url: "#",
-      },
-      {
-        id: "3",
-        projectName: "Project 3",
-        imageUrl: "/path/to/image3.jpg",
-        subImageUrl: "/path/to/subimage3.jpg",
-        description: "Description 3",
-        url: "#",
-      },
-      {
-        id: "4",
-        projectName: "Project 4",
-        imageUrl: "/path/to/image4.jpg",
-        subImageUrl: "/path/to/subimage4.jpg",
-        description: "Description 4",
-        url: "#",
-      },
-      {
-        id: "5",
-        projectName: "Project 5",
-        imageUrl: "/path/to/image5.jpg",
-        subImageUrl: "/path/to/subimage5.jpg",
-        description: "Description 5",
-        url: "#",
+        about: "About 1",
+        createdAt: "2024-01-01",
+        published: true,
+        updatedAt: "2024-01-01",
       },
-      {
-        id: "6",
-        projectName: "Project 6",
-        imageUrl: "/path/to/image6.jpg",
-        subImageUrl: "/path/to/subimage6.jpg",
-        description: "Description 6",
-        url: "#",
-      },
-      {
-        id: "7",
-        projectName: "Project 7",
-        imageUrl: "/path/to/image7.jpg",
-        subImageUrl: "/path/to/subimage7.jpg",
-        description: "Description 7",
-        url: "#",
-      },
-      {
-        id: "8",
-        projectName: "Project 8",
-        imageUrl: "/path/to/image8.jpg",
-        subImageUrl: "/path/to/subimage8.jpg",
-        description: "Description 8",
-        url: "#",
-      },
-      {
-        id: "9",
-        projectName: "Project 9",
-        imageUrl: "/path/to/image9.jpg",
-        subImageUrl: "/path/to/subimage9.jpg",
-        description: "Description 9",
-        url: "#",
-      },
-    ]);
+    ];
     describe("Home Page", () => {
-      test("renders the correct number of cards for the current page", () => {
-        render(<Home />);
-        // Initially, it should show the first 8 cards (cards per page = 8)
-        const cards = screen.getAllByRole("link");
-        expect(cards).toHaveLength(8);
-        // Check the first card's text
-        expect(screen.getByText("Project 1")).toBeInTheDocument();
-      });
-      test("renders 2nd page correctly when Next is clicked", () => {
-        render(<Home />);
-        // Click Next to go to the second page
-        const nextButton = screen.getByText("Next");
-        fireEvent.click(nextButton);
-        // It should now show cards 9 and 10
-        const cards = screen.getAllByRole("link");
-        expect(cards).toHaveLength(1); // Since there are only 9 cards, the second page will have only 1 card.
-        expect(screen.getByText("Project 9")).toBeInTheDocument();
-      });
-      test("disables the Previous button on the first page", () => {
-        render(<Home />);
-        // The Previous button should be disabled on the first page
-        const prevButton = screen.getByText("Previous");
-        expect(prevButton).toBeDisabled();
+      beforeEach(() => {
+        (global.fetch as jest.Mock).mockResolvedValue({
+          ok: true,
+          json: async () => ({
+            projects: mockProjects,
+            results: mockProjects.length,
+            status: "success",
+          }),
+        });
       });
-      test("disables the Next button on the last page", () => {
-        render(<Home />);
-        let nextButton = screen.getByText("Next") as HTMLButtonElement;
-        // Loop until the Next button becomes disabled
-        while (!nextButton.disabled) {
-          fireEvent.click(nextButton);
-          nextButton = screen.getByText("Next") as HTMLButtonElement;
-        }
-        // Once on the last page, the Next button should be disabled
-        expect(nextButton).toBeDisabled();
+      it("renders the page", async () => {
+        render(await Home());
+        expect(screen.getByText("Project 1")).toBeInTheDocument();
       });
-      test("navigates correctly when page numbers are clicked", () => {
-        render(<Home />);
-        // Check if the second page button is clickable
-        const page2Button = screen.getByText("2");
-        fireEvent.click(page2Button);
-        // After clicking the page 2 button, it should show the next set of cards
-        const cards = screen.getAllByRole("link");
-        expect(cards).toHaveLength(1); // Since there are only 9 cards, the second page will have 1 card.
-        expect(screen.getByText("Project 9")).toBeInTheDocument();
-      });
+      // it("handles API error gracefully", async () => {
+      //   (global.fetch as jest.Mock).mockRejectedValueOnce(new Error("API Error"));
+      //   render(await Home());
+      //   expect(screen.getByText("No projects available.")).toBeInTheDocument();
+      // });
     });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup backend and updated workflow for publishing both frontend and backend to ghcr #3

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!