Merge pull request #87 from unikubehq/project-form-test

tests: tests for project form

src/components/Projects/ProjectBar.vue

@@ -18,7 +18,7 @@
       >
       </v-select>
       <v-btn
-        class="mb-2"
+        class="mb-2 projects__createButton"
         color="primary"
         large
         elevation="0"

src/views/Projects/ProjectForm.vue

@@ -139,6 +139,7 @@
           :loading="saveLoading"
           @click="submit"
           :disabled="disableButton"
+          class="projectForm__submit"
         >
             {{ submitButtonText }}
           </v-btn>

tests/e2e/fixtures/projects/cypressProject.json

@@ -8,6 +8,11 @@
     "decks": [],
     "sops": [],
     "members": [],
+    "specType": "helm",
+    "specRepository": "http://github.com/example/testrepo",
+    "specRepositoryBranch": "main",
+    "accessUser": "TestUser",
+    "accessToken": "TestUser",
     "__typename": "ProjectNode",
     "kind": "ProjectNode",
     "organization": {

tests/e2e/specs/e2e/projectForm__create.spec.js

@@ -0,0 +1,49 @@
+import project from '../../fixtures/projects/cypressProject.json';
+
+describe('ProjectDetail', () => {
+  beforeEach(() => {
+    cy.viewport('macbook-15');
+    cy.setupInterceptors();
+    cy.login(true, false, true);
+    cy.visit('/overview');
+    cy.get('.projects__createButton').first().click();
+    cy.get('[name=projectName]').type('Some project name');
+    cy.get('[name=specRepo]').type('https://github.com/unikubehq/frontend');
+  });
+
+  it('Does not submit project id when in creation mode', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'CreateProject') {
+        expect(req.body.variables).to.not.have.any.key('id');
+      }
+    });
+    cy.get('.projectForm__submit').click();
+  });
+
+  it('Refreshes token after project creation', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'CreateProject') {
+        req.reply({
+          data: project,
+        });
+      }
+    });
+    cy.get('.projectForm__submit').click();
+    cy.get('@updateToken').should('have.been.called');
+  });
+
+  it('Continues to add member form when creation was successful.', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'CreateProject') {
+        req.reply({
+          data: {
+            createUpdateProject: project,
+          },
+        });
+      }
+    });
+    cy.get('.projectForm__submit').click();
+    cy.get('@updateToken').should('have.been.called');
+    cy.location('pathname').should('contain', '/add-members');
+  });
+});

tests/e2e/specs/e2e/projectForm__update.spec.js

@@ -0,0 +1,83 @@
+import { GraphQLError } from 'graphql';
+import project from '../../fixtures/projects/cypressProject.json';
+
+describe('ProjectDetail', () => {
+  beforeEach(() => {
+    cy.viewport('macbook-15');
+    cy.setupInterceptors();
+    cy.login(true, false, true);
+    cy.visit('/overview');
+    cy.wait('@ProjectsQuery');
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'ProjectDetailQuery') {
+        // eslint-disable-next-line no-param-reassign
+        req.alias = 'ProjectDetailQuery';
+        req.reply({
+          data: project,
+        });
+      }
+    });
+    cy.get('.project-card__wrapper .project-card__edit').first().click();
+    cy.location('pathname').should('contain', '/project/');
+    cy.wait('@ProjectDetailQuery');
+  });
+
+  it('Submits access token only when changed', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'UpdateProject') {
+        expect(req.body.variables).to.not.have.any.key('accessToken');
+      }
+    });
+    cy.get('.projectForm__submit').click();
+  });
+
+  it('Submits project id when in edit mode', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'UpdateProject') {
+        expect(req.body.variables).to.have.any.key('id');
+      }
+    });
+    cy.get('.projectForm__submit').click();
+  });
+
+  it('Continues to overview when project was edited.', () => {
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'UpdateProject') {
+        req.reply({
+          data: {
+            createUpdateProject: project,
+          },
+        });
+      }
+    });
+    cy.get('.projectForm__submit').click();
+    cy.location('pathname').should('contain', '/overview');
+  });
+
+  it('Prefills form when in edit mode', () => {
+    cy.get('[name=projectName]').should('have.value', project.project.title);
+    cy.get('[name=specRepo]').should('have.value', project.project.specRepository);
+  });
+  it('Disables submit button when form is invalid', () => {
+    cy.get('.projectForm__submit').should('not.be.disabled');
+    cy.get('[name=projectName]').clear();
+    cy.get('.projectForm__submit').should('be.disabled');
+  });
+
+  it('Displays input field errors', () => {
+    cy.get('[name=projectName]').clear().blur().parents('.v-input__control')
+      .find('.v-messages__message')
+      .should('contain.text', 'This field is required.');
+  });
+
+  it('Displays submission error when something went wrong', () => {
+    const errorMessage = 'Something went wrong';
+    cy.intercept('POST', '/graphql', (req) => {
+      if (req.body.operationName === 'UpdateProject') {
+        req.reply(200, { errors: [new GraphQLError(errorMessage)] });
+      }
+    });
+    cy.get('.projectForm__submit').click();
+    cy.get('.v-alert__content').should('contain.text', errorMessage);
+  });
+});