Skip to content

Commit

Permalink
feat(@dpc-sdp/ripple-ui-forms): add search support for dropdowns
Browse files Browse the repository at this point in the history
  • Loading branch information
@lambry
lambry committed Dec 6, 2024
1 parent 96977b0 commit 641e5d5
Show file tree
Hide file tree
Showing 20 changed files with 1,441 additions and 165 deletions.
97 changes: 57 additions & 40 deletions examples/nuxt-app/test/features/landingpage/forms.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ Feature: Forms
| required |
| true |
Then a select field with the label "Term select" should exist
Then a select field with the label "Searchable single select" should exist
Then a select field with the label "Searchable multi select" should exist
Then a radio group field with the label "Type of person" should exist with the following options
| label |
| Dog person |
Expand Down Expand Up @@ -58,11 +60,12 @@ Feature: Forms
Then the error summary should not display
When I submit the form with ID "full_form"
Then the error summary should display with the following errors
| text | url |
| You must enter your first name | /kitchen-sink#first_name |
| The message field is required | /kitchen-sink#message |
| Must choose a favourite colour | /kitchen-sink#favourite_colour |
| You must accept the terms | /kitchen-sink#i_accept_the_terms |
| text | url |
| You must enter your first name | /kitchen-sink#first_name |
| The message field is required | /kitchen-sink#message |
| Must choose a favourite colour | /kitchen-sink#favourite_colour |
| The searchable single select is required | /kitchen-sink#searchable_single_select |
| You must accept the terms | /kitchen-sink#i_accept_the_terms |
Then clicking on an error summary link with text "Must choose a favourite colour" should focus on the input with ID "favourite_colour"

And the dataLayer should include the following events
Expand All @@ -79,13 +82,16 @@ Feature: Forms
And the form with ID "full_form" should exist

Then the input with the label "First name" should be valid
And the select with the label "Searchable single select" should be valid
When I submit the form with ID "full_form"
Then the input with the label "First name" should be invalid with message "You must enter your first name"
And the select with the label "Searchable single select" should be invalid with message "The searchable single select is required"
When I type "Cat" into the input with the label "First name"
Then the input with the label "First name" should be invalid with message "You must enter your first name"
And I select "Orange" by searching the select field with label "Searchable single select"

When I submit the form with ID "full_form"
Then the input with the label "First name" should be valid
Then the select with the label "Searchable single select" should be valid

@mockserver
Scenario: Form submission - Error
Expand All @@ -101,6 +107,7 @@ Feature: Forms
And I type "Here is some text to go in the textarea field" into the textarea with the label "Message"
And I click "Green" from the select field with label "Favourite colour"
And I toggle the checkbox with label "Terms and conditions"
And I click "Orange" from the select field with label "Searchable single select"

When I submit the form with ID "full_form"

Expand All @@ -126,6 +133,10 @@ Feature: Forms
And I type "0400 000 000" into the input with the label "Mobile phone"
And I type "Here is some text to go in the textarea field" into the textarea with the label "Message"
And I click "Green" from the select field with label "Favourite colour"
And I select "Mango" by searching the select field with label "Searchable single select"
And I select the following options by searching for "Ap" the select field with label "Searchable multi select"
| Aprium |
| Apricot |
And I click "Free admission" from the select field with label "Term select"
And I click "Seniors" from the select field with label "Term select"
And I click "Dog person" from the radio group with label "Type of person"
Expand All @@ -140,44 +151,50 @@ Feature: Forms
| success | Server success | Test success message |

