Add client checks and binary tests to CI; use Node 22

.github/workflows/ci.yaml

@@ -9,6 +9,25 @@ on:
   #  branches:
   #    - main
 jobs:
+  lint-client:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v7
+      - name: Set up Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: "22"
+      - name: Enable Corepack
+        run: |
+          corepack enable
+      - name: Install client dependencies
+        working-directory: client
+        run: |
+          yarn install --immutable
+      - name: Type check, lint, and check formatting
+        working-directory: client
+        run: |
+          yarn lint:ci
   test:
     runs-on: ${{ matrix.os }}
     strategy:
@@ -33,7 +52,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v7
         with:
-          node-version: "20"
+          node-version: "22"
       - name: Enable Corepack
         run: |
           corepack enable
@@ -47,9 +66,9 @@ jobs:
       - name: Build binary
         run: |
           tox -e binary
-      - name: Test binary runs
+      - name: Test binary
         run: |
-          dist/imagedephi --help
+          tox -e test-binary
       - name: Upload binary artifact
         uses: actions/upload-artifact@v7
         with:

.github/workflows/release.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v7
         with:
-          node-version: "20"
+          node-version: "22"
       - name: Enable Corepack
         run: |
           corepack enable

client/package.json

@@ -9,6 +9,9 @@
     "lint:check": "eslint . --fix ",
     "lint:format": "prettier src  --write",
     "lint": "npm-run-all lint:tsc lint:check lint:format",
+    "lint:ci:check": "eslint . --max-warnings 0",
+    "lint:ci:format": "prettier src --check",
+    "lint:ci": "npm-run-all lint:tsc lint:ci:check lint:ci:format",
     "dev": "NODE_ENV=development vite --port 8080",
     "build:clean": "rimraf ../imagedephi/web_static",
     "build:compile": "vite build --outDir ../imagedephi/web_static",

client/src/HomePage.vue

@@ -24,7 +24,7 @@ const loadExportOptions = () => {
     if (saved) {
       return JSON.parse(saved);
     }
-  } catch (e) {
+  } catch {
     // Ignore parse errors
   }
   return null;
