@kronor/dtv 0.2.9

package/e2e/filter-sharing.spec.ts

@@ -0,0 +1,113 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Filter Sharing', () => {
+    test.beforeEach(async ({ page, context }) => {
+        // Grant clipboard permissions
+        await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+    });
+
+    test('should show Share Filter button and handle sharing', async ({ page }) => {
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Open the filter form
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Verify Share Filter button exists in the filter form
+        const shareButton = page.getByRole('button', { name: 'Share Filter' });
+        await expect(shareButton).toBeVisible();
+
+        // If button is enabled, try sharing (some filter state may be present)
+        const isEnabled = await shareButton.isEnabled();
+        if (isEnabled) {
+            // Click the share button
+            await shareButton.click();
+
+            // Wait a bit for any potential toast to appear
+            await page.waitForTimeout(1000);
+
+            // Check if a toast appeared (it may or may not appear depending on success)
+            const toastMessages = page.locator('.p-toast .p-toast-message');
+            const toastCount = await toastMessages.count();
+
+            if (toastCount > 0) {
+                // If toast is present, verify it's about sharing
+                const toastText = await toastMessages.first().textContent();
+                expect(toastText).toMatch(/share|filter|copied|clipboard/i);
+            }
+
+            // The main test is that the button exists and can be clicked without error
+        }
+    });
+
+    test('should enable share button when filter is set', async ({ page }) => {
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Open the filter form
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Set a filter value using the pattern from working tests
+        const emailInput = page.getByText('Email', { exact: true }).locator('..').locator('~ div input');
+        await emailInput.fill('test@example.com');
+
+        // Apply the filter
+        await page.getByLabel('Apply filter').click();
+
+        // The filter form should still be open, verify Share Filter button is now enabled
+        const shareButton = page.getByRole('button', { name: 'Share Filter' });
+        await expect(shareButton).toBeEnabled();
+
+        // Click the share button
+        await shareButton.click();
+
+        // Wait a bit for any potential toast to appear
+        await page.waitForTimeout(1000);
+
+        // Check if a toast appeared
+        const toastMessages = page.locator('.p-toast .p-toast-message');
+        const toastCount = await toastMessages.count();
+
+        if (toastCount > 0) {
+            // If toast is present, verify it's about sharing
+            const toastText = await toastMessages.first().textContent();
+            expect(toastText).toMatch(/share|filter|copied|clipboard/i);
+        }
+
+        // The main test is that the button works and can be clicked
+    });
+
+    test('should handle invalid filter URL parameter', async ({ page }) => {
+        // Navigate with an invalid filter parameter
+        await page.goto('/?test-view=simple-test-view&dtv-filter-state=invalid-base64-data');
+
+        // Wait for the table to be present and visible (app should still load)
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Give the app time to process the invalid filter and show toast
+        await page.waitForTimeout(1000);
+
+        // Check if any toast appears (might be warning about invalid filter)
+        const toast = page.locator('.p-toast');
+        const toastVisible = await toast.isVisible();
+
+        if (toastVisible) {
+            // If toast is present, verify it contains relevant text
+            const toastText = await toast.textContent();
+            expect(toastText).toMatch(/invalid|filter|error/i);
+        }
+    });
+});

package/e2e/filter-url-persistence.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+function getParam(url: string, key: string) { return new URL(url).searchParams.get(key); }
+
+// Base64 URL-safe pattern (rough)
+const b64urlRe = /^[A-Za-z0-9_-]+$/;
+
+test.describe('Filter state URL persistence flag', () => {
+    test('disabled: applying filter does not set dtv-filter-state', async ({ page }) => {
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+        await page.goto('/?test-view=simple-test-view');
+        await page.getByText('Filters', { exact: true }).click();
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+        await amountInput.fill('260');
+        await amountInput.press('Enter');
+        expect(getParam(page.url(), 'dtv-filter-state')).toBeNull();
+    });
+
+    test('enabled: applying filter sets and persists dtv-filter-state', async ({ page }) => {
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+        await page.goto('/?test-view=simple-test-view&sync-filter-state-to-url=true');
+        await page.getByText('Filters', { exact: true }).click();
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+        await amountInput.fill('260');
+        await amountInput.press('Enter');
+        const encoded = getParam(page.url(), 'dtv-filter-state');
+        expect(encoded).not.toBeNull();
+        expect(encoded).toMatch(b64urlRe);
+        await page.reload();
+        await expect(page.getByRole('table')).toBeVisible();
+        expect(getParam(page.url(), 'dtv-filter-state')).not.toBeNull();
+    });
+});

