Add install builder tests

Author: AlecRust

.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()],
+});