From bbac6819fdccfe6958bb1950c05a0214f7437518 Mon Sep 17 00:00:00 2001 From: Robert Stein Date: Fri, 16 Jul 2021 17:45:40 +0200 Subject: [PATCH] test: tests for project form --- src/components/Projects/ProjectBar.vue | 2 +- src/views/Projects/ProjectForm.vue | 1 + .../e2e/fixtures/projects/cypressProject.json | 5 ++ .../e2e/specs/e2e/projectForm__create.spec.js | 49 +++++++++++ .../e2e/specs/e2e/projectForm__update.spec.js | 83 +++++++++++++++++++ 5 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 tests/e2e/specs/e2e/projectForm__create.spec.js create mode 100644 tests/e2e/specs/e2e/projectForm__update.spec.js diff --git a/src/components/Projects/ProjectBar.vue b/src/components/Projects/ProjectBar.vue index 7958a90e..1e725f03 100644 --- a/src/components/Projects/ProjectBar.vue +++ b/src/components/Projects/ProjectBar.vue @@ -18,7 +18,7 @@ > {{ submitButtonText }} diff --git a/tests/e2e/fixtures/projects/cypressProject.json b/tests/e2e/fixtures/projects/cypressProject.json index e0eb7de1..ffea8629 100644 --- a/tests/e2e/fixtures/projects/cypressProject.json +++ b/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": { diff --git a/tests/e2e/specs/e2e/projectForm__create.spec.js b/tests/e2e/specs/e2e/projectForm__create.spec.js new file mode 100644 index 00000000..8fc4ecef --- /dev/null +++ b/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'); + }); +}); diff --git a/tests/e2e/specs/e2e/projectForm__update.spec.js b/tests/e2e/specs/e2e/projectForm__update.spec.js new file mode 100644 index 00000000..36566bc4 --- /dev/null +++ b/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); + }); +});