@kronor/dtv 0.2.9

package/e2e/simple-view-transforms.spec.ts

@@ -0,0 +1,171 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Simple View Transform Functionality', () => {
+
+    test('should apply transform functions when filtering by amount', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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 all rows are initially visible
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 29', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 28', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 27', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 26', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).toBeVisible();
+        await expect(table.getByText('$300', { exact: true })).toBeVisible(); // amount for Test 30
+        await expect(table.getByText('$290', { exact: true })).toBeVisible(); // amount for Test 29
+        await expect(table.getByText('$280', { exact: true })).toBeVisible(); // amount for Test 28
+        await expect(table.getByText('$270', { exact: true })).toBeVisible(); // amount for Test 27
+        await expect(table.getByText('$260', { exact: true })).toBeVisible(); // amount for Test 26
+        await expect(table.getByText('$250', { exact: true })).toBeVisible(); // amount for Test 25
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the amount filter input
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+
+        // Enter 255 in the input field
+        // With transform: toQuery adds 5, so 255 becomes 260 in the query
+        // This should show only rows with amount >= 260 (Test 26, 27, 28, 29, 30)
+        await amountInput.fill('255');
+        await amountInput.press('Enter');
+
+        // Wait for filtering to complete and verify results
+        // These should still be visible (amount >= 260)
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 29', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 28', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 27', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 26', { exact: true })).toBeVisible();
+        await expect(table.getByText('$300', { exact: true })).toBeVisible();
+        await expect(table.getByText('$290', { exact: true })).toBeVisible();
+        await expect(table.getByText('$280', { exact: true })).toBeVisible();
+        await expect(table.getByText('$270', { exact: true })).toBeVisible();
+        await expect(table.getByText('$260', { exact: true })).toBeVisible();
+
+        // These should not be visible (amount < 260)
+        await expect(table.getByText('Test 25', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('Test 24', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('Test 23', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('$250', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('$240', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('$230', { exact: true })).not.toBeVisible();
+    });
+
+    test('should handle multiple filter value changes with transforms', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the amount filter input
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+
+        // Test 1: Enter 245 (transforms to 250), should show Test 25 and up
+        await amountInput.fill('245');
+        await amountInput.press('Enter');
+
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 24', { exact: true })).not.toBeVisible();
+
+        // Test 2: Change to 265 (transforms to 270), should show Test 27 and up
+        await amountInput.clear();
+        await amountInput.fill('265');
+        await amountInput.press('Enter');
+
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 27', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 26', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).not.toBeVisible();
+
+        // Test 3: Clear filter should show all items again
+        await amountInput.clear();
+        await amountInput.press('Enter');
+
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 24', { exact: true })).toBeVisible();
+    });
+
+    test('should handle key-value transform objects', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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 all rows are initially visible
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 29', { exact: true })).toBeVisible();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the extra filters panel
+        const extraFiltersPanel = page.locator('.p-panel-header', { hasText: 'Extra Filters' });
+        await expect(extraFiltersPanel).toBeVisible();
+
+        // Expand the extra filters panel if needed
+        if (await extraFiltersPanel.getAttribute('aria-expanded') !== 'true') {
+            await extraFiltersPanel.click();
+        }
+
+        // Find the key-value transform filter input
+        const keyValueLabel = page.getByText('Test Field (Key-Value Transform)', { exact: true });
+        await expect(keyValueLabel).toBeVisible();
+
+        const keyValueInput = keyValueLabel.locator('..').locator('~ div input');
+        await expect(keyValueInput).toBeVisible();
+
+        // Test 1: Enter a value that should be transformed
+        // The transform should add "prefix_" to the input and change the field to "transformedField"
+        await keyValueInput.fill('30');
+        await keyValueInput.press('Enter');
+
+        // Wait a bit for the filter to apply
+        await page.waitForTimeout(2000);
+
+        // Verify the correct row is shown (Test 30 should be visible since it matches the transformed query)
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        // Verify other rows are hidden
+        await expect(table.getByText('Test 29', { exact: true })).not.toBeVisible();
+
+        // Test 2: Clear the filter to verify all rows show again
+        await keyValueInput.clear();
+        await keyValueInput.press('Enter');
+
+        // Wait for the filter to clear
+        await page.waitForTimeout(1000);
+
+        // All rows should be visible again
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 29', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 28', { exact: true })).toBeVisible();
+    });
+
+});

package/e2e/simple-view.spec.ts

