Shared configs/workflows/loader (#152)

* use the loader in build

* add Logos tests

* update readme

* fix lockfile

* use release-package type config.

* lint

* update coverage

* lint ignore

Author: thedannywahl

.github/workflows/deploy-apps.yml

@@ -14,12 +14,17 @@ concurrency:
   group: 'pages'
   cancel-in-progress: true
 
+env:
+  CI: 1
+  UPDATE: 1
+
 jobs:
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -39,25 +44,39 @@ jobs:
           fi
           if ! git diff --name-only $DIFF_RANGE | grep '^apps/' ; then
             echo "No changes in ./apps directory. Exiting early."
-            echo "skip_steps=true" >> $GITHUB_OUTPUT
+            echo "skip_steps=true" >> "$GITHUB_OUTPUT"
           else
-            echo "skip_steps=false" >> $GITHUB_OUTPUT
+            echo "skip_steps=false" >> "$GITHUB_OUTPUT"
           fi
 
-      - name: Set up Node
+      - name: Set up Node (v24) with pnpm cache
         if: steps.changes.outputs.skip_steps != 'true'
         uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+          cache-dependency-path: |
+            pnpm-lock.yaml
+            **/pnpm-lock.yaml
 
-      - name: Setup pnpm
+      - name: Install pnpm
         if: steps.changes.outputs.skip_steps != 'true'
-        uses: pnpm/[email protected]          
+        run: npm install -g pnpm
+
+      - name: Ensure pnpm store exists for caching
+        if: steps.changes.outputs.skip_steps != 'true'
+        shell: bash
+        run: |
+          STORE="$(pnpm store path)"
+          echo "pnpm store path: $STORE"
+          mkdir -p "$STORE"
 
       - name: Install dependencies
         if: steps.changes.outputs.skip_steps != 'true'
-        run: pnpm i
-      - name: Build
+        run: pnpm install --frozen-lockfile
+
+      - name: Build apps (with vite-node loader)
         if: steps.changes.outputs.skip_steps != 'true'
         env:
           NODE_OPTIONS: --import=${{ github.workspace }}/plugins/vite-node.plugin.loader.mjs

apps/nutritionfacts/coverage/coverage.yml

@@ -1,16 +1,16 @@
 coverage:
   totals:
-    statements: 23.12%
-    branches: 14.9%
-    functions: 20.83%
-    lines: 23.95%
-    total: 20.7%
+    statements: 0%
+    branches: 0%
+    functions: 0%
+    lines: 0%
+    total: 0%
   src:
     totals:
-      statements: 45.63%
-      branches: 44.17%
-      functions: 43.75%
-      lines: 45.63%
+      statements: 0%
+      branches: 15%
+      functions: 6.25%
+      lines: 0%
     "App.tsx":
       statements: 0%
       branches: 0%
@@ -69,30 +69,33 @@ coverage:
           lines: 0%
           uncovered_line_numbers: "4-19"
     "Main.tsx":
-      statements: 87.5%
-      branches: 83.33%
-      functions: 100%
-      lines: 87.5%
-      uncovered_line_numbers: "26"
+      statements: 0%
+      branches: 0%
+      functions: 0%
+      lines: 0%
+      uncovered_line_numbers: "6-26"
     assets:
       "Layout.ts":
-        statements: 100%
+        statements: 0%
         branches: 100%
-        functions: 100%
-        lines: 100%
+        functions: 0%
+        lines: 0%
+        uncovered_line_numbers: "9-15"
       "Logos.tsx":
-        statements: 100%
-        branches: 100%
-        functions: 100%
-        lines: 100%
+        statements: 0%
+        branches: 0%
+        functions: 0%
+        lines: 0%
+        uncovered_line_numbers: "23-244"
       "colors.ts":
-        statements: 100%
+        statements: 0%
         branches: 100%
         functions: 100%
-        lines: 100%
+        lines: 0%
+        uncovered_line_numbers: "10"
       "consts.tsx":
-        statements: 80%
-        branches: 33.33%
+        statements: 0%
+        branches: 0%
         functions: 0%
-        lines: 80%
-        uncovered_line_numbers: "64"
+        lines: 0%
+        uncovered_line_numbers: "14-79"

apps/nutritionfacts/index.test.ts

@@ -1,55 +1,58 @@
+
+import { beforeEach, describe, expect, it } from "vitest";
 // @ts-expect-error Vite raw import
-import html from "./index.html?raw"
-import { describe, it, expect, beforeEach } from "vitest"
-
-describe('index.html', () => {
-  beforeEach(() => {
-    document.documentElement.innerHTML = html
-    document.documentElement.setAttribute('lang', 'en')
-  })
-
-  it('should have correct doctype', () => {
-    // jsdom does not expose doctype, so we skip this in jsdom
-    expect(document.documentElement.lang).toBe('en')
-  })
-
-  it('should have correct meta tags', () => {
-    const charset = document.querySelector('meta[charset]')
-    expect(charset).not.toBeNull()
-    expect(charset?.getAttribute('charset')).toBe('UTF-8')
-
-    const viewport = document.querySelector('meta[name="viewport"]')
-    expect(viewport).not.toBeNull()
-    expect(viewport?.getAttribute('content')).toBe('width=device-width, initial-scale=1.0')
-
-    const version = document.querySelector('meta[name="application-version"]')
-    expect(version).not.toBeNull()
-    expect(version?.getAttribute('content')).toBe('%VITE_PACKAGE_VERSION%')
-
-    const name = document.querySelector('meta[name="application-name"]')
-    expect(name).not.toBeNull()
-    expect(name?.getAttribute('content')).toBe('%VITE_PACKAGE_NAME%')
-  })
-
-  it('should have favicon link', () => {
-    const favicon = document.querySelector('link[rel="icon"]')
-    expect(favicon).not.toBeNull()
-    expect(favicon?.getAttribute('type')).toBe('image/svg+xml')
-    expect(favicon?.getAttribute('href')).toBe('/IgniteAI.svg')
-  })
-
-  it('should have correct title', () => {
-    expect(document.title).toBe('IgniteAI Nutrition Facts')
-  })
-
-  it('should have root div', () => {
-    const root = document.getElementById('root')
-    expect(root).not.toBeNull()
-  })
-
-  it('should load main script as module', () => {
-    const script = document.querySelector('script[type="module"]')
-    expect(script).not.toBeNull()
-    expect(script?.getAttribute('src')).toBe('/src/Main.tsx')
-  })
-})
+import html from "./index.html?raw";
+
+describe("index.html", () => {
+	beforeEach(() => {
+		document.documentElement.innerHTML = html;
+		document.documentElement.setAttribute("lang", "en");
+	});
+
+	it("should have correct doctype", () => {
+		// jsdom does not expose doctype, so we skip this in jsdom
+		expect(document.documentElement.lang).toBe("en");
+	});
+
+	it("should have correct meta tags", () => {
+		const charset = document.querySelector("meta[charset]");
+		expect(charset).not.toBeNull();
+		expect(charset?.getAttribute("charset")).toBe("UTF-8");
+
+		const viewport = document.querySelector('meta[name="viewport"]');
+		expect(viewport).not.toBeNull();
+		expect(viewport?.getAttribute("content")).toBe(
+			"width=device-width, initial-scale=1.0",
+		);
+
+		const version = document.querySelector('meta[name="application-version"]');
+		expect(version).not.toBeNull();
+		expect(version?.getAttribute("content")).toBe("%VITE_PACKAGE_VERSION%");
+
+		const name = document.querySelector('meta[name="application-name"]');
+		expect(name).not.toBeNull();
+		expect(name?.getAttribute("content")).toBe("%VITE_PACKAGE_NAME%");
+	});
+
+	it("should have favicon link", () => {
+		const favicon = document.querySelector('link[rel="icon"]');
+		expect(favicon).not.toBeNull();
+		expect(favicon?.getAttribute("type")).toBe("image/svg+xml");
+		expect(favicon?.getAttribute("href")).toBe("/IgniteAI.svg");
+	});
+
+	it("should have correct title", () => {
+		expect(document.title).toBe("IgniteAI Nutrition Facts");
+	});
+
+	it("should have root div", () => {
+		const root = document.getElementById("root");
+		expect(root).not.toBeNull();
+	});
+
+	it("should load main script as module", () => {
+		const script = document.querySelector('script[type="module"]');
+		expect(script).not.toBeNull();
+		expect(script?.getAttribute("src")).toBe("/src/Main.tsx");
+	});
+});

apps/nutritionfacts/package.json

@@ -1,32 +1,32 @@
 {
-  "browserslist": [
-    "extends @instructure/browserslist-config-instui"
-  ],
-  "dependencies": {
-    "@instructure.ai/aiinfo": "^1.6.0",
-    "@instructure/ui": "^11.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@instructure.ai/shared-configs": "workspace:^"
-  },
-  "name": "@instructure.ai/nutritionfacts",
-  "private": true,
-  "repository": {
-    "directory": "apps/nutritionfacts",
-    "type": "git",
-    "url": "https://github.com/instructure/instructure.ai"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "lint": "pnpm biome check",
-    "preview": "vite preview",
-    "test": "pnpm vitest run",
-    "typecheck": "tsgo --noEmit",
-    "update-cache": "vite-node ./scripts/updateCache.mts"
-  },
-  "type": "module",
-  "version": "1.6.0"
+	"browserslist": [
+		"extends @instructure/browserslist-config-instui"
+	],
+	"dependencies": {
+		"@instructure.ai/aiinfo": "workspace:^",
+		"@instructure/ui": "^11.0.1",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0"
+	},
+	"devDependencies": {
+		"@instructure.ai/shared-configs": "workspace:^"
+	},
+	"name": "@instructure.ai/nutritionfacts",
+	"private": true,
+	"repository": {
+		"directory": "apps/nutritionfacts",
+		"type": "git",
+		"url": "https://github.com/instructure/instructure.ai"
+	},
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"lint": "pnpm biome check",
+		"preview": "vite preview",
+		"test": "pnpm vitest run",
+		"typecheck": "tsgo --noEmit",
+		"update-cache": "vite-node ./scripts/updateCache.mts"
+	},
+	"type": "module",
+	"version": "1.6.0"
 }

