basic test for running and building react views (#32)

Author: christianhugoch

.github/workflows/nodejs.yml

@@ -0,0 +1,65 @@
+# This workflow installs saltcorn from npm and runs the plugin tests.
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    services:
+      # Label used to access the service container
+      postgres:
+        # Docker Hub image
+        image: postgres
+        # Provide the password for postgres
+        env:
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: saltcorn_test
+        # Set health checks to wait until postgres has started
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "22.x"
+      - run: npm install -g @saltcorn/cli@1.3.1-beta.11
+        env:
+          CI: true
+          PGHOST: localhost
+          PGUSER: postgres
+          PGDATABASE: saltcorn_test
+          PGPASSWORD: postgres
+      - run: saltcorn info
+        env:
+          CI: true
+          PGHOST: localhost
+          PGUSER: postgres
+          PGDATABASE: saltcorn_test
+          PGPASSWORD: postgres
+      - run: saltcorn add-schema -f
+        env:
+          CI: true
+          PGHOST: localhost
+          PGUSER: postgres
+          PGDATABASE: saltcorn_test
+          PGPASSWORD: postgres
+      - run: saltcorn dev:plugin-test -d $PWD -f backup.zip
+        env:
+          CI: true
+          PGHOST: localhost
+          PGUSER: postgres
+          PGDATABASE: saltcorn_test
+          PGPASSWORD: postgres

package.json

@@ -8,7 +8,8 @@
     "build_view_dev": "webpack --mode development --config user-code/webpack.config.js",
     "build_main": "webpack --mode production --config main-code/webpack.config.js",
     "build_main_dev": "webpack --mode development --config main-code/webpack.config.js",
-    "eslint": "eslint ./app-code"
+    "eslint": "eslint ./app-code",
+    "test": "jest tests --runInBand"
   },
   "dependencies": {
     "@saltcorn/markup": "^0.2.0",
@@ -29,6 +30,9 @@
     "style-loader": "4.0.0",
     "css-loader": "7.1.2"
   },
+  "devDependencies": {
+    "jest": "^29.7.0"
+  },
   "author": "Christian Hugo",
   "license": "MIT",
   "repository": "github:saltcorn/react",

tests/backup.zip

@@ -0,0 +1,37 @@
+const { getState } = require("@saltcorn/data/db/state");
+const View = require("@saltcorn/data/models/view");
+const { mockReqRes } = require("@saltcorn/data/tests/mocks");
+const { afterAll, beforeAll, describe, it, expect } = require("@jest/globals");
+
+getState().registerPlugin("base", require("@saltcorn/data/base-plugin"));
+getState().registerPlugin("@saltcorn/react", require(".."));
+
+afterAll(require("@saltcorn/data/db").close);
+beforeAll(async () => {
+  await getState().refresh(true);
+});
+
+describe("react view build tests", () => {
+  it("run tableless view", async () => {
+    const view = View.findOne({ name: "empty_react_view" });
+    const body = {
+      user_code: `
+import React from "react";
+export default function App({ viewName, query  }) {
+  return <h3>Please write your React code here</h3>;
+};`,
+      build_mode: "development",
+      timestamp: undefined,
+    };
+    await view.runRoute(
+      "build_user_code",
+      body,
+      mockReqRes.res,
+      { req: { ...mockReqRes.req, body }, res: mockReqRes.res },
+      false,
+    );
+    const stored = mockReqRes.getStored();
+    expect(stored).toBeDefined();
+    expect(stored).toEqual({ json: { notify_success: "Build successful" } });
+  });
+});

tests/build.test.js

@@ -0,0 +1,45 @@
+const { getState } = require("@saltcorn/data/db/state");
+const View = require("@saltcorn/data/models/view");
+const { mockReqRes } = require("@saltcorn/data/tests/mocks");
+const { afterAll, beforeAll, describe, it, expect } = require("@jest/globals");
+
+getState().registerPlugin("base", require("@saltcorn/data/base-plugin"));
+getState().registerPlugin("@saltcorn/react", require(".."));
+
+afterAll(require("@saltcorn/data/db").close);
+beforeAll(async () => {
+  await getState().refresh(true);
+});
+
+describe("react view run tests", () => {
+  it("run tableless view", async () => {
+    const view = View.findOne({ name: "default_react_view" });
+    const result = await view.run({}, mockReqRes);
+    expect(result).toBeDefined();
+    expect(result).toContain('<div class="_sc_react-view"');
+    expect(result).toContain('view-name="default_react_view"');
+    expect(result).toContain('query=\"%7B%7D\"');
+    expect(result).toContain(
+      'user=\"%7B%22id%22%3A1%2C%22role_id%22%3A1%2C%22attributes%22%3A%7B%7D%7D\"',
+    );
+    expect(result).toContain('timestamp="');
+  });
+
+  it("run view with table", async () => {
+    const view = View.findOne({ name: "react_view_with_data" });
+    const result = await view.run({}, mockReqRes);
+    expect(result).toBeDefined();
+    expect(result).toContain('<div class="_sc_react-view"');
+    expect(result).toContain('view-name="react_view_with_data"');
+    expect(result).toContain('query=\"%7B%7D\"');
+    expect(result).toContain('table-name="albums"');
+    expect(result).toContain('state=\"%7B%7D\"');
+    expect(result).toContain(
+      'rows=\"%5B%7B%22id%22%3A1%2C%22name%22%3A%22album%20A%22%2C%22release_date%22%3A%222025-08-03T17%3A08%3A00.000Z%22%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22album%20B%22%2C%22release_date%22%3A%222025-08-27T17%3A08%3A00.000Z%22%7D%5D\"',
+    );
+    expect(result).toContain(
+      'user=\"%7B%22id%22%3A1%2C%22role_id%22%3A1%2C%22attributes%22%3A%7B%7D%7D\"',
+    );
+    expect(result).toContain('timestamp="');
+  });
+});