test(filterable-select): refactor cypress tests for filterable select FE-4567

[sianford]

Proposed behaviour

Refactor Cypress tests for Filterable Select component to use new cypress-component-react framework for testing. Add filterable-select.test.js. Also, make minor updates to simple-select.test.js.

Current behaviour

Current process is the regular Cypress approach with BDD.

Checklist

• [ ] Commits follow our style guide
• [ ] Related issues linked in commit messages if required
• [ ] Screenshots are included in the PR if useful
• [ ] All themes are supported if required
• [ ] Unit tests added or updated if required
• [ ] Cypress automation tests added or updated if required
• [ ] Storybook added or updated if required
• [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
• [ ] Typescript d.ts file added or updated if required

QA

• [ ] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [ ] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

Testing instructions

• [ ] Run npx cypress open --component to check if there is newly added test.file
• [ ] Check if the filterable-select.test.js file passed
• [ ] Check all tests were moved/refactored from .feature file -> .test.js file
• [ ] Check all unnecessary files were deleted, including .json file
• [ ] Run npx cypress run --component to check none of the other *.test.js files have regressed
• [ ] Run npx cypress run --e2e to check none of the feature files have regressed

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8b64c722a8fe3b6dba714b9be48086b65ca9b50a:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration

[cypress[bot]]

---

Test summary

2810 • 0 • 3 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	8b64c722a8
Started	Aug 17, 2022 11:38 AM
Ended	Aug 17, 2022 11:44 AM
Duration	06:03 💡
OS	Linux Debian - 10.10
Browser	Chrome 100

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[sianford]

We need to add:

1. tableHeader for FilterableSelect and
2. borderColor and fill for selectListOption

@DlgSHi the table header is tested by default within the FilterableSelectMultiColumnsComponent custom component used to test the multicolumns in a list with table header, body and rows. There is an assertion on the number of columns in the header in this test case. Do you think there should be a separate test case for testing the specific content of the header?

borderColor and fill are for the MultiSelect component only. I will test those props when I write that test spec.

[DlgSHi]

1. tableHeader for FilterableSelect

@DlgSHi the table header is tested by default within the FilterableSelectMultiColumnsComponent custom component used to test the multicolumns in a list with table header, body and rows. There is an assertion on the number of columns in the header in this test case. Do you think there should be a separate test case for testing the specific content of the header?

@sianford , yes please, add it as a separate TC

[carbonci]

:tada: This PR is included in version 110.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: