test: add tests for multiple category selection in blog

Author: mcanouil

…laywright/tests/blog-simple-blog.spec.ts …/tests/blog-categories-selection.spec.tstests/integration/playwright/tests/blog-simple-blog.spec.ts renamed to tests/integration/playwright/tests/blog-categories-selection.spec.ts tests/integration/playwright/tests/blog-simple-blog.spec.ts renamed to tests/integration/playwright/tests/blog-categories-selection.spec.ts

@@ -1,6 +1,8 @@
 import { expect, Page, test } from "@playwright/test";
 import { getUrl } from "../src/utils";
 
+declare const process: { platform: string };
+
 const testPages = {
   'posts': 'table.html',
   'posts2': 'default.html',
@@ -64,6 +66,63 @@ Object.entries(testPages).forEach(([postDir, pageName]) => {
       await page.goto(`./blog/simple-blog/_site/${pageName}`);
       await checkCategoryLink(page, '免疫', pageName, 'Welcome To My Blog');
     });
+
+    test(`Multiple category selection with Ctrl+click works for ${pageName}`, async ({ page }) => {
+      await page.goto(`./blog/simple-blog/_site/${pageName}`);
+
+      // Target category sidebar specifically (not post card categories)
+      const categorySidebar = page.locator('.quarto-listing-category');
+      const codeCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`);
+      const eurosCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('euros (€)'))}"]`);
+
+      // Click on "code" category (only Post With Code has this category)
+      await codeCategory.click();
+      await expect(codeCategory).toHaveClass(/active/);
+      await expect(page.getByRole('link', { name: 'Post With Code' })).toBeVisible();
+      await expect(page.getByRole('link', { name: 'Welcome To My Blog' })).toBeHidden();
+
+      // Ctrl+click on "euros (€)" category to add it to selection (only Welcome has this category)
+      const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+      await page.keyboard.down(modifier);
+      await eurosCategory.click();
+      await page.keyboard.up(modifier);
+
+      // Both categories should be active
+      await expect(codeCategory).toHaveClass(/active/);
+      await expect(eurosCategory).toHaveClass(/active/);
+
+      // Both posts should be visible (OR logic: posts matching any selected category)
+      await expect(page.getByRole('link', { name: 'Post With Code' })).toBeVisible();
+      await expect(page.getByRole('link', { name: 'Welcome To My Blog' })).toBeVisible();
+
+      // URL hash should contain both categories (comma-separated)
+      const url = page.url();
+      expect(url).toContain('category=');
+      expect(url).toContain(encodeURIComponent('code'));
+      expect(url).toContain(encodeURIComponent('euros (€)'));
+    });
+
+    test(`Deselecting last category with Ctrl+click shows all posts for ${pageName}`, async ({ page }) => {
+      await page.goto(`./blog/simple-blog/_site/${pageName}`);
+
+      // Target category sidebar specifically
+      const categorySidebar = page.locator('.quarto-listing-category');
+      const codeCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`);
+
+      // Click on "code" category
+      await codeCategory.click();
+      await expect(codeCategory).toHaveClass(/active/);
+
+      // Ctrl+click on "code" again to deselect it
+      const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+      await page.keyboard.down(modifier);
+      await codeCategory.click();
+      await page.keyboard.up(modifier);
+
+      // No category should be active (default state), all posts visible
+      await expect(page.getByRole('link', { name: 'Post With Code' })).toBeVisible();
+      await expect(page.getByRole('link', { name: 'Welcome To My Blog' })).toBeVisible();
+    });
   }
 });