From e81c484b0e0367fe33519c57a1e8ce58e1ffc8df Mon Sep 17 00:00:00 2001 From: Jared Galanis Date: Thu, 19 Oct 2023 16:25:54 -0400 Subject: [PATCH] fix: deposit requirement modal copy (#1231) * fix: deposit requirement modal copy * use radios * fix tests * add a test that shows you must agree or disagree --- app/components/workflow-review/index.css | 6 +- app/components/workflow-review/index.js | 15 +++- app/styles/app.css | 12 +++ tests/acceptance/nih-submission-test.js | 12 ++- .../components/workflow-review-test.js | 74 ++++++++++++++++++- 5 files changed, 110 insertions(+), 9 deletions(-) diff --git a/app/components/workflow-review/index.css b/app/components/workflow-review/index.css index 7503ed57..61bbea4c 100644 --- a/app/components/workflow-review/index.css +++ b/app/components/workflow-review/index.css @@ -35,5 +35,9 @@ table td { .comment-text-area { resize: none; - min-height: 38px!important; + min-height: 38px !important; +} + +.swal2-radio { + flex-direction: column !important; } diff --git a/app/components/workflow-review/index.js b/app/components/workflow-review/index.js index ea9ea428..ffebb2a7 100644 --- a/app/components/workflow-review/index.js +++ b/app/components/workflow-review/index.js @@ -126,16 +126,25 @@ export default class WorkflowReview extends Component { const result = yield swal .mixin({ - input: 'checkbox', - inputPlaceholder: "I agree to the above statement on today's date ", confirmButtonText: 'Next →', + input: 'radio', + inputOptions: { + agree: `I agree to the above statement on today's date.`, + noAgree: + 'I do not agree to the above statement and I understand that if I proceed and do not check this box, my submission will not be deposited to above repository.', + }, + inputValidator: (value) => { + if (!value) { + return 'You need to choose something!'; + } + }, progressSteps: reposWithAgreementText.map((repo, index) => index + 1), }) .queue(reposWithAgreementText); if (result.value) { let reposThatUserAgreedToDeposit = reposWithAgreementText.filter((repo, index) => { // if the user agreed to depost to this repo === 1 - if (result.value[index] === 1) { + if (result.value[index] === 'agree') { return repo; } }); diff --git a/app/styles/app.css b/app/styles/app.css index 6ee1c180..18ff8b45 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -328,6 +328,18 @@ input[type='date']::-webkit-outer-spin-button { z-index: 99999 !important; } +.swal2-radio { + display: block !important; +} + +.swal2-radio label .swal2-label { + font-size: 1rem !important; +} + +.swal2-radio label:not(:last-child) { + margin-bottom: 4px !important; +} + /* * End Alpaca */ diff --git a/tests/acceptance/nih-submission-test.js b/tests/acceptance/nih-submission-test.js index b305a34f..6f5497c1 100644 --- a/tests/acceptance/nih-submission-test.js +++ b/tests/acceptance/nih-submission-test.js @@ -153,7 +153,8 @@ module('Acceptance | submission', function (hooks) { await waitFor(document.querySelector('#swal2-title')); assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship'); - await click(document.querySelector('#swal2-checkbox')); + await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); await click(document.querySelector('.swal2-confirm')); await waitFor(document.querySelector('#swal2-title')); @@ -350,7 +351,8 @@ module('Acceptance | submission', function (hooks) { await waitFor(document.querySelector('#swal2-title')); assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship'); - await click(document.querySelector('#swal2-checkbox')); + await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); await click(document.querySelector('.swal2-confirm')); await waitFor(document.querySelector('#swal2-title')); @@ -517,7 +519,8 @@ module('Acceptance | submission', function (hooks) { await waitFor(document.querySelector('#swal2-title')); assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship'); - await click(document.querySelector('#swal2-checkbox')); + await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); await click(document.querySelector('.swal2-confirm')); await waitFor(document.querySelector('#swal2-title')); @@ -662,7 +665,8 @@ module('Acceptance | submission', function (hooks) { await waitFor(document.querySelector('#swal2-title')); assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship'); - await click(document.querySelector('#swal2-checkbox')); + await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); await click(document.querySelector('.swal2-confirm')); await waitFor(document.querySelector('#swal2-title')); diff --git a/tests/integration/components/workflow-review-test.js b/tests/integration/components/workflow-review-test.js index a3f41233..6d999e54 100644 --- a/tests/integration/components/workflow-review-test.js +++ b/tests/integration/components/workflow-review-test.js @@ -113,6 +113,73 @@ module('Integration | Component | workflow review', (hooks) => { assert.strictEqual(submission.get('repositories.length'), 2); }); + test('cannot proceed without agreeing or disagreeing to repo agreement', async function (assert) { + let controller = this.owner.lookup('controller:submissions/new/review'); + assert.ok(controller); + + let repo1 = EmberObject.create({ + id: 'test:repo1', + integrationType: 'full', + agreementText: 'Cows are the best', + name: 'repo1', + _isWebLink: false, + }); + + let submitted = false; + + this.owner.register( + 'service:current-user', + EmberObject.extend({ + user: { id: 'pi' }, + }) + ); + + let submission = EmberObject.create({ + submitter: { + id: 'pi', + }, + preparers: A([get(this, 'currentUser.user')]), + repositories: A([repo1]), + metadata: '[]', + }); + + let publication = EmberObject.create({}); + let files = [EmberObject.create({})]; + + this.set('submission', submission); + this.set('publication', publication); + this.set('submit', (actual) => { + submitted = true; + }); + this.set('files', files); + this.set('comment', ''); + this.set('uploading', ''); + this.set('waitingMessage', ''); + + await render(hbs` + + `); + + // Click on submit + await click('.submit'); + + await click(document.querySelector('.swal2-confirm')); + + await waitFor(document.querySelector('.swal2-validationerror')); + assert.dom(document.querySelector('.swal2-validationerror')).containsText('You need to choose something!'); + + await waitFor(document.querySelector('.swal2-container')); + await click(document.querySelector('.swal2-container')); + }); + test('submission success: web-link and agreement', async function (assert) { let controller = this.owner.lookup('controller:submissions/new/review'); assert.ok(controller); @@ -182,7 +249,8 @@ module('Integration | Component | workflow review', (hooks) => { await click('.submit'); // Click on deposit agreement checkbox and then next - await click(document.querySelector('.swal2-checkbox')); + await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]')); await click(document.querySelector('.swal2-confirm')); // Click on confirm submission @@ -320,6 +388,10 @@ module('Integration | Component | workflow review', (hooks) => { await click('.submit'); + // Click the second radio indicating submit without agreeing to deposit agreement + await waitFor(document.querySelector('.swal2-radio label:nth-child(2) input[type="radio"]')); + await click(document.querySelector('.swal2-radio label:nth-child(2) input[type="radio"]')); + // Click Next without agreeing await click(document.querySelector('.swal2-confirm'));