Add test for project deletion

client/cypress/integration/frontend/portfolio/project-page.spec.js

@@ -60,6 +60,11 @@ describe('Project Page', () => {
     ProjectQuery: {
       project,
     },
+    DeleteProject: {
+      deleteProject: {
+        success: true
+      }
+    },
     AddProjectEntry: variables => ({
       addProjectEntry: {
         projectEntry: Object.assign({}, variables.input.projectEntry, {
@@ -80,7 +85,7 @@ describe('Project Page', () => {
         success: true,
       },
     },
-    UpdateProjectShareState: variables => {
+    UpdateProjectShareState: () => {
       final = !final;
       return {
         updateProjectSharedState: {
@@ -114,6 +119,16 @@ describe('Project Page', () => {
     cy.getByDataCy('edit-project').should('exist');
   });
 
+  it('deletes the project', () => {
+    cy.visit('/portfolio');
+    cy.getByDataCy('project-link').should('have.length', 1);
+    cy.getByDataCy('project-link').click();
+    cy.getByDataCy('project-actions').click();
+    cy.getByDataCy('delete-project').click();
+    cy.getByDataCy('page-title').should('contain', 'Portfolio');
+    cy.getByDataCy('project-link').should('have.length', 0);
+  });
+
   it('shares and unshares the project', () => {
     const getOperationsForSharing = () => {
       let projectForSharing = {

client/src/components/portfolio/ProjectActions.vue

@@ -55,6 +55,7 @@ import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
+import {removeAtIndex} from '@/graphql/immutable-operations';
 const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
 
 export default {
@@ -103,10 +104,16 @@ export default {
         },
         update(store, {data: {deleteProject: {success}}}) {
           if (success) {
-            const data = store.readQuery({query: PROJECTS_QUERY});
+            const {projects: prevProjects} = store.readQuery({query: PROJECTS_QUERY});
 
-            if (data) {
-              data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
+
+            if (prevProjects) {
+              let index = prevProjects.findIndex(project => project.slug === slug);
+              const projects = removeAtIndex(prevProjects, index);
+
+              const data = {
+                projects
+              };
               store.writeQuery({query: PROJECTS_QUERY, data});
             }
           }

client/src/components/portfolio/ProjectListItem.vue

@@ -27,8 +27,8 @@
       :final="project.final"
       data-cy="project-actions"
       class="project__actions"
+      :slug="project.slug"
       v-if="!isReadOnly && isOwner"
-      :id="project.id"
     />
   </li>
 </template>