test(Loading): remove all container query

shervinchen · May 4, 2024 · 41202da · 41202da
1 parent 4f14eee
commit 41202da
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 31 deletions.
diff --git a/packages/Loading/Loading.tsx b/packages/Loading/Loading.tsx
@@ -15,7 +15,7 @@ const DotLoading: FC<PropsWithChildren<Omit<LoadingProps, 'type'>>> = (
   const classes = classNames('raw-dot-loading', className, resolveClassName);
 
   return (
-    <div className={classes} {...restProps}>
+    <div data-testid="dotLoading" className={classes} {...restProps}>
       <span className="raw-dot-loading-inner">
         <i />
         <i />
@@ -38,7 +38,7 @@ const SpinLoading: FC<PropsWithChildren<Omit<LoadingProps, 'type'>>> = (
   const classes = classNames('raw-spin-loading', className, resolveClassName);
 
   return (
-    <div className={classes} {...restProps}>
+    <div data-testid="spinLoading" className={classes} {...restProps}>
       <div className="raw-spin-loading-wrapper">
         <div className="raw-spin-loading-inner">
           {[...new Array<number>(12)].map((_, index) => (

diff --git a/packages/Loading/__tests__/Loading.test.tsx b/packages/Loading/__tests__/Loading.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Loading from '..';
 import { LoadingType } from '../Loading.types';
 
@@ -10,44 +10,26 @@ describe('Loading', () => {
   });
 
   test('should support custom class name', () => {
-    const { container } = render(<Loading className="custom-loading" />);
-    expect(container.firstChild).toHaveClass('custom-loading');
+    render(<Loading className="custom-loading" />);
+    expect(screen.getByTestId('dotLoading')).toHaveClass('custom-loading');
   });
 
   ['dot', 'spin'].forEach((item: LoadingType) => {
     test(`should render ${item} type`, () => {
-      const { container } = render(<Loading type={item} />);
-      expect(container.firstChild).toHaveClass(`raw-${item}-loading`);
+      render(<Loading type={item} />);
+      expect(screen.getByTestId(`${item}Loading`)).toHaveClass(
+        `raw-${item}-loading`
+      );
     });
   });
 
   test('should render text with dot type', () => {
-    const { container } = render(<Loading>Loading</Loading>);
-    expect(container.querySelector('.raw-dot-loading-text')).toBeTruthy();
+    render(<Loading>Loading</Loading>);
+    expect(screen.getByText('Loading')).toBeTruthy();
   });
 
   test('should render text with spin type', () => {
-    const { container } = render(<Loading type="spin">Loading</Loading>);
-    expect(container.querySelector('.raw-spin-loading-text')).toBeTruthy();
-  });
-
-  test('should support custom size', () => {
-    const { container } = render(<Loading size={6} />);
-    const loadingDots = container.querySelectorAll(
-      '.raw-dot-loading-inner > i'
-    );
-    loadingDots.forEach((loadingDot) => {
-      expect(getComputedStyle(loadingDot).width).toBe('6px');
-    });
-  });
-
-  test('should support custom color', () => {
-    const { container } = render(<Loading color="rgb(0, 0, 0)" />);
-    const loadingDots = container.querySelectorAll(
-      '.raw-dot-loading-inner > i'
-    );
-    loadingDots.forEach((loadingDot) => {
-      expect(getComputedStyle(loadingDot).backgroundColor).toBe('rgb(0, 0, 0)');
-    });
+    render(<Loading type="spin">Loading</Loading>);
+    expect(screen.getByText('Loading')).toBeTruthy();
   });
 });
diff --git a/packages/Loading/__tests__/__snapshots__/Loading.test.tsx.snap b/packages/Loading/__tests__/__snapshots__/Loading.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Loading should match the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="raw-dot-loading jsx-2553539443"
+    data-testid="dotLoading"
   >
     <span
       class="raw-dot-loading-inner"