fix: Dropdown tests (#2187)

razorpay · May 22, 2024 · 4035dd2 · 4035dd2
1 parent 14f70c9
commit 4035dd2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 42 deletions.
diff --git a/packages/blade/src/components/Dropdown/DropdownHeaderFooter.tsx b/packages/blade/src/components/Dropdown/DropdownHeaderFooter.tsx
@@ -61,7 +61,7 @@ const DropdownHeader = assignWithoutSideEffects(_DropdownHeader, {
 type DropdownFooter = Pick<BaseFooterProps, 'children' | 'testID'>;
 
 const _DropdownFooter = ({ children, testID }: DropdownFooter): React.ReactElement => {
-  const { setHasFooterAction, activeIndex, onTriggerKeydown, isOpen } = useDropdown();
+  const { setHasFooterAction, isOpen } = useDropdown();
   const footerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
@@ -73,21 +73,6 @@ const _DropdownFooter = ({ children, testID }: DropdownFooter): React.ReactEleme
     <BaseBox
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={footerRef as any}
-      {...(isReactNative()
-        ? {}
-        : {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onKeyDown: (e: any) => {
-              const nativeEvent = e.nativeEvent;
-              const shouldIgnoreDropdownKeydown =
-                (nativeEvent.key === ' ' || nativeEvent.key === 'Enter') && activeIndex < 0;
-
-              if (!shouldIgnoreDropdownKeydown) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onTriggerKeydown?.({ event: e.nativeEvent } as any);
-              }
-            },
-          })}
       {...makeAccessible({
         role: isReactNative() ? undefined : 'group',
       })}

diff --git a/packages/blade/src/components/Dropdown/__tests__/Dropdown.test.stories.tsx b/packages/blade/src/components/Dropdown/__tests__/Dropdown.test.stories.tsx
@@ -37,8 +37,8 @@ export const BasicSelectItem: StoryFn<typeof Dropdown> = (props): React.ReactEle
   return <BasicDropdown {...props} />;
 };
 
-BasicSelectItem.play = async ({ canvasElement }) => {
-  const { getByRole } = within(canvasElement);
+BasicSelectItem.play = async () => {
+  const { getByRole } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'City' });
   await userEvent.click(selectInput);
   const option = getByRole('option', { name: 'Bengaluru' });
@@ -50,8 +50,8 @@ export const MultiSelectItem: StoryFn<typeof Dropdown> = (props): React.ReactEle
   return <BasicDropdown {...props} selectionType="multiple" />;
 };
 
-MultiSelectItem.play = async ({ canvasElement }) => {
-  const { getByRole, getByLabelText, queryByLabelText } = within(canvasElement);
+MultiSelectItem.play = async () => {
+  const { getByRole, getByLabelText, queryByLabelText } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'City' });
   await userEvent.click(selectInput);
   await expect(queryByLabelText('Close Bengaluru tag')).toBeFalsy();
@@ -85,8 +85,8 @@ export const Accessibility: StoryFn<typeof Dropdown> = (props): React.ReactEleme
   );
 };
 
-Accessibility.play = async ({ canvasElement }) => {
-  const { getByRole, getByTestId } = within(canvasElement);
+Accessibility.play = async () => {
+  const { getByRole, getByTestId } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'City' });
   selectInput.focus();
   await userEvent.keyboard('{ArrowDown}');
@@ -162,8 +162,8 @@ export const FooterActions: StoryFn<typeof Dropdown> = (): React.ReactElement =>
   );
 };
 
-FooterActions.play = async ({ canvasElement }) => {
-  const { getByRole, queryByRole, getByTestId } = within(canvasElement);
+FooterActions.play = async () => {
+  const { getByRole, queryByRole, getByTestId } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Fruits' });
   await userEvent.click(selectInput);
   await waitFor(() => expect(getByRole('dialog', { name: 'Fruits' })).toBeVisible());
@@ -229,8 +229,8 @@ export const ControlledDropdownSingleSelect: StoryFn<typeof Dropdown> = (): Reac
   );
 };
 
-ControlledDropdownSingleSelect.play = async ({ canvasElement }) => {
-  const { getByRole } = within(canvasElement);
+ControlledDropdownSingleSelect.play = async () => {
+  const { getByRole } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Select City' });
 
   // external button control selection test
@@ -291,8 +291,8 @@ export const ControlledDropdownMultiSelect: StoryFn<typeof Dropdown> = (): React
   );
 };
 
