Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
115f5189
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
115f5189
编写于
6月 21, 2018
作者:
陈
陈帅
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add 100% test
上级
17275917
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
280 addition
and
24 deletion
+280
-24
components/drawer/__tests__/Drawer.test.js
components/drawer/__tests__/Drawer.test.js
+26
-2
components/drawer/__tests__/DrawerEvent.test.js
components/drawer/__tests__/DrawerEvent.test.js
+93
-0
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
...onents/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+107
-0
components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
...s/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+50
-0
components/drawer/index.tsx
components/drawer/index.tsx
+4
-22
未找到文件。
components/drawer/__tests__/Drawer.test.js
浏览文件 @
115f5189
...
...
@@ -2,7 +2,6 @@ import React from 'react';
import
{
mount
}
from
'
enzyme
'
;
import
Drawer
from
'
..
'
;
jest
.
mock
(
'
rc-util/lib/Portal
'
);
class
DrawerTester
extends
React
.
Component
{
constructor
(
props
)
{
...
...
@@ -23,9 +22,9 @@ class DrawerTester extends React.Component {
<
div
>
<
div
ref
=
{
this
.
saveContainer
}
/
>
<
Drawer
{...
this
.
props
}
visible
=
{
this
.
state
.
visible
}
getContainer
=
{
this
.
getContainer
}
{...
this
.
props
}
>
Here
is
content
of
Drawer
<
/Drawer
>
...
...
@@ -37,6 +36,31 @@ class DrawerTester extends React.Component {
describe
(
'
Drawer
'
,
()
=>
{
it
(
'
render correctly
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerTester
/>
);
const
content
=
wrapper
.
find
(
'
.ant-drawer-body
'
).
getDOMNode
().
innerHTML
;
expect
(
content
).
toBe
(
'
Here is content of Drawer
'
);
expect
(
wrapper
.
render
()).
toMatchSnapshot
();
});
it
(
'
have a title
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerTester
title
=
"
Test Title
"
/>
);
const
title
=
wrapper
.
find
(
'
.ant-drawer-title
'
).
getDOMNode
().
innerHTML
;
expect
(
title
).
toBe
(
'
Test Title
'
);
const
closable
=
wrapper
.
find
(
'
.ant-drawer-close
'
).
exists
();
expect
(
closable
).
toBe
(
true
);
expect
(
wrapper
.
render
()).
toMatchSnapshot
();
});
it
(
'
closable is false
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerTester
closable
=
{
false
}
/>
)
;
const
closable
=
wrapper
.
find
(
'
.ant-drawer-close
'
).
exists
();
expect
(
closable
).
toBe
(
false
);
expect
(
wrapper
.
render
()).
toMatchSnapshot
();
});
it
(
'
destroyOnClose is true
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerTester
destroyOnClose
visible
=
{
false
}
/>
)
;
const
body
=
wrapper
.
find
(
'
.ant-drawer-body
'
).
exists
();
expect
(
body
).
toBe
(
false
);
expect
(
wrapper
.
render
()).
toMatchSnapshot
();
});
});
components/drawer/__tests__/DrawerEvent.test.js
0 → 100644
浏览文件 @
115f5189
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
Drawer
from
'
..
'
;
import
Button
from
'
../../button
'
;
class
DrawerEventTester
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
visible
:
false
};
}
componentDidMount
()
{
this
.
setState
({
visible
:
true
});
// eslint-disable-line react/no-did-mount-set-state
}
saveContainer
=
(
container
)
=>
{
this
.
container
=
container
;
};
getContainer
=
()
=>
{
return
this
.
container
;
};
onClose
=
()
=>
{
this
.
setState
({
visible
:
false
,
});
};
open
=
()
=>
{
this
.
setState
({
visible
:
true
,
});
}
render
()
{
return
(
<
div
>
<
Button
onClick
=
{
this
.
open
}
>
open
<
/Button
>
<
div
ref
=
{
this
.
saveContainer
}
/
>
<
Drawer
visible
=
{
this
.
state
.
visible
}
onClose
=
{
this
.
onClose
}
destroyOnClose
getContainer
=
{
this
.
getContainer
}
{...
this
.
props
}
>
Here
is
content
of
Drawer
<
/Drawer
>
<
/div
>
);
}
}
describe
(
'
Drawer
'
,
()
=>
{
it
(
'
render correctly
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerEventTester
/>
);
const
body
=
wrapper
.
find
(
'
.ant-drawer-body
'
).
exists
();
expect
(
body
).
toBe
(
true
);
wrapper
.
find
(
'
button.ant-btn
'
).
simulate
(
'
click
'
);
const
content
=
wrapper
.
find
(
'
.ant-drawer-body
'
).
getDOMNode
().
innerHTML
;
expect
(
content
).
toBe
(
'
Here is content of Drawer
'
);
expect
(
wrapper
.
render
()).
toMatchSnapshot
();
});
it
(
'
mask trigger onClose
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerEventTester
/>
);
wrapper
.
find
(
'
button.ant-btn
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
true
);
wrapper
.
find
(
'
.ant-drawer-mask
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
false
);
});
it
(
'
close button trigger onClose
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerEventTester
/>
);
wrapper
.
find
(
'
button.ant-btn
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
true
);
wrapper
.
find
(
'
.ant-drawer-close
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
false
);
});
it
(
'
maskClosable no trigger onClose
'
,
()
=>
{
const
wrapper
=
mount
(
<
DrawerEventTester
maskClosable
=
{
false
}
/>
)
;
wrapper
.
find
(
'
button.ant-btn
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
true
);
wrapper
.
find
(
'
.ant-drawer-mask
'
).
simulate
(
'
click
'
);
expect
(
wrapper
.
instance
().
state
.
visible
).
toBe
(
true
);
});
});
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
浏览文件 @
115f5189
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Drawer closable is false 1`] = `
<div>
<div>
<div>
<div
class="ant-drawer ant-drawer-left ant-drawer-open"
>
<div
class="ant-drawer-mask"
/>
<div
class="ant-drawer-content-wrapper"
>
<div
class="ant-drawer-content"
>
<div
style="width: 256px;"
>
<div
class="ant-drawer-body"
>
Here is content of Drawer
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Drawer destroyOnClose is true 1`] = `
<div>
<div>
<div>
<div
class="ant-drawer ant-drawer-left"
>
<div
class="ant-drawer-mask"
/>
<div
class="ant-drawer-content-wrapper"
style="transform: translateX(-100%);"
>
<div
class="ant-drawer-content"
/>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Drawer have a title 1`] = `
<div>
<div>
<div>
<div
class="ant-drawer ant-drawer-left ant-drawer-open"
>
<div
class="ant-drawer-mask"
/>
<div
class="ant-drawer-content-wrapper"
>
<div
class="ant-drawer-content"
>
<div
style="width: 256px;"
>
<div
class="ant-drawer-header"
>
<div
class="ant-drawer-title"
>
Test Title
</div>
</div>
<button
aria-label="Close"
class="ant-drawer-close"
>
<span
class="ant-drawer-close-x"
/>
</button>
<div
class="ant-drawer-body"
>
Here is content of Drawer
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Drawer render correctly 1`] = `
<div>
<div>
...
...
components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
0 → 100644
浏览文件 @
115f5189
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Drawer render correctly 1`] = `
<div>
<button
class="ant-btn ant-btn-clicked"
type="button"
>
<span>
open
</span>
</button>
<div>
<div>
<div
class="ant-drawer ant-drawer-left ant-drawer-open"
>
<div
class="ant-drawer-mask"
/>
<div
class="ant-drawer-content-wrapper"
>
<div
class="ant-drawer-content"
>
<div
style="width: 256px;"
>
<button
aria-label="Close"
class="ant-drawer-close"
>
<span
class="ant-drawer-close-x"
/>
</button>
<div
class="ant-drawer-body"
>
Here is content of Drawer
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
components/drawer/index.tsx
浏览文件 @
115f5189
...
...
@@ -55,23 +55,8 @@ export default class Drawer extends React.Component<
prefixCls
:
'
ant-drawer
'
,
width
:
256
,
closable
:
true
,
maskClosable
:
true
,
};
static
getDerivedStateFromProps
(
nextProps
:
DrawerProps
,
prevState
:
IDrawerState
,
)
{
const
nextState
:
IDrawerState
=
{};
if
(
nextProps
.
visible
!==
undefined
&&
nextProps
.
visible
!==
prevState
.
visible
)
{
nextState
.
visible
=
nextProps
.
visible
;
}
return
nextState
;
}
constructor
(
props
:
DrawerProps
)
{
super
(
props
);
this
.
state
=
{
visible
:
false
,
};
}
close
=
(
e
:
EventType
)
=>
{
if
(
this
.
props
.
visible
!==
undefined
)
{
if
(
this
.
props
.
onClose
)
{
...
...
@@ -79,9 +64,6 @@ export default class Drawer extends React.Component<
}
return
;
}
this
.
setState
({
visible
:
false
,
});
}
onMaskClick
=
(
e
:
EventType
)
=>
{
if
(
!
this
.
props
.
maskClosable
)
{
...
...
@@ -90,7 +72,7 @@ export default class Drawer extends React.Component<
this
.
close
(
e
);
}
renderBody
=
()
=>
{
if
(
this
.
props
.
destroyOnClose
&&
this
.
props
.
visible
)
{
if
(
this
.
props
.
destroyOnClose
&&
!
this
.
props
.
visible
)
{
return
null
;
}
const
{
prefixCls
,
title
,
closable
}
=
this
.
props
;
...
...
@@ -135,8 +117,8 @@ export default class Drawer extends React.Component<
level
=
{
null
}
{
...
rest
}
handleChild
=
{
false
}
open
=
{
this
.
state
.
visible
}
onMaskClick
=
{
this
.
close
}
open
=
{
this
.
props
.
visible
}
onMaskClick
=
{
this
.
onMaskClick
}
showMask
=
{
this
.
props
.
mask
}
placement
=
{
this
.
props
.
placement
}
style
=
{
{
zIndex
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录