@@ -33,7 +33,7 @@ const loadExportOptions = () => {
 const saveExportOptions = (options: Record<string, unknown>) => {
   try {
     localStorage.setItem("imageDePhiExportOptions", JSON.stringify(options));
-  } catch (e) {
+  } catch {
     // Ignore storage errors
   }
 };
@@ -44,9 +44,13 @@ const exportOptions = ref({
   exportAssociated: savedOptions?.exportAssociated ?? false,
 });
 
-watch(exportOptions, (newVal) => {
-  saveExportOptions(newVal);
-}, { deep: true });
+watch(
+  exportOptions,
+  (newVal) => {
+    saveExportOptions(newVal);
+  },
+  { deep: true },
+);
 
 const progress = ref({
   count: 0,
@@ -181,32 +185,40 @@ onMounted(() => {
             help-text="Custom ruleset to be used for redaction in addition to the baserules."
             :ruleset-modal="rulesetModal || undefined"
           />
-          <StepHeader step-number="4" title="Export Options" help-text="Choose how to handle output files." />
-          <div class="self-stretch px-5 py-3 bg-white border-b border-neutral-100 flex-col justify-start flex gap-2">
+          <StepHeader
+            :step-number="4"
+            title="Export Options"
+            help-text="Choose how to handle output files."
+          />
+          <div
+            class="self-stretch px-5 py-3 bg-white border-b border-neutral-100 flex-col justify-start flex gap-2"
+          >
             <label class="flex items-center gap-2 cursor-pointer">
               <input
+                v-model="exportOptions.rename"
                 type="checkbox"
                 class="checkbox checkbox-accent"
-                v-model="exportOptions.rename"
               />
               <span class="text-sm text-gray-700">Rename files</span>
             </label>
             <label class="flex items-center gap-2 cursor-pointer">
               <input
+                v-model="exportOptions.exportAssociated"
                 type="checkbox"
                 class="checkbox checkbox-accent"
-                v-model="exportOptions.exportAssociated"
               />
-              <span class="text-sm text-gray-700">Export associated images</span>
+              <span class="text-sm text-gray-700"
+                >Export associated images</span
+              >
             </label>
           </div>
           <FileBrowser
             ref="inputModal"
             :modal-id="'inputDirectory'"
             :title="'Input Directory'"
             @update-image-list="
-              (redactionStateFlags.showImageTable = true),
-                (redactionStateFlags.redactionComplete = false)
+              ((redactionStateFlags.showImageTable = true),
+              (redactionStateFlags.redactionComplete = false))
             "
           />
           <FileBrowser
@@ -224,8 +236,11 @@ onMounted(() => {
               type="submit"
               :class="`${!selectedDirectories.inputDirectory || !selectedDirectories.outputDirectory ? 'btn btn-block bg-accent text-white uppercase rounded-lg tooltip' : 'btn btn-block btn-accent text-white uppercase rounded-lg'}`"
               data-tip="Please select input and output directories"
+              :disabled="
+                !selectedDirectories.inputDirectory ||
+                !selectedDirectories.outputDirectory
+              "
               @click="canRedact()"
-              :disabled="!selectedDirectories.inputDirectory || !selectedDirectories.outputDirectory"
             >
               De-phi Images
             </button>

client/src/components/FileBrowser.vue

@@ -69,17 +69,17 @@ onBeforeUnmount(() => {
               class="btn btn-primary float-right text-white uppercase"
               type="button"
               @click="
-                $emit('update-image-list'),
-                  closeModal(),
-                  title !== 'Output Directory'
-                    ? updateTableData({
-                        directory: selectedDirectories.inputDirectory,
-                        rules: selectedDirectories.rulesetDirectory,
-                        limit: 50,
-                        offset: 0,
-                        update: false,
-                      })
-                    : ''
+                ($emit('update-image-list'),
+                closeModal(),
+                title !== 'Output Directory'
+                  ? updateTableData({
+                      directory: selectedDirectories.inputDirectory,
+                      rules: selectedDirectories.rulesetDirectory,
+                      limit: 50,
+                      offset: 0,
+                      update: false,
+                    })
+                  : '')
               "
             >
               Select
@@ -101,8 +101,8 @@ onBeforeUnmount(() => {
                   v-else
                   class="text-blue-700"
                   @click="
-                    updateDirectories(ancestor.path),
-                      updateSelectedDirectories(ancestor.path)
+                    (updateDirectories(ancestor.path),
+                    updateSelectedDirectories(ancestor.path))
                   "
                 >
                   {{ ancestor.name ? ancestor.name : "/" }}
@@ -134,8 +134,8 @@ onBeforeUnmount(() => {
               :key="child.path"
               class="hover:bg-base-300 cursor-default py-0.5"
               @click="
-                updateDirectories(child.path),
-                  updateSelectedDirectories(child.path)
+                (updateDirectories(child.path),
+                updateSelectedDirectories(child.path))
               "
             >
               <i class="ri-folder-3-fill text-neutral"></i>
@@ -179,17 +179,17 @@ onBeforeUnmount(() => {
     <form method="dialog" class="modal-backdrop w-screen h-screen absolute">
       <button
         @click="
-          $emit('update-image-list'),
-            closeModal(),
-            title !== 'Output Directory'
-              ? updateTableData({
-                  directory: selectedDirectories.inputDirectory,
-                  rules: selectedDirectories.rulesetDirectory,
-                  limit: 50,
-                  offset: 0,
-                  update: false,
-                })
-              : ''
+          ($emit('update-image-list'),
+          closeModal(),
+          title !== 'Output Directory'
+            ? updateTableData({
+                directory: selectedDirectories.inputDirectory,
+                rules: selectedDirectories.rulesetDirectory,
+                limit: 50,
+                offset: 0,
+                update: false,
+              })
+            : '')
         "
       >
         close

client/src/components/StepHeader.vue

@@ -7,21 +7,32 @@ defineProps<{
 </script>
 
 <template>
-  <div class="self-stretch px-4 py-3 bg-white justify-start items-center gap-2.5 inline-flex border-b border-neutral-100">
-    <div class="w-6 h-6 bg-rose-200 rounded-[100px] justify-center items-center flex">
-      <div class="w-6 h-6 text-red-400 text-sm font-semibold flex flex-wrap justify-center content-center">
+  <div
+    class="self-stretch px-4 py-3 bg-white justify-start items-center gap-2.5 inline-flex border-b border-neutral-100"
+  >
+    <div
+      class="w-6 h-6 bg-rose-200 rounded-[100px] justify-center items-center flex"
+    >
+      <div
+        class="w-6 h-6 text-red-400 text-sm font-semibold flex flex-wrap justify-center content-center"
+      >
         {{ stepNumber }}
       </div>
     </div>
     <div class="grow shrink basis-0">
       <div class="grow shrink basis-0 flex flex-col">
-        <span class="text-purple-900 text-sm font-semibold uppercase tracking-widest">
+        <span
+          class="text-purple-900 text-sm font-semibold uppercase tracking-widest"
+        >
           {{ title }}
         </span>
-        <span v-if="helpText" class="text-gray-500 text-xs font-normal tracking-wide">
+        <span
+          v-if="helpText"
+          class="text-gray-500 text-xs font-normal tracking-wide"
+        >
           {{ helpText }}
         </span>
       </div>
     </div>
   </div>
-</template>
+</template>

client/src/store/imageStore.ts

@@ -15,14 +15,17 @@ export const useRedactionPlan = reactive({
   async getThumbnail(imagedict: Record<string, Record<string, string>>) {
     Object.keys(imagedict).forEach(async (image) => {
       const keys = ["thumbnail", "label", "macro"];
-      for (let kidx=0; kidx < keys.length; kidx += 1) {
+      for (let kidx = 0; kidx < keys.length; kidx += 1) {
         const key = keys[kidx];
         const response = await getImages(
           this.currentDirectory + "/" + image,
           key,
         );
         if (response.status >= 400) {
-          this.imageRedactionPlan.data[image][key] = key === "thumbnail" ? "/thumbnailPlaceholder.svg" : "/associatedPlaceholder.svg";
+          this.imageRedactionPlan.data[image][key] =
+            key === "thumbnail"
+              ? "/thumbnailPlaceholder.svg"
+              : "/associatedPlaceholder.svg";
           return;
         }
         if (response.body) {
@@ -36,9 +39,9 @@ export const useRedactionPlan = reactive({
           }
           const blob = new Blob(chunks);
           const url = URL.createObjectURL(blob);
-          this.imageRedactionPlan.data[image][key]= url;
+          this.imageRedactionPlan.data[image][key] = url;
         }
-      };
+      }
     });
   },
 

tests/conftest.py

@@ -13,6 +13,15 @@
 }
 
 
+def pytest_addoption(parser: pytest.Parser) -> None:
+    parser.addoption(
+        "--binary",
+        type=Path,
+        default=None,
+        help="Path to a built imagedephi binary; tests in test_binary.py are skipped without it.",
+    )
+
+
 def retrieve_file(file_name: str, output_path: Path) -> Path:
     algo, hash_value = registry[file_name].split(":")
     h = registry[file_name]