Skip to content

Commit

Permalink
Update cypress e2e tests to work with icon-based buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeordieP
GeordieP committed Oct 9, 2018
1 parent 04e1596 commit 9b1599e
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 66 deletions.
8 changes: 4 additions & 4 deletions cypress/integration/e2e/1-signup-login-flow_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,27 @@ describe('Sign up and log out', () => {
// first user that signs up to this app is given admin permissions.
it('Create first user and log out', () => {
cy.app_signup('AdminUser', 'test', '[email protected]', 'Admin User');
cy.contains('Log Out').click();
cy.get('#logout').click();
});

it('Create second user and log out', () => {
cy.app_signup('SecondUser', 'test', '[email protected]', 'Second User');
cy.contains('Log Out').click();
cy.get('#logout').click();
});
});

describe('Log in and log out, verify permissions are correct', () => {
it('Log in admin account, verify admin permissions, log out', () => {
cy.app_login('[email protected]', 'test',);
cy.contains('New Project');
cy.contains('Log Out').click();
cy.get('#logout').click();
cy.url().should('eq', 'http://localhost:3000/');
});

it('Log in user account, verify no admin permissions, log out', () => {
cy.app_login('[email protected]', 'test');
cy.contains('New Project').should('not.exist');
cy.contains('Log Out').click();
cy.get('#logout').click();
cy.url().should('eq', 'http://localhost:3000/');
})
});
54 changes: 28 additions & 26 deletions cypress/integration/e2e/2-admin-actions_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('Admin create/edit/delete flows', () => {
cy.contains('New Issue').click();
const bodyText = 'First issue contents before edit';
cy.app_fillCreateIssueForm(`${RUN_ID}_Issue-1`, bodyText, 'High');
cy.get('[data-testid=createIssue_submit]').click();
cy.get('[data-testid="createIssue_submit"]').click();

// did we navigate?
cy.url().should('contain', '/issues/');
Expand All @@ -45,10 +45,10 @@ describe('Admin create/edit/delete flows', () => {
});

it('Edit issue', () => {
cy.contains('Edit Issue').click();
cy.get('[data-testid="editIssue"]').click();
const bodyText = 'First issue contents after edit';
cy.app_fillEditIssueForm(`${RUN_ID}_Issue-1 EDITED`, bodyText, 'Low');
cy.contains('Save Issue').click();
cy.get('[data-testid="editIssue_submit"]').click();

// wait for issue details to be rendered, signifying the save completed
cy.get('.Issue-details');
Expand All @@ -63,7 +63,7 @@ describe('Admin create/edit/delete flows', () => {
});

it('Delete issue', () => {
cy.contains('Delete Issue').click();
cy.get('[data-testid="deleteIssue"]').click();
// did we navigate? we deleted the only issue, and should be back on
// the project details page.
cy.url().should('contain', '/projectDetails');
Expand All @@ -78,13 +78,13 @@ describe('Admin create/edit/delete flows', () => {
`${RUN_ID}_Issue-2`,
'Issue for testing tasks and comments.'
);
cy.get('[data-testid=createIssue_submit]').click();
cy.get('[data-testid="createIssue_submit"]').click();

// create task
const taskTitle = 'First Task';
const taskBodyText = 'First task content before edit';
cy.app_fillCreateTaskForm(taskTitle, taskBodyText);
cy.get('[data-testid=createTask_submit]').click();
cy.get('[data-testid="createTask_submit"]').click();

// verify task appeared in task list, and click on it
cy.get('.IssueView-sidebar').contains(taskTitle).click();
Expand All @@ -100,14 +100,15 @@ describe('Admin create/edit/delete flows', () => {
});

it('Edit task', () => {
cy.contains('Edit Task').click();
cy.get('[data-testid="editTask"]').click();
// did we navigate? we deleted the only issue, and should be back on
const taskTitle = 'First Task EDITED';
const taskBodyText = 'First task content edited';
cy.app_fillEditTaskForm(taskTitle, taskBodyText);
cy.contains('Save Task').click();
cy.get('[data-testid="editTask_submit"]').click();

// wait for edit button to come back, signifying the save action completed
cy.contains('Edit Task');
cy.get('[data-testid="editTask"]');

cy.get('.TaskView').within(() => {
// title
Expand All @@ -118,7 +119,7 @@ describe('Admin create/edit/delete flows', () => {
});

it('Delete task', () => {
cy.contains('Delete Task').click();
cy.get('[data-testid="deleteTask"]').click();

// did we navigate?
cy.url().should('not.contain', '/tasks');
Expand All @@ -134,28 +135,29 @@ describe('Admin create/edit/delete flows', () => {
cy.contains('Submit Comment').click();

// verify comment exists
cy.get('.MutableComment-commentDetails').should('contain', commentBody);
cy.get('.Comment').should('contain', commentBody);
});

it('Edit issue comment', () => {
cy.contains('Edit Comment').click();
cy.get('[data-testid="editComment"]').click();
const commentBody = 'First comment after edit';
cy.get('[data-testid=editComment_body]').type(commentBody, typing_noDelay);
cy.contains('Save Comment').click();
cy.get('[data-testid="editComment_body"]').type(commentBody, typing_noDelay);
cy.get('[data-testid="editComment_submit"]').click();

// verify comment was updated
cy.get('.MutableComment-commentDetails').should('contain', commentBody);
cy.get('.Comment').should('contain', commentBody);
});

it('Delete issue comment', () => {
cy.contains('Delete Comment').click();
cy.get('.MutableComment-commentDetails').should('not.exist');
// cy.contains('Delete Comment').click();
cy.get('[data-testid="deleteComment"]').click();
cy.get('.Comment').should('not.exist');
});

it('Create task, create comment in task', () => {
const taskTitle = 'Test Task';
cy.app_fillCreateTaskForm(taskTitle, '');
cy.get('[data-testid=createTask_submit]').click();
cy.get('[data-testid="createTask_submit"]').click();

// verify task appeared in task list, and click on it
cy.get('.IssueView-sidebar').contains(taskTitle).click();
Expand All @@ -165,26 +167,26 @@ describe('Admin create/edit/delete flows', () => {
cy.contains('Submit Comment').click();

// verify comment exists
cy.get('.MutableComment-commentDetails').should('contain', commentBody);
cy.get('.Comment').should('contain', commentBody);
});

it('Edit task comment', () => {
cy.contains('Edit Comment').click();
cy.get('[data-testid="editComment"]').click();

const commentBody = 'Task comment after edit';
cy.get('[data-testid=editComment_body]').type(commentBody, typing_noDelay);
cy.contains('Save Comment').click();
cy.get('[data-testid="editComment_body"]').type(commentBody, typing_noDelay);
cy.get('[data-testid="editComment_submit"]').click();

// verify comment was updated
cy.get('.MutableComment-commentDetails').should('contain', commentBody);
cy.get('.Comment').should('contain', commentBody);
});

it('Delete task comment', () => {
cy.contains('Delete Comment').click();
cy.get('.MutableComment-commentDetails').should('not.exist');
cy.get('[data-testid="deleteComment"]').click();
cy.get('.Comment').should('not.exist');
});

it('Log out', () => {
cy.contains('Log Out').click();
cy.get('#logout').click();
})
});
43 changes: 22 additions & 21 deletions cypress/integration/e2e/3-user-actions_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,24 @@ describe('Admin setup', () => {
// create issue
cy.contains('New Issue').click();
cy.app_fillCreateIssueForm(issueName, issueBody);
cy.get('[data-testid=createIssue_submit]').click();
cy.get('[data-testid="createIssue_submit"]').click();
cy.url().should('contain', '/issues/');

// comment on issue
cy.get('[data-testid="createComment_body"]').type(issueCommentBody, typing_noDelay); cy.contains('Submit Comment').click();
cy.get('[data-testid="createComment_body"]').type(issueCommentBody, typing_noDelay);
cy.contains('Submit Comment').click();

// create task and navigate to it
cy.app_fillCreateTaskForm(taskTitle, taskBody);
cy.get('[data-testid=createTask_submit]').click();
cy.get('[data-testid="createTask_submit"]').click();
cy.get('.IssueView-sidebar').contains(taskTitle).click();

// comment on task
cy.get('[data-testid="createComment_body"]').type(taskCommentBody, typing_noDelay);
cy.contains('Submit Comment').click();

// log out
cy.contains('Log Out').click();
cy.get('#logout').click();
});
});

Expand All @@ -67,11 +68,11 @@ describe('User create/edit/delete flows', () => {

// verify admin comment is visible and not editable
cy.contains(issueCommentBody);
cy.contains('Edit Comment').should('not.exist');
cy.get('[data-testid="editComment"]').should('not.exist');

// verify issue buttons are not visible
cy.contains('Edit Issue').should('not.exist');
cy.contains('Delete Issue').should('not.exist');
cy.get('[data-testid="editIssue"]').should('not.exist');
cy.get('[data-testid="deleteIssue"]').should('not.exist');
});

it('Task page permissions verification', () => {
Expand All @@ -86,11 +87,11 @@ describe('User create/edit/delete flows', () => {

// verify admin comment is visible and not editable
cy.contains(taskCommentBody);
cy.contains('Edit Comment').should('not.exist');
cy.get('[data-testid="editComment"]').should('not.exist');

// verify task buttons are not visible
cy.contains('Edit Task').should('not.exist');
cy.contains('Delete Task').should('not.exist');
// verify issue buttons are not visible
cy.get('[data-testid="editIssue"]').should('not.exist');
cy.get('[data-testid="deleteIssue"]').should('not.exist');
});

it('Task page comments', () => {
Expand All @@ -105,15 +106,15 @@ describe('User create/edit/delete flows', () => {
cy.contains(myCommentBody);

// edit the comment
cy.contains('Edit Comment').click();
cy.get('[data-testid=editComment_body]').clear().type(myCommentBody_edit, typing_noDelay);
cy.contains('Save Comment').click();
cy.get('[data-testid="editComment"]').click();
cy.get('[data-testid="editComment_body"]').clear().type(myCommentBody_edit, typing_noDelay);
cy.get('[data-testid="editComment_submit"]').click();

// verify comment was edited and is visible
cy.contains(myCommentBody_edit);

// delete comment
cy.contains('Delete Comment').click();
cy.get('[data-testid="deleteComment"]').click();

// verify comment was deleted
cy.contains(myCommentBody_edit).should('not.exist');
Expand All @@ -134,24 +135,24 @@ describe('User create/edit/delete flows', () => {
cy.contains('Submit Comment').click();

// verify comment was created and is visible
cy.get('.MutableComment-commentDetails').should('contain', myCommentBody);
cy.get('.Comment').should('contain', myCommentBody);

// edit the comment
cy.contains('Edit Comment').click();
cy.get('[data-testid=editComment_body]').clear().type(myCommentBody_edit, typing_noDelay);
cy.contains('Save Comment').click();
cy.get('[data-testid="editComment"]').click();
cy.get('[data-testid="editComment_body"]').clear().type(myCommentBody_edit, typing_noDelay);
cy.get('[data-testid="editComment_submit"]').click();

// verify comment was edited and is visible
cy.contains(myCommentBody_edit);

// delete comment
cy.contains('Delete Comment').click();
cy.get('[data-testid="deleteComment"]').click();

// verify comment was deleted
cy.contains(myCommentBody_edit).should('not.exist');
});

it('Log out user', () => {
cy.contains('Log Out').click();
cy.get('#logout').click();
});
});
36 changes: 32 additions & 4 deletions src/containers/MutableComment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,25 @@ export default class MutableComment extends React.Component<Props, State> {
<Author />

<PermittedRender requiredLevel={PermissionLevel.Delete} resource={comment}>
<button onClick={onDelete} className="SmallButton" title='Delete Comment'><TrashIcon /></button>
<button
onClick={onDelete}
className="SmallButton"
title='Delete Comment'
data-testid='deleteComment'
>
<TrashIcon />
</button>
</PermittedRender>

<AuthorRender resource={comment}>
<button onClick={this.edit} className="SmallButton" title='Edit Comment'><EditIcon /></button>
<button
onClick={this.edit}
className="SmallButton"
title='Edit Comment'
data-testid='editComment'
>
<EditIcon />
</button>
</AuthorRender>
</div>

Expand Down Expand Up @@ -110,10 +124,24 @@ export default class MutableComment extends React.Component<Props, State> {
<Author />

<PermittedRender requiredLevel={PermissionLevel.Delete} resource={comment}>
<button onClick={onDelete} className="SmallButton SmallButton--danger" title='Delete Comment' ><TrashIcon /></button>
<button
onClick={onDelete}
className="SmallButton SmallButton--danger"
title='Delete Comment'
data-testid='deleteComment'
>
<TrashIcon />
</button>
</PermittedRender>

<button onClick={this.details} className="SmallButton" title='Cancel Edit'><XIcon /></button>
<button
onClick={this.details}
className="SmallButton"
title='Cancel Edit'
data-testid='cancelEdit'
>
<XIcon />
</button>
<SubmitBtn />
</div>

Expand Down
11 changes: 10 additions & 1 deletion src/containers/MutableIssue/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export default class MutableIssue extends React.Component<Props, State> {
<button
onClick={onDelete}
className="SmallButton SmallButton--danger"
data-testid='deleteIssue'
title='Delete Issue'>
<TrashIcon />
</button>
Expand All @@ -94,6 +95,7 @@ export default class MutableIssue extends React.Component<Props, State> {
<button
onClick={this.edit}
className="Button Button--edit circle"
data-testid='editIssue'
title='Edit Issue'>
<EditIcon />
</button>
Expand All @@ -103,6 +105,7 @@ export default class MutableIssue extends React.Component<Props, State> {
<button
className="Button Button--close circle"
title='Close Issue'
data-testid='closeIssue'
onClick={closeFn}>
<CheckIcon />
</button>
Expand Down Expand Up @@ -136,12 +139,18 @@ export default class MutableIssue extends React.Component<Props, State> {
<button
onClick={onDelete}
className="SmallButton SmallButton--danger circle"
data-testid='deleteIssue'
title='Delete Issue'
>
<TrashIcon />
</button>
</PermittedRender>
<button onClick={this.details} className="Button circle" title='Cancel Edit'>
<button
onClick={this.details}
className="Button circle"
data-testid='cancelEdit'
title='Cancel Edit'
>
<XIcon />
</button>
<SubmitBtn />
Expand Down
Loading

0 comments on commit 9b1599e

Please sign in to comment.