Skip to content

Commit

Permalink
removed act where fireevent is used
Browse files Browse the repository at this point in the history
  • Loading branch information
@SarthakC @oliviertassinari
SarthakC authored and oliviertassinari committed Nov 21, 2019
1 parent d5c2db0 commit 0b2fbcc
Showing 1 changed file with 36 additions and 119 deletions.
155 changes: 36 additions & 119 deletions packages/material-ui/src/Select/Select.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 => {
Expand All @@ -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');
Expand Down Expand Up @@ -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.
Expand All @@ -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;
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -514,7 +437,7 @@ describe('<Select />', () => {
</Select>,
);

fireEvent.mouseDown(getByRole('button'));
fireEvent.click(getByRole('button'));
act(() => {
clock.tick(99);
});
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
Expand All @@ -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', '');
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 0b2fbcc

Please sign in to comment.