[CPT-1075] Add tests to remove and clone query builder rules (#4495)

* Add test IDs for clone and remove rules buttons

* Add tests for Query builder rules manipulation

* Add changset

* Update description

.changeset/twelve-stingrays-nail.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-query-builder': minor
+---
+
+- add test ids for remove and group rules buttons

cypress/component/QueryBuilder/QueryBuilder.spec.tsx

@@ -56,6 +56,8 @@ const initialQuery = {
 const testIds = {
   runQueryButton: 'run-query-button',
   addRuleButton: 'add-rule-button',
+  cloneRuleButton: 'clone-rule-button',
+  removeRuleButton: 'remove-rule-button',
   addGroupButton: 'add-group-button',
   cloneGroupButton: 'clone-group-button',
   removeGroupButton: 'remove-group-button',
@@ -100,9 +102,18 @@ const QueryBuilderExample = ({ maxGroupDepth }: ExampleProps) => {
 const getGroupByDepth = (depth: number) =>
   cy.get(`.rule-group[data-level=${depth}]`)
 
+const getRuleByPath = (path: number[]) =>
+  cy.get(`[data-testid=rule][data-path="[${path.join(',')}]"]`)
+
+const getRuleValueEditorByPath = (path: number[]) =>
+  getRuleByPath(path).find(`[data-testid=${testIds.valueEditor}]`)
+
 const getAddGroupButtonByDepth = (depth: number) =>
   getGroupByDepth(depth).find('.rule-group-add-group')
 
+const getAddRuleButtonByDepth = (depth: number) =>
+  getGroupByDepth(depth).find(`[data-testid=${testIds.addRuleButton}]`)
+
 const getSubmitButton = () =>
   cy.get('button').contains('Confirm').closest('button')
 
@@ -260,4 +271,42 @@ describe('QueryBuilder', () => {
       getGroupByDepth(4).should('be.visible').and('exist')
     })
   })
+
+  describe('when we manipulate query builder rules', () => {
+    it('adds, clones and removes rules', () => {
+      cy.mount(<QueryBuilderExample />)
+
+      cy.getByTestId(testIds.addRuleButton).click()
+
+      getRuleByPath([0]).should('be.visible')
+
+      getRuleValueEditorByPath([0]).type('firstname')
+
+      cy.getByTestId(testIds.cloneRuleButton).click()
+
+      getRuleByPath([1]).should('be.visible')
+
+      getRuleValueEditorByPath([1]).should('have.value', 'firstname')
+
+      cy.getByTestId(testIds.removeRuleButton).eq(1).click()
+
+      getRuleByPath([1]).should('not.exist')
+    })
+
+    it('adds rules on 2 levels', () => {
+      cy.mount(<QueryBuilderExample />)
+
+      cy.getByTestId(testIds.addRuleButton).click()
+
+      getRuleByPath([0]).should('be.visible')
+
+      cy.getByTestId(testIds.addGroupButton).click()
+
+      getRuleByPath([1, 0]).should('be.visible')
+
+      getAddRuleButtonByDepth(1).click()
+
+      getRuleByPath([1, 1]).should('be.visible')
+    })
+  })
 })

packages/picasso-query-builder/src/CloneRuleButton/CloneRuleButton.tsx

@@ -7,11 +7,13 @@ export const CloneRuleButton = ({
   handleOnClick,
   className,
   disabled,
+  context: { testIds },
 }: ActionWithRulesProps) => {
   return (
     <ButtonCircular
       variant='flat'
       icon={<Copy16 />}
+      data-testid={testIds?.cloneRuleButton}
       onClick={handleOnClick}
       className={className}
       disabled={disabled}

packages/picasso-query-builder/src/RemoveRuleButton/RemoveRuleButton.tsx

@@ -7,11 +7,13 @@ export const RemoveRuleButton = ({
   handleOnClick,
   className,
   disabled,
+  context: { testIds },
 }: ActionWithRulesProps) => {
   return (
     <ButtonCircular
       variant='flat'
       icon={<Trash16 />}
+      data-testid={testIds?.removeRuleButton}
       onClick={handleOnClick}
       className={className}
       disabled={disabled}

packages/picasso-query-builder/src/types/query-builder.ts

@@ -84,6 +84,8 @@ export type ValueEditorValidationProps = {
 }
 export type TestId = {
   addRuleButton?: string
+  cloneRuleButton?: string
+  removeRuleButton?: string
   addGroupButton?: string
   cloneGroupButton?: string
   removeGroupButton?: string