mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 18:36:15 -08:00
413 lines
15 KiB
TypeScript
413 lines
15 KiB
TypeScript
import type { Locator, Page } from '@playwright/test';
|
||
import { join } from 'path';
|
||
import { expect, test } from './fixtures';
|
||
import { pressTab, surfaceContrast } from './e2e-helpers';
|
||
import {
|
||
addStalkerPortal,
|
||
addXtreamPortal,
|
||
interceptPwaProviderRequests,
|
||
resetPwaMockServers,
|
||
} from './sources-pwa.helpers';
|
||
|
||
/**
|
||
* Parental lock UI on app tokens (PWA).
|
||
*
|
||
* The lock rows, dialogs and PIN error once used Material system colours the
|
||
* theme never declares, so every one of them resolved to nothing: no focus
|
||
* ring after the outline reset, a dashed border and list border with no
|
||
* colour, a PIN error in body text, and dialogs 440–480px wide on a 375px
|
||
* phone. These tests pin the visible result in both themes:
|
||
*
|
||
* 1. Tabbing to each "N locked" row and each Stalker lock row shows a
|
||
* 2px ring with >= 3:1 contrast against the row and its surface.
|
||
* 2. The rail rows' dashed border and the lock list's border are painted.
|
||
* 3. The PIN error is a red with >= 4.5:1 contrast on the dialog.
|
||
* 4. The lock dialogs fit a 375px viewport without sideways overflow.
|
||
* 5. In the PWA the Xtream dialog shows lock controls only — hide/show is
|
||
* Electron-only — and its clear-search button has a name.
|
||
*
|
||
* Tag: @parental — run only this spec with:
|
||
* pnpm nx run web-e2e:e2e-ci--src/parental-lock-ui.e2e.ts
|
||
*/
|
||
|
||
const M3U_FIXTURE = join(__dirname, 'fixtures/test.m3u');
|
||
const PIN = '2468';
|
||
const PHONE = { width: 375, height: 812 };
|
||
const THEMES = ['light', 'dark'] as const;
|
||
|
||
async function setTheme(page: Page, theme: (typeof THEMES)[number]) {
|
||
await page.evaluate(
|
||
(dark) => document.body.classList.toggle('dark-theme', dark),
|
||
theme === 'dark'
|
||
);
|
||
}
|
||
|
||
async function enableParentalLock(page: Page): Promise<void> {
|
||
await page.locator('a[href$="/workspace/settings"]').click();
|
||
await page.waitForURL(/\/workspace\/settings\/general$/);
|
||
await page.locator('[data-test-id="settings-section-parental"]').click();
|
||
await page.waitForURL(/\/workspace\/settings\/parental$/);
|
||
|
||
const toggle = page.locator(
|
||
'[data-test-id="parental-lock-enabled"] button[role="switch"]'
|
||
);
|
||
await toggle.click();
|
||
await page.locator('[data-test-id="parental-lock-pin"]').fill(PIN);
|
||
await page.locator('[data-test-id="parental-lock-pin-confirm"]').fill(PIN);
|
||
await page.locator('[data-test-id="parental-lock-pin-submit"]').click();
|
||
await expect(toggle).toHaveAttribute('aria-checked', 'true');
|
||
}
|
||
|
||
/** Answers the unlock prompt that a PIN-gated action opens. */
|
||
async function enterPin(page: Page, pin = PIN): Promise<void> {
|
||
const input = page.locator('[data-test-id="parental-lock-pin"]');
|
||
await expect(input).toBeVisible();
|
||
await input.fill(pin);
|
||
await page.locator('[data-test-id="parental-lock-pin-submit"]').click();
|
||
}
|
||
|
||
/**
|
||
* The dialog opened for `component`, once it holds focus: MatDialog moves
|
||
* focus to its first tabbable element only after the open animation, which
|
||
* would otherwise pull focus away from a row the test has just tabbed to.
|
||
*/
|
||
async function openedDialog(page: Page, component: string): Promise<Locator> {
|
||
const dialog = page.locator('mat-dialog-container', {
|
||
has: page.locator(component),
|
||
});
|
||
await expect
|
||
.poll(() =>
|
||
dialog.evaluate((el) => el.contains(document.activeElement))
|
||
)
|
||
.toBe(true);
|
||
return dialog;
|
||
}
|
||
|
||
/**
|
||
* WCAG contrast of one colour property against what is painted behind the
|
||
* element: white, each ancestor's background and, with `ownFill`, the
|
||
* element's own background (the approach of `surfaceContrast`).
|
||
*/
|
||
async function contrastBehind(
|
||
locator: Locator,
|
||
property: 'color' | 'outlineColor',
|
||
ownFill: boolean
|
||
): Promise<number> {
|
||
return locator.evaluate(
|
||
(element, [property, ownFill]) => {
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = canvas.height = 1;
|
||
const context = canvas.getContext('2d');
|
||
if (!context) throw new Error('Canvas is required');
|
||
const paint = (color: string) => {
|
||
context.fillStyle = color;
|
||
context.fillRect(0, 0, 1, 1);
|
||
};
|
||
const luminance = () =>
|
||
Array.from(context.getImageData(0, 0, 1, 1).data)
|
||
.slice(0, 3)
|
||
.map((value) => {
|
||
const channel = value / 255;
|
||
return channel <= 0.04045
|
||
? channel / 12.92
|
||
: ((channel + 0.055) / 1.055) ** 2.4;
|
||
})
|
||
.reduce(
|
||
(sum, channel, index) =>
|
||
sum + channel * [0.2126, 0.7152, 0.0722][index],
|
||
0
|
||
);
|
||
const layers: Element[] = ownFill ? [element] : [];
|
||
for (let e = element.parentElement; e; e = e.parentElement) {
|
||
layers.unshift(e);
|
||
}
|
||
paint('white');
|
||
layers.forEach((layer) =>
|
||
paint(getComputedStyle(layer).backgroundColor)
|
||
);
|
||
const behind = luminance();
|
||
paint(getComputedStyle(element)[property]);
|
||
const front = luminance();
|
||
return (
|
||
(Math.max(front, behind) + 0.05) /
|
||
(Math.min(front, behind) + 0.05)
|
||
);
|
||
},
|
||
[property, ownFill] as const
|
||
);
|
||
}
|
||
|
||
/** Focus `from` and Tab (as that browser's user does) until `target` has focus. */
|
||
async function tabTo(
|
||
page: Page,
|
||
browserName: string,
|
||
from: Locator,
|
||
target: Locator,
|
||
maxTabs = 1
|
||
): Promise<void> {
|
||
await from.focus();
|
||
for (let i = 0; i < maxTabs; i++) {
|
||
await pressTab(page, browserName);
|
||
if (await target.evaluate((el) => el === document.activeElement)) {
|
||
break;
|
||
}
|
||
}
|
||
await expect(target).toBeFocused();
|
||
}
|
||
|
||
/**
|
||
* The ring sits inside the row (offset -2px), so it must stand out from the
|
||
* row's own fill and from the surface around the row.
|
||
*/
|
||
async function expectFocusRing(row: Locator): Promise<void> {
|
||
await expect(row).toBeFocused();
|
||
await expect(row).toHaveCSS('outline-style', 'solid');
|
||
await expect(row).toHaveCSS('outline-width', '2px');
|
||
const inside = await contrastBehind(row, 'outlineColor', true);
|
||
const outside = await contrastBehind(row, 'outlineColor', false);
|
||
expect(Math.min(inside, outside)).toBeGreaterThanOrEqual(3);
|
||
}
|
||
|
||
/** Colour and fill of a lock toggle, to tell locked from unlocked. */
|
||
async function toggleLook(toggle: Locator): Promise<string> {
|
||
return toggle.evaluate((el) => {
|
||
const style = getComputedStyle(el);
|
||
return `${style.color} ${style.backgroundColor}`;
|
||
});
|
||
}
|
||
|
||
async function expectPaintedBorder(
|
||
locator: Locator,
|
||
style: 'dashed' | 'solid'
|
||
): Promise<void> {
|
||
await expect(locator).toHaveCSS('border-top-style', style);
|
||
const { border } = await surfaceContrast(locator);
|
||
// 1 means the border colour is transparent against its own fill.
|
||
expect(border).toBeGreaterThan(1.15);
|
||
}
|
||
|
||
async function expectDialogFitsPhone(
|
||
page: Page,
|
||
dialog: Locator
|
||
): Promise<void> {
|
||
await page.setViewportSize(PHONE);
|
||
await expect
|
||
.poll(async () => {
|
||
const box = await dialog.boundingBox();
|
||
return box ? box.x >= 0 && box.x + box.width <= PHONE.width : false;
|
||
})
|
||
.toBe(true);
|
||
// A min-width on the content overflows the capped panel without
|
||
// widening the panel or the document, so measure the blocks inside.
|
||
const overflow = await dialog.evaluate((panel) => {
|
||
const edge = panel.getBoundingClientRect().right;
|
||
const blocks = panel.querySelectorAll(
|
||
'mat-dialog-content, mat-dialog-actions, .header-actions, ' +
|
||
'.search-inline, .categories-list'
|
||
);
|
||
return Math.max(
|
||
...Array.from(
|
||
blocks,
|
||
(block) => block.getBoundingClientRect().right - edge
|
||
)
|
||
);
|
||
});
|
||
expect(overflow).toBeLessThanOrEqual(0.5);
|
||
expect(
|
||
await page.evaluate(() => document.documentElement.scrollWidth)
|
||
).toBeLessThanOrEqual(PHONE.width);
|
||
}
|
||
|
||
test.describe('Parental lock UI', () => {
|
||
test.beforeEach(async ({ page, request }) => {
|
||
await resetPwaMockServers(request);
|
||
await interceptPwaProviderRequests(page);
|
||
await page.goto('/');
|
||
});
|
||
|
||
test('@parental @xtream PWA dialog, locked-categories row and PIN error', async ({
|
||
page,
|
||
browserName,
|
||
}) => {
|
||
test.slow();
|
||
await addXtreamPortal(page, 'Lock UI Portal');
|
||
const portalUrl = page.url();
|
||
await enableParentalLock(page);
|
||
// A reload starts locked: the unlock lives in memory only.
|
||
await page.goto(portalUrl);
|
||
|
||
const manage = page.locator(
|
||
'[data-test-id="context-manage-categories"]'
|
||
);
|
||
await expect(manage).toBeEnabled({ timeout: 15_000 });
|
||
await manage.click();
|
||
await enterPin(page);
|
||
|
||
const dialog = await openedDialog(
|
||
page,
|
||
'app-category-management-dialog'
|
||
);
|
||
const toggles = dialog.locator('[data-test-id^="category-lock-"]');
|
||
await expect(toggles.first()).toBeVisible();
|
||
|
||
// PWA: locks only, no hide/show selection controls.
|
||
await expect(
|
||
dialog.locator('[data-test-id="category-locked-count"]')
|
||
).toBeVisible();
|
||
await expect(dialog.locator('.bulk-actions')).toHaveCount(0);
|
||
await expect(dialog.locator('mat-checkbox')).toHaveCount(0);
|
||
|
||
await dialog.locator('.search-inline input').fill('a');
|
||
await dialog.getByRole('button', { name: 'Clear search' }).click();
|
||
await expect(dialog.locator('.search-inline input')).toHaveValue('');
|
||
|
||
// Locked reads as a state, not only as another glyph.
|
||
await toggles.first().click();
|
||
await expect(toggles.first()).toHaveAttribute('aria-pressed', 'true');
|
||
expect(await toggleLook(toggles.first())).not.toBe(
|
||
await toggleLook(toggles.nth(1))
|
||
);
|
||
|
||
await dialog.getByRole('button', { name: 'Save' }).click();
|
||
await expect(dialog).toBeHidden();
|
||
await page.locator('[data-test-id="header-parental-lock"]').click();
|
||
|
||
const lockedRow = page.locator(
|
||
'[data-test-id="context-locked-categories"]'
|
||
);
|
||
await expect(lockedRow).toBeVisible();
|
||
await tabTo(
|
||
page,
|
||
browserName,
|
||
page.locator('.context-panel .category-item').last(),
|
||
lockedRow
|
||
);
|
||
for (const theme of THEMES) {
|
||
await setTheme(page, theme);
|
||
await expectFocusRing(lockedRow);
|
||
await expectPaintedBorder(lockedRow, 'dashed');
|
||
}
|
||
|
||
// A wrong PIN reads as an error in both themes.
|
||
await lockedRow.click();
|
||
await enterPin(page, '0000');
|
||
const error = page.locator('[data-test-id="parental-lock-pin-error"]');
|
||
await expect(error).toBeVisible();
|
||
for (const theme of THEMES) {
|
||
await setTheme(page, theme);
|
||
const [r, g, b] = await error.evaluate((el) =>
|
||
(getComputedStyle(el).color.match(/\d+/g) ?? []).map(Number)
|
||
);
|
||
expect(r - Math.max(g, b)).toBeGreaterThan(50);
|
||
expect(await contrastBehind(error, 'color', true)).toBeGreaterThan(
|
||
4.5
|
||
);
|
||
}
|
||
await enterPin(page);
|
||
await expect(lockedRow).toBeHidden();
|
||
|
||
await manage.click();
|
||
await expect(toggles.first()).toBeVisible();
|
||
await expectDialogFitsPhone(page, dialog);
|
||
});
|
||
|
||
test('@parental @stalker lock dialog rows, list border and phone width', async ({
|
||
page,
|
||
browserName,
|
||
}) => {
|
||
test.slow();
|
||
await addStalkerPortal(page, 'Lock UI Stalker');
|
||
const portalUrl = page.url();
|
||
await enableParentalLock(page);
|
||
await page.goto(portalUrl);
|
||
|
||
const manage = page.locator(
|
||
'[data-test-id="context-manage-categories"]'
|
||
);
|
||
await expect(manage).toBeEnabled({ timeout: 15_000 });
|
||
await manage.click();
|
||
await enterPin(page);
|
||
|
||
const dialog = await openedDialog(
|
||
page,
|
||
'app-stalker-category-lock-dialog'
|
||
);
|
||
const rows = dialog.locator('.category-item');
|
||
await expect(rows.first()).toBeVisible();
|
||
|
||
const search = dialog.locator('.search-inline input');
|
||
await tabTo(page, browserName, search, rows.first());
|
||
for (const theme of THEMES) {
|
||
await setTheme(page, theme);
|
||
await expectFocusRing(rows.first());
|
||
await expectPaintedBorder(
|
||
dialog.locator('.categories-list'),
|
||
'solid'
|
||
);
|
||
}
|
||
// The next row takes the ring over when Tab moves on.
|
||
await pressTab(page, browserName);
|
||
await expectFocusRing(rows.nth(1));
|
||
|
||
await search.fill('a');
|
||
await dialog.getByRole('button', { name: 'Clear search' }).click();
|
||
await expect(search).toHaveValue('');
|
||
|
||
await expectDialogFitsPhone(page, dialog);
|
||
});
|
||
|
||
test('@parental @m3u locked-groups row', async ({ page, browserName }) => {
|
||
test.slow();
|
||
// The fixture's placeholder media hosts stay offline.
|
||
await page.route(
|
||
/^https?:\/\/(?:channel\.icons\.url|example\.channels|xml-url)\//,
|
||
(route) => route.abort()
|
||
);
|
||
await page.getByRole('button', { name: 'Add playlist' }).click();
|
||
const addDialog = page.locator('mat-dialog-container');
|
||
await addDialog.getByRole('radio', { name: /M3U file/i }).click();
|
||
await page.setInputFiles('input[type="file"]', M3U_FIXTURE);
|
||
await Promise.all([
|
||
page.waitForURL(/\/workspace\/playlists\/.+\/all$/),
|
||
addDialog
|
||
.getByRole('button', { name: 'Add playlist', exact: true })
|
||
.click(),
|
||
]);
|
||
const groupsUrl = page.url().replace(/\/all$/, '/groups');
|
||
await enableParentalLock(page);
|
||
await page.goto(groupsUrl);
|
||
|
||
const manage = page.locator('.groups-nav-action--manage');
|
||
await expect(manage).toBeVisible({ timeout: 15_000 });
|
||
await manage.click();
|
||
await enterPin(page);
|
||
|
||
const dialog = await openedDialog(page, 'app-group-management-dialog');
|
||
const toggle = dialog.locator('[data-test-id="group-lock-News"]');
|
||
await toggle.click();
|
||
await expect(toggle).toHaveAttribute('aria-pressed', 'true');
|
||
expect(await toggleLook(toggle)).not.toBe(
|
||
await toggleLook(
|
||
dialog.locator('[data-test-id="group-lock-Sport"]')
|
||
)
|
||
);
|
||
await dialog.getByRole('button', { name: 'Save' }).click();
|
||
await expect(dialog).toBeHidden();
|
||
await page.locator('[data-test-id="header-parental-lock"]').click();
|
||
|
||
const lockedRow = page.locator('[data-test-id="groups-locked-row"]');
|
||
await expect(lockedRow).toBeVisible();
|
||
await tabTo(
|
||
page,
|
||
browserName,
|
||
page.locator('.groups-nav-list .nav-item').last(),
|
||
lockedRow
|
||
);
|
||
for (const theme of THEMES) {
|
||
await setTheme(page, theme);
|
||
await expectFocusRing(lockedRow);
|
||
await expectPaintedBorder(lockedRow, 'dashed');
|
||
}
|
||
});
|
||
});
|