Cleanup gitlab test

[ci skip]

.dockerignore

@@ -16,11 +16,11 @@
 **/compose*
 **/Dockerfile*
 **/node_modules
+!.next/standalone/node_modules
 **/npm-debug.log
 **/obj
 **/secrets.dev.yaml
 **/values.dev.yaml
-**/.next
 README.md
 config/
 k3d/

.github/workflows/docker-publish.yml

@@ -1,9 +1,4 @@
-name: Docker
-
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
+name: Docker CI
 
 on:
   schedule:
@@ -13,7 +8,6 @@ on:
       - main
       - feature/**
       - dev
-    # Publish semver tags as releases.
     tags: [ 'v*.*.*' ]
     paths-ignore:
       - 'docs/**'
@@ -26,89 +20,56 @@ on:
   merge_group:
 
 env:
-  # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
 
-
 jobs:
   pre-commit:
     name: Linting Checks
     runs-on: ubuntu-22.04
     steps:
-      -
-        name: Checkout repository
+      - name: Checkout repository
         uses: actions/checkout@v4
-      -
-        name: Install python
+
+      - name: Install python
         uses: actions/setup-python@v5
         with:
           python-version: 3.x
-      -
-        name: Check files
+
+      - name: Check files
         uses: pre-commit/action@v3.0.1
-      -
-        name: Install pnpm
+
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
           run_install: false
-      -
-        name: Install Node.js
+
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
-      -
-        name: Install dependencies
+
+      - name: Install dependencies
         run: pnpm install
-      -
-        name: Lint frontend
+
+      - name: Lint frontend
         run: pnpm run lint
 
   build:
     name: Docker Build & Push
-    if:  github.repository == 'gethomepage/homepage'
+    if: github.repository == 'gethomepage/homepage'
     runs-on: self-hosted
-    needs:
-      - pre-commit
+    needs: [ pre-commit ]
     permissions:
       contents: read
       packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
       id-token: write
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      # Login to Docker Registry
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Login to Docker Hub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      # Setup QEMU
-      # https://github.com/marketplace/actions/docker-setup-buildx#with-qemu
-      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3.6.0
-
-      # Workaround: https://github.com/docker/build-push-action/issues/461
-      - name: Setup Docker buildx
-        uses: docker/setup-buildx-action@v3
-
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
         uses: docker/metadata-action@v5
@@ -119,8 +80,57 @@ jobs:
           flavor: |
             latest=auto
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
+      - name: Next.js build cache
+        uses: actions/cache@v4
+        with:
+          path: .next/cache
+          key: nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx') }}
+          restore-keys: |
+            nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build app
+        run: |
+          NEXT_PUBLIC_BUILDTIME="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.created'] }}" \
+          NEXT_PUBLIC_VERSION="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}" \
+          NEXT_PUBLIC_REVISION="${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}" \
+          pnpm run build
+
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Docker Hub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3.6.0
+
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v3
+
       - name: Build and push Docker image
         id: build-and-push
         uses: docker/build-push-action@v6
@@ -130,18 +140,15 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
+            CI=true
             BUILDTIME=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.created'] }}
             VERSION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}
             REVISION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}
-          # https://github.com/docker/setup-qemu-action#about
-          # platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
           platforms: linux/amd64,linux/arm64
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
 
-      # Temp fix
-      # https://github.com/docker/build-push-action/issues/252
-      # https://github.com/moby/buildkit/issues/1896
+      # https://github.com/docker/build-push-action/issues/252 / https://github.com/moby/buildkit/issues/1896
       - name: Move cache
         run: |
           rm -rf /tmp/.buildx-cache

Dockerfile

@@ -1,67 +1,63 @@
-# Install dependencies only when needed
-FROM docker.io/node:22-alpine AS deps
-
-WORKDIR /app
-
-COPY --link package.json pnpm-lock.yaml* ./
-
-SHELL ["/bin/ash", "-xeo", "pipefail", "-c"]
-RUN apk add --no-cache libc6-compat \
- && apk add --no-cache --virtual .gyp python3 make g++ \
- && npm install -g pnpm
-
-RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm fetch | grep -v "cross-device link not permitted\|Falling back to copying packages from store"
-
-RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm install -r --offline
-
-# Rebuild the source code only when needed
-FROM docker.io/node:22-alpine AS builder
+# =========================
+# Builder Stage
+# =========================
+FROM node:22-slim AS builder
 WORKDIR /app
 
+# Setup
 RUN mkdir config
+COPY . .
 
+ARG CI
 ARG BUILDTIME
 ARG VERSION
 ARG REVISION
+ENV CI=$CI
 
-COPY --link --from=deps /app/node_modules ./node_modules/
-COPY . .
+# Install and build only outside CI
+RUN if [ "$CI" != "true" ]; then \
+      corepack enable && corepack prepare pnpm@latest --activate && \
+      pnpm install --frozen-lockfile --prefer-offline && \
+      NEXT_TELEMETRY_DISABLED=1 \
+      NEXT_PUBLIC_BUILDTIME=$BUILDTIME \
+      NEXT_PUBLIC_VERSION=$VERSION \
+      NEXT_PUBLIC_REVISION=$REVISION \
+      pnpm run build; \
+    else \
+      echo "✅ Using prebuilt app from CI context"; \
+    fi
 
-SHELL ["/bin/ash", "-xeo", "pipefail", "-c"]
-RUN npm install -g pnpm \
- && pnpm run telemetry \
- && NEXT_PUBLIC_BUILDTIME=$BUILDTIME NEXT_PUBLIC_VERSION=$VERSION NEXT_PUBLIC_REVISION=$REVISION pnpm run build
-
-# Production image, copy all the files and run next
-FROM docker.io/node:22-alpine AS runner
-LABEL org.opencontainers.image.title "Homepage"
-LABEL org.opencontainers.image.description "A self-hosted services landing page, with docker and service integrations."
+# =========================
+# Runtime Stage
+# =========================
+FROM node:22-alpine AS runner
+LABEL org.opencontainers.image.title="Homepage"
+LABEL org.opencontainers.image.description="A self-hosted services landing page, with docker and service integrations."
 LABEL org.opencontainers.image.url="https://github.com/gethomepage/homepage"
 LABEL org.opencontainers.image.documentation='https://github.com/gethomepage/homepage/wiki'
 LABEL org.opencontainers.image.source='https://github.com/gethomepage/homepage'
 LABEL org.opencontainers.image.licenses='Apache-2.0'
 
-ENV NODE_ENV=production
-
+# Setup
 WORKDIR /app
 
-# Copy files from context (this allows the files to copy before the builder stage is done).
-COPY --link --chown=1000:1000 package.json next.config.js ./
+# Copy some files from context
 COPY --link --chown=1000:1000 /public ./public/
-
-# Copy files from builder
-COPY --link --from=builder --chown=1000:1000 /app/.next/standalone ./
-COPY --link --from=builder --chown=1000:1000 /app/.next/static/ ./.next/static/
 COPY --link --chmod=755 docker-entrypoint.sh /usr/local/bin/
 
+# Copy only necessary files from the build stage
+COPY --link --from=builder --chown=1000:1000 /app/.next/standalone/ ./
+COPY --link --from=builder --chown=1000:1000 /app/.next/static/ ./.next/static
+
 RUN apk add --no-cache su-exec
 
+ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
 EXPOSE $PORT
 
 HEALTHCHECK --interval=10s --timeout=3s --start-period=20s \
-  CMD wget --no-verbose --tries=1 --spider --no-check-certificate http://127.0.0.1:$PORT/api/healthcheck || exit 1
+  CMD wget --no-verbose --tries=1 --spider http://127.0.0.1:$PORT/api/healthcheck || exit 1
 
 ENTRYPOINT ["docker-entrypoint.sh"]
 CMD ["node", "server.js"]

jest.config.js

@@ -0,0 +1,21 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({ dir: "./" });
+
+const customJestConfig = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleDirectories: ["node_modules"],
+  moduleNameMapper: {
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^widgets/(.*)$": "<rootDir>/src/widgets/$1",
+  },
+  transformIgnorePatterns: ["/node_modules/"],
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "config/"],
+  // collectCoverage: true,
+  // coverageDirectory: "coverage",
+  clearMocks: true,
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.i18n.js

@@ -0,0 +1,45 @@
+import i18n from "i18next";
+import { initReactI18next, setI18n } from "react-i18next";
+import rawTranslationEN from "./public/locales/en/common.json";
+import i18nConfig from "./next-i18next.config.js";
+
+const translationEN = {
+  common: rawTranslationEN,
+};
+
+// Set up formatter service
+i18n.services = i18n.services || {};
+i18n.services.formatter = {
+  add: (name, fn) => {
+    i18n.formatters = i18n.formatters || {};
+    i18n.formatters[name] = fn;
+  },
+  format: (value, format, lng, options) => {
+    return i18n.formatters?.[format]?.(value, lng, options) ?? value;
+  },
+};
+
+// Register custom formatters
+i18nConfig.use[0].init(i18n);
+
+// Initialize i18n
+i18n.use(initReactI18next).init({
+  lng: "en",
+  fallbackLng: "en",
+  debug: false,
+  initImmediate: false, // make sure init is synchronous in tests
+  interpolation: {
+    escapeValue: false,
+    format: (value, format, lng, options) => i18n.services.formatter.format(value, format, lng, options),
+  },
+  resources: {
+    en: translationEN,
+  },
+  ns: ["common"],
+  defaultNS: "common",
+  returnNull: false,
+});
+
+setI18n(i18n);
+
+export default i18n;

jest.setup.js

@@ -0,0 +1,20 @@
+import "@testing-library/jest-dom";
+import "./jest.i18n.js";
+
+jest.mock("utils/proxy/use-widget-api");
+
+jest.mock("next-i18next", () => {
+  const reactI18next = require("react-i18next");
+  const i18n = require("./jest.i18n").default;
+
+  return {
+    useTranslation: () => reactI18next.useTranslation("", { i18n }),
+    Trans: reactI18next.Trans,
+    I18nextProvider: reactI18next.I18nextProvider,
+    appWithTranslation: (Component) => (props) => (
+      <reactI18next.I18nextProvider i18n={i18n}>
+        <Component {...props} />
+      </reactI18next.I18nextProvider>
+    ),
+  };
+});

package.json

@@ -8,7 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "telemetry": "next telemetry disable"
+    "telemetry": "next telemetry disable",
+    "test": "jest"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -46,6 +47,10 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.0.9",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "babel-jest": "^29.7.0",
     "eslint": "^9.21.0",
     "eslint-config-next": "^15.1.7",
     "eslint-config-prettier": "^10.0.2",
@@ -54,10 +59,14 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.5.2",
     "prettier": "^3.5.2",
     "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "^4.0.9",
+    "ts-node": "^10.9.2",
     "typescript": "^5.7.3"
   },
   "optionalDependencies": {

src/utils/proxy/__mocks__/use-widget-api.js

@@ -0,0 +1,13 @@
+let mockResponses = {};
+
+export function __setEndpointMockData(endpoint, response) {
+  mockResponses[endpoint] = response;
+}
+
+export function __clearMocks() {
+  mockResponses = {};
+}
+
+export default function useWidgetAPI(widget, endpoint) {
+  return mockResponses[endpoint] ?? { data: undefined, error: undefined };
+}

src/widgets/customapi/component.jsx

@@ -243,9 +243,17 @@ export default function Component({ service }) {
               </div>
             ) : (
               listItems.map((item, index) => {
-                const itemName = shvl.get(item, name, "");
-                const itemLabel = shvl.get(item, label, "");
-                const itemUrl = target ? target.replace(/\{([^}]+)\}/g, (_, key) => item[key] || "") : null;
+                const itemName = shvl.get(item, name, item[name]) ?? "";
+                const itemLabel = shvl.get(item, label, item[label]) ?? "";
+
+                const itemUrl = target
+                  ? [...target.matchAll(/\{(.*?)\}/g)]
+                      .map((match) => match[1])
+                      .reduce((url, targetTemplate) => {
+                        const value = shvl.get(item, targetTemplate, item[targetTemplate]) ?? "";
+                        return url.replaceAll(`{${targetTemplate}}`, value);
+                      }, target)
+                  : null;
                 const className =
                   "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs";
 

src/widgets/gitlab/__tests__/component.test.jsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import Component from "widgets/gitlab/component";
+import { SettingsContext } from "utils/contexts/settings";
+import React from "react";
+
+import { __setEndpointMockData, __clearMocks } from "utils/proxy/use-widget-api";
+
+const mockSettings = {
+  hideErrors: false,
+};
+
+const service = {
+  name: "Gitlab",
+  widget: {
+    type: "gitlab",
+    key: "gitlabapikey",
+    url: "https://127.0.0.1",
+  },
+};
+
+describe("Gitlab Service Widget", () => {
+  beforeEach(() => {
+    __clearMocks();
+  });
+
+  it("renders while data is pending", () => {
+    render(
+      <SettingsContext.Provider value={{ settings: mockSettings }}>
+        <Component service={service} />
+      </SettingsContext.Provider>,
+    );
+
+    expect(screen.getByText("Groups")).toBeInTheDocument();
+    expect(screen.getByText("Issues")).toBeInTheDocument();
+    expect(screen.getByText("Merge Requests")).toBeInTheDocument();
+    expect(screen.getByText("Projects")).toBeInTheDocument();
+  });
+
+  it("renders with sample data", () => {
+    __setEndpointMockData("counts", {
+      data: {
+        groups_count: 3,
+        issues_count: 7,
+        merge_requests_count: 2,
+        projects_count: 5,
+      },
+    });
+
+    render(
+      <SettingsContext.Provider value={{ settings: {} }}>
+        <Component service={service} />
+      </SettingsContext.Provider>,
+    );
+
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("7")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+});

src/widgets/hoarder/widget.js

@@ -1,5 +1,4 @@
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
-import { asJson } from "utils/proxy/api-helpers";
 
 const widget = {
   api: `{url}/api/v1/{endpoint}`,