Wrote end-to-end cypress tests

client/cypress/integration/authentication.spec.js

@@ -0,0 +1,21 @@
+import { testid } from '../support/utils';
+
+describe('Authentication', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.visit('/');
+  });
+
+  it('creates guest account if user has no auth token', () => {
+    cy.window()
+      .its('localStorage.authToken')
+      .should('be.undefined');
+
+    cy.window()
+      .its('localStorage.authToken')
+      .should('be.a', 'string')
+      .and('not.be.empty');
+
+    cy.get(testid`list-issue`).should('have.length', 7);
+  });
+});

client/cypress/integration/issueCreate.spec.js

@@ -0,0 +1,35 @@
+import { testid } from '../support/utils';
+
+describe('Issue create', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/settings?modal-issue-create=true');
+  });
+
+  it('validates form and creates issue successfully', () => {
+    cy.get(testid`modal:issue-create`).within(() => {
+      cy.get('button[type="submit"]').click();
+      cy.get(testid`form-field:title`).should('contain', 'This field is required');
+
+      cy.selectOption('type', 'Story');
+      cy.get('input[name="title"]').type('TEST_TITLE');
+      cy.get('.ql-editor').type('TEST_DESCRIPTION');
+      cy.selectOption('reporterId', 'Yoda');
+      cy.selectOption('userIds', 'Gaben', 'Yoda');
+      cy.selectOption('priority', 'High');
+
+      cy.get('button[type="submit"]').click();
+    });
+
+    cy.get(testid`modal:issue-create`).should('not.exist');
+    cy.contains('Issue has been successfully created.').should('exist');
+    cy.location('pathname').should('equal', '/project/board');
+    cy.location('search').should('be.empty');
+
+    cy.contains(testid`list-issue`, 'TEST_TITLE')
+      .should('have.descendants', testid`avatar:Gaben`)
+      .and('have.descendants', testid`avatar:Yoda`)
+      .and('have.descendants', testid`icon:story`);
+  });
+});

client/cypress/integration/issueDetails.spec.js

