Skip to content

Commit

Permalink
feat: 增加 Popover 组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@lijinke666
lijinke666 committed Nov 27, 2018
1 parent 0adc7fa commit e0442ca
Show file tree
Hide file tree
Showing 14 changed files with 653 additions and 17 deletions.
4 changes: 2 additions & 2 deletions components/calendar/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,15 +306,15 @@ exports[`<Calendar/> should render a <Calendar/> components 1`] = `
/>
</span>
<span
class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
class="cuke-calendar-item cuke-calendar-current-month"
>
27
<div
class="cuke-calendar-item-content"
/>
</span>
<span
class="cuke-calendar-item cuke-calendar-current-month"
class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
>
28
<div
Expand Down
4 changes: 2 additions & 2 deletions components/datePicker/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,12 +271,12 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
26
</span>
<span
class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
class="cuke-date-picker-item cuke-date-picker-current-month"
>
27
</span>
<span
class="cuke-date-picker-item cuke-date-picker-current-month"
class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
>
28
</span>
Expand Down
1 change: 1 addition & 0 deletions components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,6 @@ export { default as NumberInput } from "./numberInput";
export { default as Steps } from "./steps";
export { default as Upload } from "./upload";
export { default as Calendar } from "./calendar";
export { default as Popover } from "./popover";

export { default as version } from "./version";
268 changes: 268 additions & 0 deletions components/popover/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Popover/> should render a <Popover/> components 1`] = `
<div>
<div
class="cuke-popover"
content="11"
>
<div
class="cuke-tooltip"
>
<div
class="cuke-tooltip-wrapper position-top cuke-popover-wrapper cuke-tooltip-hide cuke-ui-no-animate"
style="left:0;top:0"
>
<div
class="cuke-popover-title"
>
黄瓜ui
</div>
<div
class="cuke-popover-content"
>
11
</div>
</div>
<span
class="cuke-tooltip-trigger-wrapper"
>
<span>
鼠标放上来
</span>
</span>
</div>
</div>
<div
class="cuke-popover"
content="11"
>
<div
class="cuke-tooltip"
>
<div
class="cuke-tooltip-wrapper position-top cuke-popover-wrapper cuke-tooltip-hide cuke-ui-no-animate"
style="left:0;top:0"
>
<div
class="cuke-popover-title"
>
黄瓜ui
</div>
<div
class="cuke-popover-content"
>
11
</div>
</div>
<span
class="cuke-tooltip-trigger-wrapper"
>
<button
class="cuke-button cuke-button-default"
type="button"
>
<span>
上
</span>
</button>
</span>
</div>
</div>
<div
class="cuke-popover"
content="11"
>
<div
class="cuke-tooltip"
>
<div
class="cuke-tooltip-wrapper position-bottom cuke-popover-wrapper cuke-tooltip-hide cuke-ui-no-animate"
style="left:0;top:0"
>
<div
class="cuke-popover-title"
>
黄瓜ui
</div>
<div
class="cuke-popover-content"
>
11
</div>
</div>
<span
class="cuke-tooltip-trigger-wrapper"
>
<button
class="cuke-button cuke-button-default"
type="button"
>
<span>
下
</span>
</button>
</span>
</div>
</div>
<div
class="cuke-popover"
content="11"
>
<div
class="cuke-tooltip"
>
<div
class="cuke-tooltip-wrapper position-left cuke-popover-wrapper cuke-tooltip-hide cuke-ui-no-animate"
style="left:0;top:0"
>
<div
class="cuke-popover-title"
>
黄瓜ui
</div>
<div
class="cuke-popover-content"
>
11
</div>
</div>
<span
class="cuke-tooltip-trigger-wrapper"
>
<button
class="cuke-button cuke-button-default"
type="button"
>
<span>
左
</span>
</button>
</span>
</div>
</div>
<div
class="cuke-popover"
>
<div
class="cuke-tooltip"
>
<div
class="cuke-tooltip-wrapper position-right cuke-popover-wrapper cuke-tooltip-hide cuke-ui-no-animate"
style="left:0;top:0"
>
<div
class="cuke-popover-title"
>
黄瓜ui
</div>
</div>
<span
class="cuke-tooltip-trigger-wrapper"
>
<button
class="cuke-button cuke-button-default"
type="button"
>
<span>
右
</span>
</button>
</span>
</div>
</div>
</div>
`;