package/e2e/graphqlMock.ts

@@ -0,0 +1,144 @@
+// Shared GraphQL mock handler for e2e tests (pagination and simple view)
+import { Route } from '@playwright/test';
+
+// Fixed dataset: 30 items (1.5 pages at 20 per page)
+const allRows = Array.from({ length: 30 }, (_, i) => ({
+    id: i + 1,
+    testField: `Test ${i + 1}`,
+    amount: (i + 1) * 10,
+    email: `user${i + 1}@example.com`,
+    phone: `+467000000${(i + 1).toString().padStart(2, '0')}`
+}));
+
+export async function mockPaginationGraphQL(route: Route) {
+    const request = route.request();
+    const postData = request.postDataJSON?.();
+    // Use paginationKey (id._gt or id._lt) to determine the start index, depending on orderBy
+    let startIdx = 0;
+    let pageSize = 20;
+    let orderKey = 'id';
+    let orderDir = 'asc';
+    if (postData && postData.variables && typeof postData.variables.limit === 'number') {
+        pageSize = postData.variables.limit;
+    }
+    if (postData && postData.variables && Array.isArray(postData.variables.orderBy) && postData.variables.orderBy.length > 0) {
+        const order = postData.variables.orderBy[0];
+        orderKey = Object.keys(order)[0];
+        orderDir = order[orderKey];
+    }
+    // Sort allRows according to orderBy
+    const sortedRows = allRows.slice();
+    sortedRows.sort((a, b) => {
+        if (a[orderKey] < b[orderKey]) return orderDir === 'ASC' ? -1 : 1;
+        if (a[orderKey] > b[orderKey]) return orderDir === 'ASC' ? 1 : -1;
+        return 0;
+    });
+    // Helper to recursively extract _gt/_lt for the pagination key from a condition tree
+    function findPaginationCursor(cond: any, key: string, orderDir: string): number | undefined {
+        if (!cond) return undefined;
+        if (cond._and && Array.isArray(cond._and)) {
+            for (const sub of cond._and) {
+                const found = findPaginationCursor(sub, key, orderDir);
+                if (found !== undefined) return found;
+            }
+        }
+        if (cond._or && Array.isArray(cond._or)) {
+            for (const sub of cond._or) {
+                const found = findPaginationCursor(sub, key, orderDir);
+                if (found !== undefined) return found;
+            }
+        }
+        if (cond[key]) {
+            if (orderDir === 'ASC' && cond[key]._gt !== undefined) return Number(cond[key]._gt);
+            if (orderDir === 'DESC' && cond[key]._lt !== undefined) return Number(cond[key]._lt);
+        }
+        return undefined;
+    }
+    // Apply additional filters (e.g. by amount, email)
+    function applyFilters(rows: typeof allRows, conditions: any): typeof allRows {
+        if (!conditions) return rows;
+
+        return rows.filter(row => evaluateCondition(row, conditions));
+    }
+
+    // Recursively evaluate a condition against a row
+    function evaluateCondition(row: any, condition: any): boolean {
+        // Handle logical operators
+        if (condition._and) {
+            return condition._and.every((subCondition: any) => evaluateCondition(row, subCondition));
+        }
+        if (condition._or) {
+            return condition._or.some((subCondition: any) => evaluateCondition(row, subCondition));
+        }
+        if (condition._not) {
+            return !evaluateCondition(row, condition._not);
+        }
+
+        // Handle field conditions
+        let pass = true;
+
+        // Check each field in the condition
+        for (const [fieldName, fieldCondition] of Object.entries(condition)) {
+            if (fieldName.startsWith('_')) continue; // Skip logical operators
+
+            const fieldValue = row[fieldName];
+            const ops = fieldCondition as any;
+
+            if (ops._eq !== undefined) {
+                if (fieldName === 'transformedField') {
+                    // Special handling for transformedField - convert back to testField
+                    const expectedValue = ops._eq.replace('prefix_', 'Test ');
+                    pass = pass && row.testField === expectedValue;
+                } else {
+                    pass = pass && fieldValue === ops._eq;
+                }
+            }
+            if (ops._neq !== undefined) pass = pass && fieldValue !== ops._neq;
+            if (ops._gt !== undefined) pass = pass && fieldValue > ops._gt;
+            if (ops._lt !== undefined) pass = pass && fieldValue < ops._lt;
+            if (ops._gte !== undefined) pass = pass && fieldValue >= ops._gte;
+            if (ops._lte !== undefined) pass = pass && fieldValue <= ops._lte;
+            if (ops._in !== undefined) pass = pass && Array.isArray(ops._in) && ops._in.includes(fieldValue);
+            if (ops._nin !== undefined) pass = pass && (!Array.isArray(ops._nin) || !ops._nin.includes(fieldValue));
+            if (ops._like !== undefined) {
+                // Convert SQL LIKE pattern to regex
+                const pattern = ops._like.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/%/g, '.*').replace(/_/g, '.');
+                const regex = new RegExp(`^${pattern}$`);
+                pass = pass && regex.test(String(fieldValue));
+            }
+            if (ops._ilike !== undefined) {
+                // Convert SQL ILIKE pattern to case-insensitive regex
+                const pattern = ops._ilike.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/%/g, '.*').replace(/_/g, '.');
+                const regex = new RegExp(`^${pattern}$`, 'i');
+                pass = pass && regex.test(String(fieldValue));
+            }
+            if (ops._is_null !== undefined) pass = pass && ((fieldValue == null) === ops._is_null);
+        }
+
+        return pass;
+    }
+    // Pagination: use _gt for asc, _lt for desc, recursively
+    let cursorValue: number | undefined = undefined;
+    let filteredRows = sortedRows;
+    if (postData && postData.variables && postData.variables.conditions) {
+        // Apply filters first
+        filteredRows = applyFilters(sortedRows, postData.variables.conditions);
+        // Then pagination cursor
+        cursorValue = findPaginationCursor(postData.variables.conditions, orderKey, orderDir);
+        if (cursorValue !== undefined) {
+            const idx = filteredRows.findIndex(r => Number((r as any)[orderKey]) === cursorValue);
+            startIdx = idx >= 0 ? idx + 1 : 0;
+        }
+    }
+
+    const data = filteredRows.slice(startIdx, startIdx + pageSize);
+    await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+            data: {
+                simpleTestDataCollection: data
+            }
+        })
+    });
+}

