test(portal): staff buttons, management-template grid, isolated management view

www/tools/service-portal-browser.mjs

@@ -71,8 +71,9 @@ try {
   const staffCode = randomBytes(24).toString('hex');
   const managementCode = randomBytes(24).toString('hex');
   const styledFixture = '<section><h2>Synthetic Directory</h2><h3>Operational reports</h3><p><a class="hs-button arbitrary-legacy-class" style="position:fixed" onclick="window.portalUnsafe=true" href="https://example.invalid/report">Synthetic report</a></p><ul><li>Synthetic list item</li></ul><table><caption>Fixture directory</caption><thead><tr><th scope="col">Role</th><th scope="col">Contact</th></tr></thead><tbody><tr><td>Fixture role</td><td><a href="mailto:fixture@example.invalid">Fixture email</a></td></tr></tbody></table><p><a style="background-color:#ffbd59" href="https://example.invalid/second">Second fixture report</a></p><p><a class="unrecognized-report-legacy" href="https://example.invalid/third">Operations Monthly Lineup Report - PM</a></p><a href="javascript:alert(1)">Unsafe destination</a><iframe src="https://example.invalid/frame"></iframe><form action="https://example.invalid/post"><input></form></section>';
+  const staffTemplates = '<section><h2>Management Templates</h2><ul><li><div><a href="https://example.invalid/check-in">Client Check-In &amp; Check-Out</a></div></li><li><div><a href="https://example.invalid/employee-performance">Employee Performance Template</a></div></li><li><div><a href="https://example.invalid/employee-availability">Employee Availability Template</a></div></li></ul></section><section><h2>Other Staff Resources</h2><p><a href="https://example.invalid/resource">General staff resource</a></p><p><a href="mailto:staff@example.invalid">Staff email</a></p></section>';
   const payload = { alg: portalAlgorithm, streams: [
-    await encryptPortalStream('fixture-staff', '<h2>Synthetic Staff</h2><p>Staff fixture only</p><a href="https://example.invalid/document">Synthetic resource</a><script>window.portalUnsafe=true</script><img src="https://example.invalid/image">' + styledFixture, staffCode),
+    await encryptPortalStream('fixture-staff', '<h2>Synthetic Staff</h2><p>Staff fixture only</p><a href="https://example.invalid/document">Synthetic resource</a><script>window.portalUnsafe=true</script><img src="https://example.invalid/image">' + styledFixture + staffTemplates, staffCode),
     await encryptPortalStream('fixture-management', '<h2>Synthetic Management</h2><p>Management fixture only</p>' + styledFixture, managementCode),
   ] };
   const guard = async (context, inject = false) => {
@@ -331,9 +332,9 @@ try {
     assert.equal(await p.locator('[data-portal-content] img, [data-portal-content] script').count(), 0);
     assert.equal(await p.evaluate(() => document.activeElement?.hasAttribute('data-portal-content')), true);
     assert.equal(await input.inputValue(), '');
-    const checkPresentation = async () => {
+    const checkPresentation = async (staff = false) => {
       const content = p.locator('[data-portal-content]');
-      assert.equal(await content.locator('.portal-resource-button').count(), 3);
+      assert.equal(await content.locator('.portal-resource-button').count(), staff ? 8 : 3);
       assert.equal(await content.locator('[style], [onclick], .arbitrary-legacy-class, .unrecognized-report-legacy, iframe, form, input').count(), 0);
       assert.equal(await content.locator('a[href^="javascript:"]').count(), 0);
       assert.equal(await content.locator('th[scope="col"]').count(), 2);
@@ -350,7 +351,16 @@ try {
       assert.equal(await button.evaluate(e => getComputedStyle(e).outlineStyle), 'solid');
       assert.equal(await button.evaluate(e => getComputedStyle(e).outlineWidth), '3px');
     };
-    await checkPresentation();
+    await checkPresentation(true);
+    const staffContent = p.locator('[data-portal-content]');
+    const grid = staffContent.locator('ul.portal-template-grid');
+    assert.equal(await grid.count(), 1);
+    assert.equal(await grid.locator('li').count(), 3);
+    assert.equal(await grid.locator('a.portal-resource-button').count(), 3);
+    const columns = await grid.evaluate((element) => getComputedStyle(element).gridTemplateColumns.split(/\s+/).length);
+    assert.equal(columns, width >= 768 ? 2 : 1, 'staff templates follow responsive column count');
+    assert.equal(await staffContent.getByRole('link', { name: 'General staff resource' }).getAttribute('class'), 'portal-resource-button');
+    assert.equal(await staffContent.getByRole('link', { name: 'Staff email' }).getAttribute('class'), 'portal-contact-link');
     assert.ok(await p.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1));
     await p.screenshot({ path: path.join(output, 'portal-synthetic-' + width + '.png'), fullPage: true });
     evidence.screenshots.push('portal-synthetic-' + width + '.png');
@@ -360,6 +370,7 @@ try {
     assert.match(await p.locator('[data-portal-content]').textContent(), /Synthetic Management/);
     assert.doesNotMatch(await p.locator('[data-portal-content]').textContent(), /Staff fixture/);
     await checkPresentation();
+    assert.equal(await p.locator('[data-portal-content] ul.portal-template-grid').count(), 0, 'management view retains original layout');
     await p.screenshot({ path: path.join(output, 'portal-management-synthetic-' + width + '.png'), fullPage: true });
     evidence.screenshots.push('portal-management-synthetic-' + width + '.png');
     evidence.checks++; await ctx.close();