From 6cb70792bd0d6983739ad5dda428cd5f4168a8a9 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Thu, 3 Dec 2020 18:36:00 +0300 Subject: [PATCH 01/11] Refactor stepper and adjust styles to match the v2 mockup --- src/components/AttributionDetailsStep.vue | 69 ++-- src/components/ChooserStep.vue | 81 ++-- src/components/CopyrightWaiverStep.vue | 55 ++- src/components/DropdownStep.vue | 10 +- src/components/StepNavigation.vue | 28 +- src/components/StepResult.vue | 41 +++ src/components/Stepper.vue | 348 ++++++++++-------- src/store/index.js | 12 +- tests/e2e/specs/LicenseCode.js | 2 +- .../components/AttributionDetailsStep.spec.js | 16 +- .../unit/specs/components/ChooserStep.spec.js | 97 ++--- .../components/CopyrightWaiverStep.spec.js | 64 ++-- .../specs/components/DropdownStep.spec.js | 21 +- .../specs/components/StepNavigation.spec.js | 92 +++++ tests/unit/specs/components/Stepper.spec.js | 136 ++++--- .../AttributionDetailsStep.spec.js.snap | 186 +++++----- .../__snapshots__/ChooserStep.spec.js.snap | 115 +++--- .../__snapshots__/Stepper.spec.js.snap | 160 -------- 18 files changed, 728 insertions(+), 805 deletions(-) create mode 100644 src/components/StepResult.vue create mode 100644 tests/unit/specs/components/StepNavigation.spec.js delete mode 100644 tests/unit/specs/components/__snapshots__/Stepper.spec.js.snap diff --git a/src/components/AttributionDetailsStep.vue b/src/components/AttributionDetailsStep.vue index ae8dfb856..ad97269f9 100644 --- a/src/components/AttributionDetailsStep.vue +++ b/src/components/AttributionDetailsStep.vue @@ -1,39 +1,36 @@ + + diff --git a/src/components/Stepper.vue b/src/components/Stepper.vue index 9c2e98c79..ee8adc4f2 100644 --- a/src/components/Stepper.vue +++ b/src/components/Stepper.vue @@ -1,50 +1,40 @@ + + diff --git a/src/components/LicenseDropdown.vue b/src/components/LicenseDropdown.vue deleted file mode 100644 index acbf127ba..000000000 --- a/src/components/LicenseDropdown.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - From 0c7b63ad8b7e6b1b9182b0812018290f72dfe3c4 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Fri, 4 Dec 2020 08:13:51 +0300 Subject: [PATCH 03/11] Remove unused StepResult component --- src/components/StepResult.vue | 41 ----------------------------------- 1 file changed, 41 deletions(-) delete mode 100644 src/components/StepResult.vue diff --git a/src/components/StepResult.vue b/src/components/StepResult.vue deleted file mode 100644 index 354b188b5..000000000 --- a/src/components/StepResult.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - From 7f21b20c02a01f452907e0fc91c8ff1c90a983fe Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Fri, 4 Dec 2020 08:14:28 +0300 Subject: [PATCH 04/11] Extract StepHeader component --- src/components/ChooserStep.vue | 19 ++--- src/components/StepHeader.vue | 126 +++++++++++++++++++++++++++++++ src/components/Stepper.vue | 133 ++++----------------------------- 3 files changed, 151 insertions(+), 127 deletions(-) create mode 100644 src/components/StepHeader.vue diff --git a/src/components/ChooserStep.vue b/src/components/ChooserStep.vue index d01bfbe67..115f48bef 100644 --- a/src/components/ChooserStep.vue +++ b/src/components/ChooserStep.vue @@ -1,9 +1,6 @@ -import { mapGetters } from 'vuex' import ChooserStep from './ChooserStep' import AttributionDetailsStep from './AttributionDetailsStep' import CopyrightWaiverStep from './CopyrightWaiverStep' import DropdownStep from './DropdownStep' +import StepHeader from './StepHeader' import StepNavigation from './StepNavigation' import { updateVisibleEnabledStatus } from '../utils/license-utilities' @@ -59,6 +46,7 @@ export default { AttributionDetailsStep, CopyrightWaiverStep, DropdownStep, + StepHeader, StepNavigation }, props: { @@ -102,7 +90,6 @@ export default { } }, computed: { - ...mapGetters(['fullName']), activeStepId: { get() { return this.$props.value }, set(newVal) { @@ -136,44 +123,12 @@ export default { default: return ChooserStep } }, - /** - * stepHeader shows step 'question' for active step, and step 'heading' for others - * @returns {string} key for i18n message - */ - stepHeaderText({ name, status }) { - const prefix = `stepper.${name}` - if (name === 'AD') { - return prefix + '.heading' - } - return status === 'active' ? `${prefix}.question` : `${prefix}.heading` - }, - completedStepCaption({ id, name, enabled, selected, reversed }) { - if (name === 'DD') { - return this.fullName - } else if (['FS', 'CW'].includes(name)) { - return selected ? `stepper.${name}.selected` : `stepper.${name}.not-selected` - } else if (enabled === false) { - return (this.steps[id].disabledDue === 'ND') - ? 'stepper.disabled-text-ND' - : 'stepper.disabled-text' - } else { - const qualifier = reversed ? !selected : selected - const prefix = `stepper.${name}.${qualifier ? '' : 'not-'}` - return `${prefix}selected` - } + stepActionProps(step) { + return { ...step } }, isLicenseAttribute(stepName) { return ['BY', 'NC', 'ND', 'SA'].indexOf(stepName) > -1 }, - /** - * NC, ND and SA steps are reversed: unlike BY, they are selected when the user - * answers no, and not selected when the user answers yes - * @param {String} stepName - * @returns {boolean} - */ - isStepReversed(stepName) { - return ['NC', 'ND', 'SA'].indexOf(stepName) > -1 - }, /** * Checks if the Next button should be disabled. Next button is enabled only * after the user has interacted with the step (selected radio or checked a checkbox) @@ -335,66 +290,16 @@ export default { } } .step-container.completed:not(.disabled):hover { - border: 0.125rem solid #b0b0b0; + border-color: #b0b0b0; + border-bottom: 0.125rem solid #b0b0b0; & .step-content { cursor: pointer; } } - .step-container.completed:not(.disabled):hover + .step__container { - border-top: none; - } - .step-header { - background-color: transparent; - display: flex; - flex-direction: column; - position:relative; - padding: 1.5625rem 1.5rem 0.5rem var(--step-left-padding); - - &:not(.inactive):hover, &:not(.disabled):hover { - cursor: pointer; - } - &.completed { - padding-bottom: 1.5rem; - &.completed:focus, &.completed:active { - outline: none; - transform: translateY(1px); - box-shadow: 2px -2px 0 2px rgba(176, 176, 176, 0.2), -2px -2px 0 2px rgba(176, 176, 176, 0.2); - } - } - &.inactive { - padding-bottom: 1.5rem; - &:hover { - cursor: default; - } - } - - } - .step-header__title::before{ - content: counter(step-counter); - counter-increment: step-counter; - position: absolute; - left: var(--h-padding); - top: 1.375rem; - width: var(--counter-size); - height: var(--counter-size); - line-height: var(--counter-size); - font-weight: bold; - font-family: inherit; - font-size: 1rem;background: #04A635; - border-radius: 50%; - text-align: center; - color: #fff; - } - .step-header__title.completed.disabled::before, - .step-header__title.inactive::before { - background-color: #d8d8d8; - color: #333333; + .step-container.completed:not(.disabled):hover { } - .step-header__caption { - color: #333333; - &:focus { - outline: none; - } + .step-container.completed:not(.disabled):hover + .step-container { + border-top: none; } .step-content { padding: 0.5rem 1.5rem 0.5rem var(--step-left-padding); @@ -410,10 +315,6 @@ export default { color: black; background-color: #fff; } - } - .step-header.active, - .step-header.completed { - } .inactive { background-color: #F5F5F5; @@ -421,11 +322,7 @@ export default { .completed.disabled { color: #b0b0b0; } - .completed.disabled .step-header__title, - .inactive .step-header__title - { - color: #b0b0b0; - } + .inactive .step-header__title::before { background: #d8d8d8; color: #333333; From 06efd69706b8b0d1928dab31bea8dfaa478f7e9e Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Fri, 4 Dec 2020 08:14:42 +0300 Subject: [PATCH 05/11] Improve tests --- tests/e2e/page-objects/chooser.js | 15 +- tests/e2e/specs/AttributionDetailsStep.js | 29 +-- tests/e2e/specs/CopyrightWaiverStep.js | 31 ++- tests/e2e/specs/DropdownStep.js | 11 +- tests/e2e/specs/FirstStep.js | 27 -- tests/e2e/specs/LicenseDetailsCard.js | 2 +- tests/e2e/specs/Stepper.js | 231 +++++++++--------- .../unit/specs/components/ChooserStep.spec.js | 4 +- .../specs/components/DropdownStep.spec.js | 35 --- .../specs/components/LicenseDropdown.spec.js | 55 ----- .../unit/specs/components/StepHeader.spec.js | 56 +++++ tests/unit/specs/components/Stepper.spec.js | 29 +-- .../LicenseDropdown.spec.js.snap | 25 -- 13 files changed, 212 insertions(+), 338 deletions(-) delete mode 100644 tests/e2e/specs/FirstStep.js delete mode 100644 tests/unit/specs/components/LicenseDropdown.spec.js create mode 100644 tests/unit/specs/components/StepHeader.spec.js delete mode 100644 tests/unit/specs/components/__snapshots__/LicenseDropdown.spec.js.snap diff --git a/tests/e2e/page-objects/chooser.js b/tests/e2e/page-objects/chooser.js index ed5b3a526..0878105ce 100644 --- a/tests/e2e/page-objects/chooser.js +++ b/tests/e2e/page-objects/chooser.js @@ -4,11 +4,11 @@ const stepperCommands = { clickYes: function() { - this.click('.step-actions .field:first-of-type .check') + this.click('.radio-input[value="yes"]') return this }, clickNo: function() { - this.click('.step-actions .field:last-of-type .check') + this.click('.radio-input[value="no"]') return this }, clickNext: function() { @@ -30,8 +30,8 @@ const stepperCommands = { return this }, clickWaiver: function() { - this.click('.checkbox:first-of-type input[type=checkbox]') - .click('.checkbox:last-of-type input[type=checkbox]') + this.click('.v-checkbox:first-child') + .click('.v-checkbox:last-child') .click('.next-button') return this }, @@ -52,7 +52,6 @@ const chooserCommands = { assertSelectedLicenseDisplayed: function(licenseName) { this .assert.containsText('.license-name', licenseName) - .assert.containsText('p.license-text a', licenseName) return this } } @@ -62,17 +61,17 @@ module.exports = { elements: { appContainer: '#app', - stepper: '.stepper-container', + stepper: '.stepper__container', selectedLicenseCard: '.selected-license-card', licenseUseCard: '.license-use-card' }, sections: { stepper: { - selector: '.stepper-container', + selector: '.stepper__container', elements: { currentStep: { - selector: '.step-container.current' + selector: '.step-container.active' } }, commands: [stepperCommands] diff --git a/tests/e2e/specs/AttributionDetailsStep.js b/tests/e2e/specs/AttributionDetailsStep.js index 17502c84b..ddefc2d61 100644 --- a/tests/e2e/specs/AttributionDetailsStep.js +++ b/tests/e2e/specs/AttributionDetailsStep.js @@ -1,20 +1,17 @@ module.exports = { '@tags': ['att'], 'AttributionDetailsStep'(browser) { - const knowLicenseSelector = '.b-radio' + const knowLicenseSelector = '.v-radio' const nextButton = '.next-button' - const select = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div > div > span > select' - const selectOpt = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div > div > span > select > option:nth-child(4)' - const stepTitle = '.step-title' - const attributionDetailsInstructions = '.attribution-details-instructions' - const workAuthorLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(1) > label' - const workAuthorInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(1) > div > input' - const urlCreatorProfileLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(2) > label' - const urlCreatorProfileInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(2) > div > input' - const workUrlLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > label' - const workUrlInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(4) > div > input' - const workTitleLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > label' - const workTitleInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > div > input' + const stepTitle = '.step-header__title' + const workAuthorLabel = '.step-content > div > form > div:nth-child(1) > label' + const workAuthorInput = 'form > div:nth-child(1) input' + const urlCreatorProfileLabel = 'form > div:nth-child(2) > label' + const urlCreatorProfileInput = 'form > div:nth-child(2) input' + const workUrlLabel = 'form > div:nth-child(3) label' + const workUrlInput = 'form > div:nth-child(4) input' + const workTitleLabel = 'form > div:nth-child(3) label' + const workTitleInput = 'form > div:nth-child(3) input' const backBtn = '.previous-button' const paginationFinish = '.pagination-finish' @@ -22,12 +19,10 @@ module.exports = { .init() .click(knowLicenseSelector) .click(nextButton) - .click(select, () => { - browser.click(selectOpt) - }) + .click('.select > select') + .click('option[value="CC BY 4.0"]') .click(nextButton) .assert.visible(stepTitle, 'Title is visible') - .assert.visible(attributionDetailsInstructions, 'Atrribution Details Instructions block is visible') .assert.visible(workAuthorLabel, 'Work Author Label is visible') .assert.visible(workAuthorInput, 'Work Author Input is visible') .assert.visible(urlCreatorProfileLabel, 'URL of Creator Profile Label is visible') diff --git a/tests/e2e/specs/CopyrightWaiverStep.js b/tests/e2e/specs/CopyrightWaiverStep.js index 713685863..85f93c33e 100644 --- a/tests/e2e/specs/CopyrightWaiverStep.js +++ b/tests/e2e/specs/CopyrightWaiverStep.js @@ -3,31 +3,28 @@ module.exports = { 'Check if CopyrightWaiver is rendered correctly'(browser) { browser .init() - .assert.elementPresent('.control-label > span') - .click('.control-label > span') - .assert.not.cssClassPresent('.next-button', 'disabled') + .click('.control-label') + .click('.v-radio') .click('.next-button') - .assert.elementPresent('.select > select') .click('.select > select') .click('option[value="CC0 1.0"]') - .assert.not.cssClassPresent('.next-button', 'disabled') .click('.next-button') - .assert.elementPresent('.control-label') .assert.elementPresent('.waiver-textarea') - .assert.elementPresent('label:nth-child(1)') - .assert.elementPresent('label:nth-child(3)') + .assert.elementPresent('.v-checkbox:nth-child(1)') + .assert.elementPresent('.v-checkbox:nth-child(3)') }, 'Check if user can check and uncheck checkboxes'(browser) { browser - .click('label:nth-child(1)>span.control-label') - .click('label:nth-child(3)>span.control-label') - .assert.not.cssClassPresent('.next-button', 'disabled', 'Next Button visible when user checks agreed and confirmed') - .click('label:nth-child(1)>span.control-label') - .assert.cssClassPresent('.next-button', 'disabled', 'Next button disabled when user unchecks agreed') - .click('label:nth-child(1)>span.control-label') - .assert.not.cssClassPresent('.next-button', 'disabled', 'Next Button visible when user re-checks agreed') - .click('label:nth-child(3)>span.control-label') - .assert.cssClassPresent('.next-button', 'disabled', 'Next button disabled when user unchecks confirmed') + .assert.attributeEquals('.next-button', 'disabled', 'true', 'Next Button disabled when checkboxes not checked') + .click('.v-checkbox:nth-child(1)') + .click('.v-checkbox:nth-child(3)') + .assert.attributeEquals('.next-button', 'disabled', null, 'Next Button enabled when user checks agreed and confirmed') + .click('.v-checkbox:nth-child(1)') + .assert.attributeEquals('.next-button', 'disabled', 'true', 'Next button disabled when user unchecks agreed') + .click('.v-checkbox:nth-child(1)') + .assert.attributeEquals('.next-button', 'disabled', null, 'Next Button enabled when user re-checks agreed') + .click('.v-checkbox:nth-child(3)') + .assert.attributeEquals('.next-button', 'disabled', 'true', 'Next button disabled when user unchecks confirmed') } } diff --git a/tests/e2e/specs/DropdownStep.js b/tests/e2e/specs/DropdownStep.js index 9c73916a5..56230a66a 100644 --- a/tests/e2e/specs/DropdownStep.js +++ b/tests/e2e/specs/DropdownStep.js @@ -3,17 +3,16 @@ module.exports = { 'DropdownStep'(browser) { browser .init() - .assert.elementPresent('.control-label > span') - .click('.control-label > span') - .assert.not.cssClassPresent('.next-button', 'disabled') + .assert.elementPresent('.v-radio') + .click('.v-radio') .click('.next-button') .assert.elementPresent('.select > select') .click('.select > select') .click('option[value="CC BY 4.0"]') - .assert.not.cssClassPresent('.next-button', 'disabled') + .assert.attributeEquals('.next-button', 'disabled', null, 'Next Button enabled after user selects license from dropdown ') .click('.next-button') - .assert.visible('.step-description') - // .assert.containsText('div.step-description', 'Attribution 4.0 International') + .assert.visible('.DD .step-header__caption') + .assert.containsText('.DD .step-header__caption', 'Attribution 4.0 International') .end() } } diff --git a/tests/e2e/specs/FirstStep.js b/tests/e2e/specs/FirstStep.js deleted file mode 100644 index c27d0d1a5..000000000 --- a/tests/e2e/specs/FirstStep.js +++ /dev/null @@ -1,27 +0,0 @@ -module.exports = { - '@tags': ['first'], - 'FirstStep'(browser) { - const radioSelector = 'div.field.not-selected > label > span.control-label > span' - const nextBtn = '.next-button' - const stepBelowCurrentHeader = 'div:nth-child(2) > div > h5' - const stepDescription = '.step-description' - const backBtn = '.previous-button' - - browser - .init() - .waitForElementVisible('body') - .assert.not.elementPresent(stepDescription) - .click(radioSelector) - .assert.containsText(stepBelowCurrentHeader, 'Creative Commons License') - .click(nextBtn) - .assert.elementPresent(stepDescription) - .assert.visible(stepDescription) - .assert.containsText(stepDescription, 'I know which license I need.') - .click(backBtn) - .click(radioSelector) - .assert.containsText(stepBelowCurrentHeader, 'Attribution') - .click(nextBtn) - .assert.containsText(stepDescription, 'I need help selecting a license.') - .end() - } -} diff --git a/tests/e2e/specs/LicenseDetailsCard.js b/tests/e2e/specs/LicenseDetailsCard.js index 7c69923d7..93a7b8763 100644 --- a/tests/e2e/specs/LicenseDetailsCard.js +++ b/tests/e2e/specs/LicenseDetailsCard.js @@ -16,7 +16,7 @@ module.exports = { browser .assert.elementPresent('a[class="license-name"]') .getAttribute('a[class="license-name"]', 'href', function(result) { - this.assert.equal(result.value, 'https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1') + this.assert.equal(result.value, 'https://creativecommons.org/licenses/by-sa/4.0?ref=chooser-v1') }) } } diff --git a/tests/e2e/specs/Stepper.js b/tests/e2e/specs/Stepper.js index 58f7be5c7..d9df7bacc 100644 --- a/tests/e2e/specs/Stepper.js +++ b/tests/e2e/specs/Stepper.js @@ -11,121 +11,120 @@ module.exports = { stepper.expect.element('@currentStep').to.be.present stepper.chooseNo().clickNo() chooser.expect.section('@selectedLicenseCard').to.be.visible + }, + 'Step three: going through license attribute steps opens license use card and Attribution Details Step': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseYes() + .chooseYes() + .chooseYes() + chooser.expect.section('@licenseUseCard').to.be.visible + }, + 'Can choose CC0 1.0 license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseNo() + .clickWaiver() + chooser.assertSelectedLicenseDisplayed('CC0 1.0') + }, + 'Can choose CC BY license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseYes() + .chooseYes() + chooser.assertSelectedLicenseDisplayed('CC BY 4.0') + }, + 'Can choose CC BY-NC license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseNo() + .chooseYes() + .chooseYes() + chooser.assertSelectedLicenseDisplayed('CC BY-NC 4.0') + }, + 'Can choose CC BY-ND license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseYes() + .chooseNo() + + chooser.assertSelectedLicenseDisplayed('CC BY-ND 4.0') + }, + 'Can choose CC BY-NC-ND license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseNo() + .chooseNo() + chooser.assertSelectedLicenseDisplayed('CC BY-NC-ND 4.0') + }, + 'Can choose CC BY-SA license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseYes() + .chooseYes() + .chooseNo() + chooser.assertSelectedLicenseDisplayed('CC BY-SA 4.0') + }, + 'Can choose CC BY-NC-SA license': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseNo() + .chooseYes() + .chooseNo() + chooser.assertSelectedLicenseDisplayed('CC BY-NC-SA 4.0') + }, + 'Can select a license from dropdown': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseYes() + .selectFromDropdown('CC BY-NC-ND 4.0') + chooser.assertSelectedLicenseDisplayed('CC BY-NC-ND 4.0') + }, + 'Can go back by clicking on Previous button': function(browser) { + const chooser = browser.page.chooser().navigate() + const stepper = chooser.section.stepper + stepper + .chooseNo() + .chooseYes() + .chooseNo() + .chooseYes() + .chooseNo() + chooser.assertSelectedLicenseDisplayed('CC BY-NC-SA 4.0') + stepper.clickPrevious() + chooser.assert.elementNotPresent('@licenseUseCard') + stepper.assertStepName('SA') + .clickPrevious() + .assertStepName('ND') + .clickPrevious() + .assertStepName('NC') + .clickPrevious() + .assertStepName('BY') + .clickPrevious() + .assertStepName('FS') + chooser.assert.elementPresent('@selectedLicenseCard') } - // 'Step three: going through license attribute steps opens license use card and Attribution Details Step': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseYes() - // .chooseYes() - // .chooseYes() - // chooser.expect.section('@licenseUseCard').to.be.visible - // }, - // 'Can choose CC0 1.0 license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseNo() - // .clickWaiver() - // chooser.assertSelectedLicenseDisplayed('CC0 1.0') - // }, - // 'Can choose CC BY license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseYes() - // .chooseYes() - // .chooseYes() - // chooser.assertSelectedLicenseDisplayed('CC BY 4.0') - // }, - // 'Can choose CC BY-NC license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseNo() - // .chooseYes() - // .chooseYes() - // chooser.assertSelectedLicenseDisplayed('CC BY-NC 4.0') - // }, - // 'Can choose CC BY-ND license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseYes() - // .chooseNo() - // - // chooser.assertSelectedLicenseDisplayed('CC BY-ND 4.0') - // }, - // 'Can choose CC BY-NC-ND license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseNo() - // .chooseNo() - // chooser.assertSelectedLicenseDisplayed('CC BY-NC-ND 4.0') - // }, - // 'Can choose CC BY-SA license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseYes() - // .chooseYes() - // .chooseNo() - // chooser.assertSelectedLicenseDisplayed('CC BY-SA 4.0') - // }, - // 'Can choose CC BY-NC-SA license': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseNo() - // .chooseYes() - // .chooseNo() - // chooser.assertSelectedLicenseDisplayed('CC BY-NC-SA 4.0') - // }, - // 'Can select a license from dropdown': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseYes() - // .selectFromDropdown('CC BY-NC-ND 4.0') - // chooser.assertSelectedLicenseDisplayed('CC BY-NC-ND 4.0') - // }, - // 'Can go back by clicking on Previous button': function(browser) { - // const chooser = browser.page.chooser().navigate() - // const stepper = chooser.section.stepper - // stepper - // .chooseNo() - // .chooseYes() - // .chooseNo() - // .chooseYes() - // .chooseNo() - // chooser.assertSelectedLicenseDisplayed('CC BY-NC-SA 4.0') - // stepper.clickPrevious() - // chooser.assert.elementNotPresent('@licenseUseCard') - // stepper.assertStepName('SA') - // .clickPrevious() - // .assertStepName('ND') - // .clickPrevious() - // .assertStepName('NC') - // .clickPrevious() - // .assertStepName('BY') - // .clickPrevious() - // .assertStepName('FS') - // chooser.assert.elementPresent('@selectedLicenseCard') - // } } diff --git a/tests/unit/specs/components/ChooserStep.spec.js b/tests/unit/specs/components/ChooserStep.spec.js index cb6d7f009..ea909d467 100644 --- a/tests/unit/specs/components/ChooserStep.spec.js +++ b/tests/unit/specs/components/ChooserStep.spec.js @@ -1,7 +1,6 @@ -import { shallowMount, createLocalVue, config } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' import ChooserStep from '@/components/ChooserStep' import VueVocabulary from '@creativecommons/vue-vocabulary/vue-vocabulary.common' -import Vuex from 'vuex' describe('ChooserStep.vue', () => { let wrapper @@ -10,7 +9,6 @@ describe('ChooserStep.vue', () => { // Always creates a shallow instance of component beforeEach(() => { localVue = createLocalVue() - localVue.use(Vuex) localVue.use(VueVocabulary) wrapper = shallowMount(ChooserStep, { localVue, diff --git a/tests/unit/specs/components/DropdownStep.spec.js b/tests/unit/specs/components/DropdownStep.spec.js index 92a7a2aa1..cfe8a798f 100644 --- a/tests/unit/specs/components/DropdownStep.spec.js +++ b/tests/unit/specs/components/DropdownStep.spec.js @@ -56,38 +56,3 @@ describe('DropdownStep', () => { expect(emittedChange.selected).toEqual(true) }) }) - -describe('DropdownStep', () => { - let wrapper, store, getters - - beforeEach(() => { - getters = { - fullName: jest.fn().mockReturnValue('CC 1.0 Universal') - } - - store = new Vuex.Store({ - getters - }) - - wrapper = mount(DropdownStep, { - localVue, - mocks: { - $t: key => key - }, - store - }) - }) - - afterEach(() => { - wrapper.destroy() - }) - - it('Checks conditional rendering of markup: status is inactive', () => { - wrapper.setProps({ - stepId: 5, - status: 'inactive' - }) - expect(wrapper.find('.step-description').exists()).toBeFalsy() - expect(wrapper.find('.step-actions').exists()).toBeFalsy() - }) -}) diff --git a/tests/unit/specs/components/LicenseDropdown.spec.js b/tests/unit/specs/components/LicenseDropdown.spec.js deleted file mode 100644 index 22300e1f5..000000000 --- a/tests/unit/specs/components/LicenseDropdown.spec.js +++ /dev/null @@ -1,55 +0,0 @@ -import { createLocalVue, mount } from '@vue/test-utils' -import LicenseDropdown from '@/components/LicenseDropdown.vue' -import VueI18n from 'vue-i18n' -import Buefy from 'buefy' - -describe('LicenseDropdown.vue', () => { - let wrapper - let getters - let storeMock - - beforeEach(() => { - const localVue = createLocalVue() - localVue.use(VueI18n) - localVue.use(Buefy) - - getters = { - shortName: () => { - return 'CC BY-SA 4.0' - }, - fullName: () => { - return 'Attribution-ShareAlike 4.0 International' - } - } - storeMock = { - commit: jest.fn(), - getters: getters - } - - const options = { - mocks: { - $store: storeMock, - $t: (key) => key - }, - localVue - } - wrapper = mount(LicenseDropdown, options) - }) - - it('Check if LicenseDropdown.vue component renders without any errors', () => { - expect(wrapper.isVueInstance()).toBe(true) - }) - - it('Checks methods: setCurrentLicense', () => { - const options = wrapper.find('select').findAll('option') - options.at(1).setSelected() - const SELECTED_SHORT = options.at(1).text() - expect(storeMock.commit).toHaveBeenCalledWith('updateAttributesFromShort', SELECTED_SHORT) - - expect(wrapper.emitted().input).toBeTruthy() - }) - - it('Check if the LicenseDropdown.vue component has the expected UI', () => { - expect(wrapper).toMatchSnapshot() - }) -}) diff --git a/tests/unit/specs/components/StepHeader.spec.js b/tests/unit/specs/components/StepHeader.spec.js new file mode 100644 index 000000000..08bb3d086 --- /dev/null +++ b/tests/unit/specs/components/StepHeader.spec.js @@ -0,0 +1,56 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils' +import StepHeader from '@/components/StepHeader' +import VueVocabulary from '@creativecommons/vue-vocabulary/vue-vocabulary.common' +import Vue from 'vue' + +const steps = [ + { id: 0, name: 'FS', visible: true, enabled: true, status: 'active', selected: undefined }, + { id: 1, name: 'BY', visible: true, enabled: true, status: 'inactive', selected: undefined }, + { id: 2, name: 'NC', visible: true, enabled: true, status: 'inactive', selected: undefined }, + { id: 3, name: 'ND', visible: true, enabled: true, status: 'inactive', selected: undefined }, + { id: 4, name: 'SA', visible: true, enabled: true, status: 'inactive', selected: undefined }, + { id: 5, name: 'DD', visible: false, enabled: true, status: 'inactive', selected: undefined }, + { id: 6, name: 'CW', visible: false, enabled: true, status: 'inactive', selected: undefined }, + { id: 7, name: 'AD', visible: true, enabled: true, status: 'inactive', selected: undefined } +] + +describe('StepHeader.vue', () => { + let wrapper + + beforeEach(() => { + const localVue = createLocalVue() + localVue.use(VueVocabulary) + wrapper = shallowMount(StepHeader, { + localVue, + propsData: { + step: steps[0] + }, + mocks: { + $t: key => key + } + }) + }) + describe('renders correctly', () => { + it('renders correctly for first step', () => { + expect(wrapper.name()).toBe('StepHeader') + const title = wrapper.find('.step-header__title') + expect(title.text()).toEqual('stepper.FS.question') + const caption = wrapper.find('.step-header__caption') + expect(caption.exists()).toBe(false) + }) + it('renders correctly when first step is selected completed', () => { + wrapper.setProps({ step: { ...steps[0], status: 'completed', selected: true } }) + const title = wrapper.find('.step-header__title') + expect(title.text()).toEqual('stepper.FS.heading') + const caption = wrapper.find('.step-header__caption') + expect(caption.text()).toEqual('stepper.FS.selected') + }) + it('emits activate event when clicked', () => { + const id = 0 + wrapper.setProps({ step: { ...steps[id], status: 'completed' } }) + wrapper.find('.step-header').trigger('click') + Vue.nextTick() + expect(wrapper.emitted().activate[0][0]).toEqual(id) + }) + }) +}) diff --git a/tests/unit/specs/components/Stepper.spec.js b/tests/unit/specs/components/Stepper.spec.js index 972f85b20..2213ba40e 100644 --- a/tests/unit/specs/components/Stepper.spec.js +++ b/tests/unit/specs/components/Stepper.spec.js @@ -1,5 +1,5 @@ import Vuex from 'vuex' -import { shallowMount, createLocalVue, config } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' import Stepper from '@/components/Stepper' import VueVocabulary from '@creativecommons/vue-vocabulary/vue-vocabulary.common' import Vue from 'vue' @@ -41,20 +41,11 @@ function setUp() { localVue = createLocalVue() localVue.use(Vuex) localVue.use(VueVocabulary) - const getters = { - fullName: () => { - return 'Attribution-ShareAlike 4.0 International' - } - } - const storeMock = { - getters: getters - } wrapper = shallowMount(Stepper, { store, localVue, mocks: { - $store: storeMock, $t: key => key }, propsData: { @@ -79,7 +70,6 @@ describe('Stepper.vue', () => { expect(stepContainers.length).toEqual(6) const activeStep = wrapper.findAll('.step-container.active') expect(activeStep.length).toEqual(1) - expect(activeStep.at(0).text()).toEqual('stepper.ND.question') }) it('has expected UI on CW step after DD', async() => { await advanceStep(wrapper, { FS: true, DD: [true, 'CC0 1.0'] } @@ -87,22 +77,6 @@ describe('Stepper.vue', () => { }) }) - describe('Step headings', () => { - it('inactive step headings are not clickable', () => { - const stepHeaders = wrapper.findAll('.step-header') - stepHeaders.at(0).trigger('click') - expect(stepHeaders.at(0).classes('active')).toBe(true) - stepHeaders.at(1).trigger('click') - expect(stepHeaders.at(1).classes('inactive')).toBe(true) - }) - it('clicking on disabled completed step does not change current step', async() => { - await advanceStep(wrapper, { FS: false, BY: false }) - expect(wrapper.find('.active').classes()).toContain('CW') - wrapper.findAll('.step-header').at(2).trigger('click') - expect(wrapper.find('.active').classes()).toContain('CW') - }) - }) - describe('FirstStep interactions', () => { it('choosing Yes sets 3 steps visible: FS, Dropdown and AttributionDetails, opens DD', async() => { await advanceStep(wrapper, { FS: true }) @@ -118,7 +92,6 @@ describe('Stepper.vue', () => { const steps = wrapper.findAll('.step-container') expect(steps.length).toEqual(6) expect(wrapper.vm.activeStepId).toEqual(1) - expect(stepHeadingText(steps, 1)).toEqual(wrapper.vm.$t('stepper.BY.question')) }) }) diff --git a/tests/unit/specs/components/__snapshots__/LicenseDropdown.spec.js.snap b/tests/unit/specs/components/__snapshots__/LicenseDropdown.spec.js.snap deleted file mode 100644 index 75f543fa2..000000000 --- a/tests/unit/specs/components/__snapshots__/LicenseDropdown.spec.js.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LicenseDropdown.vue Check if the LicenseDropdown.vue component has the expected UI 1`] = ` -
- -
- -
- -
-`; From 450925e8c4c8237159fa9f19569c6e5571200a3d Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Sat, 5 Dec 2020 12:31:31 +0300 Subject: [PATCH 06/11] Remove extra spaces --- src/components/AttributionDetailsStep.vue | 4 +--- src/components/CopyrightWaiverStep.vue | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/AttributionDetailsStep.vue b/src/components/AttributionDetailsStep.vue index ad97269f9..c674c8a0f 100644 --- a/src/components/AttributionDetailsStep.vue +++ b/src/components/AttributionDetailsStep.vue @@ -1,7 +1,5 @@