Implemented delete for Delete Button in ContextFactorEditDialog

Added Tests for removing Context Factors Added e2e2 Test for removing Context Factors Added Tests for removing Context Factors Fixes issues in Merge request. Rebased on Master. Added Confirmation Dialog for deleting Context Factors and unit tests for it. fixed identation in locale
BerniWittmann · Jan 28, 2019 · 9808f22 · 9808f22
1 parent a713bdc
commit 9808f22
Show file tree

Hide file tree

Showing 14 changed files with 324 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/dialogs/ContextFactorEditDialog.vue b/src/dialogs/ContextFactorEditDialog.vue
@@ -51,12 +51,12 @@
     </el-row>
     <el-row slot="footer" justify="end" :gutter="20">
       <el-col :span="8" id="left-align">
-        <el-button @click="reset" type="danger" plain>
-          {{ $t('context_factor.edit.reset') }}
-        </el-button>
-        <el-button type="danger">
-          {{ $t('context_factor.edit.delete') }}
-        </el-button>
+          <el-button @click="reset" type="danger" plain>
+            {{ $t('context_factor.edit.reset') }}
+          </el-button>
+          <el-button type="danger" @click="deleteContextFactor()">
+            {{ $t('context_factor.edit.delete') }}
+          </el-button>
       </el-col>
       <el-col :span="5" :offset="10">
         <el-button type="success" @click="save">{{ $t('context_factor.edit.save') }}</el-button>
@@ -153,6 +153,25 @@ export default {
       this.contextFactorData = this.$store.state.contextFactor.contextFactors.filter(cf => cf.id === this.contextFactorData.id)[0]
       this.resetAttributeForms()
     },
+    deleteContextFactor() {
+      this.$confirm(this.$t('context_factor.delete.message'), this.$t('context_factor.delete.warning'), {
+        confirmButtonText: this.$t('context_factor.delete.ok'),
+        cancelButtonText: this.$t('context_factor.delete.cancel'),
+        type: 'warning',
+        cancelButtonClass: 'is-plain el-button--info',
+        confirmButtonClass: 'el-button--danger'
+      }).then(() => {
+        ContextFactorService.remove(this.activeContextFactor).then(() => {
+          this.$router.back()
+          ContextFactorService.getAll()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('context_factor.delete.cancellation')
+        })
+      })
+    },
 
     validateAttributes() {
       const count = this.contextFactorData.attributes.length

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -56,6 +56,15 @@
           }
         }
       }
+    },
+    "delete": {
+      "confirmation": "Context Factor deleted",
+      "message": "This will permanently delete the Context Factor. Continue?",
+      "ok": "Delete",
+      "cancel": "Cancel",
+      "warning": "Warning",
+      "delete_button": "Delete Context Factor",
+      "cancellation": "Delete cancelled"
     }
   },
   "process": {
@@ -208,6 +217,12 @@
             "message": "Loading the Context Factor failed"
           }
         },
+        "delete": {
+          "failed": {
+            "title": "Error",
+            "message": "Deleting the Context Factor failed"
+          }
+        },
         "put": {
           "failed": {
             "title": "Error",
@@ -218,6 +233,16 @@
             "message": "The Context Factor got updated"
           }
         }
