Update failing frontend tests

client/cypress/integration/frontend/read-only/portfolio.spec.js

@@ -25,24 +25,29 @@ describe('Read Only Portfolio', () => {
     cy.mockGraphqlOps({operations: getOperations({readOnly: false})});
 
     cy.visit('/portfolio');
+    cy.getByDataCy('project-list').should('exist');
     cy.getByDataCy('add-project-button').should('exist');
-    cy.getByDataCy('project-widget').should('have.length', 1);
-    cy.getByDataCy('project-widget-actions').should('exist');
+    cy.getByDataCy('project').should('have.length', 1);
+    cy.getByDataCy('project-actions').should('exist');
   });
+
   it('Can not create and edit project when license invalid', () => {
     cy.mockGraphqlOps({operations: getOperations({readOnly: true})});
 
     cy.visit('/portfolio');
+    cy.getByDataCy('project-list').should('exist');
     cy.getByDataCy('add-project-button').should('not.exist');
-    cy.getByDataCy('project-widget').should('have.length', 1);
-    cy.getByDataCy('project-widget-actions').should('not.exist');
+    cy.getByDataCy('project').should('have.length', 1);
+    cy.getByDataCy('project-actions').should('not.exist');
   });
+
   it('Can not create and edit project when class inactive', () => {
     cy.mockGraphqlOps({operations: getOperations({readOnly: false, classReadOnly: true})});
 
     cy.visit('/portfolio');
+    cy.getByDataCy('project-list').should('exist');
     cy.getByDataCy('add-project-button').should('not.exist');
-    cy.getByDataCy('project-widget').should('have.length', 1);
-    cy.getByDataCy('project-widget-actions').should('not.exist');
+    cy.getByDataCy('project').should('have.length', 1);
+    cy.getByDataCy('project-actions').should('not.exist');
   });
 });

client/cypress/integration/frontend/read-only/project.spec.js

@@ -9,14 +9,10 @@ const getOperations = ({readOnly = false, classReadOnly = false}) => ({
       student: {
         id: btoa('PrivateUserNode:1'),
       },
-      entriesCount: 3,
-      entries: {
-        edges: [
-          {
-            node: {},
-          },
-        ],
-      },
+      entriesCount: 1,
+      entries: [
+        {}
+      ]
     },
   },
 });

client/src/components/portfolio/ProjectListItem.vue

@@ -1,6 +1,5 @@
 <template>
   <li
-    data-cy="project-list-item"
     class="project">
     <router-link
       :to="{name: 'project', params: {slug: project.slug}}"

client/src/pages/portfolio/portfolio.vue

@@ -4,7 +4,9 @@
       <div class="portfolio">
         <h1 data-cy="page-title">Portfolio</h1>
 
-        <create-project-button class="portfolio__create-button" />
+        <create-project-button
+          class="portfolio__create-button"
+          v-if="!isReadOnly" />
 
         <project-list
           :projects="projects" />
@@ -18,13 +20,16 @@
 <script>
   import ProjectWidget from '@/components/portfolio/ProjectWidget';
 
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
   import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
   import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
   import ProjectList from '@/components/portfolio/ProjectList';
 
+  import me from '@/mixins/me';
+
   export default {
+
+    mixins: [me],
     components: {
       ProjectList,
       CreateProjectButton,
@@ -36,16 +41,12 @@
       projects: {
         query: PROJECTS_QUERY,
         pollInterval: 5000,
-      },
-      me: {
-        query: ME_QUERY
       }
     },
 
     data() {
       return {
         projects: [],
-        me: {}
       };
     },
 

client/src/pages/portfolio/project.vue

@@ -103,11 +103,6 @@
             slug: this.slug
           };
         },
-        update(data) {
-          const project = this.$getRidOfEdges(data).project || {};
-          this.$store.dispatch('setSpecialContainerClass', project.appearance);
-          return project;
-        },
         pollInterval: 5000,
       },
       me: {
@@ -115,12 +110,6 @@
       }
     },
 
-    created() {
-    },
-
-    beforeDestroy() {
-      this.$store.dispatch('setSpecialContainerClass', '');
-    },
   };
 </script>
 

client/tsconfig.json

@@ -5,6 +5,13 @@
     "resolveJsonModule": true,
     "lib": ["es2017", "dom"],
     "target": "ES5",
+    "module": "es2015",
+    "strict": true,
+    "moduleResolution": "node",
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["./*"]
+    },
     "types": [
       "cypress"
     ]