test: follow mike request - replace data-testid for querySelector by …

…classes on files SideBarButtonInfo.jsx and SideBarButton.jsx
Codeminer42 · Sep 30, 2024 · 33b3164 · 33b3164
1 parent a80f6e3
commit 33b3164
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/app/assets/javascripts/components/projects/SideBar/SideBarButton.jsx b/app/assets/javascripts/components/projects/SideBar/SideBarButton.jsx
@@ -17,7 +17,6 @@ const SideBarButton = ({ children, description, onClick, isVisible }) => {
       className={classes}
       onClick={onClick}
       data-id="side-bar-button"
-      data-testid="sidebar-button-container"
     >
       {showInfo && (
         <SideBarButtonInfo data-id="button-info" description={description} />

diff --git a/app/assets/javascripts/components/projects/SideBar/SideBarButtonInfo.jsx b/app/assets/javascripts/components/projects/SideBar/SideBarButtonInfo.jsx
@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const SideBarButtonInfo = ({ description }) => (
-  <span
-    data-id="project-option-info"
-    data-testid="sidebar-button-description"
-    className="SideBar__info"
-  >
+  <span data-id="project-option-info" className="SideBar__info">
     {description}
   </span>
 );

diff --git a/spec/javascripts/components/projects/side_bar/side_bar_button_info_spec.js b/spec/javascripts/components/projects/side_bar/side_bar_button_info_spec.js
@@ -11,10 +11,10 @@ describe('<SideBarButtonInfo />', () => {
 
   it('contain the description', () => {
     const description = 'description';
-    const { getByTestId } = render(
+    const { container } = render(
       <SideBarButtonInfo description={description} />
     );
-    const span = getByTestId('sidebar-button-description');
+    const span = container.querySelector('.SideBar__info');
 
     expect(span.innerHTML).toEqual(description);
   });

diff --git a/spec/javascripts/components/projects/side_bar/side_bar_button_spec.js b/spec/javascripts/components/projects/side_bar/side_bar_button_spec.js
@@ -22,9 +22,11 @@ describe('<SideBarButton />', () => {
 
   it('render children', () => {
     const children = 'I am children!';
-    const { getByTestId } = renderComponent({ children });
+    const { container } = renderComponent({ children });
 
-    expect(getByTestId('sidebar-button-container').innerHTML).toEqual(children);
+    expect(container.querySelector('.SideBar__link').innerHTML).toEqual(
+      children
+    );
   });
 
   it('does not render <SideBarButtonInfo />', () => {
@@ -36,38 +38,38 @@ describe('<SideBarButton />', () => {
   describe('when click in <SideBarButton />', () => {
     it('call onClick', () => {
       const onClick = vi.fn();
-      const { getByTestId } = renderComponent({ onClick });
+      const { container } = renderComponent({ onClick });
 
-      const button = getByTestId('sidebar-button-container');
+      const button = container.querySelector('.SideBar__link');
       fireEvent.click(button);
       expect(onClick).toHaveBeenCalled();
     });
   });
 
   describe('when mouse over', () => {
     it('renders <SideBarButtonInfo />', async () => {
-      const { getByTestId, rerender } = renderComponent();
+      const { container } = renderComponent();
 
-      const button = getByTestId('sidebar-button-container');
+      const button = container.querySelector('.SideBar__link');
       fireEvent.mouseOver(button);
 
-      expect(getByTestId('sidebar-button-description')).toBeInTheDocument();
+      expect(container.querySelector('.SideBar__info')).toBeInTheDocument();
     });
   });
 
   describe('when isVisible is true', () => {
     it('renders <SideBar /> with SideBar__link--is-visible class', () => {
-      const { getByTestId } = renderComponent({ isVisible: true });
-      const button = getByTestId('sidebar-button-container');
+      const { container } = renderComponent({ isVisible: true });
+      const button = container.querySelector('.SideBar__link');
 
       expect(button).toHaveClass('SideBar__link--is-visible');
     });
   });
 
   describe('when isVisible is false', () => {
     it('render <SideBar /> without SideBar__link--is-visible class', () => {
-      const { getByTestId } = renderComponent();
-      const button = getByTestId('sidebar-button-container');
+      const { container } = renderComponent();
+      const button = container.querySelector('.SideBar__link');
 
       expect(button).not.toHaveClass('SideBar__link--is-visible');
     });