Fix cypress test run in docker

.gitignore

@@ -2,6 +2,7 @@
 .buildpath
 .project
 .idea/
+app/config.php
 build
 deployment/clients/dev/data/
 deployment/clients/test/data/

docker-compose-cypress.yaml

@@ -1,17 +0,0 @@
-version: "3.5"
-services:
-  # Cypress container
-  cypress:
-    network_mode: host
-    # the Docker image to use from https://github.com/cypress-io/cypress-docker-images
-    image: "cypress/included:3.2.0"
-    environment:
-      # pass base url to test pointing at the web application
-      - CYPRESS_baseUrl=http://icehrm:8090
-    # share the current folder as volume to avoid copying
-    working_dir: /e2e
-    volumes:
-      - ./test/frontend:/e2e
-
-volumes:
-  db_data:

docker-compose-testing.yaml

@@ -19,6 +19,21 @@ services:
       dockerfile: Dockerfile-testing
     ports:
       - 8090:8090
+    logging:
+      driver: none
 
+  # Cypress container
+  cypress:
+    # the Docker image to use from https://github.com/cypress-io/cypress-docker-images
+    image: "cypress/included:3.2.0"
+    depends_on:
+      - icehrm-testing
+    environment:
+      # pass base url to test pointing at the web application
+      - CYPRESS_baseUrl=http://icehrm-testing:8090
+    # share the current folder as volume to avoid copying
+    working_dir: /e2e
+    volumes:
+      - ./test/frontend:/e2e
 volumes:
   db_data:

docker-compose.yaml

@@ -17,5 +17,9 @@ services:
     build: .
     ports:
       - 8080:8080
+    volumes:
+      - ./app:/var/www/html/app
+      - ./web:/var/www/html/web
+      - ./core:/var/www/html/core
 volumes:
   db_data:

docker/testing/config/config.php

@@ -4,8 +4,8 @@ ini_set('error_log', 'data/icehrm.log');
 define('CLIENT_NAME', 'icehrm');
 define('APP_BASE_PATH', '/var/www/html/core/');
 define('CLIENT_BASE_PATH', '/var/www/html/app/');
-define('BASE_URL','http://icehrm:8090/web/');
-define('CLIENT_BASE_URL','http://icehrm:8090/app/');
+define('BASE_URL','http://icehrm-testing:8090/web/');
+define('CLIENT_BASE_URL','http://icehrm-testing:8090/app/');
 
 define('APP_DB', 'icehrm');
 define('APP_USERNAME', 'testing');

gulpfile.js

@@ -12,11 +12,22 @@ const es = require('event-stream');
 const rename = require('gulp-rename');
 const concat = require('gulp-concat');
 const copy = require('gulp-copy');
+const babel = require('gulp-babel');
+const less = require('gulp-less');
+const path = require('path');
+const cleanCSS = require('gulp-clean-css');
 
 const paths = {
   pages: ['src/*.html'],
 };
 
