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() + + 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() + + 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 ( } + 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 ( } + 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