update EditingCover cypress test for new modal

Author: kaptron

app/javascript/ui/global/CheckboxWithLabel.js

@@ -1,11 +1,19 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 
 import { Checkbox, LabelContainer } from '~/ui/global/styled/forms'
 
 const CheckboxWithLabel = ({ onChange, checked, label }) => (
   <LabelContainer
     labelPlacement={'end'}
-    control={<Checkbox onChange={onChange} checked={checked} />}
+    control={
+      <Checkbox
+        // this class is really just for cypress purposes
+        classes={{ root: _.kebabCase(`checkbox-${label}`) }}
+        onChange={onChange}
+        checked={checked}
+      />
+    }
     label={<div style={{ maxWidth: '582px', paddingTop: '9px' }}>{label}</div>}
   ></LabelContainer>
 )

bin/cypress

@@ -1,3 +1,4 @@
 pkill -F tmp/pids/test.pid
+rake db:test:prepare
 CYPRESS=true bin/rails server -d -e test -p 3001 -P tmp/pids/test.pid
 yarn cypress

cypress/integration/collections/EditingCover.feature

@@ -12,6 +12,6 @@ Feature: Editing Cover
 
     When I click the "CardAction-edit cover"
     Then I should see a 'EditCoverOptions'
-    And I click the ".PrivateSwitchBase-input"
+    And I click the "input" located in ".checkbox-hide-subtitle"
     And I click the 'ModalClose'
     Then I should not see a collection card with subtitle "Subtitle"

cypress/support/step_definitions/when.js

@@ -292,6 +292,12 @@ When('I click the {string}', el => {
     .click({ force: true })
 })
 
+When('I click the {string} located in {string}', (selector, el) => {
+  cy.get(`${el} ${selector}`)
+    .first()
+    .click({ force: true })
+})
+
 When('I click the last {string}', el => {
   cy.locateDataOrClass(el)
     .last()