+let mod = process.argv.filter((item) => item.substr(0, 3) === '--m');
+if (mod.length === 1) {
+  mod = mod[0].substr(3);
+} else {
+  mod = null;
+}
+
 gulp.task('pack-js', (done) => {
   gulp.src([
     'web/js/jquery2.0.2.min.js',
@@ -46,6 +57,18 @@ gulp.task('pack-js', (done) => {
   done();
 });
 
+gulp.task('compile-ant-less', (done) => {
+  gulp.src([
+    'web/node_modules/antd/dist/antd.less',
+  ]).pipe(less({
+    paths: [path.join(__dirname, 'less', 'includes')],
+    javascriptEnabled: true,
+  }))
+    .pipe(concat('antd.css'))
+    .pipe(gulp.dest('web/dist'));
+  done();
+});
+
 gulp.task('pack-css', (done) => {
   gulp.src([
     'web/themecss/bootstrap.min.css',
@@ -64,7 +87,10 @@ gulp.task('pack-css', (done) => {
     'web/css/fa-animations.css',
     'web/css/style.css',
     'web/bower_components/simplemde/dist/simplemde.min.css',
+    'web/node_modules/codemirror/lib/codemirror.css',
+    'web/dist/antd.css',
   ])
+    .pipe(cleanCSS())
     .pipe(concat('third-party.css'))
     .pipe(gulp.dest('web/dist'));
   done();
@@ -95,8 +121,9 @@ gulp.task('api-common', (done) => {
     packageCache: {},
   })
     .transform('babelify', {
-      presets: ['es2015'], extensions: ['.js'],
+      presets: ['@babel/preset-env', '@babel/preset-react'], extensions: ['.js', '.jsx'],
     })
+    .transform(require('browserify-css'))
     .bundle()
     .pipe(source('common.js'))
     .pipe(buffer())
@@ -124,11 +151,12 @@ gulp.task('api-common', (done) => {
 gulp.task('admin-js', (done) => {
   // we define our input files, which we want to have
   // bundled:
-  const files = [
+  let files = [
     'attendance',
     'company_structure',
     'dashboard',
     'data',
+    'documents',
     'employees',
     'fieldnames',
     'jobs',
@@ -146,8 +174,13 @@ gulp.task('admin-js', (done) => {
     'travel',
     'users',
   ];
+
+  if (mod != null) {
+    files = files.filter((item) => item === mod);
+  }
+
   // map them to our stream function
-  const tasks = files.map(entry => browserify({
+  const tasks = files.map((entry) => browserify({
     entries: [`web/admin/src/${entry}/index.js`],
     basedir: '.',
     debug: true,
@@ -155,11 +188,15 @@ gulp.task('admin-js', (done) => {
     packageCache: {},
   })
     .transform('babelify', {
-      presets: ['es2015'], extensions: ['.js'],
+      plugins: [
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+      ],
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+      extensions: ['.js', '.jsx'],
     })
+    .transform(require('browserify-css'))
     .bundle()
     .pipe(source(`${entry}/lib.js`))
-  // rename them to have "bundle as postfix"
     .pipe(rename(`${entry}.js`))
     .pipe(buffer())
     .pipe(sourcemaps.init({ loadMaps: true }))
@@ -180,10 +217,11 @@ gulp.task('admin-js', (done) => {
 gulp.task('modules-js', (done) => {
   // we define our input files, which we want to have
   // bundled:
-  const files = [
+  let files = [
     'attendance',
     'dashboard',
     'dependents',
+    'documents',
     'emergency_contact',
     'employees',
     'loans',
@@ -196,8 +234,13 @@ gulp.task('modules-js', (done) => {
     'time_sheets',
     'travel',
   ];
+
+  if (mod != null) {
+    files = files.filter((item) => item === mod);
+  }
+
   // map them to our stream function
-  const tasks = files.map(entry => browserify({
+  const tasks = files.map((entry) => browserify({
     entries: [`web/modules/src/${entry}/index.js`],
     basedir: '.',
     debug: true,
@@ -205,11 +248,11 @@ gulp.task('modules-js', (done) => {
     packageCache: {},
   })
     .transform('babelify', {
-      presets: ['es2015'], extensions: ['.js'],
+      presets: ['@babel/preset-env', '@babel/preset-react'], extensions: ['.js', '.jsx'],
     })
+    .transform(require('browserify-css'))
     .bundle()
     .pipe(source(`${entry}/lib.js`))
-  // rename them to have "bundle as postfix"
     .pipe(rename(`${entry}.js`))
     .pipe(buffer())
     .pipe(sourcemaps.init({ loadMaps: true }))
@@ -228,6 +271,7 @@ gulp.task('modules-js', (done) => {
 });
 
 gulp.task('default', gulp.series(
+  'compile-ant-less',
   'pack-js',
   'pack-css',
   'copy-assets',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "icehrm",
-  "version": "1.0.0",
-  "description": "IceHrm is a human resource management system",
+  "version": "",
+  "description": "Simple HR Management",
   "main": "gulpfile.js",
   "directories": {
     "test": "test"
@@ -12,31 +12,41 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "acorn": "^6.0.4",
-    "babel-core": "^6.26.3",
-    "babel-preset-es2015": "^6.24.1",
-    "babelify": "^8.0.0",
-    "browserify": "^16.2.2",
-    "eslint": "^5.11.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "acorn": "^7.1.1",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.1",
+    "browserify-css": "^0.15.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
     "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-copy": "^4.0.1",
     "gulp-minify": "^3.1.0",
     "gulp-obfuscate": "^0.2.9",
-    "gulp-sourcemaps": "^2.6.4",
-    "gulp-uglify": "^3.0.1",
-    "gulp-uglify-es": "^1.0.4",
+    "gulp-rename": "^2.0.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-uglify": "^3.0.2",
+    "gulp-uglify-es": "^2.0.0",
+    "stdio": "^2.1.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },
   "dependencies": {
+    "browserify-less": "0.0.1",
     "d3": "^5.9.1",
     "event-stream": "^4.0.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-copy": "^4.0.1",
-    "gulp-rename": "^1.4.0",
-    "qrcode": "^1.3.3"
+    "gulp-less": "^4.0.1",
+    "path": "^0.12.7",
+    "qrcode": "^1.3.3",
+    "reqwest": "^2.0.5"
   }
 }

test/frontend/cypress/commmon/ice-cypress-test.js

@@ -63,21 +63,10 @@ class IceCypressTest {
 
   clickSave(cy) {
     cy.get(`#${this.element}Form .saveBtn`).should("be.visible").click();
+    cy.wait(config.WAIT_TIME);
   }
 
   editElementValidate(cy, validation = [], editButtonSelector) {
-    if (this.isRemoteTable) {
-      cy.server().route('GET', `/${config.URL_PREFIX}/data.php*`).as('getAfterSave');
-    } else {
-      cy.server().route('POST', `/${config.URL_PREFIX}/service.php*`).as('getAfterSave');
-    }
-
-    // Wait for data table response
-    if (config.WAIT_ON_TIME) {
-      cy.wait(config.WAIT_TIME);
-    } else {
-      cy.wait('@getAfterSave').its('status').should('be', config.DEFAULT_STATUS);
-    }
 
     cy.server().route('POST', `/${config.URL_PREFIX}/service.php*`).as('getElementAfterSave');
     // Click on edit and wait
@@ -85,11 +74,7 @@ class IceCypressTest {
       .should("be.visible")
       .click();
 
-    if (config.WAIT_ON_TIME) {
-      cy.wait(config.WAIT_TIME);
-    } else {
     cy.wait('@getElementAfterSave').its('status').should('be', config.DEFAULT_STATUS);
-    }
 
     validation.forEach((item) => {
       cy.get(item[0]).then(element => expect(element.val()).eq(item[1]));

test/frontend/cypress/integration/admin/teams.members.spes.js

@@ -1,44 +0,0 @@
-const IceCypressTest = require('../../commmon/ice-cypress-test');
-const config = require('../../support/config');
-
-const test = new IceCypressTest(
-  'g=admin&n=teams&m=admin_Employees',
-  'TeamMembers',
-  false,
-);
-
-context('Admin Teams Module - Team Members Tab', () => {
-  it('admin can view list', () => {
-    cy.login('admin', 'admin');
-    test.loadModule(cy);
-    test.switchTab(cy);
-    test.loadTable(cy, 2);
-  });
-
-  it('admin can edit element', () => {
-    cy.login('admin', 'admin');
-    test.loadModule(cy);
-    test.switchTab(cy);
-    cy.get('#TeamMembers table tbody').find('tr').first().find('.center div img[data-original-title=\'Edit\']')
-      .click();
-    test.select2Click('team', 'beta');
-    test.clickSave(cy);
-  });
-
-  it('manager can view list', () => {
-    cy.login('manager', config.DEFAULT_USER_PASS);
-    test.loadModule(cy);
-    test.switchTab(cy);
-    test.loadTable(cy, 2);
-  });
-
-  it('manager can edit element', () => {
-    cy.login('manager', config.DEFAULT_USER_PASS);
-    test.loadModule(cy);
-    test.switchTab(cy);
-    cy.get('#TeamMembers table tbody').find('tr').first().find('.center div img[data-original-title=\'Edit\']')
-      .click();
-    test.select2Click('team', 'beta');
-    test.clickSave(cy);
-  });
-});

test/frontend/cypress/integration/admin/teams.spec.js

@@ -1,40 +0,0 @@
-const IceCypressTest = require('../../commmon/ice-cypress-test');
-const config = require('../../support/config');
-
-const test = new IceCypressTest(
-  'g=admin&n=teams&m=admin_Employees',
-  'Teams',
-  false,
-);
-
-context('Admin Teams Module - Teams Tab', () => {
-  it('admin can view list', () => {
-    cy.login('admin', 'admin');
-    test.loadModule(cy);
-    test.loadTable(cy, 2);
-  });
-
-  it('admin can edit element', () => {
-    cy.login('admin', 'admin');
-    test.loadModule(cy);
-    test.editElement(cy, [['#description', 'creative designing team']]);
-    test.select2Click('department', 'Head Office');
-    test.clickSave(cy);
-    test.editElementValidate(cy, [['#description', 'creative designing team']]);
-  });
-
-  it('manager can view list', () => {
-    cy.login('manager', config.DEFAULT_USER_PASS);
-    test.loadModule(cy);
-    test.loadTable(cy, 2);
-  });
-
-  it('manager can edit element', () => {
-    cy.login('manager', config.DEFAULT_USER_PASS);
-    test.loadModule(cy);
-    test.editElement(cy, [['#description', 'creative designing team']]);
-    test.select2Click('department', 'Head Office');
-    test.clickSave(cy);
-    test.editElementValidate(cy, [['#description', 'creative designing team']]);
-  });
-});

test/frontend/cypress/support/config.js

@@ -1,11 +1,11 @@
-const BASE_URL = 'http://icehrm:8090/app/';
+const BASE_URL = 'http://icehrm-testing:8090/app/';
 //const BASE_URL = 'http://clients.icehrmpro.test/test/';
 
 const DEFAULT_MAX_PAGE_SIZE = 15;
 const DEFAULT_STATUS = 200;
 const DEFAULT_USER_PASS = 'demouserpwd';
 const URL_PREFIX = 'app';
-const WAIT_ON_TIME = true;
+const WAIT_ON_TIME = false;
 const WAIT_TIME = 500;
 
 module.exports = {

web/admin/src/employees/lib.js

@@ -1213,7 +1213,11 @@ class TerminatedEmployeeAdapter extends EmployeeAdapter {
 
   getActionButtonsHtml(id) {
     // eslint-disable-next-line max-len
-    let html = '<div style="width:110px;"><img class="tableActionButton" src="_BASE_images/edit.png" style="cursor:pointer;margin-left:15px;" rel="tooltip" title="Edit" onclick="modJs.edit(_id_);return false;"></img><img class="tableActionButton" src="_BASE_images/edit.png" style="display:none;cursor:pointer;margin-left:15px;" rel="tooltip" title="Edit" onclick="modJs.edit(_id_);return false;"></img><img class="tableActionButton" src="_BASE_images/delete.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Archive Employee" onclick="modJs.deleteEmployee(_id_);return false;"></img><img class="tableActionButton" src="_BASE_images/redo.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Restore Employee" onclick="modJs.activateEmployee(_id_);return false;"></img></div>';
+    let html = `<div style="width:110px;">
+<img class="tableActionButton" src="_BASE_images/edit.png" style="cursor:pointer;margin-left:15px;" rel="tooltip" title="Edit" onclick="modJs.edit(_id_);return false;"></img>
+<img class="tableActionButton" src="_BASE_images/delete.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Archive Employee" onclick="modJs.deleteEmployee(_id_);return false;"></img>
+<img class="tableActionButton" src="_BASE_images/redo.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Restore Employee" onclick="modJs.activateEmployee(_id_);return false;"></img>
+</div>`;
     html = html.replace(/_id_/g, id);
     html = html.replace(/_BASE_/g, this.baseUrl);
     return html;