@@ -0,0 +1,168 @@
+import { testid } from '../support/utils';
+
+describe('Issue details', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/board');
+    getListIssue().click(); // open issue details modal
+  });
+
+  it('updates type, status, assignees, reporter, priority successfully', () => {
+    getIssueDetailsModal().within(() => {
+      cy.selectOption('type', 'Story');
+      cy.selectOption('status', 'Done');
+      cy.selectOption('assignees', 'Gaben', 'Yoda');
+      cy.selectOption('reporter', 'Yoda');
+      cy.selectOption('priority', 'Medium');
+    });
+
+    cy.assertReloadAssert(() => {
+      getIssueDetailsModal().within(() => {
+        cy.selectShouldContain('type', 'Story');
+        cy.selectShouldContain('status', 'Done');
+        cy.selectShouldContain('assignees', 'Gaben', 'Yoda');
+        cy.selectShouldContain('reporter', 'Yoda');
+        cy.selectShouldContain('priority', 'Medium');
+      });
+
+      getListIssue()
+        .should('have.descendants', testid`avatar:Gaben`)
+        .and('have.descendants', testid`avatar:Yoda`)
+        .and('have.descendants', testid`icon:story`);
+    });
+  });
+
+  it('updates title, description successfully', () => {
+    getIssueDetailsModal().within(() => {
+      cy.get('textarea[placeholder="Short summary"]')
+        .clear()
+        .type('TEST_TITLE')
+        .blur();
+
+      cy.contains('Add a description...')
+        .click()
+        .should('not.exist');
+
+      cy.get('.ql-editor').type('TEST_DESCRIPTION');
+
+      cy.contains('button', 'Save')
+        .click()
+        .should('not.exist');
+    });
+
+    cy.assertReloadAssert(() => {
+      getIssueDetailsModal().within(() => {
+        cy.get('textarea[placeholder="Short summary"]').should('have.value', 'TEST_TITLE');
+        cy.get('.ql-editor').should('contain', 'TEST_DESCRIPTION');
+      });
+
+      cy.get(testid`list-issue`).should('contain', 'TEST_TITLE');
+    });
+  });
+
+  it('updates estimate, time tracking successfully', () => {
+    getIssueDetailsModal().within(() => {
+      getNumberInputAtIndex(0).debounced('type', '10');
+      cy.contains('10h estimated').click(); // open tracking modal
+    });
+
+    cy.get(testid`modal:tracking`).within(() => {
+      cy.contains('No time logged').should('exist');
+      getNumberInputAtIndex(0).debounced('type', 1);
+
+      cy.get('div[width="10"]').should('exist'); // tracking bar
+      getNumberInputAtIndex(1).debounced('type', 2);
+
+      cy.contains('button', 'Done')
+        .click()
+        .should('not.exist');
+    });
+
+    cy.assertReloadAssert(() => {
+      getIssueDetailsModal().within(() => {
+        getNumberInputAtIndex(0).should('have.value', '10');
+        cy.contains('1h logged').should('exist');
+        cy.contains('2h remaining').should('exist');
+        cy.get('div[width*="33.3333"]').should('exist');
+      });
+    });
+  });
+
+  it('deletes an issue successfully', () => {
+    getIssueDetailsModal()
+      .find(`button ${testid`icon:trash`}`)
+      .click();
+
+    cy.get(testid`modal:confirm`)
+      .contains('button', 'Delete issue')
+      .click();
+
+    cy.assertReloadAssert(() => {
+      getIssueDetailsModal().should('not.exist');
+      getListIssue().should('not.exist');
+    });
+  });
+
+  it('creates a comment successfully', () => {
+    getIssueDetailsModal().within(() => {
+      cy.contains('Add a comment...')
+        .click()
+        .should('not.exist');
+
+      cy.get('textarea[placeholder="Add a comment..."]').type('TEST_COMMENT');
+
+      cy.contains('button', 'Save')
+        .click()
+        .should('not.exist');
+
+      cy.contains('Add a comment...').should('exist');
+      cy.get(testid`issue-comment`).should('contain', 'TEST_COMMENT');
+    });
+  });
+
+  it('edits a comment successfully', () => {
+    getIssueDetailsModal().within(() => {
+      cy.get(testid`issue-comment`)
+        .first()
+        .contains('Edit')
+        .click()
+        .should('not.exist');
+
+      cy.get('textarea[placeholder="Add a comment..."]')
+        .should('have.value', 'Comment body')
+        .clear()
+        .type('TEST_COMMENT_EDITED');
+
+      cy.contains('button', 'Save')
+        .click()
+        .should('not.exist');
+
+      cy.get(testid`issue-comment`)
+        .first()
+        .should('contain', 'Edit')
+        .and('contain', 'TEST_COMMENT_EDITED');
+    });
+  });
+
+  it('deletes a comment successfully', () => {
+    getIssueDetailsModal()
+      .find(testid`issue-comment`)
+      .first()
+      .contains('Delete')
+      .click();
+
+    cy.get(testid`modal:confirm`)
+      .contains('button', 'Delete comment')
+      .click()
+      .should('not.exist');
+
+    getIssueDetailsModal()
+      .find(testid`issue-comment`)
+      .should('not.exist');
+  });
+
+  const getIssueDetailsModal = () => cy.get(testid`modal:issue-details`);
+  const getListIssue = () => cy.contains(testid`list-issue`, 'Issue title 1');
+  const getNumberInputAtIndex = index => cy.get('input[placeholder="Number"]').eq(index);
+});

client/cypress/integration/issueFilters.spec.js

@@ -0,0 +1,35 @@
+import { testid } from '../support/utils';
+
+describe('Issue filters', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/board');
+  });
+
+  it('filters issues', () => {
+    getSearchInput().debounced('type', 'Issue title 1');
+    assertIssuesCount(1);
+    getSearchInput().debounced('clear');
+    assertIssuesCount(3);
+
+    getUserAvatar().click();
+    assertIssuesCount(2);
+    getUserAvatar().click();
+    assertIssuesCount(3);
+
+    getMyOnlyButton().click();
+    assertIssuesCount(2);
+    getMyOnlyButton().click();
+    assertIssuesCount(3);
+
+    getRecentButton().click();
+    assertIssuesCount(3);
+  });
+
+  const getSearchInput = () => cy.get(testid`board-filters`).find('input');
+  const getUserAvatar = () => cy.get(testid`board-filters`).find(testid`avatar:Gaben`);
+  const getMyOnlyButton = () => cy.get(testid`board-filters`).contains('Only My Issues');
+  const getRecentButton = () => cy.get(testid`board-filters`).contains('Recently Updated');
+  const assertIssuesCount = count => cy.get(testid`list-issue`).should('have.length', count);
+});

client/cypress/integration/issueSearch.spec.js

