Skip to content

Commit

Permalink
Update choice value/labels + add test for parent/child link
Browse files Browse the repository at this point in the history
  • Loading branch information
@jshjohnson
jshjohnson committed Oct 27, 2018
1 parent dad2b34 commit d543741
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 135 deletions.
16 changes: 8 additions & 8 deletions cypress/integration/select-multiple.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('Choices - select multiple', () => {

describe('selecting choices', () => {
describe('focusing on text input', () => {
const selectedChoiceText = 'Dropdown item 1';
const selectedChoiceText = 'Choice 1';

it('displays a dropdown of choices', () => {
cy.get('[data-test-hook=basic]')
Expand All @@ -26,7 +26,7 @@ describe('Choices - select multiple', () => {
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
`Choice ${index + 1}`,
);
});
});
Expand Down Expand Up @@ -151,7 +151,7 @@ describe('Choices - select multiple', () => {
.children()
.first()
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 2');
expect($choice.text().trim()).to.equal('Choice 2');
});
});
});
Expand All @@ -167,7 +167,7 @@ describe('Choices - select multiple', () => {
.children()
.first()
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 3');
expect($choice.text().trim()).to.equal('Choice 3');
});
});
});
Expand Down Expand Up @@ -424,7 +424,7 @@ describe('Choices - select multiple', () => {

describe('search floor reached', () => {
it('displays choices filtered by inputted value', () => {
const searchTerm = 'Dropdown item 2';
const searchTerm = 'Choice 2';

cy.get('[data-test-hook=search-floor]')
.find('.choices__input--cloned')
Expand Down Expand Up @@ -520,7 +520,7 @@ describe('Choices - select multiple', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
expect($choice.text().trim()).to.equal('Choice 1');
});
});

Expand All @@ -530,7 +530,7 @@ describe('Choices - select multiple', () => {
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
`Choice ${index + 1}`,
);
});

Expand All @@ -555,7 +555,7 @@ describe('Choices - select multiple', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
expect($choice.text().trim()).to.equal(`Choice ${index}`);
});

cy.get('[data-test-hook=scrolling-dropdown]')
Expand Down
83 changes: 70 additions & 13 deletions cypress/integration/select-one.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('Choices - select one', () => {

describe('selecting choice', () => {
describe('focusing on text input', () => {
const selectedChoiceText = 'Dropdown item 1';
const selectedChoiceText = 'Choice 1';

it('displays a dropdown of choices', () => {
cy.get('[data-test-hook=basic]')
Expand All @@ -26,9 +26,7 @@ describe('Choices - select one', () => {
.children()
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
});

Expand Down Expand Up @@ -92,7 +90,7 @@ describe('Choices - select one', () => {
.children()
.first()
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 2');
expect($choice.text().trim()).to.equal('Choice 2');
});
});
});
Expand All @@ -108,7 +106,7 @@ describe('Choices - select one', () => {
.children()
.first()
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 3');
expect($choice.text().trim()).to.equal('Choice 3');
});
});
});
Expand Down Expand Up @@ -319,7 +317,7 @@ describe('Choices - select one', () => {
searchEnabled: false
}
*/
const selectedChoiceText = 'Dropdown item 3';
const selectedChoiceText = 'Choice 3';

beforeEach(() => {
cy.get('[data-test-hook=search-disabled]')
Expand Down Expand Up @@ -383,7 +381,7 @@ describe('Choices - select one', () => {

describe('search floor reached', () => {
it('displays choices filtered by inputted value', () => {
const searchTerm = 'Dropdown item 2';
const searchTerm = 'Choice 2';

cy.get('[data-test-hook=search-floor]')
.find('.choices__input--cloned')
Expand Down Expand Up @@ -468,7 +466,7 @@ describe('Choices - select one', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
expect($choice.text().trim()).to.equal('Choice 1');
});
});

Expand All @@ -477,9 +475,7 @@ describe('Choices - select one', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});

cy.get('[data-test-hook=scrolling-dropdown]')
Expand All @@ -503,7 +499,7 @@ describe('Choices - select one', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
expect($choice.text().trim()).to.equal(`Choice ${index}`);
});

cy.get('[data-test-hook=scrolling-dropdown]')
Expand Down Expand Up @@ -579,5 +575,66 @@ describe('Choices - select one', () => {
});
});
});

describe('dependencies', () => {
describe('selecting "Parent choice 2"', () => {
it('enables the child Choices instance', () => {
cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(1)
.should('have.class', 'is-disabled');

cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(0)
.click();

cy.get('[data-test-hook=dependencies]')
.find('.choices__list--dropdown .choices__list')
.children()
.eq(1)
.click();

cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(1)
.should('not.have.class', 'is-disabled');
});
});

describe('changing selection from "Parent choice 2" to something else', () => {
it('disables the child Choices instance', () => {
// open parent instance and select second choice
cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(0)
.click()
.find('.choices__list--dropdown .choices__list')
.children()
.eq(1)
.click();

cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(1)
.should('not.have.class', 'is-disabled');

// open parent instance and select third choice
cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(0)
.click()
.find('.choices__list--dropdown .choices__list')
.children()
.eq(2)
.click();

cy.get('[data-test-hook=dependencies]')
.find('.choices')
.eq(1)
.should('have.class', 'is-disabled');
});
});
});
});
});
44 changes: 22 additions & 22 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ <h2>Multiple select input</h2>
<label for="choices-multiple-default">Default</label>
<select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>

<label for="choices-multiple-remove-button">With remove button</label>
<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>

<label for="choices-multiple-groups">Option groups</label>
Expand Down Expand Up @@ -143,10 +143,10 @@ <h2>Multiple select input</h2>
<label for="choices-multiple-rtl">Right-to-left</label>
<select class="form-control" data-trigger name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder"
multiple dir="rtl">
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>

<label for="label-event">Use label in event (add/remove)</label>
Expand All @@ -158,9 +158,9 @@ <h2>Single select input</h2>
<label for="choices-single-default">Default</label>
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
<option placeholder>This is a placeholder</option>
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<p><small>If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!</small></p>
Expand Down Expand Up @@ -212,9 +212,9 @@ <h2>Single select input</h2>
<label for="choices-single-rtl">Right-to-left</label>
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder"
dir="rtl">
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<label for="choices-single-no-search">Options added via config with no search</label>
Expand Down Expand Up @@ -295,10 +295,10 @@ <h2>Form interaction</h2>
<label for="reset-multiple">And me!</label>
<select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>

<button type="reset">Reset</button>
Expand Down
Loading

0 comments on commit d543741

Please sign in to comment.