Move e2e tests and add db truncating before each test

.gitignore

@@ -5,7 +5,7 @@ target
 tmp
 .history
 dist
-/.idea
+.idea
 /*.iml
 /out
 /.idea_modules
@@ -25,3 +25,5 @@ var/test.db
 node_modules/
 package-lock.json
 public/
+e2e/cypress/videos
+e2e/cypress/screenshots

docker-compose.yaml

@@ -16,6 +16,8 @@ services:
 
   database:
     image: postgres:12.5
+    ports:
+      - 5432:5432
     environment:
       POSTGRES_USER: smui
       POSTGRES_PASSWORD: smui

e2e/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:cypress/recommended"
+  ]
+}

e2e/cypress.json

@@ -0,0 +1,11 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "fixturesFolder": false,
+  "db": {
+    "user": "smui",
+    "host": "localhost",
+    "database": "smui",
+    "password": "smui",
+    "port": 5432
+  }
+}

e2e/cypress/integration/spec.js

@@ -0,0 +1,35 @@
+import { truncateTable } from '../src/sql';
+
+context('SMUI app', () => {
+  beforeEach(() => {
+    truncateTable('search_input');
+    cy.visit('/');
+  });
+
+  it('should have a page headline', () => {
+    cy.get('.navbar-brand').should('have.text', 'SMUI demo installation');
+  });
+
+  it('should create a new rule item and sort it in rules list', () => {
+    cy.get('[data-test=rules-search-input]').type('testRuleB{enter}');
+    cy.get('.list-item-term').should(terms => {
+      expect(terms).to.have.length(1);
+      expect(terms.eq(0).text()).to.contain('testRuleB');
+    });
+
+    cy.get('[data-test=rules-search-input]').type('testRuleC{enter}');
+    cy.get('.list-item-term').should(terms => {
+      expect(terms).to.have.length(2);
+      expect(terms.eq(0).text()).to.contain('testRuleB');
+      expect(terms.eq(1).text()).to.contain('testRuleC');
+    });
+
+    cy.get('[data-test=rules-search-input]').type('testRuleA{enter}');
+    cy.get('.list-item-term').should(terms => {
+      expect(terms).to.have.length(3);
+      expect(terms.eq(0).text()).to.contain('testRuleA');
+      expect(terms.eq(1).text()).to.contain('testRuleB');
+      expect(terms.eq(2).text()).to.contain('testRuleC');
+    });
+  });
+});

e2e/cypress/plugins/index.js

@@ -0,0 +1,15 @@
+const pg = require('pg');
+const cypressConfig = require("../../cypress.json");
+
+module.exports = (on, _) => {
+  on('task', {
+    query({ sql, values }) {
+      const pool = new pg.Pool(cypressConfig.db);
+      try {
+        return pool.query(sql, values);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
+};

e2e/cypress/src/sql.js

@@ -0,0 +1,7 @@
+const truncateTable = tableName => {
+  cy.task('query', {
+    sql: `truncate table ${tableName}`
+  });
+};
+
+export { truncateTable };

e2e/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "smui-integration-tests",
+  "description": "SMUI Integration Tests",
+  "version": "1.0.0",
+  "dependencies": {
+    "pg": "^8.5.1"
+  },
+  "devDependencies": {
+    "@cypress/eslint-plugin-dev": "^5.0.2",
+    "cypress": "^6.4.0",
+    "cypress-wait-until": "^1.7.1",
+    "eslint": "6.0.1",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-json-format": "2.0.1",
+    "eslint-plugin-mocha": "5.0.0"
+  }
+}