From 0b2fbccc3ddd9a8eabc084caf8c8fbee962e3e12 Mon Sep 17 00:00:00 2001
From: Sarthak Chowdhary <sarthak.chow@gmail.com>
Date: Sun, 3 Nov 2019 00:13:46 +0530
Subject: [PATCH] removed act where fireevent is used

---
 .../material-ui/src/Select/Select.test.js     | 155 ++++--------------
 1 file changed, 36 insertions(+), 119 deletions(-)

diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index 25f4300475c2cc..a6a92ec988db65 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -107,21 +107,17 @@ describe('<Select />', () => {
         <MenuItem value={10}>Ten</MenuItem>
       </Select>,
     );
+
     const trigger = getByRole('button');
+    // simulating user mouse down event
 
-    // simulating user click
-    act(() => {
-      fireEvent.mouseDown(trigger);
-      trigger.click();
-    });
+    fireEvent.mouseDown(trigger);
 
     expect(handleBlur.callCount).to.equal(0);
     expect(getByRole('listbox')).to.be.ok;
 
     act(() => {
-      const options = getAllByRole('option');
-      fireEvent.mouseDown(options[0]);
-      options[0].click();
+      getAllByRole('option')[0].click();
     });
 
     expect(handleBlur.callCount).to.equal(0);
@@ -136,10 +132,9 @@ describe('<Select />', () => {
       </Select>,
       { baseElement: document.body },
     );
-    const options = getAllByRole('option');
 
-    expect(options[0]).to.have.attribute('data-value', '10');
-    expect(options[1]).to.have.attribute('data-value', '20');
+    expect(getAllByRole('option')[0]).to.have.attribute('data-value', '10');
+    expect(getAllByRole('option')[1]).to.have.attribute('data-value', '20');
   });
 
   [' ', 'ArrowUp', 'ArrowDown', 'Enter'].forEach(key => {
@@ -164,10 +159,9 @@ describe('<Select />', () => {
         <MenuItem value="">none</MenuItem>
       </Select>,
     );
-    const button = getByRole('button');
-    button.focus();
+    getByRole('button').focus();
 
-    button.blur();
+    getByRole('button').blur();
 
     expect(handleBlur.callCount).to.equal(1);
     expect(handleBlur.firstCall.returnValue).to.equal('blur-testing');
@@ -197,7 +191,7 @@ describe('<Select />', () => {
     const { getByRole } = render(<Select value="" autoFocus />);
 
     act(() => {
-      fireEvent.mouseDown(getByRole('button'));
+      getByRole('button').click();
     });
 
     // TODO not matching WAI-ARIA authoring practices. It should focus the first (or selected) item.
@@ -224,7 +218,7 @@ describe('<Select />', () => {
           <MenuItem value="2" />
         </Select>,
       );
-      fireEvent.mouseDown(getByRole('button'));
+      getByRole('button').click();
       getAllByRole('option')[1].click();
 
       expect(onChangeHandler.calledOnce).to.be.true;
@@ -243,11 +237,10 @@ describe('<Select />', () => {
         </Select>,
         { baseElement: document.body },
       );
-      const options = getAllByRole('option');
 
-      expect(options[0]).not.to.have.attribute('aria-selected', 'true');
-      expect(options[1]).to.have.attribute('aria-selected', 'true');
-      expect(options[2]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[2]).not.to.have.attribute('aria-selected', 'true');
     });
 
     it('should select the option based on the string value', () => {
@@ -259,11 +252,10 @@ describe('<Select />', () => {
         </Select>,
         { baseElement: document.body },
       );
-      const options = getAllByRole('option');
 
-      expect(options[0]).not.to.have.attribute('aria-selected', 'true');
-      expect(options[1]).to.have.attribute('aria-selected', 'true');
-      expect(options[2]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[2]).not.to.have.attribute('aria-selected', 'true');
     });
 
     it('should select only the option that matches the object', () => {
@@ -276,10 +268,9 @@ describe('<Select />', () => {
         </Select>,
         { baseElement: document.body },
       );
-      const options = getAllByRole('option');
 
-      expect(options[0]).to.have.attribute('aria-selected', 'true');
-      expect(options[1]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).not.to.have.attribute('aria-selected', 'true');
     });
 
     it('should be able to use an object', () => {
@@ -408,74 +399,6 @@ describe('<Select />', () => {
 
       expect(getAllByRole('option')[1]).to.have.attribute('aria-selected', 'true');
     });
-
-    it('it will fallback to its content for the accessible name when it has no name', () => {
-      const { getByRole } = render(<Select value="" />);
-
-      expect(getByRole('button')).to.have.attribute('aria-labelledby', ' ');
-    });
-
-    it('is labelled by itself when it has a name', () => {
-      const { getByRole } = render(<Select name="select" value="" />);
-
-      expect(getByRole('button')).to.have.attribute(
-        'aria-labelledby',
-        ` ${getByRole('button').getAttribute('id')}`,
-      );
-    });
-
-    it('is labelled by itself when it has an id which is preferred over name', () => {
-      const { getAllByRole } = render(
-        <React.Fragment>
-          <span id="select-1-label">Chose first option:</span>
-          <Select id="select-1" labelId="select-1-label" name="select" value="" />
-          <span id="select-2-label">Chose second option:</span>
-          <Select id="select-2" labelId="select-2-label" name="select" value="" />
-        </React.Fragment>,
-      );
-
-      const triggers = getAllByRole('button');
-
-      expect(triggers[0]).to.have.attribute(
-        'aria-labelledby',
-        `select-1-label ${triggers[0].getAttribute('id')}`,
-      );
-      expect(triggers[1]).to.have.attribute(
-        'aria-labelledby',
-        `select-2-label ${triggers[1].getAttribute('id')}`,
-      );
-    });
-
-    it('can be labelled by an additional element if its id is provided in `labelId`', () => {
-      const { getByRole } = render(
-        <React.Fragment>
-          <span id="select-label">Choose one:</span>
-          <Select labelId="select-label" name="select" value="" />
-        </React.Fragment>,
-      );
-
-      expect(getByRole('button')).to.have.attribute(
-        'aria-labelledby',
-        `select-label ${getByRole('button').getAttribute('id')}`,
-      );
-    });
-
-    specify('the list of options is not labelled by default', () => {
-      const { getByRole } = render(<Select open value="" />);
-
-      expect(getByRole('listbox')).not.to.have.attribute('aria-labelledby');
-    });
-
-    specify('the list of options can be labelled by providing `labelId`', () => {
-      const { getByRole } = render(
-        <React.Fragment>
-          <span id="select-label">Choose one:</span>
-          <Select labelId="select-label" open value="" />
-        </React.Fragment>,
-      );
-
-      expect(getByRole('listbox')).to.have.attribute('aria-labelledby', 'select-label');
-    });
   });
 
   describe('prop: readOnly', () => {
@@ -514,7 +437,7 @@ describe('<Select />', () => {
         </Select>,
       );
 
-      fireEvent.mouseDown(getByRole('button'));
+      fireEvent.click(getByRole('button'));
       act(() => {
         clock.tick(99);
       });
@@ -613,7 +536,7 @@ describe('<Select />', () => {
       const { getByRole, queryByRole } = render(<ControlledWrapper />);
 
       act(() => {
-        fireEvent.mouseDown(getByRole('button'));
+        getByRole('button').click();
       });
 
       expect(getByRole('listbox')).to.be.ok;
@@ -651,11 +574,10 @@ describe('<Select />', () => {
           <MenuItem>Only</MenuItem>
         </Select>,
       );
-      const button = getByRole('button');
-      stub(button, 'clientWidth').get(() => 14);
+      stub(getByRole('button'), 'clientWidth').get(() => 14);
 
       act(() => {
-        fireEvent.mouseDown(button);
+        getByRole('button').click();
       });
 
       expect(getByTestId('paper').style).to.have.property('minWidth', '14px');
@@ -667,11 +589,10 @@ describe('<Select />', () => {
           <MenuItem>Only</MenuItem>
         </Select>,
       );
-      const button = getByRole('button');
-      stub(button, 'clientWidth').get(() => 14);
+      stub(getByRole('button'), 'clientWidth').get(() => 14);
 
       act(() => {
-        fireEvent.mouseDown(button);
+        getByRole('button').click();
       });
 
       expect(getByTestId('paper').style).to.have.property('minWidth', '');
@@ -687,12 +608,11 @@ describe('<Select />', () => {
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>,
       );
-      const options = getAllByRole('option');
 
       expect(container.querySelector('input')).to.have.property('value', '10,30');
-      expect(options[0]).to.have.attribute('aria-selected', 'true');
-      expect(options[1]).not.to.have.attribute('aria-selected', 'true');
-      expect(options[2]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[2]).to.have.attribute('aria-selected', 'true');
     });
 
     it('selects value based on their stringified equality when theyre not objects', () => {
@@ -703,11 +623,10 @@ describe('<Select />', () => {
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>,
       );
-      const options = getAllByRole('option');
 
-      expect(options[0]).to.have.attribute('aria-selected', 'true');
-      expect(options[1]).to.have.attribute('aria-selected', 'true');
-      expect(options[2]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[2]).not.to.have.attribute('aria-selected', 'true');
     });
 
     it('selects values based on strict equlity if theyre objects', () => {
@@ -721,11 +640,10 @@ describe('<Select />', () => {
           <MenuItem value={obj3}>ID: 3</MenuItem>
         </Select>,
       );
-      const options = getAllByRole('option');
 
-      expect(options[0]).to.have.attribute('aria-selected', 'true');
-      expect(options[1]).not.to.have.attribute('aria-selected', 'true');
-      expect(options[2]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[0]).to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[1]).not.to.have.attribute('aria-selected', 'true');
+      expect(getAllByRole('option')[2]).to.have.attribute('aria-selected', 'true');
     });
 
     describe('errors', () => {
@@ -794,15 +712,14 @@ describe('<Select />', () => {
         });
         const { getByRole, getAllByRole } = render(<ControlledSelectInput onChange={onChange} />);
 
-        fireEvent.mouseDown(getByRole('button'));
-        const options = getAllByRole('option');
-        fireEvent.click(options[2]);
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getAllByRole('option')[2]);
 
         expect(onChange.callCount).to.equal(1);
         expect(onChange.firstCall.returnValue).to.deep.equal({ name: 'age', value: [30] });
 
         act(() => {
-          options[0].click();
+          getAllByRole('option')[0].click();
         });
 
         expect(onChange.callCount).to.equal(2);