Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
e0725fa4
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e0725fa4
编写于
4月 05, 2019
作者:
F
Fernando Arias
提交者:
Mike Greiling
4月 05, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Dynamic vuln graph dimensions
* Fix up graph resize logic if navbar is collapsed Add snapshot
上级
b54d466c
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
128 addition
and
0 deletion
+128
-0
app/assets/javascripts/contextual_sidebar.js
app/assets/javascripts/contextual_sidebar.js
+3
-0
app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue
.../components/resizable_chart/resizable_chart_container.vue
+40
-0
spec/frontend/vue_shared/components/__snapshots__/resizable_chart_container_spec.js.snap
...ents/__snapshots__/resizable_chart_container_spec.js.snap
+21
-0
spec/frontend/vue_shared/components/resizable_chart_container_spec.js
...d/vue_shared/components/resizable_chart_container_spec.js
+64
-0
未找到文件。
app/assets/javascripts/contextual_sidebar.js
浏览文件 @
e0725fa4
...
...
@@ -41,6 +41,9 @@ export default class ContextualSidebar {
this
.
toggleCollapsedSidebar
(
value
,
true
);
}
});
this
.
$page
.
on
(
'
transitionstart transitionend
'
,
()
=>
{
$
(
document
).
trigger
(
'
content.resize
'
);
});
$
(
window
).
on
(
'
resize
'
,
()
=>
_
.
debounce
(
this
.
render
(),
100
));
}
...
...
app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue
0 → 100644
浏览文件 @
e0725fa4
<
script
>
import
{
debounceByAnimationFrame
}
from
'
~/lib/utils/common_utils
'
;
import
$
from
'
jquery
'
;
export
default
{
data
()
{
return
{
width
:
0
,
height
:
0
,
};
},
beforeDestroy
()
{
this
.
contentResizeHandler
.
off
(
'
content.resize
'
,
this
.
debouncedResize
);
window
.
removeEventListener
(
'
resize
'
,
this
.
debouncedResize
);
},
created
()
{
this
.
debouncedResize
=
debounceByAnimationFrame
(
this
.
onResize
);
// Handle when we explicictly trigger a custom resize event
this
.
contentResizeHandler
=
$
(
document
).
on
(
'
content.resize
'
,
this
.
debouncedResize
);
// Handle window resize
window
.
addEventListener
(
'
resize
'
,
this
.
debouncedResize
);
},
methods
:
{
onResize
()
{
// Slot dimensions
const
{
clientWidth
,
clientHeight
}
=
this
.
$refs
.
chartWrapper
;
this
.
width
=
clientWidth
;
this
.
height
=
clientHeight
;
},
},
};
</
script
>
<
template
>
<div
ref=
"chartWrapper"
>
<slot
:width=
"width"
:height=
"height"
>
</slot>
</div>
</
template
>
spec/frontend/vue_shared/components/__snapshots__/resizable_chart_container_spec.js.snap
0 → 100644
浏览文件 @
e0725fa4
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Resizable Chart Container renders the component 1`] = `
<div>
<div
class="slot"
>
<span
class="width"
>
0
</span>
<span
class="height"
>
0
</span>
</div>
</div>
`;
spec/frontend/vue_shared/components/resizable_chart_container_spec.js
0 → 100644
浏览文件 @
e0725fa4
import
Vue
from
'
vue
'
;
import
{
mount
}
from
'
@vue/test-utils
'
;
import
ResizableChartContainer
from
'
~/vue_shared/components/resizable_chart/resizable_chart_container.vue
'
;
import
$
from
'
jquery
'
;
jest
.
mock
(
'
~/lib/utils/common_utils
'
,
()
=>
({
debounceByAnimationFrame
(
callback
)
{
return
jest
.
spyOn
({
callback
},
'
callback
'
);
},
}));
describe
(
'
Resizable Chart Container
'
,
()
=>
{
let
wrapper
;
beforeEach
(()
=>
{
wrapper
=
mount
(
ResizableChartContainer
,
{
attachToDocument
:
true
,
scopedSlots
:
{
default
:
`
<div class="slot" slot-scope="{ width, height }">
<span class="width">{{width}}</span>
<span class="height">{{height}}</span>
</div>
`
,
},
});
});
afterEach
(()
=>
{
wrapper
.
destroy
();
});
it
(
'
renders the component
'
,
()
=>
{
expect
(
wrapper
.
element
).
toMatchSnapshot
();
});
it
(
'
updates the slot width and height props
'
,
()
=>
{
const
width
=
1920
;
const
height
=
1080
;
// JSDOM mocks and sets clientWidth/clientHeight to 0 so we set manually
wrapper
.
vm
.
$refs
.
chartWrapper
=
{
clientWidth
:
width
,
clientHeight
:
height
};
$
(
document
).
trigger
(
'
content.resize
'
);
return
Vue
.
nextTick
().
then
(()
=>
{
const
widthNode
=
wrapper
.
find
(
'
.slot > .width
'
);
const
heightNode
=
wrapper
.
find
(
'
.slot > .height
'
);
expect
(
parseInt
(
widthNode
.
text
(),
10
)).
toEqual
(
width
);
expect
(
parseInt
(
heightNode
.
text
(),
10
)).
toEqual
(
height
);
});
});
it
(
'
calls onResize on manual resize
'
,
()
=>
{
$
(
document
).
trigger
(
'
content.resize
'
);
expect
(
wrapper
.
vm
.
debouncedResize
).
toHaveBeenCalled
();
});
it
(
'
calls onResize on page resize
'
,
()
=>
{
window
.
dispatchEvent
(
new
Event
(
'
resize
'
));
expect
(
wrapper
.
vm
.
debouncedResize
).
toHaveBeenCalled
();
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录