54 test to delete action

src/components/Actions/Delete/Delete.vue

@@ -2,17 +2,23 @@
   <div>
     <v-tooltip bottom>
       <v-btn
+        :name="`${UI_NAMES.RESOURCE_DELETE_BUTTON.with({ resourceName: this.resourceName })}`"
         @click="onDelete()"
         slot="activator"
         icon>
-        <i class="v-icon material-icons">delete</i>
+        <i class="v-icon material-icons">
+          {{UI_CONTENT.RESOURCE_DELETE_BUTTON}}
+        </i>
       </v-btn>
       <span>Delete</span>
     </v-tooltip>
   </div>
 </template>
 
 <script>
+import UI_CONTENT from '@constants/ui.content.default'
+import UI_NAMES from '@constants/ui.element.names'
+
 export default {
   name: "Delete",
 
@@ -31,7 +37,10 @@ export default {
   },
 
   data() {
-    return {}
+    return {
+      UI_CONTENT,
+      UI_NAMES
+    }
   },
 
   methods: {

src/components/Actions/EditButton/EditButton.vue

@@ -3,7 +3,7 @@
     <v-tooltip
     bottom>
       <v-btn
-      :name="`${name}`"
+      :name="`${UI_NAMES.RESOURCE_EDIT_BUTTON.with({ resourceName: this.resourceName })}`"
       @click="onEdit()"
       slot="activator"
       icon>
@@ -17,7 +17,8 @@
 </template>
 
 <script>
-import UI_CONTENT from '../../../constants/ui.content.default'
+import UI_CONTENT from '@constants/ui.content.default'
+import UI_NAMES from '@constants/ui.element.names'
 
 export default {
   name: "EditButton",
@@ -36,7 +37,8 @@ export default {
   },
   data() {
     return {
-      UI_CONTENT
+      UI_CONTENT,
+      UI_NAMES
     }
   },
   methods: {

src/components/Actions/Show/Show.vue

@@ -2,7 +2,6 @@
   <v-card :name="`${UI_NAMES.RESOURCE_VIEW_CONTAINER.with({ resourceName, view })}`">
     <div class="text-xs-center d-flex right" :name="`${UI_NAMES.RESOURCE_VIEW_ACTIONS_CONTAINER.with({ resourceName, view })}`">
         <EditButton
-          :name="editButtonName()"
           :resourceId="$route.params.id"
           :resourceName="name">
         </EditButton>
@@ -107,10 +106,6 @@ export default {
 
     componentName(field) {
       return UI_NAMES.RESOURCE_VIEW_CONTAINER_FIELD.with({ resourceName: this.resourceName, view: this.view, field: this.label(field) })
-    },
-
-    editButtonName() {
-      return UI_NAMES.RESOURCE_ID_EDIT_BUTTON.with({ resourceName: this.resourceName })
     }
   },
 

src/constants/ui.content.default.js

@@ -22,9 +22,12 @@ export default {
   // Create action button
   RESOURCE_CREATE_BUTTON: 'add',
 
-  // Create action button
+  // Edit action button
   RESOURCE_EDIT_BUTTON: 'edit',
 
+  // Delete action button
+  RESOURCE_DELETE_BUTTON: 'delete',
+
   // Create Save button
   CREATE_SUBMIT_BUTTON: 'save',
 

src/constants/ui.element.names.js

@@ -40,11 +40,9 @@ export default {
     with: ({ resourceName }) => `${resourceName}-create-button`
   },
   // The button that redirects to a Edit view
-  RESOURCE_ID_EDIT_BUTTON: {
-    with: ({ resourceName, index }) => {
-      return index !== undefined
-      ? `${resourceName}-edit-button-${index}`
-      : `${resourceName}-edit-button`
+  RESOURCE_EDIT_BUTTON: {
+    with: ({ resourceName }) => {
+      return `${resourceName}-edit-button`
     }
   },
   // A specific container of a Resource field inside an element of List
@@ -58,5 +56,11 @@ export default {
   // The form submit buttons
   RESOURCE_VIEW_SUBMIT_BUTTON: {
     with: ({ resourceName, view }) => `${resourceName}-${view}-submit-button`
+  },
+
+  RESOURCE_DELETE_BUTTON: {
+    with: ({ resourceName }) => {
+      return `${resourceName}-delete-button`
+    }
   }
 }

tests/e2e/specs/articles/delete.spec.js

@@ -0,0 +1,39 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+const Factory = require('../../factory')
+const { queryElementByProp } = require('../../helpers')
+
+
+const UI_NAMES = require('../../../../src/constants/ui.element.names')
+const UI_CONTENT = require('../../../../src/constants/ui.content.default')
+
+describe('Articles: Delete Test', () => {
+  let article = {}
+
+  before('Search the Show view url', () => {
+    const url = Factory.apiUrl({ route: 'api/articles/' })
+    cy.request('POST',url , Factory.createArticle())
+      .then((res) => { article = res.body })
+    cy.visit('/#/articles')
+    cy.wait(2000)
+  })
+
+  before('Visits the Show view url', () => {
+    const url = `articles/show/${article.id}`
+    cy.visit(`/#/${url}`)
+    cy.url().should('include', url)
+  })
+
+  it('Press the delete button in the Show view', () => {
+    const deleteButtonElement = cy.getElement({
+      constant: UI_NAMES.RESOURCE_DELETE_BUTTON,
+      constantParams: { resourceName: 'articles' },
+      elementType: 'button',
+      elementProp: 'name',
+    })
+
+    deleteButtonElement.should((deleteButton) => {
+     expect(deleteButton).to.contain(UI_CONTENT.RESOURCE_DELETE_BUTTON)
+   }).click()
+  })
+})

tests/e2e/specs/articles/edit.spec.js

@@ -29,7 +29,7 @@ describe('Articles: Edit Test', () => {
   })
 
   before('Click in the Edit button of the Show view', () => {
-    const editButtonName = UI_NAMES.RESOURCE_ID_EDIT_BUTTON.with({
+    const editButtonName = UI_NAMES.RESOURCE_EDIT_BUTTON.with({
       resourceName: 'articles'
     })
     const editButtonElement = queryElementByProp({
@@ -42,7 +42,7 @@ describe('Articles: Edit Test', () => {
     }).click()
   })
 
-  it('Articles Show Edit should render title: Articles', () => {
+  it('Articles Edit should render title: Articles', () => {
     cy.get(editViewDivContainerQuery('RESOURCE_VIEW_CONTAINER')).should((editViewContainer) => {
       const editViewTitleContainer = editViewContainer.find(editViewDivContainerQuery('RESOURCE_VIEW_CONTAINER_TITLE'))
       const editViewTitleText = UI_CONTENT.RESOURCE_VIEW_TITLE.with({