Skip to content

Commit

Permalink
fix test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Nov 15, 2020
1 parent 236f5c7 commit 136f8d8
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 26 deletions.
1 change: 0 additions & 1 deletion packages/material-ui/src/Tab/Tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export const styles = (theme) => ({
root: {
...theme.typography.button,
maxWidth: 264,
minWidth: 72,
position: 'relative',
minHeight: 48,
flexShrink: 0,
Expand Down
50 changes: 25 additions & 25 deletions packages/material-ui/src/Tabs/Tabs.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,9 +348,9 @@ describe('<Tabs />', () => {
let clock;
const tabs = (
<Tabs value={0} style={{ width: 200 }} variant="scrollable">
<Tab />
<Tab />
<Tab />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
</Tabs>
);

Expand All @@ -376,7 +376,7 @@ describe('<Tabs />', () => {
const { container, setProps, getByRole } = render(tabs);
const tablistContainer = getByRole('tablist').parentElement;

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
tablistContainer.scrollLeft = 10;
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
Expand Down Expand Up @@ -475,7 +475,7 @@ describe('<Tabs />', () => {

const tablistContainer = getByRole('tablist').parentElement;

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
tablistContainer.scrollLeft = 10;
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
Expand Down Expand Up @@ -518,14 +518,14 @@ describe('<Tabs />', () => {
it('should set only left scroll button state', () => {
const { container, setProps, getByRole } = render(
<Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
<Tab />
<Tab />
<Tab />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
</Tabs>,
);
const tablistContainer = getByRole('tablist').parentElement;

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 96;

Expand All @@ -544,7 +544,7 @@ describe('<Tabs />', () => {
);
const tablistContainer = getByRole('tablist').parentElement;

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 0;

Expand All @@ -556,13 +556,13 @@ describe('<Tabs />', () => {
it('should set both left and right scroll button state', () => {
const { container, setProps, getByRole } = render(
<Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
<Tab />
<Tab />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
</Tabs>,
);
const tablistContainer = getByRole('tablist').parentElement;

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 5;

Expand All @@ -587,18 +587,18 @@ describe('<Tabs />', () => {
it('should scroll visible items', () => {
const { container, setProps, getByRole, getAllByRole } = render(
<Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
<Tab />
<Tab />
<Tab />
<Tab style={{ width: 100 }} />
<Tab style={{ width: 50 }} />
<Tab style={{ width: 100 }} />
</Tabs>,
);
const tablistContainer = getByRole('tablist').parentElement;
const tabs = getAllByRole('tab');
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tabs[0], 'clientWidth', { value: 60 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
Object.defineProperty(tabs[0], 'clientWidth', { value: 100 });
Object.defineProperty(tabs[1], 'clientWidth', { value: 50 });
Object.defineProperty(tabs[2], 'clientWidth', { value: 60 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
Object.defineProperty(tabs[2], 'clientWidth', { value: 100 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 100 + 50 + 100 });
tablistContainer.scrollLeft = 20;
setProps();
clock.tick(1000);
Expand All @@ -612,7 +612,7 @@ describe('<Tabs />', () => {
tablistContainer.scrollLeft = 0;
fireEvent.click(findScrollButton(container, 'right'));
clock.tick(1000);
expect(tablistContainer.scrollLeft).equal(60 + 50);
expect(tablistContainer.scrollLeft).equal(100);
});
});

Expand All @@ -634,16 +634,16 @@ describe('<Tabs />', () => {

const { setProps, getByRole } = render(
<Tabs value={0} variant="scrollable" style={{ width: 200 }}>
<Tab />
<Tab />
<Tab />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
<Tab style={{ width: 120 }} />
</Tabs>,
);
const tablist = getByRole('tablist');
const tablistContainer = tablist.parentElement;
const tab = tablist.children[0];

Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 20;
tablistContainer.getBoundingClientRect = () => ({
Expand Down

0 comments on commit 136f8d8

Please sign in to comment.