From 8faae28370085fe4502827874ac513aba0b17103 Mon Sep 17 00:00:00 2001 From: Chris Hopkins Date: Fri, 6 Oct 2023 16:31:05 +0100 Subject: [PATCH] move support files to their own folder --- test/functional/cypress/support/actions.js | 21 + test/functional/cypress/support/assertions.js | 113 ++- .../support/collection-list-assertions.js | 63 ++ .../company-local-header-assertions.js | 21 + .../cypress/support/event-assertions.js | 12 + .../cypress/support/eventform-fillers.js | 72 ++ .../cypress/support/form-fillers.js | 37 +- test/functional/cypress/support/tests.js | 4 + test/functional/cypress/support/utils.js | 3 + test/support/.eslintrc.json | 5 + test/support/actions.js | 194 ++++ test/support/assertions.js | 859 ++++++++++++++++++ test/support/collection-list-assertions.js | 162 ++++ .../company-local-header-assertions.js | 158 ++++ test/support/event-assertions.js | 247 +++++ test/support/eventform-fillers.js | 207 +++++ test/support/form-fillers.js | 55 ++ test/support/tests.js | 60 ++ test/support/utils.js | 3 + 19 files changed, 2294 insertions(+), 2 deletions(-) create mode 100644 test/support/.eslintrc.json create mode 100644 test/support/actions.js create mode 100644 test/support/assertions.js create mode 100644 test/support/collection-list-assertions.js create mode 100644 test/support/company-local-header-assertions.js create mode 100644 test/support/event-assertions.js create mode 100644 test/support/eventform-fillers.js create mode 100644 test/support/form-fillers.js create mode 100644 test/support/tests.js create mode 100644 test/support/utils.js diff --git a/test/functional/cypress/support/actions.js b/test/functional/cypress/support/actions.js index 0a7dd83c588..cdb5bee4a5e 100644 --- a/test/functional/cypress/support/actions.js +++ b/test/functional/cypress/support/actions.js @@ -3,6 +3,8 @@ import { fill } from './form-fillers' const adviserResult = require('../../../sandbox/fixtures/autocomplete-adviser-list.json') /** + * @deprecated Use the version in /test/support folder + * * Enter `input` into a typeahead `element` and select the first result. * * Defaults to Typeahead for adviser but can changed to any type by setting @@ -38,6 +40,7 @@ export const selectFirstMockedTypeaheadOption = ({ }) /** + * @deprecated Use the version in /test/support folder * Clicks the checkbox option with the given value */ export const clickCheckboxGroupOption = ({ element, value }) => { @@ -45,6 +48,7 @@ export const clickCheckboxGroupOption = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Clicks the radiogroup option with the label */ export const clickRadioGroupOption = ({ element, label }) => { @@ -52,6 +56,7 @@ export const clickRadioGroupOption = ({ element, label }) => { } /** + * @deprecated Use the version in /test/support folder * Enter `input` into a typeahead `element` and select the first result */ export const selectFirstTypeaheadOption = ({ element, input }) => { @@ -61,6 +66,7 @@ export const selectFirstTypeaheadOption = ({ element, input }) => { } /** + * @deprecated Use the version in /test/support folder * Removes a specific chip based on the data-value */ export const removeChip = (dataValue) => { @@ -68,6 +74,7 @@ export const removeChip = (dataValue) => { } /** + * @deprecated Use the version in /test/support folder * Adds a date to the any given date input field */ export const inputDateValue = ({ element, value }) => { @@ -75,6 +82,7 @@ export const inputDateValue = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Adds a date to the any given date input field that also has a hint */ export const inputDateValueWithHint = ({ element, value }) => { @@ -82,6 +90,7 @@ export const inputDateValueWithHint = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Adds a date object of {day, month, year} to the relevent input fields */ export const clearAndInputDateValueObject = ({ element, value }) => { @@ -99,6 +108,7 @@ export const clearAndInputDateValueObject = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Clears and Types a value in an input field */ export const clearAndTypeInput = ({ element, value }) => { @@ -111,6 +121,7 @@ export const clearAndTypeInput = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Clears and Types a value in an textarea field */ export const clearAndTypeTextArea = ({ element, value }) => { @@ -123,6 +134,7 @@ export const clearAndTypeTextArea = ({ element, value }) => { } /** + * @deprecated Use the version in /test/support folder * Remove the first item in a multi-select Typeahead */ export const removeFirstTypeaheadItem = () => { @@ -130,6 +142,7 @@ export const removeFirstTypeaheadItem = () => { } /** + * @deprecated Use the version in /test/support folder * Click on a button * @param {*} buttonText The text of the button you want to click */ @@ -138,6 +151,7 @@ export const clickButton = (buttonText) => { } /** + * @deprecated Use the version in /test/support folder * Click on a Cancel anchor */ export const clickCancelLink = () => { @@ -145,6 +159,7 @@ export const clickCancelLink = () => { } /** + * @deprecated Use the version in /test/support folder * Generic search request for a CollectionList * @param {*} endpoint The search endpoint * @param {*} fakeList The fake list of items to display @@ -162,6 +177,9 @@ export const collectionListRequest = (endpoint, fakeList, link) => { cy.wait('@apiRequest') } +/** + * @deprecated Use the version in /test/support folder + */ export const omisCollectionListRequest = ( endpoint, fakeList, @@ -182,6 +200,9 @@ export const omisCollectionListRequest = ( cy.wait('@apiRequest') } +/** + * @deprecated Use the version in /test/support folder + */ export const addNewContact = (contact) => { fill('[data-test=group-field-first_name]', contact.first_name) fill('[data-test=group-field-last_name]', contact.last_name) diff --git a/test/functional/cypress/support/assertions.js b/test/functional/cypress/support/assertions.js index bde5567ea05..ba7199a15bb 100644 --- a/test/functional/cypress/support/assertions.js +++ b/test/functional/cypress/support/assertions.js @@ -3,6 +3,9 @@ const qs = require('qs') const selectors = require('../../../selectors') +/** + * @deprecated Use the version in /test/support folder + */ const assertKeyValueTable = (dataTest, expected) => { forEach(keys(expected), (key, i) => { const rowNumber = i + 1 @@ -39,6 +42,9 @@ const assertKeyValueTable = (dataTest, expected) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertValueTable = (dataTest, expected) => { forEach(expected, (expectedValue, i) => { const rowNumber = i + 1 @@ -49,6 +55,9 @@ const assertValueTable = (dataTest, expected) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertSummaryTable = ({ dataTest, heading, showEditLink, content }) => { const summaryTableSelector = `[data-test="${dataTest}"]` @@ -67,6 +76,7 @@ const assertSummaryTable = ({ dataTest, heading, showEditLink, content }) => { } /** + * @deprecated Use the version in /test/support folder * @description Asserts the presence of breadcrumbs with minimal knowledge about * implementation details e.g. class names and ids. * @param {Object} specs - A map of expected breadcrumb item labels to hrefs. @@ -97,12 +107,16 @@ const assertBreadcrumbs = (specs) => { } /** + * @deprecated Use the version in /test/support folder * @description Same as assertBreadcrumbs but already wrapped in an `it` block. * @param {Object} specs - A map of expected breadcrumb item labels to hrefs. */ const testBreadcrumbs = (specs) => it('should render breadcrumbs', () => assertBreadcrumbs(specs)) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldUneditable = ({ element, label, value = null }) => cy .wrap(element) @@ -112,6 +126,9 @@ const assertFieldUneditable = ({ element, label, value = null }) => .parent() .then(($el) => value && cy.wrap($el).should('contain', value)) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldSelect = ({ element, label, @@ -147,6 +164,7 @@ const assertFieldSelect = ({ }) /** + * @deprecated Use the version in /test/support folder * @description Asserts a list of selector * @param {Array} options - an array of options to assert @@ -181,6 +199,9 @@ const assertSelectOptions = (element, expectedOptions) => ).to.deep.eq(expectedOptions) }) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldRadios = ({ element, label, value, optionsCount }) => cy .wrap(element) @@ -204,6 +225,9 @@ const assertFieldRadios = ({ element, label, value, optionsCount }) => // As part of the accessibility work, a sample of pages have been refactored to use legends instead of labels. // Use this assertion for radios which have legends applied. +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldRadiosWithLegend = ({ element, legend, @@ -229,6 +253,9 @@ const assertFieldRadiosWithLegend = ({ .should('have.text', value) ) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldRadiosWithoutLabel = ({ element, value, optionsCount }) => cy .wrap(element) @@ -245,6 +272,9 @@ const assertFieldRadiosWithoutLabel = ({ element, value, optionsCount }) => .should('have.text', value) ) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldCheckbox = ({ element, label, value, checked }) => { cy.wrap(element) .as('fieldCheckbox') @@ -257,6 +287,9 @@ const assertFieldCheckbox = ({ element, label, value, checked }) => { .should(checked ? 'be.checked' : 'not.be.checked') } +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldTypeahead = ({ element, label, @@ -280,9 +313,15 @@ const assertFieldTypeahead = ({ hint && expect($typeahead).to.contain(hint) }) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldSingleTypeahead = (props) => assertFieldTypeahead({ ...props, isMulti: false }) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldInputWithLegend = ({ element, label, @@ -311,6 +350,9 @@ const assertFieldInputWithLegend = ({ value && cy.wrap($el).should('have.attr', 'value', String(value) || '') ) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldInput = ({ element, label, @@ -343,9 +385,15 @@ const assertFieldInput = ({ value && cy.wrap($el).should('have.attr', 'value', String(value) || '') ) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldHidden = ({ element, name, value }) => cy.wrap(element).should('have.attr', 'name', name).should('have.value', value) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldTextarea = ({ element, label, hint, value }) => cy .wrap(element) @@ -365,6 +413,9 @@ const assertFieldTextarea = ({ element, label, hint, value }) => .find('textarea') .then(($el) => value ?? cy.wrap($el).should('have.text', value || '')) +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldAddress = ({ element, hint = null, value = {} }) => { const isUKBased = value.country.name === 'United Kingdom' const isUSBased = value.country.name === 'United States' @@ -442,6 +493,9 @@ const assertFieldAddress = ({ element, hint = null, value = {} }) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldDate = ({ element, label, value = {} }) => { const inputs = element.find('input') @@ -455,6 +509,9 @@ const assertFieldDate = ({ element, label, value = {} }) => { value.year && expect(inputs[2]).to.have.value(value.year) } +/** + * @deprecated Use the version in /test/support folder + */ const assertFieldDateShort = ({ element, label, value = {} }) => { const labels = element.find('label') const inputs = element.find('input') @@ -468,6 +525,9 @@ const assertFieldDateShort = ({ element, label, value = {} }) => { value.year && expect(inputs[1]).to.have.value(value.year) } +/** + * @deprecated Use the version in /test/support folder + */ const assertFormActions = ({ element, buttons }) => cy .wrap(element) @@ -476,6 +536,9 @@ const assertFormActions = ({ element, buttons }) => cy.wrap(element).should('have.text', buttons[i]).should('match', 'button') }) +/** + * @deprecated Use the version in /test/support folder + */ const assertFormFields = (formElement, specs) => formElement.children().each((element, i) => { if (specs[i]) { @@ -489,6 +552,9 @@ const assertFormFields = (formElement, specs) => } }) +/** + * @deprecated Use the version in /test/support folder + */ const assertDetails = ({ element, summary, content }) => cy .wrap(element) @@ -497,14 +563,23 @@ const assertDetails = ({ element, summary, content }) => .next() .should('have.text', content) +/** + * @deprecated Use the version in /test/support folder + */ const assertLocalHeader = (header) => { cy.get(selectors.localHeader).contains(header) } +/** + * @deprecated Use the version in /test/support folder + */ const assertTabbedLocalNav = (nav) => { cy.get(selectors.tabbedLocalNav).contains(nav) } +/** + * @deprecated Use the version in /test/support folder + */ const assertSummaryList = (listElement, specs) => { const entries = Object.entries(specs) cy.wrap(listElement) @@ -517,17 +592,24 @@ const assertSummaryList = (listElement, specs) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertAriaTablistTabSelected = (tabListLabel, tabLabel) => cy .getDhTablistTab(tabListLabel, tabLabel) .should('have.attr', 'aria-selected', 'true') +/** + * @deprecated Use the version in /test/support folder + */ const assertFormButtons = ({ submitText, cancelText, cancelLink }) => { cy.contains('button', submitText) cy.contains('a', cancelText).should('have.attr', 'href', cancelLink) } /** + * @deprecated Use the version in /test/support folder * Assert that a checkbox is checked or unchecked */ const assertCheckboxGroupOption = ({ element, value, checked = true }) => { @@ -540,6 +622,7 @@ const assertCheckboxGroupOption = ({ element, value, checked = true }) => { } /** + * @deprecated Use the version in /test/support folder * Assert that none of the options in a checkbox group are selected */ const assertCheckboxGroupNoneSelected = (element) => { @@ -549,6 +632,7 @@ const assertCheckboxGroupNoneSelected = (element) => { } /** + * @deprecated Use the version in /test/support folder * Assert that all of the options in a checkbox group are selected */ const assertCheckboxGroupAllSelected = (element) => { @@ -558,6 +642,7 @@ const assertCheckboxGroupAllSelected = (element) => { } /** + * @deprecated Use the version in /test/support folder * Asserts that a typeahead `element` has the given `legend` and `placeholder` */ const assertTypeaheadHints = ({ @@ -575,6 +660,7 @@ const assertTypeaheadHints = ({ } /** + * @deprecated Use the version in /test/support folder * Asserts that the typeahead `element` has the `expectedOption` selected */ const assertTypeaheadOptionSelected = ({ element, expectedOption }) => { @@ -582,6 +668,7 @@ const assertTypeaheadOptionSelected = ({ element, expectedOption }) => { } /** + * @deprecated Use the version in /test/support folder * Asserts that a single-select typeahead `element` has the `expectedOption` selected */ const assertSingleTypeaheadOptionSelected = ({ element, expectedOption }) => { @@ -589,6 +676,7 @@ const assertSingleTypeaheadOptionSelected = ({ element, expectedOption }) => { } /** + * @deprecated Use the version in /test/support folder * Asserts that a chip indicator exists in the specified position */ const assertChipExists = ({ label, position }) => { @@ -598,6 +686,7 @@ const assertChipExists = ({ label, position }) => { } /** + * @deprecated Use the version in /test/support folder * Asserts there are no chips */ const assertChipsEmpty = () => { @@ -605,6 +694,7 @@ const assertChipsEmpty = () => { } /** + * @deprecated Use the version in /test/support folder * Asserts the field is empty */ const assertFieldEmpty = (element) => { @@ -612,6 +702,7 @@ const assertFieldEmpty = (element) => { } /** + * @deprecated Use the version in /test/support folder * Asserts the key-value pair are defined within the query params */ const assertQueryParams = (key, value) => { @@ -624,6 +715,7 @@ const assertQueryParams = (key, value) => { } /** + * @deprecated Use the version in /test/support folder * Asserts the key-value pair are defined within the query params */ const assertNotQueryParams = (key, value) => { @@ -636,6 +728,7 @@ const assertNotQueryParams = (key, value) => { } /** + * @deprecated Use the version in /test/support folder * Assert the expected payload to the API */ @@ -646,6 +739,7 @@ const assertPayload = (apiRequest, expectedParams) => { } /** + * @deprecated Use the version in /test/support folder * Asserts the url (no domain name) is contained within the API request url */ const assertRequestUrl = (apiRequest, url) => { @@ -655,9 +749,9 @@ const assertRequestUrl = (apiRequest, url) => { } /** + * @deprecated Use the version in /test/support folder * Assert that the label and value exist on the date input */ - const assertDateInput = ({ element, label, value }) => { cy.get(element) .find('label') @@ -668,6 +762,7 @@ const assertDateInput = ({ element, label, value }) => { } /** + * @deprecated Use the version in /test/support folder * Assert that the label and value exist on the date input where a hint is provided */ const assertDateInputWithHint = ({ element, label, value }) => { @@ -681,6 +776,7 @@ const assertDateInputWithHint = ({ element, label, value }) => { } /** + * @deprecated Use the version in /test/support folder * Assert error summary passing in a list of errors as as an array */ const assertErrorSummary = (errors) => { @@ -690,6 +786,7 @@ const assertErrorSummary = (errors) => { } /** + * @deprecated Use the version in /test/support folder * Assert by selector if it is visible */ const assertVisible = (selector) => { @@ -697,6 +794,7 @@ const assertVisible = (selector) => { } /** + * @deprecated Use the version in /test/support folder * Assert by selector if it does not exist */ const assertNotExists = (selector) => { @@ -704,6 +802,7 @@ const assertNotExists = (selector) => { } /** + * @deprecated Use the version in /test/support folder * Assert if the text is visible */ const assertTextVisible = (text) => { @@ -711,6 +810,7 @@ const assertTextVisible = (text) => { } /** + * @deprecated Use the version in /test/support folder * Assert url is contained in current url */ const assertUrl = (url) => { @@ -718,6 +818,7 @@ const assertUrl = (url) => { } /** + * @deprecated Use the version in /test/support folder * Assert url is exactly matches the current url */ const assertExactUrl = (url) => { @@ -725,6 +826,7 @@ const assertExactUrl = (url) => { } /** + * @deprecated Use the version in /test/support folder * Assert flash message is contained */ const assertFlashMessage = (message) => { @@ -732,17 +834,22 @@ const assertFlashMessage = (message) => { } /** + * @deprecated Use the version in /test/support folder * Assert that a given param is either present or not present in a URL */ const assertParamContainedInUrl = (xhr, param) => { expect(xhr.response.url).to.contain(param) } +/** + * @deprecated Use the version in /test/support folder + */ const assertParamNotContainedInUrl = (xhr, param) => { expect(xhr.response.url).to.not.contain(param) } /** + * @deprecated Use the version in /test/support folder * Assert that the body of an intercepted request is as expected */ const assertRequestBody = (xhr, expectedBody) => { @@ -750,6 +857,7 @@ const assertRequestBody = (xhr, expectedBody) => { } /** + * @deprecated Use the version in /test/support folder * Assert that the error dialog contains a task name and error message */ const assertErrorDialog = (taskName, errorMessage) => { @@ -763,6 +871,7 @@ const assertErrorDialog = (taskName, errorMessage) => { } /** + * @deprecated Use the version in /test/support folder * Assert an endpoint value where a wait has been setup * @@param endPointAlias defined with wait and no need to assign the @ value * @@param assertCallback callback function to assert @@ -771,6 +880,7 @@ const assertAPIRequest = (endPointAlias, assertCallback) => cy.wait(`@${endPointAlias}`).then((xhr) => assertCallback(xhr)) /** + * @deprecated Use the version in /test/support folder * Assert the field element contains the expected error message * @param {*} element the field element that contains the error * @param {*} errorMessage the error message that should be displayed @@ -784,6 +894,7 @@ const assertFieldError = (element, errorMessage, hasHint = true) => .should('have.text', errorMessage) /** + * @deprecated Use the version in /test/support folder * Assert the typeahead element contains a chip for each of the values * @param {*} selector the selector for the typeahead component * @param {*} values the list of values that should exist in the chips diff --git a/test/functional/cypress/support/collection-list-assertions.js b/test/functional/cypress/support/collection-list-assertions.js index 34f62d3d2e9..6bb354f0996 100644 --- a/test/functional/cypress/support/collection-list-assertions.js +++ b/test/functional/cypress/support/collection-list-assertions.js @@ -5,12 +5,18 @@ const { assertBreadcrumbs } = require('./assertions') const urls = require('../../../../src/lib/urls') +/** + * @deprecated Use the version in /test/support folder + */ const getCollectionList = () => { cy.get('[data-test="collection-list"]').as('collectionList') cy.get('[data-test="collection-item"]').as('collectionItems') cy.get('@collectionItems').eq(0).as('firstListItem') } +/** + * @deprecated Use the version in /test/support folder + */ const assertCollectionBreadcrumbs = (pageName) => { it('should render breadcrumbs', () => { assertBreadcrumbs({ @@ -20,6 +26,9 @@ const assertCollectionBreadcrumbs = (pageName) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertCompanyCollectionBreadcrumbs = (companyFixture, pageName) => { it('should render breadcrumbs', () => { assertBreadcrumbs({ @@ -31,6 +40,9 @@ const assertCompanyCollectionBreadcrumbs = (companyFixture, pageName) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertAddItemButton = (buttonText, link) => { cy.get('[data-test="add-collection-item-button"]') .should('exist') @@ -38,43 +50,70 @@ const assertAddItemButton = (buttonText, link) => { .should('have.attr', 'href', link) } +/** + * @deprecated Use the version in /test/support folder + */ const assertAddItemButtonNotPresent = () => { cy.get('[data-test="add-collection-item-button"]').should('not.exist') } +/** + * @deprecated Use the version in /test/support folder + */ const assertBadge = (item, badgeText) => { cy.get(item).find('[data-test="badge"]').should('contain', badgeText) } +/** + * @deprecated Use the version in /test/support folder + */ const assertBadgeNotPresent = (item, badgeText) => { cy.get(item).find('[data-test="badge"]').should('not.contain', badgeText) } +/** + * @deprecated Use the version in /test/support folder + */ const assertBadgeShouldNotExist = (item) => { cy.get(item).find('[data-test="badge"]').should('not.exist') } +/** + * @deprecated Use the version in /test/support folder + */ const assertMetadataItem = (item, metadataText) => { cy.get(item).find('[data-test="metadata"]').should('contain', metadataText) } +/** + * @deprecated Use the version in /test/support folder + */ const assertMetadataItemNotPresent = (item, metadataText) => { cy.get(item) .find('[data-test="metadata"]') .should('not.contain', metadataText) } +/** + * @deprecated Use the version in /test/support folder + */ const assertRemoveAllFiltersNotPresent = () => { it('should not render a "Remove all filters" button', () => { cy.get('[data-test="clear-filters"]').should('not.exist') }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertListLength = (fakeList) => { cy.get('[data-test="collection-list"]').should('have.length', 1) cy.get('[data-test="collection-item"]').should('have.length', fakeList.length) } +/** + * @deprecated Use the version in /test/support folder + */ const assertItemLink = (item, linkText, link) => { cy.get(item) .find('h3') @@ -83,6 +122,9 @@ const assertItemLink = (item, linkText, link) => { .should('have.attr', 'href', link) } +/** + * @deprecated Use the version in /test/support folder + */ const assertArchiveSummary = (type) => { const message = type === 'contact' @@ -93,6 +135,9 @@ const assertArchiveSummary = (type) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertArchiveMessage = (type) => { const message = type + ' cannot be added to an archived company.' it('should render an archived explanation', () => { @@ -100,6 +145,9 @@ const assertArchiveMessage = (type) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertUnarchiveLink = (url) => { it('should render "Click here to unarchive"', () => { cy.get('[data-test="archived-details"]') @@ -109,26 +157,41 @@ const assertUnarchiveLink = (url) => { }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertUpdatedOn = (item, text) => { cy.get(item).find('h4').should('have.text', text) } +/** + * @deprecated Use the version in /test/support folder + */ const assertRole = (roleType) => { it('should contain a status role', () => { cy.get(`[role="${roleType}"]`).should('exist') }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertTitle = (headingText) => { it('should render a title', () => { cy.get('h2').should('contain', headingText) }) } +/** + * @deprecated Use the version in /test/support folder + */ const assertPaginationSummary = (pageText) => { cy.get('[data-test=pagination-summary]').contains(pageText) } +/** + * @deprecated Use the version in /test/support folder + */ const assertOMISSumary = (summaryText) => { it('should have the total value', () => { cy.get('[data-test="summary"]') diff --git a/test/functional/cypress/support/company-local-header-assertions.js b/test/functional/cypress/support/company-local-header-assertions.js index 0e87a3a1f6e..1b710573531 100644 --- a/test/functional/cypress/support/company-local-header-assertions.js +++ b/test/functional/cypress/support/company-local-header-assertions.js @@ -7,6 +7,7 @@ const urls = require('../../../../src/lib/urls') const companyLocalHeader = selectors.companyLocalHeader() /** + * @deprecated * Assert that the company name appears correctly */ const assertCompanyName = (companyName) => { @@ -14,6 +15,7 @@ const assertCompanyName = (companyName) => { } /** + * @deprecated * Assert that the company address appears correctly */ const assertCompanyAddress = (address) => { @@ -21,6 +23,7 @@ const assertCompanyAddress = (address) => { } /** + * @deprecated * Asserts the text that appears on the HQ type badge (Global, Ultimate etc) */ const assertBadgeText = (badgeText) => { @@ -28,6 +31,7 @@ const assertBadgeText = (badgeText) => { } /** + * @deprecated * Asserts that the add to list button has the correct URL */ const assertAddButton = (addRemoveFromListUrl, detailsUrl) => { @@ -41,6 +45,7 @@ const assertAddButton = (addRemoveFromListUrl, detailsUrl) => { } /** + * @deprecated * Asserts that the company trading name appears correctly */ const assertCompanyTradingName = (tradingNames) => { @@ -48,6 +53,7 @@ const assertCompanyTradingName = (tradingNames) => { } /** + * @deprecated * Asserts that the company trading name is not visible */ const assertCompanyTradingNameNotVisible = () => { @@ -55,6 +61,7 @@ const assertCompanyTradingNameNotVisible = () => { } /** + * @deprecated * Asserts that the refer this compnay button has the correct URL */ const assertReferButton = (referralUrl) => { @@ -67,6 +74,7 @@ const assertReferButton = (referralUrl) => { } /** + * @deprecated * Asserts that the company list item button has the correct URL */ const assertCompanyListItemButton = (addRemoveFromListUrl, detailsUrl) => { @@ -80,6 +88,7 @@ const assertCompanyListItemButton = (addRemoveFromListUrl, detailsUrl) => { } /** + * @deprecated * Asserts that the add export project button has the correct URL */ const assertExportProjectButton = (url) => { @@ -87,6 +96,7 @@ const assertExportProjectButton = (url) => { } /** + * @deprecated * Asserts that the add interaction button has the correct URL */ const assertAddInteractionButton = (url) => { @@ -98,6 +108,7 @@ const assertAddInteractionButton = (url) => { } /** + * @deprecated * Asserts that the header breadcrumbs appear correctly */ const assertBreadcrumbs = (companyName, detailsUrl, lastCrumb) => { @@ -110,6 +121,7 @@ const assertBreadcrumbs = (companyName, detailsUrl, lastCrumb) => { } /** + * @deprecated * This page has a different breadcrumb layout so needs its own assertion. */ const assertExportCountryHistoryBreadcrumbs = (company, detailsUrl) => { @@ -122,12 +134,18 @@ const assertExportCountryHistoryBreadcrumbs = (company, detailsUrl) => { }) } +/** + * @deprecated + */ const assertOneListTierA = (paragraphNumber) => { cy.get(companyLocalHeader.description.paragraph(paragraphNumber)).contains( 'This is an account managed company (One List Tier A - Strategic Account)' ) } +/** + * @deprecated + */ const assertCoreTeam = (paragraphNumber, advisersUrl) => { cy.get(companyLocalHeader.description.paragraph(paragraphNumber)) .contains('Global Account Manager: Travis Greene View core team') @@ -135,6 +153,9 @@ const assertCoreTeam = (paragraphNumber, advisersUrl) => { .should('have.attr', 'href', advisersUrl) } +/** + * @deprecated + */ const assertArchivePanelNotVisible = () => { cy.get('[data-test-archive-panel]').should('not.exist') } diff --git a/test/functional/cypress/support/event-assertions.js b/test/functional/cypress/support/event-assertions.js index 1d99aa49c1a..5538b8de36f 100644 --- a/test/functional/cypress/support/event-assertions.js +++ b/test/functional/cypress/support/event-assertions.js @@ -94,6 +94,9 @@ const assertUkRegionOrNotesFields = ({ element, country, ukRegion, notes }) => { } } +/** + * @deprecated + */ export const assertEventFormFields = ({ hasRelatedTradeAgreement, relatedTradeAgrements, @@ -221,6 +224,9 @@ export const assertEventFormFields = ({ // Generic Assertions +/** + * @deprecated + */ export const assertMultiOptionTypeaheadValues = ( selector, label, @@ -229,6 +235,9 @@ export const assertMultiOptionTypeaheadValues = ( dataArray.map((value) => assertTypeaheadValue(selector, label, value)) } +/** + * @deprecated + */ export const assertTypeaheadValue = (selector, label, value) => { cy.get(selector).then((element) => assertFieldTypeahead({ @@ -239,6 +248,9 @@ export const assertTypeaheadValue = (selector, label, value) => { ) } +/** + * @deprecated + */ export const assertEventRequestBody = (expectedBody, callback) => { cy.wait('@eventHttpRequest').then((xhr) => { expect(xhr.request.body).to.deep.equal(expectedBody) diff --git a/test/functional/cypress/support/eventform-fillers.js b/test/functional/cypress/support/eventform-fillers.js index f50b32b18f1..dc9a75664e9 100644 --- a/test/functional/cypress/support/eventform-fillers.js +++ b/test/functional/cypress/support/eventform-fillers.js @@ -16,6 +16,9 @@ const selectors = require('../../../selectors/event/createOrEdit') const UK = 'United Kingdom' const ALL = 'All' +/** + * @deprecated + */ export const fillEventForm = ({ address1, address2, @@ -71,10 +74,16 @@ export const fillEventForm = ({ } } +/** + * @deprecated + */ export const fillEventNotes = (notes) => { fill(selectors.notesId, notes) } +/** + * @deprecated + */ export const fillAddress = ({ address1, address2, @@ -95,34 +104,58 @@ export const fillAddress = ({ } } +/** + * @deprecated + */ export const fillOrganiser = (organiser) => { fillTypeaheadWithLegend(selectors.organiserFieldId, organiser) } +/** + * @deprecated + */ export const fillService = (service) => { fillTypeaheadWithLegend(selectors.serviceFieldId, service) } +/** + * @deprecated + */ export const fillRegion = (region) => { fillTypeaheadWithLegend(selectors.ukRegionFieldId, region) } +/** + * @deprecated + */ export const fillLeadTeam = (leadTeam) => { fillTypeaheadWithLegend(selectors.leadTeamFieldId, leadTeam) } +/** + * @deprecated + */ export const fillCountry = (country) => { fillTypeaheadWithLegend(selectors.addressCountryFieldId, country) } +/** + * @deprecated + */ export const fillCountryWithLegend = (country) => { fillTypeaheadWithLegend(selectors.addressCountryFieldId, country) } +/** + * @deprecated + */ export const fillEventName = (name) => { fill(selectors.eventNameId, name) } +/** + * @deprecated + */ export const fillAndAssertProgrammes = (programmes = []) => { fillProgrammes(programmes) @@ -133,6 +166,9 @@ export const fillAndAssertProgrammes = (programmes = []) => { ) } +/** + * @deprecated + */ export const fillProgrammes = (programmes = []) => { fillMultiOptionTypeaheadWithLegend( selectors.relatedProgrammesFieldId, @@ -140,12 +176,18 @@ export const fillProgrammes = (programmes = []) => { ) } +/** + * @deprecated + */ export const fillAndAssertSharedTeams = (teams = []) => { fillEventSharedRadio(true) fillTeams(teams) assertMultiOptionTypeaheadValues(selectors.teamsFieldId, 'Teams', teams) } +/** + * @deprecated + */ export const fillAndAssertRelatedTradeAgreements = (tradeAgreements = []) => { assertTextVisible('Does the event relate to a trade agreement?') fillHasRelatedTradeAgreementsRadio(true) @@ -161,10 +203,16 @@ export const fillAndAssertRelatedTradeAgreements = (tradeAgreements = []) => { ) } +/** + * @deprecated + */ export const fillTeams = (teams = []) => { fillMultiOptionTypeahead(selectors.teamsFieldId, teams) } +/** + * @deprecated + */ export const fillRelatedTradeAgreements = (tradeAgreements = []) => { fillMultiOptionTypeahead( selectors.relatedTradeAgreementsFieldId, @@ -172,36 +220,60 @@ export const fillRelatedTradeAgreements = (tradeAgreements = []) => { ) } +/** + * @deprecated + */ export const fillLocationType = (value) => { fillTypeaheadWithLegend(selectors.locationTypeFieldId, value) } +/** + * @deprecated + */ export const fillEventType = (value) => { fillTypeahead(selectors.eventTypeFieldId, value) } +/** + * @deprecated + */ export const fillEventTypeWithLegend = (value) => { fillTypeaheadWithLegend(selectors.eventTypeFieldId, value) } +/** + * @deprecated + */ export const fillHasRelatedTradeAgreementsRadio = (isYes = false) => { fillYesNoRadio(selectors.relatedTradeAgreements, isYes) } +/** + * @deprecated + */ export const fillEventSharedRadio = (isYes = false) => { fillYesNoRadio(selectors.eventShared, isYes) } +/** + * @deprecated + */ export const fillStartDateWith = (day, month, year) => { fillDate(selectors.startDateId, day, month, year) } +/** + * @deprecated + */ export const fillEndDateWith = (day, month, year) => { fillDate(selectors.endDateId, day, month, year) } // Click Events +/** + * @deprecated + */ export const clickAddEventButton = () => { cy.contains('button', 'Add event').click() } diff --git a/test/functional/cypress/support/form-fillers.js b/test/functional/cypress/support/form-fillers.js index 15cb51aca7a..1db9727d83f 100644 --- a/test/functional/cypress/support/form-fillers.js +++ b/test/functional/cypress/support/form-fillers.js @@ -1,55 +1,90 @@ +/** + * @deprecated + */ export const fill = (selector, value) => { if (selector && value) { cy.get(selector).type(value) } } +/** + * @deprecated + */ export const fillYesNoRadio = (selector, isYes) => { cy.get(selector) .eq(isYes === true ? 0 : 1) .click() } +/** + * @deprecated + */ export const fillTypeahead = (selector, value) => { cy.get(selector).selectTypeaheadOption(value) } +/** + * @deprecated + */ export const fillTypeaheadWithLegend = (selector, value) => { cy.get(selector).children().selectTypeaheadOption(value) } +/** + * @deprecated + */ export const fillMultiOptionTypeahead = (selector, values = []) => { values.map((value) => fillTypeahead(selector, value)) } +/** + * @deprecated + */ export const fillMultiOptionTypeaheadWithLegend = (selector, values = []) => { values.map((value) => fillTypeaheadWithLegend(selector, value)) } +/** + * @deprecated + */ export const fillDate = (dateId, day, month, year) => { cy.get(`${dateId}\\.day`).type(day) cy.get(`${dateId}\\.month`).type(month) cy.get(`${dateId}\\.year`).type(year) } +/** + * @deprecated + */ export const fillSelect = (selector, value) => { cy.get(selector).find('select').should('not.be.disabled').select(value) } +/** + * @deprecated + */ export const clearTypeahead = (selector) => { cy.get(selector).find('input').clear().type('{esc}') } // Click events - +/** + * @deprecated + */ export const clickAddAnotherButton = (selector) => { cy.get(selector).find('button').click() } +/** + * @deprecated + */ export const clickSaveAndReturnButton = () => { cy.contains('button', 'Save and return').click() } +/** + * @deprecated + */ export const clickReturnWithoutSavingButton = () => { cy.contains('Return without saving').click() } diff --git a/test/functional/cypress/support/tests.js b/test/functional/cypress/support/tests.js index 7630317644f..69c083fdb70 100644 --- a/test/functional/cypress/support/tests.js +++ b/test/functional/cypress/support/tests.js @@ -12,6 +12,7 @@ import { } from './assertions' /** + * @deprecated * Tests that a typeahead functions correctly by inputing a value and selecting */ export const testTypeahead = ({ @@ -28,6 +29,7 @@ export const testTypeahead = ({ } /** + * @deprecated * Test that a typeahead has the correct number of options */ export const testTypeaheadOptionsLength = ({ element, length }) => { @@ -38,6 +40,7 @@ export const testTypeaheadOptionsLength = ({ element, length }) => { } /** + * @deprecated * Tests that clicking the first indicator button clears a filter element */ export const testRemoveChip = ({ element, placeholder = null }) => { @@ -50,6 +53,7 @@ export const testRemoveChip = ({ element, placeholder = null }) => { } /** + * @deprecated * Tests that finding the checkbox option matching the value and clicking it will mark that option as selected */ export const testCheckBoxGroup = ({ element, value, checked = true }) => { diff --git a/test/functional/cypress/support/utils.js b/test/functional/cypress/support/utils.js index be6451a1257..90911d118a7 100644 --- a/test/functional/cypress/support/utils.js +++ b/test/functional/cypress/support/utils.js @@ -1,4 +1,7 @@ module.exports = { + /** + * @deprecated + */ randomString: () => { return Math.random().toString(36).substring(7) }, diff --git a/test/support/.eslintrc.json b/test/support/.eslintrc.json new file mode 100644 index 00000000000..8e6898a2be9 --- /dev/null +++ b/test/support/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "no-undef": "off" + } +} \ No newline at end of file diff --git a/test/support/actions.js b/test/support/actions.js new file mode 100644 index 00000000000..eb5c1d55271 --- /dev/null +++ b/test/support/actions.js @@ -0,0 +1,194 @@ +import { fill } from './form-fillers' + +import adviserResult from '../sandbox/fixtures/autocomplete-adviser-list.json' assert { type: 'json' } + +/** + * Enter `input` into a typeahead `element` and select the first result. + * + * Defaults to Typeahead for adviser but can changed to any type by setting + * optional url and bodyResult parameters. + * + * This waits for the [adviser] api request to complete before selecting the + * first option, but has a mocked intercepted [adviser] response to circumvent + * network latency. + */ +export const selectFirstMockedTypeaheadOption = ({ + element, + input, + mockAdviserResponse = true, + url = `/api-proxy/adviser/?*`, + bodyResult = adviserResult, +}) => + cy.get(element).within(() => { + cy.intercept( + url + `${input.replace(' ', '+')}*`, + mockAdviserResponse + ? { + body: bodyResult, + } + : undefined + ).as('adviserResults') + cy.get('input').clear().type(input) + cy.wait('@adviserResults') + cy.get('[data-test="typeahead-menu-option"]').contains(input, { + matchCase: false, + timeout: 120000, + }) + cy.get('input').type('{downarrow}{enter}{esc}') + }) + +/** + * Clicks the checkbox option with the given value + */ +export const clickCheckboxGroupOption = ({ element, value }) => { + cy.get(element).find(`input[value="${value}"]`).parent().click() +} + +/** + * Clicks the radiogroup option with the label + */ +export const clickRadioGroupOption = ({ element, label }) => { + cy.get(element).contains('span', label).parent().click() +} + +/** + * Enter `input` into a typeahead `element` and select the first result + */ +export const selectFirstTypeaheadOption = ({ element, input }) => { + cy.get(element).type(input) + cy.get(element).find('[data-test="typeahead-menu-option"]').first().click() + cy.get(element).find('input').blur() +} + +/** + * Removes a specific chip based on the data-value + */ +export const removeChip = (dataValue) => { + cy.get('[data-test=filter-chips]').find(`[data-value="${dataValue}"]`).click() +} + +/** + * Adds a date to the any given date input field + */ +export const inputDateValue = ({ element, value }) => { + cy.get(element).type(value) +} + +/** + * Adds a date to the any given date input field that also has a hint + */ +export const inputDateValueWithHint = ({ element, value }) => { + cy.get(element).find('fieldset > input').type(value) +} + +/** + * Adds a date object of {day, month, year} to the relevent input fields + */ +export const clearAndInputDateValueObject = ({ element, value }) => { + cy.wrap(element).then(($el) => { + cy.wrap($el).find('[data-test$="-day"]').clear().type(value.day.toString()) + cy.wrap($el) + .find('[data-test$="-month"]') + .clear() + .type(value.month.toString()) + cy.wrap($el) + .find('[data-test$="-year"]') + .clear() + .type(value.year.toString()) + }) +} + +/** + * Clears and Types a value in an input field + */ +export const clearAndTypeInput = ({ element, value }) => { + cy.wrap(element).then(($el) => { + cy.wrap($el) + .find('input') + .clear() + .type(value ?? '') + }) +} + +/** + * Clears and Types a value in an textarea field + */ +export const clearAndTypeTextArea = ({ element, value }) => { + cy.wrap(element).then(($el) => { + cy.wrap($el) + .find('textarea') + .clear() + .type(value ?? '') + }) +} + +/** + * Remove the first item in a multi-select Typeahead + */ +export const removeFirstTypeaheadItem = () => { + cy.get('[data-test="typeahead-chip"]').eq(0).click() +} + +/** + * Click on a button + * @param {*} buttonText The text of the button you want to click + */ +export const clickButton = (buttonText) => { + cy.contains('button', buttonText).click() +} + +/** + * Click on a Cancel anchor + */ +export const clickCancelLink = () => { + cy.get('[data-test="cancel-button"]').click() +} + +/** + * Generic search request for a CollectionList + * @param {*} endpoint The search endpoint + * @param {*} fakeList The fake list of items to display + * @param {*} link The page to render + */ +export const collectionListRequest = (endpoint, fakeList, link) => { + const fullEndpoint = '/api-proxy/' + endpoint + cy.intercept('POST', fullEndpoint, { + body: { + count: fakeList.length, + results: fakeList, + }, + }).as('apiRequest') + cy.visit(link) + cy.wait('@apiRequest') +} + +export const omisCollectionListRequest = ( + endpoint, + fakeList, + link, + subtotalCost = 23218.0 +) => { + const fullEndpoint = '/api-proxy/' + endpoint + cy.intercept('POST', fullEndpoint, { + body: { + count: fakeList.length, + results: fakeList, + summary: { + total_subtotal_cost: subtotalCost, + }, + }, + }).as('apiRequest') + cy.visit(link) + cy.wait('@apiRequest') +} + +export const addNewContact = (contact) => { + fill('[data-test=group-field-first_name]', contact.first_name) + fill('[data-test=group-field-last_name]', contact.last_name) + fill('[data-test=job-title-input]', contact.job_title) + fill('[data-test=job-title-input]', contact.job_title) + fill('[data-test=email-input]', contact.email) + cy.get('[name="addressSameAsCompany"]').check('Yes') + cy.get('[name="primary"]').check('No') + cy.get('[data-test="submit-button"').click() +} diff --git a/test/support/assertions.js b/test/support/assertions.js new file mode 100644 index 00000000000..6124aa610eb --- /dev/null +++ b/test/support/assertions.js @@ -0,0 +1,859 @@ +import { keys, forEach, isObject } from 'lodash' +import { stringify } from 'qs' + +import { keyValueTable, localHeader, tabbedLocalNav } from '../selectors' + +const assertKeyValueTable = (dataTest, expected) => { + forEach(keys(expected), (key, i) => { + const rowNumber = i + 1 + + if (expected[key] === null) { + cy.get(keyValueTable(dataTest).valueCell(rowNumber)).should( + 'have.text', + key + ) + } else if (expected[key].href) { + cy.get(keyValueTable(dataTest).keyCell(rowNumber)).should( + 'have.text', + key + ) + cy.get(keyValueTable(dataTest).valueCellLink(rowNumber)).should( + 'have.attr', + 'href', + expected[key].href + ) + cy.get(keyValueTable(dataTest).valueCellLink(rowNumber)).should( + 'have.text', + expected[key].name + ) + } else { + cy.get(keyValueTable(dataTest).keyCell(rowNumber)).should( + 'have.text', + key + ) + cy.get(keyValueTable(dataTest).valueCell(rowNumber)).should( + 'have.text', + expected[key] + ) + } + }) +} + +const assertValueTable = (dataTest, expected) => { + forEach(expected, (expectedValue, i) => { + const rowNumber = i + 1 + cy.get(keyValueTable(dataTest).valueCell(rowNumber)).should( + 'have.text', + expectedValue + ) + }) +} + +const assertSummaryTable = ({ dataTest, heading, showEditLink, content }) => { + const summaryTableSelector = `[data-test="${dataTest}"]` + + if (heading) { + cy.get(summaryTableSelector).find('caption').should('contain', heading) + } + cy.get(summaryTableSelector) + .contains('Edit') + .should(showEditLink ? 'be.visible' : 'not.exist') + + if (typeof content !== 'undefined') { + Array.isArray(content) + ? assertValueTable(dataTest, content) + : assertKeyValueTable(dataTest, content) + } +} + +/** + * @description Asserts the presence of breadcrumbs with minimal knowledge about + * implementation details e.g. class names and ids. + * @param {Object} specs - A map of expected breadcrumb item labels to hrefs. + * @example + * // Asserts that breadcrumbs: Home > Foo > Bar > Baz exist and that they have + * // the expected texts and hrefs. + * it('Should render foo > bar > baz breadcrumbs' => + * assertBreadcrumbs({ + * 'Home': '/', + * 'Foo': '/foo', + * 'Bar': '/bar', + * 'Baz': undefined, + * }) + * ) + */ +const assertBreadcrumbs = (specs) => { + const entries = Object.entries(specs) + cy.get('[data-test=breadcrumbs] > ol') + .children('li') + .should('have.length', entries.length) + .each((x, i) => { + const [expectedText, expectedHref] = entries[i] + cy.get(x) + .contains(expectedText) + .invoke('attr', 'href') + .should('eq', expectedHref || undefined) + }) +} + +/** + * @description Same as assertBreadcrumbs but already wrapped in an `it` block. + * @param {Object} specs - A map of expected breadcrumb item labels to hrefs. + */ +const testBreadcrumbs = (specs) => + it('should render breadcrumbs', () => assertBreadcrumbs(specs)) + +const assertFieldUneditable = ({ element, label, value = null }) => + cy + .wrap(element) + .find('label') + .should('have.text', label) + .parent() + .parent() + .then(($el) => value && cy.wrap($el).should('contain', value)) + +const assertFieldSelect = ({ + element, + label, + emptyOption, + value, + optionsCount, +}) => + cy + .wrap(element) + .as('fieldSelect') + .then(() => { + label && + cy.get('@fieldSelect').find('label').first().should('have.text', label) + + emptyOption && + cy + .get('@fieldSelect') + .find('option') + .first() + .should('have.text', emptyOption) + + optionsCount && + cy + .get('@fieldSelect') + .find('option') + .should('have.length', optionsCount) + + value && + cy + .get('@fieldSelect') + .find('option[selected]') + .should('have.text', value) + }) + +/** + * @description Asserts a list of selector + * @param {Array} options - an array of options to assert + * @example + * it('Should assert a list of