Update packages to address GHSA-mh29-5h37-fv8m & add Jest, ESlint, Playwright and Ruff support (#43)

When I was just updating the npm packages to address GHSA-mh29-5h37-fv8m
(https://github.com/BioAnalyticResource/eFP-Seq_Browser/security/dependabot/27),
I notice there was no tests or code quality checks to ensure reliability
and confidence when making code changes so in addition to just updating
packages, also added JavaScript Jest unit tests, ESLint linting, and
Playwright e2e tests & Python ruff linting and formatting.

**CI/CD Workflow Improvements**
- Renamed and updated GitHub Actions workflow files for JavaScript, R,
and Markdown to use a consistent `code-qa-*` naming scheme, updated file
triggers, and upgraded action versions for improved maintainability and
clarity.
- Added a new Python QA workflow (`code-qa-python.yaml`) with steps for
dependency installation, formatting, linting, and running tests using
modern tools (`uv`, `ruff`, `pytest`).
- Upgraded CodeQL workflow actions to v4 for enhanced security analysis.

**Testing Enhancements**
- Added Jest-based unit tests for `cgi-bin/core/custom.js` and
`cgi-bin/Submission_page/XMLgenerator.js`, covering DOM manipulation
functions and color generation logic for more robust JavaScript code
quality.

**Developer Experience and Tooling**
- Expanded `.prettierignore` to exclude Python, Playwright, and test
output directories, reducing noise in formatting checks.
- Added a `validate-all` target and new Python validation commands to
the `Makefile` for unified project validation across languages.

**Minor Code Modernization**
- Minor code cleanup in `custom.js` for improved readability.

Author: AlexJSully

.github/workflows/code-qa.yaml .github/workflows/code-qa-js.yaml.github/workflows/code-qa.yaml renamed to .github/workflows/code-qa-js.yaml

@@ -1,4 +1,4 @@
-name: Code Quality Assurance
+name: Code Quality Assurance - JavaScript
 
 on:
     push:
@@ -9,7 +9,7 @@ on:
             - "**/*.js"
             - "**/*.css"
             - "**/*.html"
-            - ".github/workflows/code-qa.yaml"
+            - ".github/workflows/code-qa-js.yaml"
     pull_request:
         branches: [main]
         paths:
@@ -18,7 +18,7 @@ on:
             - "**/*.js"
             - "**/*.css"
             - "**/*.html"
-            - ".github/workflows/code-qa.yaml"
+            - ".github/workflows/code-qa-js.yaml"
 
 permissions:
     contents: read
@@ -29,13 +29,12 @@ jobs:
         strategy:
             matrix:
                 node-version: [22.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:
             - name: Checkout repository
               uses: actions/checkout@v5
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: ${{ matrix.node-version }}
             - name: Cache Node.js modules
@@ -45,7 +44,18 @@ jobs:
                   key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
                   restore-keys: |
                       ${{ runner.os }}-node-
+
             - name: Check installs
               run: npm ci
+            - name: Install Playwright Browsers
+              run: npx playwright install --with-deps
+
             - name: Quality check - prettier
               run: npm run prettier:check
+            - name: Lint check - ESLint
+              run: npm run eslint:check
+
+            - name: Unit tests - jest
+              run: npm run test:jest
+            - name: E2E tests - Playwright
+              run: npm run test:playwright:headless

.github/workflows/markdown-lint.yaml .github/workflows/code-qa-markdown.yaml.github/workflows/markdown-lint.yaml renamed to .github/workflows/code-qa-markdown.yaml

@@ -1,4 +1,4 @@
-name: Markdown Lint
+name: Code Quality Assurance - Markdown
 
 on:
     push:
@@ -7,26 +7,30 @@ on:
             - "**/*.md"
             - ".markdownlint.json"
             - ".markdownlintignore"
-            - ".github/workflows/markdown-lint.yml"
+            - ".github/workflows/code-qa-markdown.yaml"
     pull_request:
         branches: [main]
         paths:
             - "**/*.md"
             - ".markdownlint.json"
             - ".markdownlintignore"
-            - ".github/workflows/markdown-lint.yml"
+            - ".github/workflows/code-qa-markdown.yaml"
 
 permissions:
     contents: read
 jobs:
     lint-markdown:
         runs-on: ubuntu-latest
 
+        strategy:
+            matrix:
+                node-version: [22.x]
+
         steps:
             - name: Checkout repository
               uses: actions/checkout@v5
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: ${{ matrix.node-version }}
             - name: Cache Node.js modules

.github/workflows/code-qa-python.yaml

@@ -0,0 +1,61 @@
+name: Code Quality Assurance - Python
+
+on:
+    push:
+        branches: [main]
+        paths:
+            - "cgi-bin/**/*.cgi"
+            - "requirements*.txt"
+            - ".github/workflows/code-qa-python.yaml"
+    pull_request:
+        branches: [main]
+        paths:
+            - "cgi-bin/**/*.cgi"
+            - "requirements*.txt"
+            - ".github/workflows/code-qa-python.yaml"
+
+permissions:
+    contents: read
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                python-version: [3.13]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set up Python ${{ matrix.python-version }}
+              uses: actions/setup-python@v6
+              with:
+                  python-version: ${{ matrix.python-version }}
+
+            - name: Install uv
+              uses: astral-sh/setup-uv@v5
+              with:
+                  version: "latest"
+
+            - name: Cache Python packages
+              uses: actions/cache@v4
+              with:
+                  path: |
+                      ~/.cache/uv
+                      ~/.cache/pip
+                  key: ${{ runner.os }}-python-${{ hashFiles('**/requirements*.txt') }}
+                  restore-keys: |
+                      ${{ runner.os }}-python-
+
+            - name: Create virtual environment
+              run: uv venv
+
+            - name: Install dependencies
+              run: make py-install
+
+            - name: Format check - Ruff
+              run: uv run ruff format cgi-bin/*.cgi
+
+            - name: Lint check - Ruff
+              run: uv run ruff check --fix cgi-bin/*.cgi

.github/workflows/r.yaml .github/workflows/code-qa-r.yaml.github/workflows/r.yaml renamed to .github/workflows/code-qa-r.yaml

@@ -1,4 +1,4 @@
-name: R Quality Assurance
+name: Code Quality Assurance - R
 
 on:
     push:
@@ -7,14 +7,14 @@ on:
         paths:
             - "**/*.Rmd"
             - "**/*.R"
-            - ".github/workflows/r.yaml"
+            - ".github/workflows/code-qa-r.yaml"
     pull_request:
         branches:
             - main
         paths:
             - "**/*.Rmd"
             - "**/*.R"
-            - ".github/workflows/r.yaml"
+            - ".github/workflows/code-qa-r.yaml"
 
 permissions:
     contents: read

.github/workflows/codeql-analysis.yaml

@@ -55,7 +55,7 @@ jobs:
 
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL
-              uses: github/codeql-action/init@v3
+              uses: github/codeql-action/init@v4
               with:
                   languages: ${{ matrix.language }}
                   # If you wish to specify custom queries, you can do so here or in a config file.
@@ -72,7 +72,7 @@ jobs:
             # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
             # If this step fails, then you should remove it and run the build manually (see below)
             - name: Autobuild
-              uses: github/codeql-action/autobuild@v3
+              uses: github/codeql-action/autobuild@v4
 
             # ℹ️ Command-line programs to run using the OS shell.
             # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -85,6 +85,6 @@ jobs:
             #     ./location_of_script_within_repo/buildscript.sh
 
             - name: Perform CodeQL Analysis
-              uses: github/codeql-action/analyze@v3
+              uses: github/codeql-action/analyze@v4
               with:
                   category: "/language:${{matrix.language}}"

.gitignore

@@ -36,3 +36,18 @@ renv/.gitignore
 
 # Python virtual environment
 venv/
+__pycache__/
+.mypy_cache/
+.pytest_cache/
+.ruff_cache/
+.venv/
+
+# Test output
+coverage/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

.prettierignore

@@ -60,6 +60,22 @@ renv/lock
 renv/python
 renv/sandbox
 renv/staging
+renv/.gitignore
 
 # Python virtual environment
 venv/
+__pycache__/
+.mypy_cache/
+.pytest_cache/
+.ruff_cache/
+.venv/
+
+# Test output
+coverage/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

Makefile

@@ -0,0 +1,24 @@
+# Validate all
+.PHONY: validate-all
+validate-all: py-validate
+# Validate JavaScript/TypeScript
+	@if [ ! -d node_modules ]; then npm ci; fi
+	 npm run validate
+# Validate R installation
+	Rscript -e 'renv::restore()'
+
+# === Python Commands for eFP-Seq_Browser ===
+.PHONY: py-install py-format py-lint py-test py-clean py-validate
+
+PY_FILES = cgi-bin/*.cgi
+
+py-install:
+	uv pip install -r requirements-dev.txt
+
+py-format:
+	uv run ruff format $(PY_FILES)
+
+py-lint:
+	uv run ruff check --fix $(PY_FILES)
+
+py-validate: py-install py-format py-lint

cgi-bin/Submission_page/XMLgenerator.test.js

@@ -0,0 +1,94 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+describe("update (XMLgenerator.js)", () => {
+	let update;
+	let $;
+
+	beforeAll(() => {
+		// Minimal jQuery mock
+		$ = () => ({
+			find: (selector) => ({
+				val: () => {
+					const map = {
+						".channelcontrols": "ctrl1, ctrl2",
+						".channelgroupwidtho": "rep1, rep2",
+						".channeldescription": "desc",
+						".channelrecordnumber": "42",
+						".channelhexcolor": "#ff0000",
+						".channelbamType": "Google Drive",
+						".channelbamlink": "https://drive.google.com/file/d/abc",
+						".channeltotalreadsmapped": "12345",
+						".channelreadmapmethod": "STAR",
+						".channelpublicationlink": "https://pub.com/xyz",
+						".channeltissue": "Leaf",
+						".channelsvgname": "ath-leaf.svg",
+						".channeltitle": "Test Title",
+						".channelsralink": "SRR000001",
+						".channelspecies": "Arabidopsis",
+						".channelforeground": "#000000",
+						".channelfilename": "file1.bam",
+					};
+					return map[selector] || "dummy";
+				},
+			}),
+		});
+
+		// Robust document.getElementById mock for all ids
+		const getElementByIdMock = (id) => {
+			const values = {
+				reqxml: { value: "TestXML" },
+				reqauthor: { value: "Author" },
+				contectinfo: { value: "contact@email.com" },
+			};
+			return values[id] || { value: "dummy" };
+		};
+		if (global.document) {
+			global.document.getElementById = getElementByIdMock;
+		} else {
+			global.document = { getElementById: getElementByIdMock };
+		}
+		global.$ = $;
+
+		// Required top-level variables for update()
+		global.topXML = [
+			'\t\t<file info="<?channeldescription?>" record_number="<?channelrecordnumber?>" foreground="<?channelforeground?>" hex_colour="<?channelhexcolor?>" bam_type="<?channelbamType?>" name="<?channelbamlink?>" filename="<?channelfilename?>" total_reads_mapped="<?channeltotalreadsmapped?>" read_map_method="<?channelreadmapmethod?>" publication_link="<?channelpublicationlink?>" svg_subunit="<?channeltissue?>" svgname="<?channelsvgname?>" description="<?channeltitle?>" url="<?channelsralink?>" species="<?channelspecies?>" title="<?channeligbtitle?>">',
+			"\t\t\t<controls>\n",
+		].join("\r\n");
+		global.controlsXML = "";
+		global.replicatesXML = ["\t\t\t</controls>", "\t\t\t<groupwith>\n"].join("\r\n");
+		global.endingXML = ["\t\t\t</groupwith>", "\t\t</file>", "\n"].join("\r\n");
+		global.existingXML = "";
+		global.all_controls = "";
+		global.all_replicates = "";
+
+		// Load the update function from XMLgenerator.js
+		const code = fs.readFileSync(path.join(__dirname, "../Submission_page/XMLgenerator.js"), "utf8");
+		const fnMatch = code.match(/function update\s*\(([^)]*)\)\s*{([\s\S]*?)^}/m);
+		if (!fnMatch) throw new Error("update function not found in XMLgenerator.js");
+		const args = fnMatch[1];
+		const body = fnMatch[2];
+
+		update = new Function(args, body);
+	});
+
+	it("generates correct XML for given form values", () => {
+		const v = {}; // dummy, not used in our $ mock
+		const result = update("", v);
+		// Check for key XML elements and values
+		expect(result).toContain('info="desc"');
+		expect(result).toContain('record_number="42"');
+		expect(result).toContain('hex_colour="#ff0000"');
+		expect(result).toContain('bam_type="Google Drive"');
+		expect(result).toContain('name="https://drive.google.com/file/d/abc"');
+		expect(result).toContain('filename="file1.bam"');
+		expect(result).toContain("<bam_exp>ctrl1</bam_exp>");
+		expect(result).toContain("<bam_exp>ctrl2</bam_exp>");
+		expect(result).toContain("<bam_exp>rep1</bam_exp>");
+		expect(result).toContain("<bam_exp>rep2</bam_exp>");
+	});
+});

cgi-bin/core/custom.js

@@ -74,9 +74,8 @@ let loadNewDataset = false;
 
 /** Used to count and determine how many BAM entries are in the XML file */
 let count_bam_entries_in_xml = 113;
-/**
- * Count the amount of entries in a BAM file
- */
+
+/** Count the amount of entries in a BAM file */
 function count_bam_num() {
 	const xhr = new XMLHttpRequest();
 	const url = base_src;