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

@@ -64,6 +64,54 @@ 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}`);
+
+      // Click on "code" category (only Post With Code has this category)
+      await page.getByText('code', { exact: true }).click();
+      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).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 page.getByText('euros (€)', { exact: true }).click();
+      await page.keyboard.up(modifier);
+
+      // Both categories should be active
+      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).toHaveClass(/active/);
+      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('euros (€)'))}"]`)).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}`);
+
+      // Click on "code" category
+      await page.getByText('code', { exact: true }).click();
+      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).toHaveClass(/active/);
+
+      // Ctrl+click on "code" again to deselect it
+      const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+      await page.keyboard.down(modifier);
+      await page.getByText('code', { exact: true }).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();
+    });
   }
 });