+      },
+      "post": {
+        "failed": {
+          "title": "Error",
+          "message": "Creating the Context Factor failed"
+        },
+        "success": {
+          "title": "Success",
+          "message": "The Context Factor got created"
+        }
       }
     },
     "processes": {

diff --git a/src/services/contextFactor/index.js b/src/services/contextFactor/index.js
@@ -2,10 +2,12 @@ import getAll from './getAll'
 import get from './get'
 import update from './update'
 import create from './create'
+import remove from './remove'
 
 export default {
   getAll,
   get,
   update,
-  create
+  create,
+  remove
 }
diff --git a/src/services/contextFactor/remove.js b/src/services/contextFactor/remove.js
@@ -0,0 +1,18 @@
+import store from '@/vuex/store'
+import Service from '@/services/base'
+import Vue from 'vue'
+
+// When the request succeeds
+
+function success(response, { data }) {
+  Vue.$message({
+    type: 'success',
+    message: Vue.i18n.t('context_factor.delete.confirmation')
+  })
+  store.dispatch('contextFactor/remove', data)
+}
+
+export default (contextFactor) => Service.builder({
+  name: 'context_factors',
+  success
+}).remove(contextFactor)
diff --git a/src/vuex/modules/contextFactor/actions.js b/src/vuex/modules/contextFactor/actions.js
@@ -28,10 +28,15 @@ export const add = ({ commit }, payload) => {
   commit(types.ADD, payload)
 }
 
+export const remove = ({ commit }, payload) => {
+  commit(types.REMOVE, payload)
+}
+
 export default {
   store,
   update,
   setActive,
   unsetActive,
-  add
+  add,
+  remove
 }
diff --git a/src/vuex/modules/contextFactor/mutation-types.js b/src/vuex/modules/contextFactor/mutation-types.js
@@ -10,10 +10,12 @@ export const STORE = 'STORE'
 export const UPDATE = 'UPDATE'
 export const SET_ACTIVE = 'SET_ACTIVE'
 export const ADD = 'ADD'
+export const REMOVE = 'REMOVE'
 
 export default {
   STORE,
   UPDATE,
   SET_ACTIVE,
-  ADD
+  ADD,
+  REMOVE
 }
diff --git a/src/vuex/modules/contextFactor/mutations.js b/src/vuex/modules/contextFactor/mutations.js
@@ -6,7 +6,8 @@
  * contextFactor  module.
  */
 
-import { STORE, UPDATE, ADD, SET_ACTIVE } from './mutation-types'
+import { STORE, UPDATE, ADD, SET_ACTIVE, REMOVE } from './mutation-types'
+import { removeByID } from '@/utils/helpers'
 import { update, setActive } from '@/vuex/common/mutations'
 
 export default {
@@ -21,5 +22,8 @@ export default {
   },
   [SET_ACTIVE](state, contextFactor) {
     setActive(state, 'contextFactors', 'activeContextFactor', contextFactor)
+  },
+  [REMOVE](state, contextFactor) {
+    state.contextFactors = removeByID(state.contextFactors, contextFactor.id)
   }
 }
diff --git a/tests/e2e/specs/contextfactors.spec.js b/tests/e2e/specs/contextfactors.spec.js
@@ -45,4 +45,12 @@ describe('Context Factors Page', () => {
     cy.get('[style="padding-left: 0px;"] > .custom-tree-node > :nth-child(2)').contains('Pizza Donalds new')
     cy.get('[style="padding-left: 0px;"] > .custom-tree-node > .fa').should('have.class', 'fa-thermometer-full')
   })
+  it('can remove a context factor', () => {
+    cy.get('.custom-tree-node').should('have.length', 8)
+    cy.get('[style="padding-left: 0px;"] > .custom-tree-node > .align-right > .el-button > span').first().click()
+    cy.get('#left-align > :nth-child(2)').click()
+    cy.get('.el-button--primary > span').click()
+    cy.url().should('contain', Cypress.config().baseUrl + '/context_factors')
+    cy.get('.custom-tree-node').should('have.length', 7)
+  })
 })
