group related tests

Author: oliviertassinari

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -40,10 +40,10 @@ export const styles = theme => ({
   inputRoot: {
     flexWrap: 'wrap',
     '$hasPopupIcon &, $hasClearIcon &': {
-      paddingRight: 31,
+      paddingRight: 26 + 4,
     },
     '$hasPopupIcon$hasClearIcon &': {
-      paddingRight: 62,
+      paddingRight: 52 + 4,
     },
     '& $input': {
       width: 0,
@@ -69,10 +69,10 @@ export const styles = theme => ({
     '&[class*="MuiOutlinedInput-root"]': {
       padding: 9,
       '$hasPopupIcon &, $hasClearIcon &': {
-        paddingRight: 31,
+        paddingRight: 26 + 4 + 9,
       },
       '$hasPopupIcon$hasClearIcon &': {
-        paddingRight: 62,
+        paddingRight: 52 + 4 + 9,
       },
       '& $input': {
         padding: '9.5px 4px',
@@ -81,29 +81,29 @@ export const styles = theme => ({
         paddingLeft: 6,
       },
       '& $endAdornment': {
-        right: 7,
+        right: 9,
       },
     },
     '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
       padding: 6,
-      '$hasPopupIcon &, $hasClearIcon &': {
-        paddingRight: 31,
-      },
-      '$hasPopupIcon$hasClearIcon &': {
-        paddingRight: 62,
-      },
       '& $input': {
         padding: '4.5px 4px',
       },
     },
     '&[class*="MuiFilledInput-root"]': {
       paddingTop: 19,
       paddingLeft: 8,
+      '$hasPopupIcon &, $hasClearIcon &': {
+        paddingRight: 26 + 4 + 9,
+      },
+      '$hasPopupIcon$hasClearIcon &': {
+        paddingRight: 52 + 4 + 9,
+      },
       '& $input': {
         padding: '9px 4px',
       },
       '& $endAdornment': {
-        right: 7,
+        right: 9,
       },
     },
     '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -8,7 +8,7 @@ import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import Autocomplete from './Autocomplete';
 import TextField from '@material-ui/core/TextField';
 
-describe('<Autocomplete />', () => {
+describe.only('<Autocomplete />', () => {
   let mount;
   let classes;
   const render = createClientRender();
@@ -40,22 +40,12 @@ describe('<Autocomplete />', () => {
       expect(input.value).to.equal('');
     });
 
-    it('should apply the hasClearIcon class', () => {
+    it('should apply the icon classes', () => {
       const { container } = render(
         <Autocomplete renderInput={params => <TextField {...params} />} />,
       );
-      expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
-        classes.hasClearIcon,
-      );
-    });
-
-    it('should apply the hasPopupIcon class', () => {
-      const { container } = render(
-        <Autocomplete renderInput={params => <TextField {...params} />} />,
-      );
-      expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
-        classes.hasPopupIcon,
-      );
+      expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasClearIcon);
+      expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
   });
 
@@ -574,61 +564,23 @@ describe('<Autocomplete />', () => {
             renderInput={params => <TextField {...params} />}
           />,
         );
-        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
-          classes.hasClearIcon,
-        );
-      });
-
-      it('should still apply the hasPopupIcon class', () => {
-        const { container } = render(
-          <Autocomplete
-            disabled
-            options={['one', 'two', 'three']}
-            renderInput={params => <TextField {...params} />}
-          />,
-        );
-        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
-          classes.hasPopupIcon,
-        );
+        expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
+        expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
       });
     });
 
     describe('prop: disableClearable', () => {
       it('should not render the clear button', () => {
-        const { queryByTitle } = render(
+        const { queryByTitle, container } = render(
           <Autocomplete
             disableClearable
             options={['one', 'two', 'three']}
             renderInput={params => <TextField {...params} />}
           />,
         );
         expect(queryByTitle('Clear')).to.be.null;
-      });
-
-      it('should still apply the hasPopupIcon class', () => {
-        const { container } = render(
-          <Autocomplete
-            disableClearable
-            options={['one', 'two', 'three']}
-            renderInput={params => <TextField {...params} />}
-          />,
-        );
-        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class(
-          classes.hasPopupIcon,
-        );
-      });
-
-      it('should not apply the hasClearIcon class', () => {
-        const { container } = render(
-          <Autocomplete
-            disableClearable
-            options={['one', 'two', 'three']}
-            renderInput={params => <TextField {...params} />}
-          />,
-        );
-        expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class(
-          classes.hasClearIcon,
-        );
+        expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
+        expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
       });
     });
   });
@@ -918,21 +870,6 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(document.activeElement, { key: 'Enter' });
       expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3);
     });
-
-    it('should not apply hasPopupIcon class', () => {
-      const handleChange = spy();
-      const options = [{ name: 'foo' }];
-      const { container } = render(
-        <Autocomplete
-          freeSolo
-          onChange={handleChange}
-          options={options}
-          getOptionLabel={option => option.name}
-          renderInput={params => <TextField {...params} autoFocus />}
-        />,
-      );
-      expect(container).not.to.have.class(classes.hasPopupIcon);
-    });
   });
 
   describe('prop: onInputChange', () => {