[new feature] Tab: add name prop (#3762)

This commit is contained in:
neverland
2019-07-05 14:14:20 +08:00
committed by GitHub
parent 2389ac06ba
commit b802047e24
12 changed files with 243 additions and 84 deletions
@@ -29,6 +29,29 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 2</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="">
内容 2
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
</div>
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
@@ -136,6 +136,28 @@ exports[`lazy render 2`] = `
</div>
`;
exports[`name prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`render nav-left & nav-right slot 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
+35
View File
@@ -145,3 +145,38 @@ test('border props', async () => {
expect(wrapper).toMatchSnapshot();
});
test('name prop', async () => {
const onClick = jest.fn();
const onChange = jest.fn();
const onDisabled = jest.fn();
const wrapper = mount({
template: `
<van-tabs @click="onClick" @disabled="onDisabled" @change="onChange">
<van-tab title="title1" name="a">Text</van-tab>
<van-tab title="title2" name="b">Text</van-tab>
<van-tab title="title3" name="c" disabled>Text</van-tab>
</van-tabs>
`,
methods: {
onClick,
onChange,
onDisabled
}
});
await later();
expect(wrapper).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
tabs.at(1).trigger('click');
expect(onClick).toHaveBeenCalledWith('b', 'title2');
expect(onChange).toHaveBeenCalledWith('b', 'title2');
expect(onChange).toHaveBeenCalledTimes(1);
tabs.at(2).trigger('click');
expect(onDisabled).toHaveBeenCalledWith('c', 'title3');
expect(onChange).toHaveBeenCalledTimes(1);
});