chore: improved data testing by ui and test id (#7428)

sanity-io · Aug 30, 2024 · deca138 · deca138
1 parent 9da634e
commit deca138
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/sanity/src/ui-components/dialog/Dialog.tsx b/packages/sanity/src/ui-components/dialog/Dialog.tsx
@@ -75,6 +75,7 @@ export const Dialog = forwardRef(function Dialog(
                 text={t('common.dialog.cancel-button.text')}
                 tone="default"
                 onClick={props.onClose}
+                data-testid="cancel-button"
                 {...footer.cancelButton}
               />
             )}
@@ -84,6 +85,7 @@ export const Dialog = forwardRef(function Dialog(
                 padding={2}
                 text={t('common.dialog.confirm-button.text')}
                 tone="critical"
+                data-testid="confirm-button"
                 {...footer.confirmButton}
               />
             )}

diff --git a/packages/sanity/test/setup/customQueries.ts b/packages/sanity/test/setup/customQueries.ts
@@ -0,0 +1,18 @@
+import {buildQueries, type Matcher, type MatcherOptions, queryHelpers} from '@testing-library/react'
+
+const queryAllByDataUi = (container: HTMLElement, id: Matcher, options?: MatcherOptions) => {
+  return queryHelpers.queryAllByAttribute('data-ui', container, id, options)
+}
+
+const getMultipleError = (c: any, dataUiValue: string) =>
+  `Found multiple elements with the data-ui attribute of: ${dataUiValue}`
+const getMissingError = (c: any, dataUiValue: string) =>
+  `Unable to find an element with the data-ui attribute of: ${dataUiValue}`
+
+const [queryByDataUi, getAllByDataUi, getByDataUi, findAllByDataUi, findByDataUi] = buildQueries(
+  queryAllByDataUi,
+  getMultipleError,
+  getMissingError,
+)
+
+export {findAllByDataUi, findByDataUi, getAllByDataUi, getByDataUi, queryAllByDataUi, queryByDataUi}