apps/nutritionfacts/src/Components/Layout/Divider.test.tsx

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Set up the mock before importing Divider
+vi.mock("@instructure/ui", () => {
+	const ViewMock = vi.fn(({ children, ...props }) => (
+		<div data-testid="view-mock" {...props}>
+			{children}
+		</div>
+	));
+	return { View: ViewMock };
+});
+
+import { Divider } from "./Divider";
+
+describe("Divider", () => {
+	let ViewMock: ReturnType<typeof vi.fn>;
+
+	beforeEach(async () => {
+		// Dynamically import the mock after vi.mock is set up
+		const mocked =
+			await vi.importMock<typeof import("@instructure/ui")>("@instructure/ui");
+		ViewMock = mocked.View as unknown as ReturnType<typeof vi.fn>;
+		ViewMock.mockClear();
+	});
+
+	it("renders a View with correct props", async () => {
+		const { container, getByTestId } = require("@testing-library/react").render(
+			<Divider />,
+		);
+		expect(ViewMock).toHaveBeenCalledTimes(1);
+		const call = ViewMock.mock.calls[0][0];
+		expect(call.as).toBe("div");
+		expect(call.borderColor).toBe("primary");
+		expect(call.borderWidth).toBe("medium 0 0");
+		expect(call.margin).toBe("0 0 medium");
+		expect(getByTestId("view-mock")).toBeTruthy();
+		expect(
+			container.querySelector("div[data-testid='view-mock']"),
+		).not.toBeNull();
+	});
+
+	it("does not render children", async () => {
+		require("@testing-library/react").render(<Divider />);
+		const call = ViewMock.mock.calls[0][0];
+		expect(call.children).toBeUndefined();
+	});
+});