And the dataLayer should include the following events
| event | label | form_id | field_id | type | value | component |
| update_form_field | First name | full_form | first_name | text | [redacted] | rpl-form-input |
| update_form_field | Last name | full_form | last_name | text | [redacted] | rpl-form-input |
| update_form_field | Email | full_form | email | email | [redacted] | rpl-form-input |
| update_form_field | Quantity | full_form | quantity | number | [redacted] | rpl-form-number |
| update_form_field | Website | full_form | website | url | [redacted] | rpl-form-input |
| update_form_field | Mobile phone | full_form | mobile_phone | tel | [redacted] | rpl-form-input |
| update_form_field | Message | full_form | message | textarea | [redacted] | rpl-form-textarea |
| open_form_field | Favourite colour | full_form | favourite_colour | select | | rpl-form-dropdown |
| update_form_field | Favourite colour | full_form | favourite_colour | select | Green | rpl-form-dropdown |
| open_form_field | Term select | full_form | term_select | select | | rpl-form-dropdown |
| update_form_field | Term select | full_form | term_select | select | Free admission | rpl-form-dropdown |
| open_form_field | Term select | full_form | term_select | select | Free admission | rpl-form-dropdown |
| update_form_field | Term select | full_form | term_select | select | Free admission,Seniors | rpl-form-dropdown |
| update_form_field | Type of person | full_form | person_type | radio | Dog person | rpl-form-radio-group |
| update_form_field | Favourite Locations | full_form | favourite_locations | checkbox | London | rpl-form-checkbox-group |
| update_form_field | Favourite Locations | full_form | favourite_locations | checkbox | London,Tokyo | rpl-form-checkbox-group |
| update_form_field | I accept the terms | full_form | i_accept_the_terms__checkbox | checkbox | true | rpl-form-option |
| event | label | form_id | field_id | type | value | component |
| update_form_field | First name | full_form | first_name | text | [redacted] | rpl-form-input |
| update_form_field | Last name | full_form | last_name | text | [redacted] | rpl-form-input |
| update_form_field | Email | full_form | email | email | [redacted] | rpl-form-input |
| update_form_field | Quantity | full_form | quantity | number | [redacted] | rpl-form-number |
| update_form_field | Website | full_form | website | url | [redacted] | rpl-form-input |
| update_form_field | Mobile phone | full_form | mobile_phone | tel | [redacted] | rpl-form-input |
| update_form_field | Message | full_form | message | textarea | [redacted] | rpl-form-textarea |
| open_form_field | Favourite colour | full_form | favourite_colour | select | | rpl-form-dropdown |
| update_form_field | Favourite colour | full_form | favourite_colour | select | Green | rpl-form-dropdown |
| open_form_field | Searchable single select | full_form | searchable_single_select | select | | rpl-form-dropdown |
| update_form_field | Searchable single select | full_form | searchable_single_select | select | Mango | rpl-form-dropdown |
| open_form_field | Searchable multi select | full_form | searchable_multi_select | select | | rpl-form-dropdown |
| update_form_field | Searchable multi select | full_form | searchable_multi_select | select | Aprium | rpl-form-dropdown |
| update_form_field | Searchable multi select | full_form | searchable_multi_select | select | Apricot | rpl-form-dropdown |
| open_form_field | Term select | full_form | term_select | select | | rpl-form-dropdown |
| update_form_field | Term select | full_form | term_select | select | Free admission | rpl-form-dropdown |
| open_form_field | Term select | full_form | term_select | select | Free admission | rpl-form-dropdown |
| update_form_field | Term select | full_form | term_select | select | Free admission,Seniors | rpl-form-dropdown |
| update_form_field | Type of person | full_form | person_type | radio | Dog person | rpl-form-radio-group |
| update_form_field | Favourite Locations | full_form | favourite_locations | checkbox | London | rpl-form-checkbox-group |
| update_form_field | Favourite Locations | full_form | favourite_locations | checkbox | London,Tokyo | rpl-form-checkbox-group |
| update_form_field | I accept the terms | full_form | i_accept_the_terms__checkbox | checkbox | true | rpl-form-option |

And the dataLayer should include the following events
| event | form_id | form_valid | element_text | component |
| form_submit | full_form | true | Submit | rpl-form |
| form_complete | full_form | | Submit | rpl-form |

And the dataLayer form data for "form_complete" should include the following values
| key | value |
| first_name | [redacted] |
| last_name | [redacted] |
| role | [redacted] |
| email | [redacted] |
| quantity | [redacted] |
| website | [redacted] |
| mobile_phone | [redacted] |
| dob | [redacted] |
| message | [redacted] |
| favourite_colour | Green |
| term_select | Free admission,Seniors |
| person_type | Dog person |
| favourite_locations | London,Tokyo |
| i_accept_the_terms | true |
| site_section | DPC |
| key | value |
| first_name | [redacted] |
| last_name | [redacted] |
| role | [redacted] |
| email | [redacted] |
| quantity | [redacted] |
| website | [redacted] |
| mobile_phone | [redacted] |
| dob | [redacted] |
| message | [redacted] |
| favourite_colour | Green |
| searchable_single_select | Mango |
| term_select | Free admission,Seniors |
| person_type | Dog person |
| favourite_locations | London,Tokyo |
| i_accept_the_terms | true |
| site_section | DPC |
42 changes: 33 additions & 9 deletions examples/nuxt-app/test/features/search-listing/filters.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@ Feature: Search listing - Filter
And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"

When I visit the page "/filters?termFilter=Green&singleTermFilter=Aqua&checkboxFilter=Archived&checkboxFilterGroup=Weekdays"
When I visit the page "/filters?termFilter=Green&singleTermFilter=Aqua&checkboxFilter=Archived&checkboxFilterGroup=Weekdays&singleSearchDropdownFilter=Banana"
Then the search listing page should have 2 results
And the search network request should be called with the "/search-listing/filters/request-term-single" fixture

