Add install builder tests

.eslintignore

@@ -5,5 +5,7 @@
 **/node_modules/
 **/vendor/
 
-# vitepress
+# VitePress
 **/.vitepress/dist/
+!docs/.vitepress/
+docs/.vitepress/cache/

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  docs:
+    name: Docs site
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - name: Install Node packages
+        run: npm ci --ignore-scripts
+
+      - name: Run docs site tests
+        run: npm run docs:test

docs/.vitepress/theme/components/CopyToClipboardInput.test.js

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, screen, cleanup, waitFor } from '@testing-library/vue';
+import CopyToClipboardInput from './CopyToClipboardInput.vue';
+
+// Mock the clipboard API
+Object.assign(navigator, {
+	clipboard: {
+		writeText: vi.fn(() => Promise.resolve()),
+	},
+});
+
+describe('CopyToClipboardInput', () => {
+	beforeEach(() => {
+		render(CopyToClipboardInput, {
+			props: { value: 'Test text' },
+		});
+	});
+
+	afterEach(() => {
+		cleanup();
+	});
+
+	it('renders correctly', () => {
+		const input = screen.getByRole('textbox');
+		const button = screen.getByRole('button', { name: 'Copy' });
+
+		expect(input).toBeTruthy();
+		expect(button).toBeTruthy();
+	});
+
+	it('selects text when input is focused', async () => {
+		const input = screen.getByRole('textbox');
+		await fireEvent.focus(input);
+
+		expect(input.selectionStart).toBe(0);
+		expect(input.selectionEnd).toBe('Test text'.length);
+	});
+
+	it('copies text to clipboard when button is clicked', async () => {
+		const button = screen.getByRole('button', { name: 'Copy' });
+		await fireEvent.click(button);
+
+		expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Test text');
+		await waitFor(() => expect(button.textContent).toBe('Copied!'));
+	});
+});

docs/.vitepress/theme/components/InstallBuilder.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, screen, cleanup, waitFor } from '@testing-library/vue';
+import FloatingVue from 'floating-vue';
+import InstallBuilder from './InstallBuilder.vue';
+
+describe('InstallBuilder', () => {
+	const options = [
+		{ flag: 'option1', label: 'Option 1', description: 'Description for Option 1', default: 'no' },
+		{
+			flag: 'option2',
+			label: 'Option 2',
+			description: 'Description for Option 2',
+			type: 'text',
+			default: '',
+		},
+		{
+			flag: 'option3',
+			label: 'Option 3',
+			description: 'Description for Option 3',
+			type: 'select',
+			options: [
+				{ value: 'val1', label: 'Value 1' },
+				{ value: 'val2', label: 'Value 2' },
+			],
+			default: 'val1',
+		},
+	];
+
+	beforeEach(() => {
+		render(InstallBuilder, {
+			props: { options },
+			global: {
+				plugins: [FloatingVue],
+			},
+		});
+	});
+
+	afterEach(() => {
+		cleanup();
+	});
+
+	it('renders all options correctly', () => {
+		options.forEach((option) => {
+			expect(screen.getByLabelText(option.label)).toBeTruthy();
+		});
+	});
+
+	it('toggles an option when clicked', async () => {
+		const option1 = screen.getByLabelText(options[0].label);
+		await fireEvent.click(option1);
+		expect(option1.checked).toBe(true);
+	});
+
+	it('updates the installation command when an option is toggled', async () => {
+		const option1 = screen.getByLabelText(options[0].label);
+		await fireEvent.click(option1);
+		waitFor(() =>
+			expect(screen.getByDisplayValue(/bash hst-install.sh --option1 yes/)).toBeTruthy(),
+		);
+	});
+
+	it('updates the installation command when option text input changes', async () => {
+		const option2 = screen.getByLabelText(options[1].label);
+		await fireEvent.click(option2);
+
+		const textInput = screen.getByLabelText(options[1].description);
+		await fireEvent.update(textInput, 'custom-value');
+
+		expect(screen.getByDisplayValue(/bash hst-install.sh --option2 custom-value/)).toBeTruthy();
+	});
+
+	it('updates the installation command when option select input changes', async () => {
+		const option3 = screen.getByLabelText(options[2].label);
+		await fireEvent.click(option3);
+
+		const selectInput = screen.getByLabelText(options[2].description);
+		await fireEvent.update(selectInput, { target: { value: 'val2' } });
+
+		waitFor(() =>
+			expect(screen.getByDisplayValue(/bash hst-install.sh --option3 val2/)).toBeTruthy(),
+		);
+	});
+});

docs/.vitepress/theme/index.js

@@ -4,9 +4,9 @@ import '@fortawesome/fontawesome-free/css/solid.css';
 import './styles/base.css';
 import './styles/vars.css';
 import 'floating-vue/dist/style.css';
+import FloatingVue from 'floating-vue';
 import FeaturePage from './components/FeaturePage.vue';
 import InstallPage from './components/InstallPage.vue';
-import FloatingVue from 'floating-vue';
 
 export default {
 	...Theme,

docs/.vitepress/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+	test: {
+		environment: 'jsdom',
+	},
+	plugins: [vue()],
+});

package.json

@@ -10,6 +10,7 @@
 		"docs:dev": "vitepress dev docs",
 		"docs:build": "vitepress build docs",
 		"docs:serve": "vitepress serve docs",
+		"docs:test": "vitest run --config docs/.vitepress/vitest.config.js",
 		"build": "node build.js",
 		"lint": "prettier --cache --check . && eslint --cache . && stylelint web/css/src/**/*.css && markdownlint-cli2 *.md docs/**/*.md",
 		"lint-staged": "lint-staged",
@@ -31,6 +32,8 @@
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.22.2",
+		"@testing-library/vue": "^8.0.2",
+		"@vitejs/plugin-vue": "^5.0.4",
 		"browserslist": "^4.23.0",
 		"esbuild": "^0.20.1",
 		"eslint": "^8.57.0",
@@ -38,6 +41,7 @@
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.29.1",
 		"husky": "^9.0.11",
+		"jsdom": "^24.0.0",
 		"lightningcss": "^1.24.0",
 		"lint-staged": "^15.2.2",
 		"markdownlint-cli2": "^0.12.1",
@@ -48,6 +52,7 @@
 		"stylelint": "^16.2.1",
 		"stylelint-config-standard": "^36.0.0",
 		"vitepress": "^1.0.0-rc.44",
+		"vitest": "^1.3.1",
 		"vue": "^3.4.20"
 	},
 	"browserslist": [