216 lines
7.5 KiB
TypeScript
216 lines
7.5 KiB
TypeScript
// -----------------------------------------------------------------------------
|
|
// binary-diff-panel.spec.ts
|
|
// Sprint: SPRINT_20260117_018_FE_ux_components
|
|
// Task: UXC-008 - Integration tests with Playwright
|
|
// Description: Playwright e2e tests for Binary-Diff Panel component
|
|
// -----------------------------------------------------------------------------
|
|
|
|
import { expect, test } from '@playwright/test';
|
|
|
|
import { policyAuthorSession } from '../../src/app/testing';
|
|
|
|
const mockConfig = {
|
|
authority: {
|
|
issuer: 'https://authority.local',
|
|
clientId: 'stellaops-ui',
|
|
authorizeEndpoint: 'https://authority.local/connect/authorize',
|
|
tokenEndpoint: 'https://authority.local/connect/token',
|
|
logoutEndpoint: 'https://authority.local/connect/logout',
|
|
redirectUri: 'http://127.0.0.1:4400/auth/callback',
|
|
postLogoutRedirectUri: 'http://127.0.0.1:4400/',
|
|
scope: 'openid profile email ui.read findings:read binary:read',
|
|
audience: 'https://scanner.local',
|
|
dpopAlgorithms: ['ES256'],
|
|
refreshLeewaySeconds: 60,
|
|
},
|
|
apiBaseUrls: {
|
|
authority: 'https://authority.local',
|
|
scanner: 'https://scanner.local',
|
|
policy: 'https://scanner.local',
|
|
concelier: 'https://concelier.local',
|
|
attestor: 'https://attestor.local',
|
|
},
|
|
quickstartMode: true,
|
|
};
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.addInitScript((session) => {
|
|
try {
|
|
window.sessionStorage.clear();
|
|
} catch {
|
|
// ignore storage errors in restricted contexts
|
|
}
|
|
(window as any).__stellaopsTestSession = session;
|
|
}, policyAuthorSession);
|
|
|
|
await page.route('**/config.json', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(mockConfig),
|
|
})
|
|
);
|
|
|
|
await page.route('https://authority.local/**', (route) => route.abort());
|
|
});
|
|
|
|
test.describe('Binary-Diff Panel Component', () => {
|
|
test('renders header with base and candidate info', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Verify header shows base and candidate
|
|
await expect(page.getByText('Base')).toBeVisible();
|
|
await expect(page.getByText('Candidate')).toBeVisible();
|
|
|
|
// Verify diff stats
|
|
await expect(page.locator('.diff-stats')).toBeVisible();
|
|
});
|
|
|
|
test('scope selector switches between file, section, function', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Find scope selector buttons
|
|
const fileBtn = page.getByRole('button', { name: /File/i });
|
|
const sectionBtn = page.getByRole('button', { name: /Section/i });
|
|
const functionBtn = page.getByRole('button', { name: /Function/i });
|
|
|
|
await expect(fileBtn).toBeVisible();
|
|
await expect(sectionBtn).toBeVisible();
|
|
await expect(functionBtn).toBeVisible();
|
|
|
|
// Click section scope
|
|
await sectionBtn.click();
|
|
await expect(sectionBtn).toHaveClass(/active/);
|
|
|
|
// Click function scope
|
|
await functionBtn.click();
|
|
await expect(functionBtn).toHaveClass(/active/);
|
|
|
|
// Click file scope
|
|
await fileBtn.click();
|
|
await expect(fileBtn).toHaveClass(/active/);
|
|
});
|
|
|
|
test('scope selection updates diff view', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Select an entry in the tree
|
|
const treeItem = page.locator('.tree-item').first();
|
|
await treeItem.click();
|
|
|
|
// Verify selection state
|
|
await expect(treeItem).toHaveClass(/selected/);
|
|
|
|
// Verify diff view updates (footer shows hashes)
|
|
await expect(page.locator('.diff-footer')).toBeVisible();
|
|
});
|
|
|
|
test('show only changed toggle filters unchanged entries', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Find the toggle
|
|
const toggle = page.getByLabel(/Show only changed/i);
|
|
await expect(toggle).toBeVisible();
|
|
|
|
// Count items before toggle
|
|
const itemsBefore = await page.locator('.tree-item').count();
|
|
|
|
// Enable toggle
|
|
await toggle.check();
|
|
await expect(toggle).toBeChecked();
|
|
|
|
// Items may be filtered (or same count if all changed)
|
|
const itemsAfter = await page.locator('.tree-item').count();
|
|
expect(itemsAfter).toBeLessThanOrEqual(itemsBefore);
|
|
});
|
|
|
|
test('opcodes/decompiled toggle changes view mode', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Find the toggle
|
|
const toggle = page.getByLabel(/Opcodes|Decompiled/i);
|
|
await expect(toggle).toBeVisible();
|
|
|
|
// Toggle and verify label changes
|
|
const initialText = await toggle.locator('..').textContent();
|
|
await toggle.click();
|
|
const newText = await toggle.locator('..').textContent();
|
|
|
|
// Text should change between Opcodes and Decompiled
|
|
expect(initialText).not.toEqual(newText);
|
|
});
|
|
|
|
test('export signed diff button is functional', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Find export button
|
|
const exportBtn = page.getByRole('button', { name: /Export Signed Diff/i });
|
|
await expect(exportBtn).toBeVisible();
|
|
|
|
// Click and verify action
|
|
await exportBtn.click();
|
|
|
|
// Should trigger download or modal (implementation dependent)
|
|
// At minimum, button should be clickable without error
|
|
});
|
|
|
|
test('tree navigation supports keyboard', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Focus first tree item
|
|
const firstItem = page.locator('.tree-item').first();
|
|
await firstItem.focus();
|
|
|
|
// Press Enter to select
|
|
await page.keyboard.press('Enter');
|
|
await expect(firstItem).toHaveClass(/selected/);
|
|
});
|
|
|
|
test('diff view shows side-by-side comparison', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Verify side-by-side columns
|
|
await expect(page.locator('.diff-header-row')).toBeVisible();
|
|
await expect(page.locator('.line-base').first()).toBeVisible();
|
|
await expect(page.locator('.line-candidate').first()).toBeVisible();
|
|
});
|
|
|
|
test('change indicators show correct colors', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Check for change type classes on tree items
|
|
const addedItem = page.locator('.tree-item.change-added');
|
|
const removedItem = page.locator('.tree-item.change-removed');
|
|
const modifiedItem = page.locator('.tree-item.change-modified');
|
|
|
|
// At least one type should exist in a real diff
|
|
const hasChanges =
|
|
(await addedItem.count()) > 0 ||
|
|
(await removedItem.count()) > 0 ||
|
|
(await modifiedItem.count()) > 0;
|
|
|
|
expect(hasChanges).toBeTruthy();
|
|
});
|
|
|
|
test('hash display in footer shows base and candidate hashes', async ({ page }) => {
|
|
await page.goto('/binary/diff');
|
|
await expect(page.locator('.binary-diff-panel')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Select an entry
|
|
await page.locator('.tree-item').first().click();
|
|
|
|
// Verify footer hash display
|
|
await expect(page.getByText('Base Hash:')).toBeVisible();
|
|
await expect(page.getByText('Candidate Hash:')).toBeVisible();
|
|
});
|
|
});
|