diff --git a/tests/unit/dialogs/__snapshots__/contextfactoreditdialog.spec.js.snap b/tests/unit/dialogs/__snapshots__/contextfactoreditdialog.spec.js.snap
@@ -76,12 +76,103 @@ exports[`Dialogs Context Factor Edit Dialog can render 1`] = `
         <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" id="left-align"><button type="button" class="el-button el-button--danger is-plain">
             <!---->
             <!----><span>
-        context_factor.edit.reset
-      </span></button> <button type="button" class="el-button el-button--danger">
+          context_factor.edit.reset
+        </span></button> <button type="button" class="el-button el-button--danger">
             <!---->
             <!----><span>
-        context_factor.edit.delete
-      </span></button></div>
+          context_factor.edit.delete
+        </span></button></div>
+        <div class="el-col el-col-5 el-col-offset-10" style="padding-left: 10px; padding-right: 10px;"><button type="button" class="el-button el-button--success">
+            <!---->
+            <!----><span>context_factor.edit.save</span></button></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Dialogs Context Factor Edit Dialog it can be saved can be deleted show as confirmation dialog 1`] = `
+<div class="el-dialog__wrapper" name="dialog-fade" style="z-index: 2057;">
+  <div role="dialog" aria-modal="true" aria-label="My Context Factor" class="el-dialog" style="margin-top: 15vh;">
+    <div class="el-dialog__header"><span class="el-dialog__title">My Context Factor</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div>
+    <div class="el-dialog__body">
+      <div class="less-margin-top el-row">
+        <div class="el-col el-col-24">
+          <form class="el-form el-form--label-top el-form--inline">
+            <div class="el-form-item is-required"><label for="name" class="el-form-item__label">context_factor.edit.name</label>
+              <div class="el-form-item__content">
+                <div class="el-input">
+                  <!----><input type="text" autocomplete="off" class="el-input__inner">
+                  <!---->
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+            </div>
+            <div class="el-form-item"><label for="contextType" class="el-form-item__label">context_factor.edit.type</label>
+              <div class="el-form-item__content">
+                <div id="select-context-type" placeholder="Select" value-key="id" clearable="">
+                  <!---->
+                  <div class="select-context-type-option" value="[object Object]" label="Context Type 1"><i class="context-type-icon fa fa-heart"></i> <span>Context Type 1</span></div>
+                  <div class="select-context-type-option" value="[object Object]" label="Context Type 2"><i class="context-type-icon fa fa-gear"></i> <span>Context Type 2</span></div>
+                  <div class="select-context-type-option" value="context_factor.none" label="context_factor.none"></div>
+                </div>
+                <!---->
+              </div>
+            </div> <br>
+            <h4>context_factor.edit.attributes</h4>
+            <ul>
+              <li>
+                <form class="el-form el-form--inline">
+                  <div class="el-form-item is-required">
+                    <!---->
+                    <div class="el-form-item__content">
+                      <div class="el-input">
+                        <!----><input type="text" autocomplete="off" placeholder="context_factor.edit.attribute.key" class="el-input__inner">
+                        <!---->
+                        <!---->
+                        <!---->
+                      </div>
+                      <!---->
+                    </div>
+                  </div>
+                  <div class="el-form-item is-required">
+                    <!---->
+                    <div class="el-form-item__content">
+                      <div class="el-input">
+                        <!----><input type="text" autocomplete="off" placeholder="context_factor.edit.attribute.value" class="el-input__inner">
+                        <!---->
+                        <!---->
+                        <!---->
+                      </div>
+                      <!---->
+                    </div>
+                  </div>
+                  <div content="context_factor.edit.attribute.remove"><button type="button" class="el-button el-button--info is-plain">
+                      <!----><i class="el-icon-close"></i>
+                      <!----></button></div>
+                </form>
+              </li>
+            </ul> <button type="button" class="el-button el-button--default el-button--small is-plain">
+              <!----><i class="el-icon-plus"></i><span>
+          context_factor.edit.attribute.add
+        </span></button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="el-dialog__footer">
+      <div class="el-row is-justify-end" style="margin-left: -10px; margin-right: -10px;">
+        <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" id="left-align"><button type="button" class="el-button el-button--danger is-plain">
+            <!---->
+            <!----><span>
+          context_factor.edit.reset
+        </span></button> <button type="button" class="el-button el-button--danger">
+            <!---->
+            <!----><span>
+          context_factor.edit.delete
+        </span></button></div>
         <div class="el-col el-col-5 el-col-offset-10" style="padding-left: 10px; padding-right: 10px;"><button type="button" class="el-button el-button--success">
             <!---->
             <!----><span>context_factor.edit.save</span></button></div>
@@ -207,12 +298,12 @@ exports[`Dialogs Context Factor Edit Dialog it renders the form it renders the a
         <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" id="left-align"><button type="button" class="el-button el-button--danger is-plain">
             <!---->
             <!----><span>
-        context_factor.edit.reset
-      </span></button> <button type="button" class="el-button el-button--danger">
+          context_factor.edit.reset
+        </span></button> <button type="button" class="el-button el-button--danger">
             <!---->
             <!----><span>
-        context_factor.edit.delete
-      </span></button></div>
+          context_factor.edit.delete
+        </span></button></div>
         <div class="el-col el-col-5 el-col-offset-10" style="padding-left: 10px; padding-right: 10px;"><button type="button" class="el-button el-button--success">
             <!---->
             <!----><span>context_factor.edit.save</span></button></div>
@@ -266,12 +357,12 @@ exports[`Dialogs Context Factor Edit Dialog it renders the form it renders the a
         <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" id="left-align"><button type="button" class="el-button el-button--danger is-plain">
             <!---->
             <!----><span>
-        context_factor.edit.reset
-      </span></button> <button type="button" class="el-button el-button--danger">
+          context_factor.edit.reset
+        </span></button> <button type="button" class="el-button el-button--danger">
             <!---->
             <!----><span>
-        context_factor.edit.delete
-      </span></button></div>
+          context_factor.edit.delete
+        </span></button></div>
         <div class="el-col el-col-5 el-col-offset-10" style="padding-left: 10px; padding-right: 10px;"><button type="button" class="el-button el-button--success">
             <!---->
             <!----><span>context_factor.edit.save</span></button></div>