feat: simplify JavaScript

- remove unused navigation PHP logic
- remove unused/unuseful JS
- change vague init script to named function
- rename functions to helpers
- use :focus-visible instead of safe-focus JS
- move class helper methods into one script
- rewrite disclosure/aria logic
- write tests for remaining JS
- limit coverage checks to src/js
- improve coverage

Author: dustin-jw

docs/wordpress.md

@@ -1,25 +1,17 @@
-WordPress
-=========
+# WordPress
 
-Upgrading Process
------------------
+## Upgrading Process
 
 1. Update the WordPress install to the latest version.
 1. If you can confirm the update made no breaking changes:
-    1. Change `WP_VERSION` in `Dockerfile` and `.circleci/config.yml` to the latest version.
-    1. Submit a PR with the update.
+   1. Change `WP_VERSION` in `Dockerfile` and `.circleci/config.yml` to the latest version.
+   1. Submit a PR with the update.
 1. If the update made breaking changes. Create a bug card. Do not push any changes.
 
-Suggested Settings
-------------------
+## Suggested Settings
 
 - **Permalinks**: Most likely, you want your urls to look like `example.com/name-of-page` rather than `example.com/?page_id=2`. To accomplish this:
 
-    1. Go to `Settings` > `Permalinks` in the admin dashboard
-    1. Select "Post Name" for the permalink setting
-    1. Hit "Save Changes"
-
-- **Menus**: There has been a "Primary" menu registered and displayed in the Header. It utilizes a Custom Navigation Walker found in `src/php/inc/class-sparkpress-walker.php`. To control this menu:
-
-    1. Visit `Appearance` > `Menus`
-    1. Create a Menu with the "Display Location" set to "Primary"
+  1. Go to `Settings` > `Permalinks` in the admin dashboard
+  1. Select "Post Name" for the permalink setting
+  1. Hit "Save Changes"

src/js/functions/add-class.js

@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, beforeEach, expect, it } from 'vitest';
+import { addClass, removeClass, toggleClass } from '../toggle-class';
+
+describe('addClass', () => {
+	beforeEach(() => {
+		document.body.innerHTML = `<div id="test-element"></div>`;
+	});
+
+	it('adds the class to the specified element', () => {
+		const element = document.querySelector('#test-element');
+		addClass(element, 'test-class');
+
+		expect(element).toHaveAttribute('class', 'test-class');
+	});
+
+	it('does not throw an error when the element does not exist', () => {
+		const element = document.querySelector('#nonexistent-element');
+
+		expect(() => addClass(element, 'test-class')).not.toThrowError();
+	});
+});
+
+describe('removeClass', () => {
+	beforeEach(() => {
+		document.body.innerHTML = `<div id="test-element" class="test-class some-other-class"></div>`;
+	});
+
+	it('removes the class from the specified element', () => {
+		const element = document.querySelector('#test-element');
+		removeClass(element, 'test-class');
+
+		expect(element).not.toHaveAttribute('class', 'test-class');
+		expect(element).toHaveAttribute('class', 'some-other-class');
+	});
+
+	it('does not throw an error when the element does not exist', () => {
+		const element = document.querySelector('#nonexistent-element');
+
+		expect(() => removeClass(element, 'test-class')).not.toThrowError();
+	});
+});
+
+describe('toggleClass', () => {
+	beforeEach(() => {
+		document.body.innerHTML = `<div id="test-element" class="test-class some-other-class"></div>`;
+	});
+
+	it('toggles the class on the specified element', () => {
+		const element = document.querySelector('#test-element');
+		toggleClass(element, 'test-class');
+
+		expect(element).toHaveAttribute('class', 'some-other-class');
+
+		toggleClass(element, 'test-class');
+
+		expect(element).toHaveAttribute('class', 'some-other-class test-class');
+
+		toggleClass(element, 'some-other-class');
+
+		expect(element).toHaveAttribute('class', 'test-class');
+	});
+
+	it('does not throw an error when the element does not exist', () => {
+		const element = document.querySelector('#nonexistent-element');
+
+		expect(() => toggleClass(element, 'test-class')).not.toThrowError();
+	});
+});

