[tests] Replace query selectors with getByTestId

mui · Sep 17, 2020 · f948fa2 · f948fa2
1 parent 2d2b715
commit f948fa2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 31 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -386,7 +386,7 @@ describe('<Autocomplete />', () => {
     it('should remove the last option', () => {
       const handleChange = spy();
       const options = ['one', 'two'];
-      const { container } = render(
+      const { getAllByTestId } = render(
         <Autocomplete
           {...defaultProps}
           defaultValue={options}
@@ -396,7 +396,7 @@ describe('<Autocomplete />', () => {
           multiple
         />,
       );
-      fireEvent.click(container.querySelectorAll('svg[data-testid="CancelIcon"]')[1]);
+      fireEvent.click(getAllByTestId('CancelIcon')[1]);
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.deep.equal([options[0]]);
     });

diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
@@ -253,60 +253,60 @@ describe('<Chip />', () => {
 
   describe('prop: deleteIcon', () => {
     it('should render a default icon with the root, deletable, deleteIcon and deleteIconOutlinedColorSecondary classes', () => {
-      const { container, getByRole } = render(
+      const { getByRole, getByTestId } = render(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} />,
       );
 
-      const icon = container.querySelector('svg[data-testid="CancelIcon"]');
+      const icon = getByTestId('CancelIcon');
       expect(getByRole('button')).to.contain(icon);
       expect(icon).to.have.class(classes.deleteIcon);
     });
 
     it('should render a default icon with the root, deletable and deleteIcon classes', () => {
-      const { container, getByRole } = render(
+      const { getByRole, getByTestId } = render(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} />,
       );
 
-      const icon = container.querySelector('svg[data-testid="CancelIcon"]');
+      const icon = getByTestId('CancelIcon');
       expect(getByRole('button')).to.contain(icon);
       expect(icon).to.have.class(classes.deleteIcon);
     });
 
     it('should render default icon with the root, deletable and deleteIcon primary class', () => {
-      const { container } = render(
+      const { container, getByTestId } = render(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} color="primary" />,
       );
 
       const chip = container.querySelector(`.${classes.root}`);
       expect(chip).to.have.class(classes.colorPrimary);
       expect(chip).to.have.class(classes.deletable);
       expect(chip).to.have.class(classes.deletableColorPrimary);
-      const icon = chip.querySelector('svg[data-testid="CancelIcon"]');
+      const icon = getByTestId('CancelIcon');
       expect(icon).to.have.class(classes.deleteIcon);
       expect(icon).to.have.class(classes.deleteIconColorPrimary);
     });
 
     it('should render a default icon with the root, deletable, deleteIcon secondary class', () => {
-      const { container } = render(
+      const { container, getByTestId } = render(
         <Chip label="Custom delete icon Chip" onDelete={() => {}} color="secondary" />,
       );
 
       const chip = container.querySelector(`.${classes.root}`);
       expect(chip).to.have.class(classes.colorSecondary);
       expect(chip).to.have.class(classes.deletable);
       expect(chip).to.have.class(classes.deletableColorSecondary);
-      const icon = chip.querySelector('svg[data-testid="CancelIcon"]');
+      const icon = getByTestId('CancelIcon');
       expect(icon).to.have.class(classes.deleteIcon);
       expect(icon).to.have.class(classes.deleteIconColorSecondary);
     });
 
     it('accepts a custom icon', () => {
       const handleDelete = spy();
-      const { container } = render(
+      const { getByTestId } = render(
         <Chip label="Custom delete icon Chip" onDelete={handleDelete} deleteIcon={<CheckBox />} />,
       );
 
-      fireEvent.click(container.querySelector('svg[data-testid="CheckBoxIcon"]'));
+      fireEvent.click(getByTestId('CheckBoxIcon'));
 
       expect(handleDelete.callCount).to.equal(1);
     });

diff --git a/packages/material-ui/src/Radio/Radio.test.js b/packages/material-ui/src/Radio/Radio.test.js
@@ -32,18 +32,18 @@ describe('<Radio />', () => {
 
   describe('prop: unchecked', () => {
     it('should render an unchecked icon', () => {
-      const { container } = render(<Radio />);
+      const { getAllByTestId } = render(<Radio />);
       expect(
-        container.querySelectorAll('svg[data-testid="RadioButtonUncheckedIcon"]').length,
+        getAllByTestId("RadioButtonUncheckedIcon").length
       ).to.equal(1);
     });
   });
 
   describe('prop: checked', () => {
     it('should render a checked icon', () => {
-      const { container } = render(<Radio checked />);
+      const { getAllByTestId } = render(<Radio checked />);
       expect(
-        container.querySelectorAll('svg[data-testid="RadioButtonCheckedIcon"]').length,
+        getAllByTestId("RadioButtonCheckedIcon").length
       ).to.equal(1);
     });
   });

diff --git a/packages/material-ui/src/StepIcon/StepIcon.test.js b/packages/material-ui/src/StepIcon/StepIcon.test.js
@@ -21,14 +21,14 @@ describe('<StepIcon />', () => {
   }));
 
   it('renders <CheckCircle> when completed', () => {
-    const { container } = render(<StepIcon completed icon={1} />);
+    const { getAllByTestId } = render(<StepIcon completed icon={1} />);
 
-    expect(container.querySelectorAll('svg[data-testid="CheckCircleIcon"]')).to.have.length(1);
+    expect(getAllByTestId('CheckCircleIcon')).to.have.length(1);
   });
 
   it('renders <Warning> when error occurred', () => {
-    const { container } = render(<StepIcon icon={1} error />);
-    expect(container.querySelectorAll('svg[data-testid="WarningIcon"]')).to.have.length(1);
+    const { getAllByTestId } = render(<StepIcon icon={1} error />);
+    expect(getAllByTestId('WarningIcon')).to.have.length(1);
   });
 
   it('contains text "3" when position is "3"', () => {

diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js
@@ -39,21 +39,17 @@ describe('<TabScrollButton />', () => {
 
   describe('prop: direction', () => {
     it('should render with the left icon', () => {
-      const { container } = render(
+      const { getAllByTestId } = render(
         <TabScrollButton {...defaultProps} {...defaultProps} direction="left" disabled />,
       );
-      expect(
-        container.querySelectorAll('svg[data-testid="KeyboardArrowLeftIcon"]').length,
-      ).to.equal(1);
+      expect(getAllByTestId('KeyboardArrowLeftIcon').length).to.equal(1);
     });
 
     it('should render with the right icon', () => {
-      const { container } = render(
+      const { getAllByTestId } = render(
         <TabScrollButton {...defaultProps} {...defaultProps} direction="right" disabled />,
       );
-      expect(
-        container.querySelectorAll('svg[data-testid="KeyboardArrowRightIcon"]').length,
-      ).to.equal(1);
+      expect(getAllByTestId('KeyboardArrowRightIcon').length).to.equal(1);
     });
   });
 });
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js
@@ -57,9 +57,8 @@ describe('<TableSortLabel />', () => {
     });
 
     it('should accept a custom icon for the sort icon', () => {
-      const { container } = render(<TableSortLabel IconComponent={SortIcon} />);
-      const icon = container.querySelector(`svg.${classes.icon}[data-testid="SortIcon"]`);
-      expect(icon).to.not.equal(null);
+      const { getAllByTestId } = render(<TableSortLabel IconComponent={SortIcon} />);
+      expect(getAllByTestId('SortIcon')).to.not.equal(null);
     });
   });