-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #281 from alliance-genome/KANBAN-601_ui-unit-testi…
…ng-setup UI unit and E2E testing setup (KANBAN-601)
- Loading branch information
Showing
38 changed files
with
11,183 additions
and
2,804 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ | |
|
|
||
| # testing | ||
| /coverage | ||
| /cypress/screenshots/ | ||
|
|
||
| # next.js | ||
| /.next/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { defineConfig } from "cypress"; | ||
|
|
||
| export default defineConfig({ | ||
| e2e: { | ||
| baseUrl: 'http://localhost:3000', | ||
| supportFile: false | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /// <reference types="cypress" /> | ||
|
|
||
| // To learn more about how Cypress works, | ||
| // please read our getting started guide: | ||
| // https://on.cypress.io/introduction-to-cypress | ||
|
|
||
| import formInput from '../fixtures/test-submit-success-input.json' | ||
|
|
||
| describe('submit form behaviour', () => { | ||
| beforeEach(() => { | ||
| // Cypress starts out with a blank slate for each test | ||
| // so we must tell it to visit our website with the `cy.visit()` command | ||
| // before each test | ||
| cy.visit('/') | ||
| }) | ||
|
|
||
| it('tests job submission success', () => { | ||
| // We use the `cy.get()` command to get all elements that match the selector. | ||
| // There should only be one cell with a inputgroup. | ||
| // cy.get('table tbody tr td .p-inputgroup').should('have.length', 1) | ||
|
|
||
| // Should displays one alignmentEntry by default. | ||
| cy.get('.p-inputgroup').should('have.length', 1) | ||
|
|
||
| // There should be excactly one submit button | ||
| cy.get('button').filter('[aria-label="Submit"]').as('submitBtn') | ||
| cy.get('@submitBtn').should('have.length', 1) | ||
|
|
||
| // and it should be disabled by default (on incomplete input). | ||
| cy.get('@submitBtn').should('be.disabled') | ||
|
|
||
| // There should be excactly one element to click to add records | ||
| cy.get('button#add-record').as('addRecordBtn') | ||
| cy.get('@addRecordBtn').should('have.length', 1) | ||
|
|
||
| // add as many records as there are entries in formInput | ||
| for(let i = 1, len = formInput.length; i < len; ++i){ | ||
| cy.get('@addRecordBtn').click() | ||
| } | ||
| cy.get('.p-inputgroup').should('have.length', formInput.length) | ||
|
|
||
| // Input all data into form | ||
| for(let i = 0, len = formInput.length; i < len; ++i){ | ||
|
|
||
| // Form should be able to receive gene as user input. | ||
| cy.get('.p-inputgroup').eq(i).find('input#gene').focus().type(formInput[i].gene) | ||
|
|
||
| // Once the transcript list loaded, from should enable selecting the relevant transcripts. | ||
| cy.get('.p-inputgroup').eq(i).find('#transcripts').find('input').focus() | ||
| cy.get('.p-multiselect-panel').as('openTranscriptsSelectBox').should('be.visible') | ||
|
|
||
| // A list of transcript should be available | ||
| cy.get('@openTranscriptsSelectBox').find('li.p-multiselect-item').as('openTranscriptsList') | ||
| cy.get('@openTranscriptsList').should('have.length.at.least', 1) | ||
|
|
||
| // And the relevant transcripts should be selectable | ||
| formInput[i].transcripts.forEach((transcript) => { | ||
| cy.get('@openTranscriptsList').contains(transcript).click() | ||
| }) | ||
| cy.get('@openTranscriptsSelectBox').find('button.p-multiselect-close').click() | ||
|
|
||
| cy.focused().blur() | ||
|
|
||
| // Submit button should stay disabled as long a last entry was not submitted | ||
| if ( i < len - 1 ) { | ||
| cy.get('@submitBtn').should('be.disabled') | ||
|
|
||
| if (i === 0) { | ||
| cy.wait(5000) | ||
| cy.get('@submitBtn').should('be.disabled') | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Submit button should become active after completing all input | ||
| cy.get('@submitBtn').should('be.enabled') | ||
|
|
||
| // Submitting the analysis should report a UUID | ||
| cy.get('@submitBtn').click() | ||
| cy.contains('div#display-message', /^job .+ is now pending\.$/) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| /// <reference types="cypress" /> | ||
|
|
||
| // Welcome to Cypress! | ||
| // | ||
| // This spec file contains a variety of sample tests | ||
| // for a todo list app that are designed to demonstrate | ||
| // the power of writing tests in Cypress. | ||
| // | ||
| // To learn more about how Cypress works and | ||
| // what makes it such an awesome testing tool, | ||
| // please read our getting started guide: | ||
| // https://on.cypress.io/introduction-to-cypress | ||
|
|
||
| describe('example to-do app', () => { | ||
| beforeEach(() => { | ||
| // Cypress starts out with a blank slate for each test | ||
| // so we must tell it to visit our website with the `cy.visit()` command. | ||
| // Since we want to visit the same URL at the start of all our tests, | ||
| // we include it in our beforeEach function so that it runs before each test | ||
| cy.visit('https://example.cypress.io/todo') | ||
| }) | ||
|
|
||
| it('displays two todo items by default', () => { | ||
| // We use the `cy.get()` command to get all elements that match the selector. | ||
| // Then, we use `should` to assert that there are two matched items, | ||
| // which are the two default items. | ||
| cy.get('.todo-list li').should('have.length', 2) | ||
|
|
||
| // We can go even further and check that the default todos each contain | ||
| // the correct text. We use the `first` and `last` functions | ||
| // to get just the first and last matched elements individually, | ||
| // and then perform an assertion with `should`. | ||
| cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') | ||
| cy.get('.todo-list li').last().should('have.text', 'Walk the dog') | ||
| }) | ||
|
|
||
| it('can add new todo items', () => { | ||
| // We'll store our item text in a variable so we can reuse it | ||
| const newItem = 'Feed the cat' | ||
|
|
||
| // Let's get the input element and use the `type` command to | ||
| // input our new list item. After typing the content of our item, | ||
| // we need to type the enter key as well in order to submit the input. | ||
| // This input has a data-test attribute so we'll use that to select the | ||
| // element in accordance with best practices: | ||
| // https://on.cypress.io/selecting-elements | ||
| cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) | ||
|
|
||
| // Now that we've typed our new item, let's check that it actually was added to the list. | ||
| // Since it's the newest item, it should exist as the last element in the list. | ||
| // In addition, with the two default items, we should have a total of 3 elements in the list. | ||
| // Since assertions yield the element that was asserted on, | ||
| // we can chain both of these assertions together into a single statement. | ||
| cy.get('.todo-list li') | ||
| .should('have.length', 3) | ||
| .last() | ||
| .should('have.text', newItem) | ||
| }) | ||
|
|
||
| it('can check off an item as completed', () => { | ||
| // In addition to using the `get` command to get an element by selector, | ||
| // we can also use the `contains` command to get an element by its contents. | ||
| // However, this will yield the <label>, which is lowest-level element that contains the text. | ||
| // In order to check the item, we'll find the <input> element for this <label> | ||
| // by traversing up the dom to the parent element. From there, we can `find` | ||
| // the child checkbox <input> element and use the `check` command to check it. | ||
| cy.contains('Pay electric bill') | ||
| .parent() | ||
| .find('input[type=checkbox]') | ||
| .check() | ||
|
|
||
| // Now that we've checked the button, we can go ahead and make sure | ||
| // that the list element is now marked as completed. | ||
| // Again we'll use `contains` to find the <label> element and then use the `parents` command | ||
| // to traverse multiple levels up the dom until we find the corresponding <li> element. | ||
| // Once we get that element, we can assert that it has the completed class. | ||
| cy.contains('Pay electric bill') | ||
| .parents('li') | ||
| .should('have.class', 'completed') | ||
| }) | ||
|
|
||
| context('with a checked task', () => { | ||
| beforeEach(() => { | ||
| // We'll take the command we used above to check off an element | ||
| // Since we want to perform multiple tests that start with checking | ||
| // one element, we put it in the beforeEach hook | ||
| // so that it runs at the start of every test. | ||
| cy.contains('Pay electric bill') | ||
| .parent() | ||
| .find('input[type=checkbox]') | ||
| .check() | ||
| }) | ||
|
|
||
| it('can filter for uncompleted tasks', () => { | ||
| // We'll click on the "active" button in order to | ||
| // display only incomplete items | ||
| cy.contains('Active').click() | ||
|
|
||
| // After filtering, we can assert that there is only the one | ||
| // incomplete item in the list. | ||
| cy.get('.todo-list li') | ||
| .should('have.length', 1) | ||
| .first() | ||
| .should('have.text', 'Walk the dog') | ||
|
|
||
| // For good measure, let's also assert that the task we checked off | ||
| // does not exist on the page. | ||
| cy.contains('Pay electric bill').should('not.exist') | ||
| }) | ||
|
|
||
| it('can filter for completed tasks', () => { | ||
| // We can perform similar steps as the test above to ensure | ||
| // that only completed tasks are shown | ||
| cy.contains('Completed').click() | ||
|
|
||
| cy.get('.todo-list li') | ||
| .should('have.length', 1) | ||
| .first() | ||
| .should('have.text', 'Pay electric bill') | ||
|
|
||
| cy.contains('Walk the dog').should('not.exist') | ||
| }) | ||
|
|
||
| it('can delete all completed tasks', () => { | ||
| // First, let's click the "Clear completed" button | ||
| // `contains` is actually serving two purposes here. | ||
| // First, it's ensuring that the button exists within the dom. | ||
| // This button only appears when at least one task is checked | ||
| // so this command is implicitly verifying that it does exist. | ||
| // Second, it selects the button so we can click it. | ||
| cy.contains('Clear completed').click() | ||
|
|
||
| // Then we can make sure that there is only one element | ||
| // in the list and our element does not exist | ||
| cy.get('.todo-list li') | ||
| .should('have.length', 1) | ||
| .should('not.have.text', 'Pay electric bill') | ||
|
|
||
| // Finally, make sure that the clear button no longer exists. | ||
| cy.contains('Clear completed').should('not.exist') | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.