feat(projects): replace numeric Intern inputs with picker

src/test/js/project-picker.test.mjs

@@ -0,0 +1,98 @@
+import assert from 'node:assert/strict';
+import {readFileSync} from 'node:fs';
+import test from 'node:test';
+import vm from 'node:vm';
+
+class Target {
+  listeners = new Map();
+
+  addEventListener(type, listener) {
+    this.listeners.set(type, listener);
+  }
+
+  dispatch(type) {
+    this.listeners.get(type)?.({preventDefault() {}, target: this});
+  }
+}
+
+test('picker searches name and student code, summarizes selection, and cancels safely', () => {
+  const open = Object.assign(new Target(), {focus() { this.focused = true; }});
+  const cancel = new Target();
+  const apply = new Target();
+  const search = Object.assign(new Target(), {value: '', focus() { this.focused = true; }});
+  const summary = {textContent: ''};
+  const empty = {hidden: true};
+  const firstInput = Object.assign(new Target(), {checked: false, type: 'checkbox'});
+  const secondInput = Object.assign(new Target(), {checked: false, type: 'checkbox'});
+  const options = [
+    option('Nguyen An STU-020', 'Nguyen An (STU-020)', firstInput),
+    option('Tran Binh STU-021', 'Tran Binh (STU-021)', secondInput),
+  ];
+  const dialog = Object.assign(new Target(), {
+    showModal() { this.open = true; },
+    close() { this.open = false; this.dispatch('close'); },
+  });
+  const picker = {
+    querySelector(selector) {
+      return new Map([
+        ['[data-picker-open]', open], ['[data-picker-dialog]', dialog],
+        ['[data-picker-search]', search], ['[data-picker-summary]', summary],
+        ['[data-picker-empty]', empty], ['[data-picker-cancel]', cancel],
+        ['[data-picker-apply]', apply],
+      ]).get(selector) ?? null;
+    },
+    querySelectorAll(selector) {
+      return selector === '[data-picker-option]' ? options : [];
+    },
+  };
+  let ready;
+  const document = {
+    documentElement: {dataset: {}, style: {}},
+    addEventListener(type, listener) { if (type === 'DOMContentLoaded') ready = listener; },
+    querySelector() { return null; },
+    querySelectorAll(selector) { return selector === '[data-intern-picker]' ? [picker] : []; },
+  };
+  vm.runInNewContext(readFileSync('src/main/resources/static/assets/app.js', 'utf8'), {
+    document,
+    localStorage: {getItem() { return null; }, setItem() {}, removeItem() {}},
+    matchMedia() { return {matches: false}; },
+  });
+  ready();
+
+  open.dispatch('click');
+  assert.equal(dialog.open, true);
+  assert.equal(search.focused, true);
+
+  search.value = 'stu-021';
+  search.dispatch('input');
+  assert.equal(options[0].hidden, true);
+  assert.equal(options[1].hidden, false);
+  assert.equal(empty.hidden, true);
+
+  secondInput.checked = true;
+  secondInput.dispatch('change');
+  assert.equal(summary.textContent, '1 Intern selected: Tran Binh (STU-021)');
+
+  cancel.dispatch('click');
+  assert.equal(secondInput.checked, false);
+  assert.equal(summary.textContent, 'No Interns selected');
+  assert.equal(open.focused, true);
+
+  open.dispatch('click');
+  secondInput.checked = true;
+  secondInput.dispatch('change');
+  apply.dispatch('click');
+  assert.equal(secondInput.checked, true);
+});
+
+function option(searchValue, label, input) {
+  return {
+    hidden: false,
+    dataset: {pickerSearch: searchValue},
+    querySelector(selector) {
+      if (selector === 'input') return input;
+      if (selector === '[data-picker-label]') return {textContent: label};
+      return null;
+    },
+  };
+}