From 23303695e70dde46705df418f4e45975a7b74060 Mon Sep 17 00:00:00 2001 From: Xavier Carron <33637571+xav-car@users.noreply.github.com> Date: Tue, 12 Mar 2024 15:39:31 +0100 Subject: [PATCH] feat(pix-multi-select): add named yield to pix multi select --- .../pix-filterable-and-searchable-select.hbs | 4 +- addon/components/pix-multi-select.hbs | 2 +- addon/components/pix-multi-select.js | 3 - app/stories/pix-multi-select.mdx | 6 +- app/stories/pix-multi-select.stories.js | 21 +- ...x-filterable-and-searchable-select-test.js | 65 ++++-- .../components/pix-multi-select-test.js | 210 +++++++++--------- .../unit/components/pix-multi-select-test.js | 19 -- 8 files changed, 174 insertions(+), 156 deletions(-) delete mode 100644 tests/unit/components/pix-multi-select-test.js diff --git a/addon/components/pix-filterable-and-searchable-select.hbs b/addon/components/pix-filterable-and-searchable-select.hbs index 634c30f01..4480ec193 100644 --- a/addon/components/pix-filterable-and-searchable-select.hbs +++ b/addon/components/pix-filterable-and-searchable-select.hbs @@ -6,7 +6,7 @@ @subLabel={{@subLabel}} @screenReaderOnly={{@screenReaderOnly}} > - {{@label}} + {{yield to="label"}}
+ <:label>{{yield to="categorieLabel"}} <:placeholder>{{this.categoriesPlaceholder}} <:default as |option|>{{option.label}} diff --git a/addon/components/pix-multi-select.hbs b/addon/components/pix-multi-select.hbs index 0e1a83fe8..83e80953c 100644 --- a/addon/components/pix-multi-select.hbs +++ b/addon/components/pix-multi-select.hbs @@ -12,7 +12,7 @@ @labelSize={{@labelSize}} @screenReaderOnly={{@screenReaderOnly}} > - {{@label}} + {{yield to="label"}} diff --git a/addon/components/pix-multi-select.js b/addon/components/pix-multi-select.js index cca8d26dc..e5d8d8abf 100644 --- a/addon/components/pix-multi-select.js +++ b/addon/components/pix-multi-select.js @@ -27,9 +27,6 @@ export default class PixMultiSelect extends Component { constructor(...args) { super(...args); - if (!this.args.label && !this.args.id) - throw new Error('ERROR in PixMultiSelect, a @label or an @id was not provided'); - this.options = [...(this.args.options || [])]; } diff --git a/app/stories/pix-multi-select.mdx b/app/stories/pix-multi-select.mdx index 6dc447ef4..e13462c3e 100644 --- a/app/stories/pix-multi-select.mdx +++ b/app/stories/pix-multi-select.mdx @@ -33,7 +33,6 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles. ```html - {{option.label}} + <:label>{{label}} + <:default as |option|>{{option.label}} ``` diff --git a/app/stories/pix-multi-select.stories.js b/app/stories/pix-multi-select.stories.js index b017b1ec9..63469a0af 100644 --- a/app/stories/pix-multi-select.stories.js +++ b/app/stories/pix-multi-select.stories.js @@ -27,8 +27,10 @@ export default { @strictSearch={{this.strictSearch}} @values={{this.values}} @options={{this.options}} - as |option| ->{{option.label}}`, +> + <:label>{{this.label}} + <:default as |option|>{{option.label}} + `, context: args, }), argTypes: { @@ -152,20 +154,21 @@ export const multiSelectWithChildComponent = (args) => { return { template: hbs`

⚠️ La sélection des éléments ne fonctionne pas dans Storybook.

- + <:label>{{this.label}} + <:default as |option|> + + `, context: args, }; diff --git a/tests/integration/components/pix-filterable-and-searchable-select-test.js b/tests/integration/components/pix-filterable-and-searchable-select-test.js index ef6a4e64a..e16eeb8b9 100644 --- a/tests/integration/components/pix-filterable-and-searchable-select-test.js +++ b/tests/integration/components/pix-filterable-and-searchable-select-test.js @@ -29,7 +29,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @onChange={{this.onChange}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByText(`${this.categoriesPlaceholder} (0)`)); const items = await screen.findAllByRole('menuitem'); @@ -51,7 +54,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await clickByName(this.label); const options = await screen.findAllByRole('option'); @@ -79,7 +85,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByText(`${this.categoriesPlaceholder} (0)`)); @@ -108,7 +117,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @onChange={{this.onChange}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByText(`${this.categoriesPlaceholder} (0)`)); await click(await screen.findByRole('checkbox', { name: 'Hamburger' })); @@ -133,7 +145,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByText(`${this.categoriesPlaceholder} (0)`)); @@ -161,7 +176,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByText(`${this.categoriesPlaceholder} (0)`)); @@ -194,7 +212,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByRole('button', { name: this.label })); await click(await screen.findByRole('option', { name: 'Tomate' })); @@ -222,7 +243,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesPlaceholder={{this.categoriesPlaceholder}} @searchLabel={{this.searchLabel}} @isSearchable={{true}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByRole('button', { name: this.label })); await fillByLabel(this.searchLabel, 'Tom'); @@ -256,7 +280,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesPlaceholder={{this.categoriesPlaceholder}} @searchLabel={{this.searchLabel}} @isSearchable={{true}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); await click(screen.getByRole('button', { name: this.label })); const option = await screen.findByRole('option', { selected: true }); @@ -283,7 +310,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); const label = await screen.getByLabelText(this.label); @@ -310,7 +340,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @categoriesId={{this.categoriesId}} @categoriesLabel={{this.categoriesLabel}} @categoriesPlaceholder={{this.categoriesPlaceholder}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); // then assert.dom(screen.getByText('Mon subLabel')).exists(); @@ -337,7 +370,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @searchLabel={{this.searchLabel}} @isSearchable={{true}} @requiredText={{this.requiredText}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); // then assert.dom(screen.getByLabelText('* Label de mon big composant trop compliqué')).exists(); @@ -367,7 +403,10 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h @isSearchable={{true}} @requiredText={{this.requiredText}} @errorMessage={{this.errorMessage}} -/>`); +> + <:label>{{this.label}} + <:categoryLabel>{{this.categoriesLabel}} +`); // then assert.dom(screen.getByText(this.errorMessage)).exists(); diff --git a/tests/integration/components/pix-multi-select-test.js b/tests/integration/components/pix-multi-select-test.js index 24de6ff95..91005f403 100644 --- a/tests/integration/components/pix-multi-select-test.js +++ b/tests/integration/components/pix-multi-select-test.js @@ -23,6 +23,7 @@ module('Integration | Component | multi-select', function (hooks) { module('common cases', function () { test('it renders PixMultiSelect with hidden list', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -36,12 +37,12 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='multiSelectLabel' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} + `); // then @@ -50,6 +51,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should updates selected items when @values is reset', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = ['2']; this.onChange = (values) => this.set('values', values); @@ -62,17 +64,16 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @values={{this.values}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when this.set('values', []); - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await screen.findByRole('menu'); // then @@ -85,6 +86,7 @@ module('Integration | Component | multi-select', function (hooks) { module('onClick', function () { test('it renders PixMultiSelect list', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -98,15 +100,14 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await screen.findByRole('menu'); @@ -116,6 +117,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it renders the PixMultiSelect with empty message', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = []; this.values = []; this.onChange = () => {}; @@ -128,16 +130,15 @@ module('Integration | Component | multi-select', function (hooks) { @values={{this.values}} @onChange={{this.onChange}} @placeholder={{this.placeholder}} - @label='labelMultiSelect' @id={{this.id}} @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await screen.findByRole('menu'); // then @@ -147,6 +148,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it renders the PixMultiSelect with default checked', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.onChange = () => {}; this.values = ['2']; @@ -160,15 +162,14 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @values={{this.values}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await userEvent.keyboard('[ArrowDown]'); @@ -186,6 +187,7 @@ module('Integration | Component | multi-select', function (hooks) { module('display main text', function () { test('it should display selected labels on MultiSelect', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.onChange = () => {}; this.values = ['2', '3']; @@ -199,16 +201,15 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @values={{this.values}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @isSearchable={{true}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // then - const inputElement = screen.getByLabelText('labelMultiSelect'); + const inputElement = screen.getByLabelText('multiSelectLabel'); assert.strictEqual(inputElement.placeholder, 'Tomate, Oignon'); }); }); @@ -216,6 +217,7 @@ module('Integration | Component | multi-select', function (hooks) { module('onChange', function () { test('it should trigger onChange function when an item is selected', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -227,16 +229,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await screen.findByRole('menu'); @@ -250,6 +251,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should unselect item and return selected item of the updated list', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -262,16 +264,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); await screen.findByRole('menu'); @@ -286,6 +287,7 @@ module('Integration | Component | multi-select', function (hooks) { module('a11y', function () { test('it should display list, focus first element on arrow down press', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -297,16 +299,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await screen.getByLabelText('labelMultiSelect').focus(); + await screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[ArrowDown]'); @@ -321,6 +322,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should display list, focus last element on arrow up press', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -332,16 +334,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await screen.getByLabelText('labelMultiSelect').focus(); + await screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[ArrowUp]'); @@ -356,6 +357,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should focus first element on arrow down press', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -367,16 +369,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await screen.getByLabelText('labelMultiSelect').focus(); + await screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[Enter]'); @@ -390,6 +391,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should focus last element on arrow up press', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -401,16 +403,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await screen.getByLabelText('labelMultiSelect').focus(); + await screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[Enter]'); @@ -425,6 +426,7 @@ module('Integration | Component | multi-select', function (hooks) { test.skip('it should call on select on enter press', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -436,16 +438,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await screen.getByLabelText('labelMultiSelect').focus(); + await screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[ArrowDown]'); @@ -459,11 +460,12 @@ module('Integration | Component | multi-select', function (hooks) { await waitForElementToBeRemoved(() => screen.queryByRole('menu')); assert.strictEqual(screen.queryByRole('menu'), null); assert.ok(this.onChange.calledOnce, 'the callback should be called once'); - assert.strictEqual(document.activeElement, screen.getByLabelText('labelMultiSelect')); + assert.strictEqual(document.activeElement, screen.getByLabelText('multiSelectLabel')); }); test('it should close menu on escape press, focus multiselect element', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.placeholder = 'MultiSelectTest'; @@ -475,16 +477,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - screen.getByLabelText('labelMultiSelect').focus(); + screen.getByLabelText('multiSelectLabel').focus(); await userEvent.keyboard('[ArrowDown]'); @@ -493,7 +494,7 @@ module('Integration | Component | multi-select', function (hooks) { await userEvent.keyboard('[Escape]'); // then - assert.strictEqual(document.activeElement, screen.getByLabelText('labelMultiSelect')); + assert.strictEqual(document.activeElement, screen.getByLabelText('multiSelectLabel')); await waitForElementToBeRemoved(() => screen.queryByRole('menu')); assert.strictEqual(screen.queryByRole('menu'), null); }); @@ -503,6 +504,7 @@ module('Integration | Component | multi-select', function (hooks) { module('When it is a searchable multiselect', function () { test('it should renders searchable PixMultiSelect multi select list', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -518,26 +520,26 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='label' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); - await fillByLabel('label', ''); + await fillByLabel('multiSelectLabel', ''); await screen.findByRole('menu'); // then - assert.strictEqual(screen.getByLabelText('label').placeholder, this.placeholder); + assert.strictEqual(screen.getByLabelText('multiSelectLabel').placeholder, this.placeholder); assert.strictEqual(screen.getAllByRole('checkbox').length, 3); }); test('it should renders filtered given case insensitive', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -554,15 +556,14 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @emptyMessage={{this.emptyMessage}} - @label='Mon multi select' @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('Mon multi select', 'tomate'); + await fillByLabel('multiSelectLabel', 'tomate'); await screen.findByRole('menu'); @@ -573,6 +574,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should renders no result given case sensitive', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -591,15 +593,14 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @emptyMessage={{this.emptyMessage}} - @label='Mon multi select' @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('Mon multi select', 'tomate'); + await fillByLabel('multiSelectLabel', 'tomate'); await screen.findByRole('menu'); @@ -609,13 +610,13 @@ module('Integration | Component | multi-select', function (hooks) { test('it should display list PixMultiSelect on focus', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; this.emptyMessage = 'no result'; this.placeholder = 'MultiSelectTest'; this.id = 'id-MultiSelectTest'; - this.label = 'label'; this.isSearchable = true; this.placeholder = 'Placeholder test'; @@ -624,17 +625,16 @@ module('Integration | Component | multi-select', function (hooks) { @values={{this.values}} @onChange={{this.onChange}} @placeholder={{this.placeholder}} - @label={{this.label}} @id={{this.id}} @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('label', ''); + await fillByLabel('multiSelectLabel', ''); await screen.findByRole('menu'); @@ -644,6 +644,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should sort default selected items when focused', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = ['3']; this.onChange = () => {}; @@ -659,16 +660,15 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='label' @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('label', ''); + await fillByLabel('multiSelectLabel', ''); await screen.findByRole('menu'); @@ -682,6 +682,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should not sort when user select item', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -696,17 +697,16 @@ module('Integration | Component | multi-select', function (hooks) { @values={{this.values}} @onChange={{this.onChange}} @placeholder={{this.placeholder}} - @label='labelMultiSelect' @id={{this.id}} @emptyMessage={{this.emptyMessage}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('labelMultiSelect', ''); + await fillByLabel('multiSelectLabel', ''); await screen.findByRole('menu'); @@ -722,6 +722,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should not sort when user search and select item', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = () => {}; @@ -738,20 +739,19 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @emptyMessage={{this.emptyMessage}} - @label='Mon multi select' @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('Mon multi select', 'Oi'); + await fillByLabel('multiSelectLabel', 'Oi'); await screen.findByRole('menu'); await clickByName('Oignon'); - await fillByLabel('Mon multi select', 'o'); + await fillByLabel('multiSelectLabel', 'o'); // then const listElement = screen.getAllByRole('checkbox'); assert.strictEqual(listElement.length, 2); @@ -761,6 +761,7 @@ module('Integration | Component | multi-select', function (hooks) { test('it should sort items when search is cleaned', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = []; this.onChange = (values) => this.set('values', values); @@ -777,21 +778,20 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @emptyMessage={{this.emptyMessage}} - @label='Mon multi select' @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('Mon multi select', 'Oi'); + await fillByLabel('multiSelectLabel', 'Oi'); await screen.findByRole('menu'); await clickByName('Oignon'); - await fillByLabel('Mon multi select', ''); + await fillByLabel('multiSelectLabel', ''); // then const listElement = screen.getAllByRole('checkbox'); @@ -803,6 +803,7 @@ module('Integration | Component | multi-select', function (hooks) { test('should not sort when there are default items selected and a new selected item', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.values = ['2']; this.onChange = () => {}; @@ -818,17 +819,16 @@ module('Integration | Component | multi-select', function (hooks) { @onChange={{this.onChange}} @placeholder={{this.placeholder}} @id={{this.id}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @showOptionsOnInput={{true}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // when - await fillByLabel('labelMultiSelect', ''); + await fillByLabel('multiSelectLabel', ''); await screen.findByRole('menu'); @@ -849,6 +849,7 @@ module('Integration | Component | multi-select', function (hooks) { module('custom class name', function () { test('it should use the added class name', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.onChange = () => {}; this.values = ['2', '3']; @@ -863,14 +864,13 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @values={{this.values}} - @label='labelMultiSelect' @emptyMessage={{this.emptyMessage}} @isSearchable={{true}} @className={{this.className}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); // then assert.dom('.custom').exists(); @@ -880,6 +880,7 @@ module('Integration | Component | multi-select', function (hooks) { module('label', function () { test('it focus the input on click on the label', async function (assert) { // given + this.label = 'multiSelectLabel'; this.options = DEFAULT_OPTIONS; this.onChange = () => {}; this.values = []; @@ -891,18 +892,17 @@ module('Integration | Component | multi-select', function (hooks) { @placeholder={{this.placeholder}} @id={{this.id}} @values={{this.values}} - @label='labelMultiSelect' @isSearchable={{false}} @options={{this.options}} - as |option| > - {{option.label}} + <:label>{{this.label}} + <:default as |option|>{{option.label}} `); - await clickByName('labelMultiSelect'); + await clickByName('multiSelectLabel'); // then - assert.dom(screen.getByLabelText('labelMultiSelect')).isFocused(); + assert.dom(screen.getByLabelText('multiSelectLabel')).isFocused(); }); }); }); diff --git a/tests/unit/components/pix-multi-select-test.js b/tests/unit/components/pix-multi-select-test.js deleted file mode 100644 index bf2d8240e..000000000 --- a/tests/unit/components/pix-multi-select-test.js +++ /dev/null @@ -1,19 +0,0 @@ -import { module, test } from 'qunit'; -import { setupTest } from 'ember-qunit'; -import createGlimmerComponent from '../../helpers/create-glimmer-component'; - -module('Unit | Component | PixMultiSelect', function (hooks) { - setupTest(hooks); - - test('it throws an error if there is no id and no label', function (assert) { - // given & when - const componentParams = { options: [] }; - const renderComponent = function () { - createGlimmerComponent('pix-multi-select', componentParams); - }; - - // then - const expectedError = new Error('ERROR in PixMultiSelect, a @label or an @id was not provided'); - assert.throws(renderComponent, expectedError); - }); -});