Then the filters toggle should show 4 applied filters
Then the filters toggle should show 5 applied filters

When I toggle the search listing filters section
Then the search listing dropdown field labelled "Term filter example" should have the value "Green"
Expand All @@ -50,25 +50,30 @@ Feature: Search listing - Filter
And the search listing checkbox group labelled "Checkbox group" should have the following options checked
| label |
| Weekdays |
Then the search listing dropdown field labelled "Single search dropdown filter" should have the value "Banana"
And the search listing dropdown field labelled "Single search dropdown filter" should have the search text "Banana" when opened

@mockserver
Example: Term filter - Should reflect an array from the URL
Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/page" with status 200
And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"

When I visit the page "/filters?termFilter=Green&termFilter=Red&checkboxFilterGroup=Weekdays&checkboxFilterGroup=Weekends"
When I visit the page "/filters?termFilter=Green&termFilter=Red&checkboxFilterGroup=Weekdays&checkboxFilterGroup=Weekends&multiSearchDropdownFilter=Potato&multiSearchDropdownFilter=Onion"
Then the search listing page should have 2 results
And the search network request should be called with the "/search-listing/filters/request-term-array" fixture

Then the filters toggle should show 2 applied filters
Then the filters toggle should show 3 applied filters

When I toggle the search listing filters section
Then the search listing dropdown field labelled "Term filter example" should have the value "Red, Green"
And the search listing checkbox group labelled "Checkbox group" should have the following options checked
| label |
| Weekdays |
| Weekends |
Then the select field labelled "Multi search dropdown filter" should have the following tags
| Potato |
| Onion |

@mockserver
Example: Terms (with an 's') - Should reflect a single value from the URL
Expand Down Expand Up @@ -266,13 +271,32 @@ Feature: Search listing - Filter
| Yellow |
Then I click the option labelled "Purple" in the selected dropdown
And I click the search listing checkbox field labelled "Show archived content"
And I select "Mango" by searching the select field with label "Single search dropdown filter"
And I select the following options by searching for "Ca" the select field with label "Multi search dropdown filter"
| Carrot |
| Cabbage |

And I submit the search filters
Then the URL should reflect that the current active filters are as follows:
| id | value |
| q | the |
| termFilter | Blue |
| termsFilter | Orange |
| checkboxFilter | Archived |
| id | value |
| q | the |
| termFilter | Blue |
| termsFilter | Orange |
| checkboxFilter | Archived |
| singleSearchDropdownFilter | Mango |
Then the URL should reflect that the current active filters are as follows:
| multiSearchDropdownFilter | Carrot |
| multiSearchDropdownFilter | Cabbage |

When I delete the text for the select field with label "Single search dropdown filter"
And I delete the following tags for the select field with label "Multi search dropdown filter"
| Carrot |
| Cabbage |

Then I submit the search filters
Then the URL should reflect that the current active filters are as follows:
| singleSearchDropdownFilter |
| multiSearchDropdownFilter |

@mockserver
Example: Dependent filter - Should reflect values from the URL
Expand Down
38 changes: 38 additions & 0 deletions examples/nuxt-app/test/fixtures/landingpage/full-form.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,44 @@
},
"pii": false
},
{
"$formkit": "RplFormDropdown",
"key": "searchable_single_select",
"id": "searchable_single_select",
"name": "searchable_single_select",
"label": "Searchable single select",
"multiple": false,
"searchable": true,
"options": [
{ "id": "apple", "value": "apple", "label": "Apple" },
{ "id": "banana", "value": "banana", "label": "Banana" },
{ "id": "orange", "value": "orange", "label": "Orange" },
{ "id": "mango", "value": "mango", "label": "Mango" },
{ "id": "grape", "value": "grape", "label": "Grape" }
],
"validation": "required",
"validationMessages": {
"required": "The searchable single select is required"
},
"pii": false
},
{
"$formkit": "RplFormDropdown",
"key": "searchable_multi_select",
"id": "searchable_multi_select",
"name": "searchable_multi_select",
"label": "Searchable multi select",
"multiple": true,
"searchable": true,
"options": [
{ "id": "cherry", "value": "cherry", "label": "Cherry" },
{ "id": "aprium", "value": "aprium", "label": "Aprium" },
{ "id": "pear", "value": "pear", "label": "Pear" },
{ "id": "plum", "value": "plum", "label": "Plum" },
{ "id": "apricot", "value": "apricot", "label": "Apricot" }
],
"pii": false
},
{
"$formkit": "RplFormRadioGroup",
"id": "person_type",
Expand Down
Loading

0 comments on commit 641e5d5

Please sign in to comment.