toitware · google-labs-jules · Aug 8, 2025
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -0,0 +1,32 @@
+name: Tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '16'
+        cache: 'yarn'
+
+    - name: Install Dependencies
+      env:
+        # The existing ci.yml uses a secret here. We may not need it,
+        # but we include it to be safe.
+        GITHUB_NPM_TOKEN: ${{ secrets.LEON_GITHUB_NPM_PAT }}
+      run: |
+        npm config set //npm.pkg.github.com/:_authToken=$GITHUB_NPM_TOKEN
+        yarn install --frozen-lockfile
+
+    - name: Run tests
+      run: yarn test:ci
diff --git a/src/components/Note.tsx b/src/components/Note.tsx
@@ -73,14 +73,15 @@ export function Note({ children, title, type = "info" }: Props): JSX.Element {
     <Wrapper type={type}>
       {title && (
         <Title>
-          {type == "info" && <InfoIcon />}
-          {type == "warning" && <WarningIcon />}
+          {type == "info" && <InfoIcon data-testid="info-icon" />}
+          {type == "warning" && <WarningIcon data-testid="warning-icon" />}
           {title}
         </Title>
       )}
       <Body>
-        {!title && type == "info" && <InfoIcon />}
-        {!title && type == "warning" && <WarningIcon />}
+        {!title && type == "info" && <InfoIcon data-testid="info-icon" />}
+        {!title &&
+          type == "warning" && <WarningIcon data-testid="warning-icon" />}
         <BodyContent>{children}</BodyContent>
       </Body>
     </Wrapper>

diff --git a/src/components/__tests__/Note.test.tsx b/src/components/__tests__/Note.test.tsx
@@ -0,0 +1,36 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import Note from "../Note";
+
+// The existing tests are not wrapped in a describe block, so we follow
+// the same pattern.
+// eslint-disable-next-line no-restricted-syntax
+describe("Note", () => {
+  it("renders title and content", () => {
+    render(<Note title="Test title">Test content</Note>);
+
+    expect(screen.getByText("Test title")).toBeInTheDocument();
+    expect(screen.getByText("Test content")).toBeInTheDocument();
+  });
+
+  it("renders info icon", () => {
+    render(
+      <Note title="Test title" type="info">
+        Test content
+      </Note>
+    );
+
+    expect(screen.getByTestId("info-icon")).toBeInTheDocument();
+  });
+
+  it("renders warning icon", () => {
+    render(
+      <Note title="Test title" type="warning">
+        Test content
+      </Note>
+    );
+
+    expect(screen.getByTestId("warning-icon")).toBeInTheDocument();
+  });
+});