package/e2e/multi-field-filters.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Multi-field Filter Support', () => {
+    test('should handle OR multi-field filters correctly', async ({ page }) => {
+        // Intercept and mock GraphQL requests
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the "Search Multiple Fields (OR)" filter
+        const multiFieldLabel = page.getByText('Search Multiple Fields (OR)', { exact: true });
+        await expect(multiFieldLabel).toBeVisible();
+
+        // Find the input for this filter (it should be in the same container)
+        const multiFieldInput = multiFieldLabel.locator('..').locator('~ div input');
+
+        // Enter a search term that should match either testField or email
+        await multiFieldInput.fill('%Test%');
+        await multiFieldInput.press('Enter');
+
+        // The table should still show data (our mock data has "Test" in testField)
+        await expect(table).toBeVisible();
+
+        // Check that we can see some test data - be more specific to avoid multiple matches
+        await expect(table.getByText('Test 30')).toBeVisible();
+    });
+
+    test('should handle AND multi-field filters correctly', async ({ page }) => {
+        // Intercept and mock GraphQL requests
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the "Match Multiple Fields (AND)" filter
+        const andFieldLabel = page.getByText('Match Multiple Fields (AND)', { exact: true });
+        await expect(andFieldLabel).toBeVisible();
+
+        // Find the input for this filter
+        const andFieldInput = andFieldLabel.locator('..').locator('~ div input');
+
+        // Enter a value that would need to match both fields exactly
+        await andFieldInput.fill('exact_match');
+        await andFieldInput.press('Enter');
+
+        // The table should still be visible (even if no results, the structure remains)
+        await expect(table).toBeVisible();
+    });
+
+    test('should work with existing filters', async ({ page }) => {
+        // Intercept and mock GraphQL requests
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Use both a regular filter and a multi-field filter
+        const emailLabel = page.getByText('Email', { exact: true });
+        const emailInput = emailLabel.locator('..').locator('~ div input');
+        await emailInput.fill('test@example.com');
+        await emailInput.press('Enter');
+
+        // Also use the multi-field OR filter
+        const multiFieldLabel = page.getByText('Search Multiple Fields (OR)', { exact: true });
+        const multiFieldInput = multiFieldLabel.locator('..').locator('~ div input');
+        await multiFieldInput.fill('%Test%');
+        await multiFieldInput.press('Enter');
+
+        // Both filters should work together
+        await expect(table).toBeVisible();
+    });
+});