@@ -0,0 +1,50 @@
+import { testid } from '../support/utils';
+
+describe('Issue search', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/board?modal-issue-search=true');
+  });
+
+  it('displays recent issues if search input is empty', () => {
+    getIssueSearchModal().within(() => {
+      cy.contains('Recent Issues').should('exist');
+      getIssues().should('have.length', 3);
+
+      cy.get('input').debounced('type', 'anything');
+      cy.contains('Recent Issues').should('not.exist');
+
+      cy.get('input').debounced('clear');
+      cy.contains('Recent Issues').should('exist');
+      getIssues().should('have.length', 3);
+    });
+  });
+
+  it('displays matching issues successfully', () => {
+    getIssueSearchModal().within(() => {
+      cy.get('input').debounced('type', 'Issue');
+      getIssues().should('have.length', 3);
+
+      cy.get('input').debounced('type', ' description');
+      getIssues().should('have.length', 2);
+
+      cy.get('input').debounced('type', ' 3');
+      getIssues().should('have.length', 1);
+
+      cy.contains('Matching Issues').should('exist');
+    });
+  });
+
+  it('displays message if no results were found', () => {
+    getIssueSearchModal().within(() => {
+      cy.get('input').debounced('type', 'gibberish');
+
+      getIssues().should('not.exist');
+      cy.contains("We couldn't find anything matching your search").should('exist');
+    });
+  });
+
+  const getIssueSearchModal = () => cy.get(testid`modal:issue-search`);
+  const getIssues = () => cy.get('a[href*="/project/board/issues/"]');
+});

client/cypress/integration/issuesDragDrop.spec.js

@@ -0,0 +1,48 @@
+import { KeyCodes } from 'shared/constants/keyCodes';
+
+import { testid } from '../support/utils';
+
+describe('Issues drag & drop', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/board');
+  });
+
+  it('moves issue between different lists', () => {
+    cy.get(testid`board-list:backlog`).should('contain', firstIssueTitle);
+    cy.get(testid`board-list:selected`).should('not.contain', firstIssueTitle);
+    moveFirstIssue(KeyCodes.ARROW_RIGHT);
+
+    cy.assertReloadAssert(() => {
+      cy.get(testid`board-list:backlog`).should('not.contain', firstIssueTitle);
+      cy.get(testid`board-list:selected`).should('contain', firstIssueTitle);
+    });
+  });
+
+  it('moves issue within a single list', () => {
+    getIssueAtIndex(0).should('contain', firstIssueTitle);
+    getIssueAtIndex(1).should('contain', secondIssueTitle);
+    moveFirstIssue(KeyCodes.ARROW_DOWN);
+
+    cy.assertReloadAssert(() => {
+      getIssueAtIndex(0).should('contain', secondIssueTitle);
+      getIssueAtIndex(1).should('contain', firstIssueTitle);
+    });
+  });
+
+  const firstIssueTitle = 'Issue title 1';
+  const secondIssueTitle = 'Issue title 2';
+
+  const getIssueAtIndex = index => cy.get(testid`list-issue`).eq(index);
+
+  const moveFirstIssue = directionKeyCode => {
+    cy.waitForXHR('PUT', '/issues/**', () => {
+      getIssueAtIndex(0)
+        .focus()
+        .trigger('keydown', { keyCode: KeyCodes.SPACE })
+        .trigger('keydown', { keyCode: directionKeyCode, force: true })
+        .trigger('keydown', { keyCode: KeyCodes.SPACE, force: true });
+    });
+  };
+});

client/cypress/integration/projectSettings.spec.js

@@ -0,0 +1,34 @@
+import { testid } from '../support/utils';
+
+describe('Project settings', () => {
+  beforeEach(() => {
+    cy.resetDatabase();
+    cy.createTestAccount();
+    cy.visit('/project/settings');
+  });
+
+  it('should display current values in form', () => {
+    cy.get('input[name="name"]').should('have.value', 'Project name');
+    cy.get('input[name="url"]').should('have.value', 'https://www.testurl.com');
+    cy.get('.ql-editor').should('contain', 'Project description');
+    cy.selectShouldContain('category', 'Software');
+  });
+
+  it('validates form and updates project successfully', () => {
+    cy.get('input[name="name"]').clear();
+    cy.get('button[type="submit"]').click();
+    cy.get(testid`form-field:name`).should('contain', 'This field is required');
+
+    cy.get('input[name="name"]').type('TEST_NAME');
+    cy.get(testid`form-field:name`).should('not.contain', 'This field is required');
+
+    cy.selectOption('category', 'Business');
+    cy.get('button[type="submit"]').click();
+    cy.contains('Changes have been saved successfully.').should('exist');
+
+    cy.reload();
+
+    cy.get('input[name="name"]').should('have.value', 'TEST_NAME');
+    cy.selectShouldContain('category', 'Business');
+  });
+});