From b7400dba11baa869ec1b6801931aa77b4dbeabd5 Mon Sep 17 00:00:00 2001
From: toptalwadiibasmi <108020813+toptalwadiibasmi@users.noreply.github.com>
Date: Thu, 22 Aug 2024 15:25:53 +0100
Subject: [PATCH] [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           |  5 ++
 .../QueryBuilder/QueryBuilder.spec.tsx        | 49 +++++++++++++++++++
 .../src/CloneRuleButton/CloneRuleButton.tsx   |  2 +
 .../src/RemoveRuleButton/RemoveRuleButton.tsx |  2 +
 .../src/types/query-builder.ts                |  2 +
 5 files changed, 60 insertions(+)
 create mode 100644 .changeset/twelve-stingrays-nail.md

diff --git a/.changeset/twelve-stingrays-nail.md b/.changeset/twelve-stingrays-nail.md
new file mode 100644
index 0000000000..57ebc9d117
--- /dev/null
+++ b/.changeset/twelve-stingrays-nail.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-query-builder': minor
+---
+
+- add test ids for remove and group rules buttons
diff --git a/cypress/component/QueryBuilder/QueryBuilder.spec.tsx b/cypress/component/QueryBuilder/QueryBuilder.spec.tsx
index 6295b4c6d3..9a6b82d4f7 100644
--- a/cypress/component/QueryBuilder/QueryBuilder.spec.tsx
+++ b/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')
+    })
+  })
 })
diff --git a/packages/picasso-query-builder/src/CloneRuleButton/CloneRuleButton.tsx b/packages/picasso-query-builder/src/CloneRuleButton/CloneRuleButton.tsx
index 994f607b47..27d555e24f 100644
--- a/packages/picasso-query-builder/src/CloneRuleButton/CloneRuleButton.tsx
+++ b/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}
diff --git a/packages/picasso-query-builder/src/RemoveRuleButton/RemoveRuleButton.tsx b/packages/picasso-query-builder/src/RemoveRuleButton/RemoveRuleButton.tsx
index 580bc2b2da..6c9a425664 100644
--- a/packages/picasso-query-builder/src/RemoveRuleButton/RemoveRuleButton.tsx
+++ b/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}
diff --git a/packages/picasso-query-builder/src/types/query-builder.ts b/packages/picasso-query-builder/src/types/query-builder.ts
index bd73e111ec..c1be7bd210 100644
--- a/packages/picasso-query-builder/src/types/query-builder.ts
+++ b/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