exports[`<Popover/> should render custom position 1`] = `
<div>
<Popover
onVisibleChange={[Function]}
position="top"
prefixCls="cuke-popover"
title="黄瓜ui"
>
<Button
block={false}
circle={false}
dashed={false}
disabled={false}
hollow={false}
href=""
htmlType="button"
loading={false}
prefixCls="cuke-button"
size="default"
type="default"
>
上
</Button>
</Popover>
<Popover
onVisibleChange={[Function]}
position="bottom"
prefixCls="cuke-popover"
title="黄瓜ui"
>
<Button
block={false}
circle={false}
dashed={false}
disabled={false}
hollow={false}
href=""
htmlType="button"
loading={false}
prefixCls="cuke-button"
size="default"
type="default"
>
下
</Button>
</Popover>
<Popover
onVisibleChange={[Function]}
position="left"
prefixCls="cuke-popover"
title="黄瓜ui"
>
<Button
block={false}
circle={false}
dashed={false}
disabled={false}
hollow={false}
href=""
htmlType="button"
loading={false}
prefixCls="cuke-button"
size="default"
type="default"
>
左
</Button>
</Popover>
<Popover
onVisibleChange={[Function]}
position="right"
prefixCls="cuke-popover"
title="黄瓜ui"
>
<Button
block={false}
circle={false}
dashed={false}
disabled={false}
hollow={false}
href=""
htmlType="button"
loading={false}
prefixCls="cuke-button"
size="default"
type="default"
>
右
</Button>
</Popover>
</div>
`;
79 changes: 79 additions & 0 deletions components/popover/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from "react";
import assert from "power-assert";
import { render, shallow } from "enzyme";
import toJson from "enzyme-to-json";
import Popover from "../index";
import Button from "../../button";
import Tooltip from "../../tooltip";

describe("<Popover/>", () => {
it("should render a <Popover/> components", () => {
const wrapper = render(
<div>
<Popover title="黄瓜ui" content="11">
<span> 鼠标放上来 </span>
</Popover>
<Popover title="黄瓜ui" position="top" content="11">
<Button>上</Button>
</Popover>
<Popover title="黄瓜ui" position="bottom" content="11">
<Button>下</Button>
</Popover>
<Popover title="黄瓜ui" position="left" content="11">
<Button>左</Button>
</Popover>
<Popover title="黄瓜ui" position="right">
<Button>右</Button>
</Popover>
</div>
);
expect(toJson(wrapper)).toMatchSnapshot();
});

it("should find cuke-popover classnames", () => {
const wrapper = shallow(
<Popover title="黄瓜ui">
<span> 鼠标放上来 </span>
</Popover>
);
assert(wrapper.find(".cuke-popover").length === 1);
});

it("should render custom position", () => {
const wrapper = shallow(
<div>
<Popover title="黄瓜ui" position="top">
<Button>上</Button>
</Popover>
<Popover title="黄瓜ui" position="bottom">
<Button>下</Button>
</Popover>
<Popover title="黄瓜ui" position="left">
<Button>左</Button>
</Popover>
<Popover title="黄瓜ui" position="right">
<Button>右</Button>
</Popover>
</div>
);
expect(toJson(wrapper)).toMatchSnapshot();
});

it("should find Tooltip", () => {
const wrapper = shallow(
<Popover title="黄瓜ui" position="top">
<Button>上</Button>
</Popover>
);
assert(wrapper.find(Tooltip).length === 1);
});

it("should render custom children", () => {
const wrapper = shallow(
<Popover title="黄瓜ui" position="top">
<Button>上</Button>
</Popover>
);
assert(wrapper.find(Button).length === 1);
});
});
Loading

0 comments on commit e0442ca

Please sign in to comment.