diff --git a/mon-pix/app/pods/components/module/qcm/styles.scss b/mon-pix/app/pods/components/module/qcm/styles.scss index 83157483cda..a9b7dcb1326 100644 --- a/mon-pix/app/pods/components/module/qcm/styles.scss +++ b/mon-pix/app/pods/components/module/qcm/styles.scss @@ -1,11 +1,17 @@ .element-qcm { - &__header { - display: flex; - flex-direction: column-reverse; + &__instruction { + margin-bottom: var(--pix-spacing-2x); + font-weight: var(--pix-font-medium); + } + + &__direction { + @extend %pix-body-s; + + color: var(--pix-neutral-500); } &__proposals { - margin-bottom: var(--pix-spacing-4x); + margin: var(--pix-spacing-4x) 0; } &__required-field-missing { @@ -17,20 +23,6 @@ } } -.element-qcm-header { - &__direction { - @extend %pix-body-s; - - margin-bottom: var(--pix-spacing-4x); - color: var(--pix-neutral-500); - } - - &__instruction { - margin-bottom: var(--pix-spacing-2x); - font-weight: var(--pix-font-medium); - } -} - .element-qcm-proposals { &__proposal { padding: var(--pix-spacing-2x); diff --git a/mon-pix/app/pods/components/module/qcm/template.hbs b/mon-pix/app/pods/components/module/qcm/template.hbs index 2771efb09c6..38e56f695a4 100644 --- a/mon-pix/app/pods/components/module/qcm/template.hbs +++ b/mon-pix/app/pods/components/module/qcm/template.hbs @@ -1,15 +1,17 @@ -
-
-
- - {{t "pages.modulix.qcm.direction"}} - + +
+ + {{t "pages.modulix.qcm.direction"}} + -
- {{html-unsafe this.element.instruction}} -
+
+ {{html-unsafe this.element.instruction}}
+ +
{{#each this.element.proposals as |proposal|}}
diff --git a/mon-pix/app/pods/components/module/qcu/styles.scss b/mon-pix/app/pods/components/module/qcu/styles.scss index 86d79aa8146..10e69c00d17 100644 --- a/mon-pix/app/pods/components/module/qcu/styles.scss +++ b/mon-pix/app/pods/components/module/qcu/styles.scss @@ -1,11 +1,17 @@ .element-qcu { - &__header { - display: flex; - flex-direction: column-reverse; + &__instruction { + margin-bottom: var(--pix-spacing-2x); + font-weight: var(--pix-font-medium); + } + + &__direction { + @extend %pix-body-s; + + color: var(--pix-neutral-500); } &__proposals { - margin-bottom: var(--pix-spacing-4x); + margin: var(--pix-spacing-4x) 0; } &__required-field-missing { @@ -17,20 +23,6 @@ } } -.element-qcu-header { - &__direction { - @extend %pix-body-s; - - margin-bottom: var(--pix-spacing-4x); - color: var(--pix-neutral-500); - } - - &__instruction { - margin-bottom: var(--pix-spacing-2x); - font-weight: var(--pix-font-medium); - } -} - .element-qcu-proposals { &__proposal { padding: var(--pix-spacing-2x); diff --git a/mon-pix/app/pods/components/module/qcu/template.hbs b/mon-pix/app/pods/components/module/qcu/template.hbs index 15d7ce6f421..cbadeef879a 100644 --- a/mon-pix/app/pods/components/module/qcu/template.hbs +++ b/mon-pix/app/pods/components/module/qcu/template.hbs @@ -1,15 +1,17 @@ - -
-
- - {{t "pages.modulix.qcu.direction"}} - + +
+ + {{t "pages.modulix.qcu.direction"}} + -
- {{html-unsafe this.element.instruction}} -
+
+ {{html-unsafe this.element.instruction}}
+ +
{{#each this.element.proposals as |proposal|}}
diff --git a/mon-pix/app/pods/components/module/qrocm/styles.scss b/mon-pix/app/pods/components/module/qrocm/styles.scss index 4d5dad549ef..04685537300 100644 --- a/mon-pix/app/pods/components/module/qrocm/styles.scss +++ b/mon-pix/app/pods/components/module/qrocm/styles.scss @@ -1,11 +1,17 @@ .element-qrocm { - &__header { - display: flex; - flex-direction: column-reverse; + &__instruction { + margin-bottom: var(--pix-spacing-2x); + font-weight: var(--pix-font-medium); + } + + &__direction { + @extend %pix-body-s; + + color: var(--pix-neutral-500); } &__proposals { - margin-bottom: var(--pix-spacing-4x); + margin: var(--pix-spacing-4x) 0; } &__required-field-missing { @@ -17,20 +23,6 @@ } } -.element-qrocm-header { - &__direction { - @extend %pix-body-s; - - margin-bottom: var(--pix-spacing-4x); - color: var(--pix-neutral-500); - } - - &__instruction { - margin-bottom: var(--pix-spacing-2x); - font-weight: var(--pix-font-medium); - } -} - .element-qrocm-proposals { &__input { line-height: var(--pix-spacing-12x); diff --git a/mon-pix/app/pods/components/module/qrocm/template.hbs b/mon-pix/app/pods/components/module/qrocm/template.hbs index 628903529f9..2d388b33b5c 100644 --- a/mon-pix/app/pods/components/module/qrocm/template.hbs +++ b/mon-pix/app/pods/components/module/qrocm/template.hbs @@ -1,15 +1,24 @@ - +
-
- - {{t "pages.modulix.qrocm.direction" count=this.nbOfProposals}} - + + {{t "pages.modulix.qrocm.direction" count=this.nbOfProposals}} + -
- {{html-unsafe this.element.instruction}} -
+
+ {{html-unsafe this.element.instruction}}
+ +
{{#each this.formattedProposals as |block|}} {{#if (eq block.type "text")}} diff --git a/mon-pix/tests/integration/components/module/qcm_test.js b/mon-pix/tests/integration/components/module/qcm_test.js index a4faa1f10b2..9da39e7fdd5 100644 --- a/mon-pix/tests/integration/components/module/qcm_test.js +++ b/mon-pix/tests/integration/components/module/qcm_test.js @@ -1,5 +1,6 @@ import { render } from '@1024pix/ember-testing-library'; -import { click, findAll } from '@ember/test-helpers'; +// eslint-disable-next-line no-restricted-imports +import { click, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; import sinon from 'sinon'; @@ -25,11 +26,14 @@ module('Integration | Component | Module | QCM', function (hooks) { // then assert.ok(screen); - assert.strictEqual(findAll('.element-qcm-header__instruction').length, 1); - assert.strictEqual(findAll('.element-qcm-header__direction').length, 1); - assert.ok(screen.getByText('Instruction')); assert.ok(screen.getByRole('group', { legend: this.intl.t('pages.modulix.qcm.direction') })); + // Pas possible de faire un `getByRole('form')`. Voir https://github.com/1024pix/pix/pull/8835#discussion_r1596407648 + const form = find('form'); + assert.dom(form).exists(); + const formDescription = find(`#${form.getAttribute('aria-describedby')}`); + assert.dom(formDescription).hasText('Instruction'); + assert.strictEqual(screen.getAllByRole('checkbox').length, qcmElement.proposals.length); assert.ok(screen.getByLabelText('checkbox1')); assert.ok(screen.getByLabelText('checkbox2')); diff --git a/mon-pix/tests/integration/components/module/qcu_test.js b/mon-pix/tests/integration/components/module/qcu_test.js index 6f4f24e164e..d942a8b51ab 100644 --- a/mon-pix/tests/integration/components/module/qcu_test.js +++ b/mon-pix/tests/integration/components/module/qcu_test.js @@ -1,5 +1,6 @@ import { render } from '@1024pix/ember-testing-library'; -import { click, findAll } from '@ember/test-helpers'; +// eslint-disable-next-line no-restricted-imports +import { click, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; import sinon from 'sinon'; @@ -27,11 +28,14 @@ module('Integration | Component | Module | QCU', function (hooks) { // then assert.ok(screen); - assert.strictEqual(findAll('.element-qcu-header__instruction').length, 1); - assert.strictEqual(findAll('.element-qcu-header__direction').length, 1); - assert.ok(screen.getByText('Instruction')); assert.ok(screen.getByRole('group', { legend: this.intl.t('pages.modulix.qcu.direction') })); + // Pas possible de faire un `getByRole('form')`. Voir https://github.com/1024pix/pix/pull/8835#discussion_r1596407648 + const form = find('form'); + assert.dom(form).exists(); + const formDescription = find(`#${form.getAttribute('aria-describedby')}`); + assert.dom(formDescription).hasText('Instruction'); + assert.strictEqual(screen.getAllByRole('radio').length, qcuElement.proposals.length); assert.ok(screen.getByLabelText('radio1')); assert.ok(screen.getByLabelText('radio2')); diff --git a/mon-pix/tests/integration/components/module/qrocm_test.js b/mon-pix/tests/integration/components/module/qrocm_test.js index f13b16e54f4..26bb76b8428 100644 --- a/mon-pix/tests/integration/components/module/qrocm_test.js +++ b/mon-pix/tests/integration/components/module/qrocm_test.js @@ -1,5 +1,6 @@ import { clickByName, render } from '@1024pix/ember-testing-library'; -import { click, fillIn } from '@ember/test-helpers'; +// eslint-disable-next-line no-restricted-imports +import { click, fillIn, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { module, test } from 'qunit'; import sinon from 'sinon'; @@ -48,19 +49,20 @@ module('Integration | Component | Module | QROCM', function (hooks) { type: 'qrocm', }; this.set('el', qrocm); - const screen = await render(hbs` - `); + const screen = await render(hbs``); + const direction = this.intl.t('pages.modulix.qrocm.direction', { + count: qrocm.proposals.filter(({ type }) => type !== 'text').length, + }); // then assert.ok(screen); - assert.dom(screen.getByText('Mon instruction')).exists({ count: 1 }); - assert.ok( - screen.getByRole('group', { - legend: this.intl.t('pages.modulix.qrocm.direction', { - count: qrocm.proposals.filter(({ type }) => type !== 'text').length, - }), - }), - ); + assert.ok(screen.getByRole('group', { legend: direction })); + + const form = find('form'); + assert.dom(form).exists(); + const formDescription = find(`#${form.getAttribute('aria-describedby')}`); + assert.dom(formDescription).hasText('Mon instruction'); + assert.dom(screen.getByText('Ma première proposition')).exists({ count: 1 }); assert.ok(screen.getByRole('textbox', { name: 'input-aria' })); assert.dom(screen.getByText("l'identifiant")).exists({ count: 1 });