@@ -0,0 +1,104 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Simple View Rendering', () => {
+
+    test('should filter by phone using a custom filter component', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the phone filter input (by placeholder or input type)
+        const phoneInput = page.locator('input[placeholder="Phone number"]');
+
+        const phoneNumber = '+46700000025';
+        await phoneInput.fill(phoneNumber);
+
+        // Submit the filter form (by aria-label)
+        await page.getByLabel('Apply filter').click();
+
+        // Wait for the table to update and check that results are filtered
+        await expect(table.getByText(phoneNumber)).toBeVisible();
+    });
+    test('should render a view with a single column header and data', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Get the expected header text from the simple test view JSON (first column name)
+        const expectedHeaderText = "Test Column Header";
+
+        // Locate the column header by its text content
+        const columnHeader = table.getByText(expectedHeaderText, { exact: true });
+
+        // Assert that the column header is visible
+        await expect(columnHeader).toBeVisible();
+
+        // Assert that all rows are visible before applying the filter
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 29', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 28', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 27', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 24', { exact: true })).toBeVisible();
+        await expect(table.getByText('$300', { exact: true })).toBeVisible();
+        await expect(table.getByText('$290', { exact: true })).toBeVisible();
+        await expect(table.getByText('$280', { exact: true })).toBeVisible();
+        await expect(table.getByText('$270', { exact: true })).toBeVisible();
+        await expect(table.getByText('$250', { exact: true })).toBeVisible();
+        await expect(table.getByText('$240', { exact: true })).toBeVisible();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Use the filter to only show rows with amount >= 30
+        // Find the Amount label, then its parent, then the sibling div, then the input inside
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+        await amountInput.fill('260');
+        await amountInput.press('Enter');
+
+        // Assert that only the filtered rows are visible
+        await expect(table.getByText('Test 30', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 27', { exact: true })).toBeVisible();
+        await expect(table.getByText('Test 25', { exact: true })).not.toBeVisible();
+        await expect(table.getByText('Test 24', { exact: true })).not.toBeVisible();
+    });
+
+    test('should render filter group captions in the filter form', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with the simple test view
+        await page.goto('/?test-view=simple-test-view');
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Wait for the filter form to be present
+        const filterForm = page.locator('form');
+        await expect(filterForm).toBeVisible();
+
+        // Check for the presence of the new group label ("Extra Filters") as a Panel header
+        const extraFiltersPanel = page.locator('.p-panel-header', { hasText: 'Extra Filters' });
+        await expect(extraFiltersPanel).toBeVisible();
+
+        // Check that the filter label is present under the new group
+        await expect(page.getByText('Test Field', { exact: true })).toBeVisible();
+    });
+});

package/e2e/transform-regression.spec.ts

@@ -0,0 +1,108 @@
+import { test, expect } from '@playwright/test';
+import { mockPaginationGraphQL } from './graphqlMock';
+
+test.describe('Transform Regression Tests', () => {
+
+    test('should preserve display value after applying transform', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the amount filter input
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+
+        // Enter 255 in the input field
+        // With transform: toQuery adds 5, so 255 becomes 260 in the query
+        // Display should remain 255 (the user's input)
+        await amountInput.fill('255');
+
+        // Apply the filter
+        await page.getByRole('button', { name: 'Apply filter' }).click();
+
+        // Wait for the filter to be applied
+        await page.waitForTimeout(100);
+
+        // Check that the input still shows the original value (255) after applying the transform
+        // This is the regression test - it should show the original user input
+        await expect(amountInput).toHaveValue('255');
+    });
+
+    test('should correctly apply toQuery transforms', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the amount filter input
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+
+        // Test multiple values to ensure the transform roundtrip works correctly
+        const testValues = ['100', '255', '300'];
+
+        for (const testValue of testValues) {
+            // Clear and enter the test value
+            await amountInput.fill('');
+            await amountInput.fill(testValue);
+
+            // Apply the filter
+            await page.getByRole('button', { name: 'Apply filter' }).click();
+
+            // Wait for the filter to be applied
+            await page.waitForTimeout(100);
+
+            // Verify the input still shows the original value
+            await expect(amountInput).toHaveValue(testValue);
+        }
+    });
+
+    test('should handle empty values correctly with transforms', async ({ page }) => {
+        // Intercept the GraphQL request and mock the response
+        await page.route('**/v1/graphql', mockPaginationGraphQL);
+
+        // Navigate to the page with 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();
+
+        // Show filters first
+        await page.getByText('Filters', { exact: true }).click();
+
+        // Find the amount filter input
+        const amountLabel = page.getByText('Amount', { exact: true });
+        const amountInput = amountLabel.locator('..').locator('~ div input');
+
+        // Enter a value, then clear it
+        await amountInput.fill('255');
+        await page.getByRole('button', { name: 'Apply filter' }).click();
+        await page.waitForTimeout(100);
+
+        // Clear the input
+        await amountInput.fill('');
+        await page.getByRole('button', { name: 'Apply filter' }).click();
+        await page.waitForTimeout(100);
+
+        // Verify the input remains empty
+        await expect(amountInput).toHaveValue('');
+    });
+});

package/eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'off',
+      'indent': ['error', 4, { 'SwitchCase': 1 }],
+    },
+  },
+)

package/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" class="h-full">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="./src/index.css" rel="stylesheet">
+  <title>Filters Demo</title>
+</head>
+
+<body class="h-full w-full">
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+
+</html>

package/jest.config.js

@@ -0,0 +1,10 @@
+export default {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    testMatch: ['**/*.test.ts'],
+    globals: {
+        'ts-jest': {
+            tsconfig: 'tsconfig.jest.json'
+        }
+    }
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@kronor/dtv",
+  "version": "0.2.9",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test-unit": "jest",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "graphql-request": "^7.1.2",
+    "primeflex": "^4.0.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@playwright/test": "^1.52.0",
+    "@tailwindcss/vite": "^4.1.1",
+    "@types/dom-speech-recognition": "^0.0.6",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.15.21",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "husky": "^8.0.3",
+    "jest": "^30.0.3",
+    "jest-environment-jsdom": "^30.0.4",
+    "ts-jest": "^29.4.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './e2e',
+    /* Run tests in files in parallel */
+    fullyParallel: !process.env.CI,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: process.env.CI ? [['github'], ['html']] : 'html',
+    /* Expect timeout for assertions */
+    expect: {
+        timeout: 10 * 1000, // 10 seconds for expect assertions
+    },
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like \`await page.goto('/')\`. */
+        baseURL: 'http://localhost:5173',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        // {
+        //     name: 'firefox',
+        //     use: { ...devices['Desktop Firefox'] },
+        // },
+
+        // {
+        //     name: 'webkit',
+        //     use: { ...devices['Desktop Safari'] },
+        // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: 'npm run dev',
+        url: 'http://localhost:5173',
+        reuseExistingServer: !process.env.CI,
+    },
+});

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>