package/e2e/pagination.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+const APP_URL = 'http://localhost:5173/?test-view=simple-test-view';
+const nextButton = '[data-testid="pagination-next"]';
+const prevButton = '[data-testid="pagination-prev"]';
+const pageIndicator = '[data-testid="pagination-page"]';
+const tableRows = 'table tbody tr';
+
+test.describe('Simple View Pagination', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route('**/graphql', mockPaginationGraphQL);
+        await page.goto(APP_URL);
+        await page.waitForSelector(tableRows);
+    });
+
+    test('shows first page and disables previous button', async ({ page }) => {
+        await expect(page.locator(pageIndicator)).toHaveText('1-20');
+        await expect(page.locator(prevButton)).toBeDisabled();
+        const rowCount = await page.locator(tableRows).count();
+        expect(rowCount).toBe(20);
+    });
+
+    test('can go to next and previous page', async ({ page }) => {
+        await page.click(nextButton);
+        await expect(page.locator(pageIndicator)).toHaveText('21-30');
+        await expect(page.locator(prevButton)).toBeEnabled();
+        await page.click(prevButton);
+        await expect(page.locator(pageIndicator)).toHaveText('1-20');
+    });
+
+    test('next button disables on last page', async ({ page }) => {
+        await page.click(nextButton); // to 2nd page
+        await expect(page.locator(pageIndicator)).toHaveText('21-30');
+        await expect(page.locator(tableRows)).toHaveCount(10);
+        await expect(page.locator(nextButton)).toBeDisabled();
+    });
+});

package/e2e/payment-request-email-filter.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Simple View Email Filter', () => {
+    test('should set email filter when clicking on email', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Verify that the table headers are rendered correctly
+        await expect(table.getByText('Test Column Header')).toBeVisible();
+        await expect(table.getByText('Email')).toBeVisible();
+
+        // Find the first email button in the Email column
+        const firstEmailButton = table.locator('td button').filter({ hasText: '@' }).first();
+        await expect(firstEmailButton).toBeVisible();
+
+        // Verify the button has the expected styling classes
+        await expect(firstEmailButton).toHaveClass(/text-blue-500/);
+        await expect(firstEmailButton).toHaveClass(/underline/);
+
+        // Get the email text before clicking
+        const emailText = await firstEmailButton.textContent();
+        expect(emailText).toMatch(/@/);
+        expect(emailText).toBeTruthy(); // Ensure it's not null
+
+        // Click the email button
+        await firstEmailButton.click();
+
+        // Show filters to see the filter form
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Verify that the Email filter is now populated with the clicked email
+        const emailFilterInput = page.getByText('Email', { exact: true }).locator('..').locator('~ div input');
+        await expect(emailFilterInput).toHaveValue(emailText!);
+
+        // Verify that the table now shows only rows with that email (should be just 1 row)
+        const emailButtons = table.locator('td button').filter({ hasText: emailText! });
+        await expect(emailButtons).toHaveCount(1);
+    });
+
+    test('should show tooltip on email hover', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Find the first email button
+        const emailButton = table.locator('td button').filter({ hasText: '@' }).first();
+        await expect(emailButton).toBeVisible();
+
+        // Check for title attribute (tooltip)
+        const title = await emailButton.getAttribute('title');
+        expect(title).toMatch(/Filter by email:/);
+    });
+});

