Playwright test (#88)

.github/workflows/playwright.yml

@@ -0,0 +1,206 @@
+name: Playwright e2e tests
+
+on:
+  pull_request:
+    branches: [master]
+  workflow_run:
+    workflows: ['Prettier and linter']
+    types:
+      - completed
+
+concurrency:
+  group: ${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  neo4j-read:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    services:
+      neo4j:
+        image: neo4j:latest
+        env:
+          NEO4J_AUTH: neo4j/nothing123
+        ports:
+          - 7687:7687
+          - 7474:7474
+        options: >-
+          --name "neo4j_service"
+          --health-cmd "wget --spider http://localhost:7474 || exit 1"
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+
+    steps:
+      - name: Load movies dataset
+        run: |
+          docker exec neo4j_service wget -O /tmp/movies.cypher https://raw.githubusercontent.com/neo4j-graph-examples/movies/main/scripts/movies.cypher
+          docker exec neo4j_service cypher-shell -a bolt://localhost:7687 -u "neo4j" -p "nothing123" "MATCH (n) DETACH DELETE n"
+          docker exec neo4j_service cypher-shell -a bolt://localhost:7687 -u "neo4j" -p "nothing123" -f /tmp/movies.cypher
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests (neo4j-read)
+        run: npx playwright test --grep @neo4j-read --reporter=blob --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        env:
+          DB_HOSTNAME: 'bolt://localhost:7687'
+          DB_USERNAME: 'neo4j'
+          DB_PASSWORD: 'nothing123'
+      #      - uses: actions/upload-artifact@v4
+      #        if: ${{ failure() }}
+      #        with:
+      #          name: playwright-report
+      #          path: playwright-report/
+      #          retention-days: 1
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+
+  build:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.44.0-jammy
+
+    services:
+      neo4j:
+        image: neo4j:latest
+        env:
+          NEO4J_AUTH: neo4j/nothing123
+        ports:
+          - 7687:7687
+          - 7474:7474
+        options: >-
+          --health-cmd "wget --spider http://localhost:7474 || exit 1"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Build
+        run: npm run build
+      - name: Run Playwright tests (build)
+        run: npx playwright test --grep @build
+        env:
+          DB_HOSTNAME: 'bolt://neo4j:7687'
+          DB_USERNAME: 'neo4j'
+          DB_PASSWORD: 'nothing123'
+
+  neo4j-write:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.44.0-jammy
+
+    services:
+      neo4j:
+        image: neo4j:latest
+        env:
+          NEO4J_AUTH: neo4j/nothing123
+        ports:
+          - 7687:7687
+          - 7474:7474
+        options: >-
+          --health-cmd "wget --spider http://localhost:7474 || exit 1"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests (neo4j-write)
+        run: npx playwright test --grep @neo4j-write
+        env:
+          DB_HOSTNAME: 'bolt://neo4j:7687'
+          DB_USERNAME: 'neo4j'
+          DB_PASSWORD: 'nothing123'
+
+  neo4j-multidb:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.44.0-jammy
+
+    services:
+      neo4j:
+        image: neo4j:enterprise
+        env:
+          NEO4J_AUTH: neo4j/nothing123
+          NEO4J_ACCEPT_LICENSE_AGREEMENT: yes
+        ports:
+          - 7687:7687
+          - 7474:7474
+        options: >-
+          --health-cmd "wget --spider http://localhost:7474 || exit 1"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests (neo4j-multidb)
+        run: npx playwright test --grep @neo4j-multidb
+        env:
+          DB_HOSTNAME: 'bolt://neo4j:7687'
+          DB_USERNAME: 'neo4j'
+          DB_PASSWORD: 'nothing123'
+
+  memgraph:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.44.0-jammy
+
+    services:
+      memgraph:
+        image: memgraph/memgraph:latest
+        ports:
+          - 7687:7687
+        options: >-
+          --health-cmd "echo 'RETURN 0;' | mgconsole || exit 1"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests (memgraph)
+        run: npx playwright test --grep @memgraph
+        env:
+          DB_HOSTNAME: 'bolt://memgraph:7687'

.github/workflows/prettier-linter.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4

.gitignore

@@ -13,13 +13,12 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 /.idea
+/playwright-report/
+/test-results/

CONTRIBUTING.md

@@ -37,13 +37,17 @@ This will start the development server and open the application in your default
 -   We follow standard React code style conventions.
 -   We use TypeScript for type checking and code clarity. (non-strict)
 -   Bulma CSS framework is used for styling.
+-   Prettier is used. `npm run format`
 
 **Contributing Code:**
 
 1. Create a new branch for your feature or bug fix.
-2. Make your changes and commit them with descriptive messages.
-3. Push your changes to your forked repository.
-4. Create a pull request from your forked repository to the upstream cypherGUI repository.
+2. Make your changes.
+3. Test your code.
+4. Check your code with prettier and linter.
+5. Commit them with descriptive messages.
+6. Push your changes to your forked repository.
+7. Create a pull request from your forked repository to the upstream cypherGUI repository.
 
 **Pull Request Review:**
 
@@ -53,6 +57,7 @@ This will start the development server and open the application in your default
 **Testing:**
 
 -   Make sure to check project functionality in your browser.
+-   Playwright is used. `npx playwright test`
 -   Verify your change towards different ecosystems (Neo4j, Memgraph, etc.).
 
 **Licensing:**

e2e/fixtures/login.ts

@@ -0,0 +1,16 @@
+import { expect, test as base } from '@playwright/test';
+
+export const test = base.extend({
+    page: async ({ page }, use) => {
+        await page.goto(process.env.URL || '/');
+        await page.getByLabel('URL').fill(process.env.DB_HOSTNAME || 'bolt://localhost:7687');
+        await page.getByLabel('Username').fill(process.env.DB_USERNAME || '');
+        await page.getByLabel('Password').fill(process.env.DB_PASSWORD || '');
+        await page.getByRole('button', { name: 'Login' }).click();
+        await expect(page.getByLabel('main navigation')).toHaveCount(1);
+
+        await use(page);
+    },
+});
+
+export { expect };

e2e/fixtures/neo4j-movies.ts

@@ -0,0 +1,25 @@
+import { expect, test as base } from './login';
+import { containerLocator, switchToTab } from '../helpers';
+
+export const test = base.extend({
+    page: async ({ page }, use) => {
+        await switchToTab(page, 'Start');
+        await expect(containerLocator(page, 'button.is-link').filter({ hasText: '*' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-link').filter({ hasText: ':Person' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-link').filter({ hasText: ':Movie' })).toHaveCount(1);
+
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: '*' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':ACTED_IN' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':DIRECTED' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':PRODUCED' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':WROTE' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':FOLLOWS' })).toHaveCount(1);
+        await expect(containerLocator(page, 'button.is-info').filter({ hasText: ':REVIEWED' })).toHaveCount(1);
+
+        await expect(containerLocator(page, 'button.is-primary')).toContainText(['Create node', 'Create relationship']);
+
+        await use(page);
+    },
+});
+
+export { expect };