-ControlledDropdownMultiSelect.play = async ({ canvasElement }) => {
-  const { getByRole, queryAllByLabelText } = within(canvasElement);
+ControlledDropdownMultiSelect.play = async () => {
+  const { getByRole, queryAllByLabelText } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Select City' });
 
   // Select 1 item programatically

diff --git a/.../blade/src/components/Input/DropdownInputTriggers/__tests__/AutoComplete.test.stories.tsx b/.../blade/src/components/Input/DropdownInputTriggers/__tests__/AutoComplete.test.stories.tsx
@@ -45,8 +45,8 @@ export const ItemSelect: StoryFn<typeof Dropdown> = (props): React.ReactElement
   return <BasicDropdown {...props} />;
 };
 
-ItemSelect.play = async ({ canvasElement }) => {
-  const { getByRole } = within(canvasElement);
+ItemSelect.play = async () => {
+  const { getByRole } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'City' });
   await userEvent.click(selectInput);
   const option = getByRole('option', { name: 'Bengaluru' });
@@ -58,8 +58,8 @@ export const ItemSort: StoryFn<typeof Dropdown> = (props): React.ReactElement =>
   return <BasicDropdown {...props} />;
 };
 
-ItemSort.play = async ({ canvasElement }) => {
-  const { getByRole, queryByRole } = within(canvasElement);
+ItemSort.play = async () => {
+  const { getByRole, queryByRole } = within(document.body);
   const autoComplete = getByRole('combobox', { name: 'City' });
   await userEvent.type(autoComplete, 'p');
   const bengaluruOption = queryByRole('option', { name: 'Bengaluru' });
@@ -74,8 +74,8 @@ export const ItemMultiSelect: StoryFn<typeof Dropdown> = (props): React.ReactEle
   return <BasicDropdown {...props} selectionType="multiple" />;
 };
 
-ItemMultiSelect.play = async ({ canvasElement }) => {
-  const { getByRole, getByLabelText, queryByLabelText } = within(canvasElement);
+ItemMultiSelect.play = async () => {
+  const { getByRole, getByLabelText, queryByLabelText } = within(document.body);
   const autoComplete = getByRole('combobox', { name: 'City' });
   await userEvent.type(autoComplete, 'b');
   await expect(queryByLabelText('Close Bengaluru tag')).toBeFalsy();
@@ -113,8 +113,8 @@ export const Accessibility: StoryFn<typeof Dropdown> = (props): React.ReactEleme
   );
 };
 
-Accessibility.play = async ({ canvasElement }) => {
-  const { getByRole, getByTestId } = within(canvasElement);
+Accessibility.play = async () => {
+  const { getByRole, getByTestId } = within(document.body);
   const autoComplete = getByRole('combobox', { name: 'City' });
   await userEvent.type(autoComplete, 'i');
 
@@ -199,8 +199,8 @@ export const ControlledDropdownSingleSelect: StoryFn<typeof Dropdown> = (): Reac
   );
 };
 
-ControlledDropdownSingleSelect.play = async ({ canvasElement }) => {
-  const { getByRole, getByTestId } = within(canvasElement);
+ControlledDropdownSingleSelect.play = async () => {
+  const { getByRole, getByTestId } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Select City' });
 
   // external button control selection test
@@ -271,8 +271,8 @@ export const ControlledDropdownMultiSelect: StoryFn<typeof Dropdown> = (): React
   );
 };
 
-ControlledDropdownMultiSelect.play = async ({ canvasElement }) => {
-  const { getByRole, queryAllByLabelText } = within(canvasElement);
+ControlledDropdownMultiSelect.play = async () => {
+  const { getByRole, queryAllByLabelText } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Select City' });
 
   // Select 1 item controlled
@@ -359,8 +359,8 @@ export const ControlledFiltering: StoryFn<typeof Dropdown> = (): React.ReactElem
   );
 };
 
-ControlledFiltering.play = async ({ canvasElement }) => {
-  const { getByRole, queryByRole } = within(canvasElement);
+ControlledFiltering.play = async () => {
+  const { getByRole, queryByRole } = within(document.body);
   const selectInput = getByRole('combobox', { name: 'Cities' });
 
   await userEvent.click(selectInput);