test: remove document query selector

shervinchen · Apr 23, 2024 · 1be11bc · 1be11bc
1 parent 046d173
commit 1be11bc
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 45 deletions.
diff --git a/packages/Popover/Popover.tsx b/packages/Popover/Popover.tsx
@@ -48,7 +48,13 @@ const Popover: FC<PropsWithChildren<PopoverProps>> = ({
 
   return (
     <>
-      <div ref={ref} className={classes} onClick={clickHandler} {...restProps}>
+      <div
+        data-testid="popoverTarget"
+        ref={ref}
+        className={classes}
+        onClick={clickHandler}
+        {...restProps}
+      >
         {children}
       </div>
       <Popup

diff --git a/packages/Popover/__tests__/Popover.test.tsx b/packages/Popover/__tests__/Popover.test.tsx
@@ -23,29 +23,33 @@ describe('Popover', () => {
 
   test('should show popover when click target', async () => {
     const user = userEvent.setup();
-    render(<Popover content="I am a popover">Click me</Popover>);
-    const element = document.querySelector('.raw-popover');
-    await user.click(element);
+    const { getByTestId } = render(
+      <Popover content="I am a popover">Click me</Popover>
+    );
+    await user.click(getByTestId('popoverTarget'));
     expect(screen.getByTestId('popoverContent')).toBeInTheDocument();
   });
 
   test('should switch whether or not popover is visible when click target', async () => {
     const user = userEvent.setup();
-    render(<Popover content="I am a popover">Click me</Popover>);
-    const element = document.querySelector('.raw-popover');
-    await user.click(element);
+    const { getByTestId } = render(
+      <Popover content="I am a popover">Click me</Popover>
+    );
+    const target = getByTestId('popoverTarget');
+    await user.click(target);
     expect(screen.getByTestId('popoverContent')).toBeInTheDocument();
-    await user.click(element);
+    await user.click(target);
     await waitFor(() => {
       expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument();
     });
   });
 
   test('should hide popover when click outside', async () => {
     const user = userEvent.setup();
-    render(<Popover content="I am a popover">Click me</Popover>);
-    const element = document.querySelector('.raw-popover');
-    await user.click(element);
+    const { getByTestId } = render(
+      <Popover content="I am a popover">Click me</Popover>
+    );
+    await user.click(getByTestId('popoverTarget'));
     expect(screen.getByTestId('popoverContent')).toBeInTheDocument();
     act(() => {
       document.dispatchEvent(new MouseEvent('click'));
@@ -57,13 +61,12 @@ describe('Popover', () => {
 
   test('should support disabled popover', async () => {
     const user = userEvent.setup();
-    render(
+    const { getByTestId } = render(
       <Popover content="I am a popover" disabled>
         Click me
       </Popover>
     );
-    const element = document.querySelector('.raw-popover');
-    await user.click(element);
+    await user.click(getByTestId('popoverTarget'));
     await waitFor(() => {
       expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument();
     });
@@ -90,11 +93,10 @@ describe('Popover', () => {
       );
     };
 
-    render(
+    const { getByTestId } = render(
       <Component content="I am a controlled popover" onChange={onChange} />
     );
-    const element = document.querySelector('.raw-popover');
-    await user.click(element);
+    await user.click(getByTestId('popoverTarget'));
     expect(screen.getByTestId('popoverContent')).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledTimes(1);
   });

diff --git a/packages/Popover/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/Popover/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Popover should match the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="jsx-3851428059 raw-popover"
+    data-testid="popoverTarget"
   >
     Click me
   </div>

diff --git a/packages/Select/Select.tsx b/packages/Select/Select.tsx
@@ -227,6 +227,7 @@ const Select = forwardRef<SelectRef, PropsWithChildren<SelectProps>>(
     return (
       <SelectContext.Provider value={selectConfig}>
         <div
+          data-testid="selectContainer"
           className={selectClasses}
           ref={selectRef}
           onClick={clickHandler}

diff --git a/packages/Select/__tests__/Select.test.tsx b/packages/Select/__tests__/Select.test.tsx
@@ -83,15 +83,13 @@ describe('Select', () => {
   });
 
   test('should support uncontrolled value', () => {
-    render(
+    const { getByTestId } = render(
       <Select defaultValue="1">
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>
       </Select>
     );
-    expect(document.querySelector('.raw-select')?.innerHTML).toContain(
-      'Option 1'
-    );
+    expect(getByTestId('selectContainer').innerHTML).toContain('Option 1');
   });
 
   test('should support controlled value', async () => {
@@ -114,17 +112,17 @@ describe('Select', () => {
         </Select>
       );
     };
-    const { container } = render(<Component onChange={onChange} />);
+    const { container, getByTestId } = render(
+      <Component onChange={onChange} />
+    );
     const select = container.firstChild as Element;
     await user.click(select);
     await user.click(document.querySelectorAll('.raw-select-option')[0]);
-    expect(document.querySelector('.raw-select')?.innerHTML).toContain(
-      'Option 1'
-    );
+    expect(getByTestId('selectContainer').innerHTML).toContain('Option 1');
   });
 
   test('should support multiple value', () => {
-    render(
+    const { getByTestId } = render(
       <Select multiple defaultValue={['react', 'vue']}>
         {optionsData.map((item) => (
           <Select.Option value={item.value} key={item.value}>
@@ -133,8 +131,8 @@ describe('Select', () => {
         ))}
       </Select>
     );
-    expect(document.querySelector('.raw-select')?.innerHTML).toContain('React');
-    expect(document.querySelector('.raw-select')?.innerHTML).toContain('Vue');
+    expect(getByTestId('selectContainer').innerHTML).toContain('React');
+    expect(getByTestId('selectContainer').innerHTML).toContain('Vue');
   });
 
   test('should support select disabled', async () => {
@@ -152,7 +150,7 @@ describe('Select', () => {
 
   test('should support option disabled', async () => {
     const user = userEvent.setup();
-    const { container } = render(
+    const { container, getByTestId } = render(
       <Select>
         <Select.Option value="1" disabled>
           Option 1
@@ -163,12 +161,8 @@ describe('Select', () => {
     const select = container.firstChild as Element;
     await user.click(select);
     await user.click(document.querySelectorAll('.raw-select-option')[0]);
-    expect(document.querySelector('.raw-select')?.innerHTML).not.toContain(
-      'Option 1'
-    );
+    expect(getByTestId('selectContainer').innerHTML).not.toContain('Option 1');
     await user.click(document.querySelectorAll('.raw-select-option')[1]);
-    expect(document.querySelector('.raw-select')?.innerHTML).toContain(
-      'Option 2'
-    );
+    expect(getByTestId('selectContainer').innerHTML).toContain('Option 2');
   });
 });
diff --git a/packages/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Select should match the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="jsx-1324625606 raw-select"
+    data-testid="selectContainer"
   >
     <div
       class="jsx-1324625606 raw-select-inner"

diff --git a/packages/Tooltip/Tooltip.tsx b/packages/Tooltip/Tooltip.tsx
@@ -32,6 +32,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   return (
     <>
       <div
+        data-testid="tooltipTarget"
         ref={ref}
         className={classes}
         onMouseEnter={() => mouseHandler(true)}

diff --git a/packages/Tooltip/__tests__/Tooltip.test.tsx b/packages/Tooltip/__tests__/Tooltip.test.tsx
@@ -22,34 +22,36 @@ describe('Tooltip', () => {
 
   test('should show tooltip when mouse over target', async () => {
     const user = userEvent.setup();
-    render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
-    const element = document.querySelector('.raw-tooltip');
-    await user.hover(element);
+    const { getByTestId } = render(
+      <Tooltip content="I am a tooltip">Hover me</Tooltip>
+    );
+    await user.hover(getByTestId('tooltipTarget'));
     expect(screen.getByText('I am a tooltip')).toBeInTheDocument();
   });
 
   test('should hide tooltip when mouse out target', async () => {
     const user = userEvent.setup();
-    render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
-    const element = document.querySelector('.raw-tooltip');
-    await user.hover(element);
+    const { getByTestId } = render(
+      <Tooltip content="I am a tooltip">Hover me</Tooltip>
+    );
+    const target = getByTestId('tooltipTarget');
+    await user.hover(target);
     const tooltipContent = screen.getByTestId('tooltipContent');
     expect(tooltipContent).toBeInTheDocument();
-    await user.unhover(element);
+    await user.unhover(target);
     await waitFor(() => {
       expect(tooltipContent).not.toBeInTheDocument();
     });
   });
 
   test('should support disabled tooltip', async () => {
     const user = userEvent.setup();
-    render(
+    const { getByTestId } = render(
       <Tooltip content="I am a tooltip" disabled>
         Hover me
       </Tooltip>
     );
-    const element = document.querySelector('.raw-tooltip');
-    await user.hover(element);
+    await user.hover(getByTestId('tooltipTarget'));
     await waitFor(() => {
       expect(screen.queryByTestId('tooltipContent')).not.toBeInTheDocument();
     });

diff --git a/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Tooltip should match the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="jsx-1329010130 raw-tooltip"
+    data-testid="tooltipTarget"
   >
     Hover me
   </div>