e2e/helpers.ts

@@ -0,0 +1,31 @@
+import { Page, expect } from '@playwright/test';
+
+export function containerLocator(page: Page, selector: string = '') {
+    const l = page.locator('.container > div').locator('visible=true');
+    return selector ? l.locator(selector) : l;
+}
+
+export function modalLocator(page: Page) {
+    return page.locator('.modal .modal-card').locator('visible=true');
+}
+
+export async function checkActiveTab(page: Page, text: string | RegExp) {
+    await expect(page.locator('.tabs .is-active')).toHaveText(text);
+}
+
+export async function switchToTab(page: Page, text: string | RegExp) {
+    await page.locator('.tabs a', { hasText: text }).click();
+    await checkActiveTab(page, text);
+}
+
+export async function checkErrorMessage(page: Page, text: string) {
+    await expect(containerLocator(page)).toContainText(text);
+    await containerLocator(page, '.message').getByRole('button').click();
+    await expect(containerLocator(page, '.message')).toHaveCount(0);
+}
+
+export async function checkNotification(page: Page, text: string | RegExp = 'Copied to clipboard') {
+    await expect(page.getByRole('region', { name: 'notifications' })).toHaveText(text);
+    await page.getByRole('region', { name: 'notifications' }).getByRole('button').click();
+    await expect(page.getByRole('region', { name: 'notifications' })).toBeEmpty();
+}

e2e/memgraph/memgraph.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '../fixtures/login';
+
+test.describe('Memgraph Tests', { tag: '@memgraph' }, () => {
+    test('Login successful', async ({ page }) => {
+        await expect(page.locator('#basicNavbar')).toBeVisible();
+    });
+});

e2e/neo4j-build/build.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Access cypherGUI as file', { tag: '@build' }, () => {
+    test('Open and login', async ({ page }) => {
+        await page.goto('file://' + require('node:path').resolve('./build/index.html'));
+        await page.getByLabel('URL').fill(process.env.DB_HOSTNAME || 'bolt://localhost:7687');
+        await page.getByLabel('Username').fill(process.env.DB_USERNAME);
+        await page.getByLabel('Password').fill(process.env.DB_PASSWORD);
+        await page.getByRole('button', { name: 'Login' }).click();
+        await expect(page.locator('#basicNavbar')).toBeVisible();
+    });
+});