deflake select spec

Author: elasticspoon

app/javascript/controllers/multiple_select_controller.js

@@ -14,15 +14,15 @@ export default class extends Controller {
     showAllOption: Boolean
   }
 
-  connect () {
+  connect() {
     if (this.withOptionsValue) {
       this.createMultiSelectWithOptionGroups()
     } else {
       this.createBasicMultiSelect()
     }
   }
 
-  createBasicMultiSelect () {
+  createBasicMultiSelect() {
     /* eslint-disable no-new */
     new TomSelect(this.selectTarget, {
       plugins: {
@@ -33,7 +33,7 @@ export default class extends Controller {
     })
   }
 
-  createMultiSelectWithOptionGroups () {
+  createMultiSelectWithOptionGroups() {
     const optionTemplate = this.optionTarget.innerHTML
     const itemTemplate = this.itemTarget.innerHTML
     const placeholder = `Select or search ${this.placeholderTermValue}`
@@ -84,8 +84,8 @@ export default class extends Controller {
           label: '<i class="lni lni-cross-circle"></i>'
         },
         checkbox_options: {
-          checkedClassNames: ['form-check-input'],
-          uncheckedClassNames: ['form-check-input']
+          checkedClassNames: ['form-check-input', 'form-check-input--checked'],
+          uncheckedClassNames: ['form-check-input', 'form-check-input--unchecked'],
         }
       },
       options: dropdownOptions,

spec/system/casa_cases/edit_spec.rb

@@ -238,17 +238,20 @@
       expect(page).to have_text("Set Implementation Status")
 
       find(".ts-control").click
-      ts_checkboxes = page.all(".ts-dropdown-content input")
 
       select_all_el = page.find("span[data-test=select-all-input]")
       # uncheck all contact type options
       select_all_el.click
-      ts_checkboxes.each do |el|
-        expect(el).not_to be_checked
+      within ".ts-dropdown-content" do
+        expect(page).to_not have_css(".form-check-input--checked")
+        expect(page).to have_css(".form-check-input--unchecked", count: 2)
       end
       # check all contact type options
       select_all_el.click
-      expect(ts_checkboxes).to all(be_checked)
+      within ".ts-dropdown-content" do
+        expect(page).to_not have_css("input.form-check-input--unchecked")
+        expect(page).to have_css("input.form-check-input--checked", count: 2)
+      end
       # since all contact type options checked, don't need to select one
       within ".top-page-actions" do
         click_on "Update CASA Case"