package/e2e/save-filter-splitbutton.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Save Filter SplitButton', () => {
+    test.beforeEach(async ({ page }) => {
+        // Set up GraphQL mock
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the app
+        await page.goto('/?test-view=simple-test-view');
+    });
+
+    test('should render SplitButton for save filter', async ({ page }) => {
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Look for the Save Filter SplitButton
+        const saveFilterButton = page.locator('.p-splitbutton').filter({ hasText: 'Save Filter' });
+        await expect(saveFilterButton).toBeVisible();
+
+        // Verify the main button text
+        const mainButton = saveFilterButton.locator('.p-splitbutton-defaultbutton');
+        await expect(mainButton).toContainText('Save Filter');
+
+        // Verify the dropdown exists
+        const dropdownButton = saveFilterButton.locator('.p-splitbutton-menubutton');
+        await expect(dropdownButton).toBeVisible();
+    });
+
+    test('should open dropdown menu when arrow is clicked', async ({ page }) => {
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the SplitButton
+        const saveFilterButton = page.locator('.p-splitbutton').filter({ hasText: 'Save Filter' });
+        await expect(saveFilterButton).toBeVisible();
+
+        // Click the dropdown arrow
+        const dropdownButton = saveFilterButton.locator('.p-splitbutton-menubutton');
+        await dropdownButton.click();
+
+        // Should see a menu appear (even if empty)
+        const menu = page.locator('.p-menu', { hasText: /Update/ }).or(page.locator('.p-menu'));
+        await expect(menu.first()).toBeVisible();
+    });
+
+    test('main button click should trigger save dialog', async ({ page }) => {
+        // Show filters
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Set up dialog handler to verify it's triggered
+        let dialogTriggered = false;
+        page.on('dialog', async dialog => {
+            expect(dialog.type()).toBe('prompt');
+            expect(dialog.message()).toBe('Enter a name for this filter:');
+            dialogTriggered = true;
+            await dialog.dismiss(); // Just dismiss to avoid actually saving
+        });
+
+        // Click the main save button
+        const saveFilterButton = page.locator('.p-splitbutton').filter({ hasText: 'Save Filter' });
+        await saveFilterButton.locator('.p-splitbutton-defaultbutton').click();
+
+        // Verify dialog was triggered
+        await page.waitForTimeout(500);
+        expect(dialogTriggered).toBe(true);
+    });
+});

package/e2e/simple-view-email-filter.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Simple View Email Filter', () => {
+    test('should set email filter when clicking on email', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Verify that the table headers are rendered correctly
+        await expect(table.getByText('Test Column Header')).toBeVisible();
+        await expect(table.getByText('Email')).toBeVisible();
+
+        // Find the first email button in the Email column
+        const firstEmailButton = table.locator('td button').filter({ hasText: '@' }).first();
+        await expect(firstEmailButton).toBeVisible();
+
+        // Verify the button has the expected styling classes
+        await expect(firstEmailButton).toHaveClass(/text-blue-500/);
+        await expect(firstEmailButton).toHaveClass(/underline/);
+
+        // Get the email text before clicking
+        const emailText = await firstEmailButton.textContent();
+        expect(emailText).toMatch(/@/);
+        expect(emailText).toBeTruthy(); // Ensure it's not null
+
+        // Click the email button
+        await firstEmailButton.click();
+
+        // Show filters to see the filter form
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Verify that the Email filter is now populated with the clicked email
+        const emailFilterInput = page.getByText('Email', { exact: true }).locator('..').locator('~ div input');
+        await expect(emailFilterInput).toHaveValue(emailText!);
+
+        // Verify that the table now shows only rows with that email (should be just 1 row)
+        const emailButtons = table.locator('td button').filter({ hasText: emailText! });
+        await expect(emailButtons).toHaveCount(1);
+    });
+
+    test('should show tooltip on email hover', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Wait for the table to be present and visible
+        const table = page.getByRole('table');
+        await expect(table).toBeVisible();
+
+        // Find the first email button
+        const emailButton = table.locator('td button').filter({ hasText: '@' }).first();
+        await expect(emailButton).toBeVisible();
+
+        // Check for title attribute (tooltip)
+        const title = await emailButton.getAttribute('title');
+        expect(title).toMatch(/Filter by email:/);
+    });
+});