src/js/functions/add-class.test.js

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom/vitest';
+import { screen } from '@testing-library/dom';
+import { describe, beforeEach, expect, it } from 'vitest';
+import { initializeDisclosureButtonHandler } from '../toggle-disclosure';
+
+describe('initializeDisclosureButtonHandler', () => {
+	beforeEach(() => {
+		document.body.innerHTML = `
+      <button class="cmp-disclosure-button" aria-expanded="false" aria-controls="test-element-closed">Reveal Content</button>
+      <p id="test-element-closed" hidden>This content will be revealed!</p>
+      <button class="cmp-disclosure-button" aria-expanded="true" aria-controls="test-element-open">Hide Content</button>
+      <p id="test-element-open">This content will be hidden!</p>
+      <button class="cmp-disclosure-button" aria-expanded="false">Do Nothing</button>
+      <p id="test-element-forever-hidden" hidden>This content will always be hidden!</p>
+    `;
+	});
+
+	it('opens the first menu when the button is clicked', () => {
+		initializeDisclosureButtonHandler('.cmp-disclosure-button');
+
+		const revealContentButton = screen.getByText('Reveal Content');
+		revealContentButton.click();
+		expect(revealContentButton).toHaveAttribute('aria-expanded', 'true');
+		expect(screen.getByText('This content will be revealed!')).not.toHaveAttribute('hidden');
+	});
+
+	it('closes the second menu when the button is clicked', () => {
+		initializeDisclosureButtonHandler('.cmp-disclosure-button');
+
+		const hideContentButton = screen.getByText('Hide Content');
+		hideContentButton.click();
+		expect(hideContentButton).toHaveAttribute('aria-expanded', 'false');
+		expect(screen.getByText('This content will be hidden!')).toHaveAttribute('hidden');
+	});
+
+	it('toggles the menu on subsequent clicks', () => {
+		initializeDisclosureButtonHandler('.cmp-disclosure-button');
+
+		const revealContentButton = screen.getByText('Reveal Content');
+		revealContentButton.click();
+		expect(revealContentButton).toHaveAttribute('aria-expanded', 'true');
+		expect(screen.getByText('This content will be revealed!')).not.toHaveAttribute('hidden');
+
+		revealContentButton.click();
+		expect(revealContentButton).toHaveAttribute('aria-expanded', 'false');
+		expect(screen.getByText('This content will be revealed!')).toHaveAttribute('hidden');
+
+		revealContentButton.click();
+		expect(revealContentButton).toHaveAttribute('aria-expanded', 'true');
+		expect(screen.getByText('This content will be revealed!')).not.toHaveAttribute('hidden');
+
+		revealContentButton.click();
+		expect(revealContentButton).toHaveAttribute('aria-expanded', 'false');
+		expect(screen.getByText('This content will be revealed!')).toHaveAttribute('hidden');
+	});
+
+	it("does nothing when the button isn't pointing to content correctly", () => {
+		initializeDisclosureButtonHandler('.cmp-disclosure-button');
+
+		const uselessButton = screen.getByText('Do Nothing');
+		uselessButton.click();
+		expect(uselessButton).toHaveAttribute('aria-expanded', 'false');
+		expect(screen.getByText('This content will always be hidden!')).toHaveAttribute('hidden');
+	});
+});

src/js/functions/body-fixed.js

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, beforeEach, expect, it } from 'vitest';
+import { toggleNoJS } from '../toggle-no-js';
+
+describe('toggleNoJS', () => {
+	beforeEach(() => {
+		document.documentElement.setAttribute('class', 'no-js');
+	});
+
+	it("replaces no-js with js in html element's class", () => {
+		const htmlElement = document.querySelector('html');
+		expect(htmlElement).toHaveAttribute('class', 'no-js');
+
+		toggleNoJS();
+
+		expect(htmlElement).toHaveAttribute('class', 'js');
+	});
+});