test: add e2e tests

ci: add e2e checks

.github/dependabot.yml

@@ -0,0 +1,68 @@
+version: 2
+updates:
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      timezone: 'Europe/Warsaw'
+      day: 'saturday'
+      time: '06:00'
+    target-branch: 'main'
+    open-pull-requests-limit: 10
+    commit-message:
+      prefix: 'ci'
+      include: 'scope'
+    assignees: ['k3nsei']
+    reviewers: ['k3nsei']
+
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      timezone: 'Europe/Warsaw'
+      day: 'saturday'
+      time: '06:00'
+    target-branch: 'main'
+    groups:
+      angular:
+        applies-to: 'version-updates'
+        patterns:
+          - '@angular/*'
+          - '@angular-devkit/*'
+          - 'ng-packagr'
+          - 'zone.js'
+        exclude-patterns:
+          - '@angular/cdk'
+          - '@angular/material'
+          - '@angular/material-*'
+      angular-material:
+        applies-to: 'version-updates'
+        patterns:
+          - '@angular/cdk'
+          - '@angular/material'
+          - '@angular/material-*'
+      angular-eslint:
+        applies-to: 'version-updates'
+        patterns:
+          - '@angular-eslint/*'
+      eslint:
+        applies-to: 'version-updates'
+        patterns:
+          - 'angular-eslint'
+          - 'eslint'
+          - 'eslint-*'
+          - 'typescript-eslint'
+      jest:
+        applies-to: 'version-updates'
+        patterns:
+          - '@types/jest'
+          - 'jest'
+          - 'jest-*'
+          - 'ts-jest'
+    open-pull-requests-limit: 20
+    commit-message:
+      prefix: 'chore'
+      prefix-development: 'chore'
+      include: 'scope'
+    assignees: ['k3nsei']
+    reviewers: ['k3nsei']

.github/workflows/pr.yml

@@ -1,4 +1,4 @@
-name: pr
+name: Pull Request
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -12,7 +12,7 @@ permissions:
   contents: read
 
 jobs:
-  pr:
+  build_test:
     name: Run build and unit tests
     runs-on: ubuntu-latest
     steps:
@@ -29,3 +29,39 @@ jobs:
         run: |
           npx --no -- ng build ngx-signal-store-query --configuration=production
           npx --no -- ng build demo --configuration=production --progress=false --verbose
+
+      - name: Upload build artefacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-artefacts
+          path: dist/
+          retention-days: 7
+
+  e2e:
+    name: Run E2E tests
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.46.1-noble
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install dependencies
+        uses: ./.github/actions/install-npm-deps
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        working-directory: apps/demo-e2e
+        run: npx playwright test --project=chromium
+
+      - name: Upload test report
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            apps/demo-e2e/playwright-report/
+            apps/demo-e2e/test-results/
+          retention-days: 7

apps/demo-e2e/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/demo-e2e/eslint.config.js

@@ -0,0 +1,8 @@
+// @ts-check
+const tsEslint = require('typescript-eslint');
+const rootConfig = require('../../eslint.config.js');
+
+module.exports = tsEslint.config(...rootConfig, {
+  files: ['*.ts', '**/*.ts'],
+  rules: {},
+});

apps/demo-e2e/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@ngx-signal-store-query/demo-e2e",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.46.1",
+    "@types/node": "^22.4.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

apps/demo-e2e/playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices, type PlaywrightTestConfig } from '@playwright/test';
+import { availableParallelism } from 'node:os';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+const WORKERS_COUNT = Math.min(8, Math.max(1, availableParallelism() - 1));
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+const config: PlaywrightTestConfig = defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* 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: WORKERS_COUNT,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI
+    ? [['list'], ['line'], ['github'], ['blob'], ['html', { open: 'never' }]]
+    : [['list'], ['line'], ['html', { open: 'on-failure' }]],
+  /* 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:4200',
+    /* 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: 'cd ../../ && npm run start',
+    url: 'http://localhost:4200/',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'ignore',
+  },
+});
+
+export default config;

apps/demo-e2e/tests/counter.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+const { step } = test;
+
+test('Counter', async ({ page }) => {
+  await step('has proper url', async () => {
+    await page.goto('/');
+
+    expect(page.url()).toBe('http://localhost:4200/');
+  });
+
+  await step('has proper title', async () => {
+    await expect(page).toHaveTitle('Demo');
+  });
+
+  const counterLocator = page.locator('ssq-counter');
+  const valueLocator = counterLocator.locator('output');
+  const decreaseLocator = counterLocator.getByRole('button', { name: 'Decrease' });
+  const increaseLocator = counterLocator.getByRole('button', { name: 'Increase' });
+  const snackbarLocator = page.locator('.cdk-overlay-container .mdc-snackbar');
+
+  await step('too low value error snack bar has been rendered', async () => {
+    await decreaseLocator.click();
+
+    await expect(snackbarLocator.getByText('Count is too low')).toBeInViewport();
+  });
+
+  await step('counter value should equal 1', async () => {
+    await increaseLocator.click();
+
+    await expect(valueLocator).toContainText('1');
+  });
+
+  await step('too high value error snack bar has been rendered', async () => {
+    for (let i = 0; i < 5; i++) {
+      await increaseLocator.click();
+    }
+
+    await expect(valueLocator).toContainText('5');
+    await expect(snackbarLocator.getByText('Count is too high')).toBeInViewport();
+  });
+});