Skip to content

Commit

Permalink
rename tablist -> tablistContainer
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Jul 17, 2019
1 parent 6d10ea6 commit 8d02f31
Showing 1 changed file with 49 additions and 47 deletions.
96 changes: 49 additions & 47 deletions packages/material-ui/src/Tabs/Tabs.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,12 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;
const tab = getByRole('tablist').children[1];

Object.defineProperty(tablist, 'clientWidth', { value: 100 });
Object.defineProperty(tablist, 'scrollWidth', { value: 100 });
tablist.getBoundingClientRect = () => ({
Object.defineProperty(tablistContainer, 'clientWidth', { value: 100 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 100 });
tablistContainer.getBoundingClientRect = () => ({
left: 0,
right: 100,
});
Expand Down Expand Up @@ -299,12 +299,12 @@ describe('<Tabs />', () => {

it('should response to scroll events', () => {
const { container, setProps, getByRole } = render(tabs);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
tablist.scrollLeft = 10;
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
Object.defineProperty(tablist, 'getBoundingClientRect', {
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
tablistContainer.scrollLeft = 10;
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
value: () => ({
left: 0,
right: 50,
Expand All @@ -314,7 +314,7 @@ describe('<Tabs />', () => {
clock.tick(1000);
expect(hasLeftScrollButton(container)).to.equal(true);
expect(hasRightScrollButton(container)).to.equal(true);
tablist.scrollLeft = 0;
tablistContainer.scrollLeft = 0;
fireEvent.scroll(container.querySelector(`.${classes.scroller}.${classes.scrollable}`));
clock.tick(166);

Expand All @@ -329,12 +329,12 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
expect(tablist.style.overflow).to.equal('hidden');
const tablistContainer = getByRole('tablist').parentNode;
expect(tablistContainer.style.overflow).to.equal('hidden');
setProps({
variant: 'scrollable',
});
expect(tablist.style.overflow).to.equal('');
expect(tablistContainer.style.overflow).to.equal('');
});
});

Expand Down Expand Up @@ -389,12 +389,12 @@ describe('<Tabs />', () => {
</Tabs>,
);

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

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
tablist.scrollLeft = 10;
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
Object.defineProperty(tablist, 'getBoundingClientRect', {
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
tablistContainer.scrollLeft = 10;
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
value: () => ({
left: 0,
right: 100,
Expand All @@ -404,7 +404,7 @@ describe('<Tabs />', () => {
clock.tick(1000);
expect(hasLeftScrollButton(container)).to.equal(true);
expect(hasRightScrollButton(container)).to.equal(true);
tablist.scrollLeft = 0;
tablistContainer.scrollLeft = 0;

window.dispatchEvent(new window.Event('resize', {}));
clock.tick(166);
Expand All @@ -427,10 +427,10 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;

Object.defineProperty(tablist, 'clientWidth', { value: 200 });
Object.defineProperty(tablist, 'scrollWidth', { value: 200 });
Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 200 });

setProps();
expect(hasLeftScrollButton(container)).to.equal(false);
Expand All @@ -451,11 +451,11 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
tablist.scrollLeft = 96;
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 96;

setProps();
expect(hasLeftScrollButton(container)).to.equal(true);
Expand All @@ -476,11 +476,11 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
tablist.scrollLeft = 0;
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 0;

setProps();
expect(hasLeftScrollButton(container)).to.equal(false);
Expand All @@ -500,11 +500,11 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
tablist.scrollLeft = 5;
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 5;

setProps();
expect(hasLeftScrollButton(container)).to.equal(true);
Expand Down Expand Up @@ -538,23 +538,25 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
Object.defineProperty(tablist, 'clientWidth', { value: 120 });
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
tablist.scrollLeft = 20;
const tablistContainer = getByRole('tablist').parentNode;
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 20;
setProps();
clock.tick(1000);
expect(hasLeftScrollButton(container)).to.equal(true);
expect(hasRightScrollButton(container)).to.equal(true);

fireEvent.click(findScrollButton(container, 'left'));
clock.tick(1000);
expect(tablist.scrollLeft).not.to.be.above(0);
expect(tablistContainer.scrollLeft).not.to.be.above(0);

tablist.scrollLeft = 0;
tablistContainer.scrollLeft = 0;
fireEvent.click(findScrollButton(container, 'right'));
clock.tick(1000);
expect(tablist.scrollLeft).not.to.be.below(tablist.scrollWidth - tablist.clientWidth);
expect(tablistContainer.scrollLeft).not.to.be.below(
tablistContainer.scrollWidth - tablistContainer.clientWidth,
);
});
});

Expand All @@ -577,13 +579,13 @@ describe('<Tabs />', () => {
<Tab />
</Tabs>,
);
const tablist = getByRole('tablist').parentNode;
const tablistContainer = getByRole('tablist').parentNode;
const tab = getByRole('tablist').children[0];

Object.defineProperty(tablist, 'clientWidth', { value: 120 });
Object.defineProperty(tablist, 'scrollWidth', { value: 216 });
tablist.scrollLeft = 20;
tablist.getBoundingClientRect = () => ({
Object.defineProperty(tablistContainer, 'clientWidth', { value: 120 });
Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
tablistContainer.scrollLeft = 20;
tablistContainer.getBoundingClientRect = () => ({
left: 0,
right: 100,
});
Expand All @@ -594,7 +596,7 @@ describe('<Tabs />', () => {
});
setProps();
clock.tick(1000);
expect(tablist.scrollLeft).to.equal(0);
expect(tablistContainer.scrollLeft).to.equal(0);
});
});

Expand Down

0 comments on commit 8d02f31

Please sign in to comment.