Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
399d8ffc
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,发现更多精彩内容 >>
提交
399d8ffc
编写于
9月 04, 2017
作者:
K
kushalpandya
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Projects Dropdown App Component Spec
上级
f3fdab1e
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
348 addition
and
0 deletion
+348
-0
spec/javascripts/projects_dropdown/components/app_spec.js
spec/javascripts/projects_dropdown/components/app_spec.js
+348
-0
未找到文件。
spec/javascripts/projects_dropdown/components/app_spec.js
0 → 100644
浏览文件 @
399d8ffc
import
Vue
from
'
vue
'
;
import
bp
from
'
~/breakpoints
'
;
import
appComponent
from
'
~/projects_dropdown/components/app.vue
'
;
import
eventHub
from
'
~/projects_dropdown/event_hub
'
;
import
ProjectsStore
from
'
~/projects_dropdown/store/projects_store
'
;
import
ProjectsService
from
'
~/projects_dropdown/service/projects_service
'
;
import
mountComponent
from
'
../../helpers/vue_mount_component_helper
'
;
import
{
currentSession
,
mockProject
,
mockRawProject
}
from
'
../mock_data
'
;
const
createComponent
=
()
=>
{
gon
.
api_version
=
currentSession
.
apiVersion
;
const
Component
=
Vue
.
extend
(
appComponent
);
const
store
=
new
ProjectsStore
();
const
service
=
new
ProjectsService
(
currentSession
.
username
);
return
mountComponent
(
Component
,
{
store
,
service
,
currentUserName
:
currentSession
.
username
,
currentProject
:
currentSession
.
project
,
});
};
const
returnServicePromise
=
(
data
,
failed
)
=>
new
Promise
((
resolve
,
reject
)
=>
{
if
(
failed
)
{
reject
(
data
);
}
else
{
resolve
({
json
()
{
return
data
;
},
});
}
});
describe
(
'
AppComponent
'
,
()
=>
{
describe
(
'
computed
'
,
()
=>
{
let
vm
;
beforeEach
(()
=>
{
vm
=
createComponent
();
});
afterEach
(()
=>
{
vm
.
$destroy
();
});
describe
(
'
frequentProjects
'
,
()
=>
{
it
(
'
should return list of frequently accessed projects from store
'
,
()
=>
{
expect
(
vm
.
frequentProjects
).
toBeDefined
();
expect
(
vm
.
frequentProjects
.
length
).
toBe
(
0
);
vm
.
store
.
setFrequentProjects
([
mockProject
]);
expect
(
vm
.
frequentProjects
).
toBeDefined
();
expect
(
vm
.
frequentProjects
.
length
).
toBe
(
1
);
});
});
describe
(
'
searchProjects
'
,
()
=>
{
it
(
'
should return list of frequently accessed projects from store
'
,
()
=>
{
expect
(
vm
.
searchProjects
).
toBeDefined
();
expect
(
vm
.
searchProjects
.
length
).
toBe
(
0
);
vm
.
store
.
setSearchedProjects
([
mockRawProject
]);
expect
(
vm
.
searchProjects
).
toBeDefined
();
expect
(
vm
.
searchProjects
.
length
).
toBe
(
1
);
});
});
});
describe
(
'
methods
'
,
()
=>
{
let
vm
;
beforeEach
(()
=>
{
vm
=
createComponent
();
});
afterEach
(()
=>
{
vm
.
$destroy
();
});
describe
(
'
toggleFrequentProjectsList
'
,
()
=>
{
it
(
'
should toggle props which control visibility of Frequent Projects list from state passed
'
,
()
=>
{
vm
.
toggleFrequentProjectsList
(
true
);
expect
(
vm
.
isLoadingProjects
).
toBeFalsy
();
expect
(
vm
.
isSearchListVisible
).
toBeFalsy
();
expect
(
vm
.
isFrequentsListVisible
).
toBeTruthy
();
vm
.
toggleFrequentProjectsList
(
false
);
expect
(
vm
.
isLoadingProjects
).
toBeTruthy
();
expect
(
vm
.
isSearchListVisible
).
toBeTruthy
();
expect
(
vm
.
isFrequentsListVisible
).
toBeFalsy
();
});
});
describe
(
'
toggleSearchProjectsList
'
,
()
=>
{
it
(
'
should toggle props which control visibility of Searched Projects list from state passed
'
,
()
=>
{
vm
.
toggleSearchProjectsList
(
true
);
expect
(
vm
.
isLoadingProjects
).
toBeFalsy
();
expect
(
vm
.
isFrequentsListVisible
).
toBeFalsy
();
expect
(
vm
.
isSearchListVisible
).
toBeTruthy
();
vm
.
toggleSearchProjectsList
(
false
);
expect
(
vm
.
isLoadingProjects
).
toBeTruthy
();
expect
(
vm
.
isFrequentsListVisible
).
toBeTruthy
();
expect
(
vm
.
isSearchListVisible
).
toBeFalsy
();
});
});
describe
(
'
toggleLoader
'
,
()
=>
{
it
(
'
should toggle props which control visibility of list loading animation from state passed
'
,
()
=>
{
vm
.
toggleLoader
(
true
);
expect
(
vm
.
isFrequentsListVisible
).
toBeFalsy
();
expect
(
vm
.
isSearchListVisible
).
toBeFalsy
();
expect
(
vm
.
isLoadingProjects
).
toBeTruthy
();
vm
.
toggleLoader
(
false
);
expect
(
vm
.
isFrequentsListVisible
).
toBeTruthy
();
expect
(
vm
.
isSearchListVisible
).
toBeTruthy
();
expect
(
vm
.
isLoadingProjects
).
toBeFalsy
();
});
});
describe
(
'
fetchFrequentProjects
'
,
()
=>
{
it
(
'
should set props for loading animation to `true` while frequent projects list is being loaded
'
,
()
=>
{
spyOn
(
vm
,
'
toggleLoader
'
);
vm
.
fetchFrequentProjects
();
expect
(
vm
.
isLocalStorageFailed
).
toBeFalsy
();
expect
(
vm
.
toggleLoader
).
toHaveBeenCalledWith
(
true
);
});
it
(
'
should set props for loading animation to `false` and props for frequent projects list to `true` once data is loaded
'
,
()
=>
{
const
mockData
=
[
mockProject
];
spyOn
(
vm
.
service
,
'
getFrequentProjects
'
).
and
.
returnValue
(
mockData
);
spyOn
(
vm
.
store
,
'
setFrequentProjects
'
);
spyOn
(
vm
,
'
toggleFrequentProjectsList
'
);
vm
.
fetchFrequentProjects
();
expect
(
vm
.
service
.
getFrequentProjects
).
toHaveBeenCalled
();
expect
(
vm
.
store
.
setFrequentProjects
).
toHaveBeenCalledWith
(
mockData
);
expect
(
vm
.
toggleFrequentProjectsList
).
toHaveBeenCalledWith
(
true
);
});
it
(
'
should set props for failure message to `true` when method fails to fetch frequent projects list
'
,
()
=>
{
spyOn
(
vm
.
service
,
'
getFrequentProjects
'
).
and
.
returnValue
(
null
);
spyOn
(
vm
.
store
,
'
setFrequentProjects
'
);
spyOn
(
vm
,
'
toggleFrequentProjectsList
'
);
expect
(
vm
.
isLocalStorageFailed
).
toBeFalsy
();
vm
.
fetchFrequentProjects
();
expect
(
vm
.
service
.
getFrequentProjects
).
toHaveBeenCalled
();
expect
(
vm
.
store
.
setFrequentProjects
).
toHaveBeenCalledWith
([]);
expect
(
vm
.
toggleFrequentProjectsList
).
toHaveBeenCalledWith
(
true
);
expect
(
vm
.
isLocalStorageFailed
).
toBeTruthy
();
});
it
(
'
should set props for search results list to `true` if search query was already made previously
'
,
()
=>
{
spyOn
(
bp
,
'
getBreakpointSize
'
).
and
.
returnValue
(
'
md
'
);
spyOn
(
vm
.
service
,
'
getFrequentProjects
'
);
spyOn
(
vm
,
'
toggleSearchProjectsList
'
);
vm
.
searchQuery
=
'
test
'
;
vm
.
fetchFrequentProjects
();
expect
(
vm
.
service
.
getFrequentProjects
).
not
.
toHaveBeenCalled
();
expect
(
vm
.
toggleSearchProjectsList
).
toHaveBeenCalledWith
(
true
);
});
it
(
'
should set props for frequent projects list to `true` if search query was already made but screen size is less than 768px
'
,
()
=>
{
spyOn
(
bp
,
'
getBreakpointSize
'
).
and
.
returnValue
(
'
sm
'
);
spyOn
(
vm
,
'
toggleSearchProjectsList
'
);
spyOn
(
vm
.
service
,
'
getFrequentProjects
'
);
vm
.
searchQuery
=
'
test
'
;
vm
.
fetchFrequentProjects
();
expect
(
vm
.
service
.
getFrequentProjects
).
toHaveBeenCalled
();
expect
(
vm
.
toggleSearchProjectsList
).
not
.
toHaveBeenCalled
();
});
});
describe
(
'
fetchSearchedProjects
'
,
()
=>
{
const
searchQuery
=
'
test
'
;
it
(
'
should perform search with provided search query
'
,
(
done
)
=>
{
const
mockData
=
[
mockRawProject
];
spyOn
(
vm
,
'
toggleLoader
'
);
spyOn
(
vm
,
'
toggleSearchProjectsList
'
);
spyOn
(
vm
.
service
,
'
getSearchedProjects
'
).
and
.
returnValue
(
returnServicePromise
(
mockData
));
spyOn
(
vm
.
store
,
'
setSearchedProjects
'
);
vm
.
fetchSearchedProjects
(
searchQuery
);
setTimeout
(()
=>
{
expect
(
vm
.
searchQuery
).
toBe
(
searchQuery
);
expect
(
vm
.
toggleLoader
).
toHaveBeenCalledWith
(
true
);
expect
(
vm
.
service
.
getSearchedProjects
).
toHaveBeenCalledWith
(
searchQuery
);
expect
(
vm
.
toggleSearchProjectsList
).
toHaveBeenCalledWith
(
true
);
expect
(
vm
.
store
.
setSearchedProjects
).
toHaveBeenCalledWith
(
mockData
);
done
();
},
0
);
});
it
(
'
should update props for showing search failure
'
,
(
done
)
=>
{
spyOn
(
vm
,
'
toggleSearchProjectsList
'
);
spyOn
(
vm
.
service
,
'
getSearchedProjects
'
).
and
.
returnValue
(
returnServicePromise
({},
true
));
vm
.
fetchSearchedProjects
(
searchQuery
);
setTimeout
(()
=>
{
expect
(
vm
.
searchQuery
).
toBe
(
searchQuery
);
expect
(
vm
.
service
.
getSearchedProjects
).
toHaveBeenCalledWith
(
searchQuery
);
expect
(
vm
.
isSearchFailed
).
toBeTruthy
();
expect
(
vm
.
toggleSearchProjectsList
).
toHaveBeenCalledWith
(
true
);
done
();
},
0
);
});
});
describe
(
'
logCurrentProjectAccess
'
,
()
=>
{
it
(
'
should log current project access via service
'
,
(
done
)
=>
{
spyOn
(
vm
.
service
,
'
logProjectAccess
'
);
vm
.
currentProject
=
mockProject
;
vm
.
logCurrentProjectAccess
();
setTimeout
(()
=>
{
expect
(
vm
.
service
.
logProjectAccess
).
toHaveBeenCalledWith
(
mockProject
);
done
();
},
1
);
});
});
describe
(
'
handleSearchClear
'
,
()
=>
{
it
(
'
should show frequent projects list when search input is cleared
'
,
()
=>
{
spyOn
(
vm
.
store
,
'
clearSearchedProjects
'
);
spyOn
(
vm
,
'
toggleFrequentProjectsList
'
);
vm
.
handleSearchClear
();
expect
(
vm
.
toggleFrequentProjectsList
).
toHaveBeenCalledWith
(
true
);
expect
(
vm
.
store
.
clearSearchedProjects
).
toHaveBeenCalled
();
expect
(
vm
.
searchQuery
).
toBe
(
''
);
});
});
describe
(
'
handleSearchFailure
'
,
()
=>
{
it
(
'
should show failure message within dropdown
'
,
()
=>
{
spyOn
(
vm
,
'
toggleSearchProjectsList
'
);
vm
.
handleSearchFailure
();
expect
(
vm
.
toggleSearchProjectsList
).
toHaveBeenCalledWith
(
true
);
expect
(
vm
.
isSearchFailed
).
toBeTruthy
();
});
});
});
describe
(
'
created
'
,
()
=>
{
it
(
'
should bind event listeners on eventHub
'
,
(
done
)
=>
{
spyOn
(
eventHub
,
'
$on
'
);
createComponent
().
$mount
();
Vue
.
nextTick
(()
=>
{
expect
(
eventHub
.
$on
).
toHaveBeenCalledWith
(
'
dropdownOpen
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$on
).
toHaveBeenCalledWith
(
'
searchProjects
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$on
).
toHaveBeenCalledWith
(
'
searchCleared
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$on
).
toHaveBeenCalledWith
(
'
searchFailed
'
,
jasmine
.
any
(
Function
));
done
();
});
});
});
describe
(
'
beforeDestroy
'
,
()
=>
{
it
(
'
should unbind event listeners on eventHub
'
,
(
done
)
=>
{
const
vm
=
createComponent
();
spyOn
(
eventHub
,
'
$off
'
);
vm
.
$mount
();
vm
.
$destroy
();
Vue
.
nextTick
(()
=>
{
expect
(
eventHub
.
$off
).
toHaveBeenCalledWith
(
'
dropdownOpen
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$off
).
toHaveBeenCalledWith
(
'
searchProjects
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$off
).
toHaveBeenCalledWith
(
'
searchCleared
'
,
jasmine
.
any
(
Function
));
expect
(
eventHub
.
$off
).
toHaveBeenCalledWith
(
'
searchFailed
'
,
jasmine
.
any
(
Function
));
done
();
});
});
});
describe
(
'
template
'
,
()
=>
{
let
vm
;
beforeEach
(()
=>
{
vm
=
createComponent
();
});
afterEach
(()
=>
{
vm
.
$destroy
();
});
it
(
'
should render search input
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.search-input-container
'
)).
toBeDefined
();
});
it
(
'
should render loading animation
'
,
(
done
)
=>
{
vm
.
toggleLoader
(
true
);
Vue
.
nextTick
(()
=>
{
const
loadingEl
=
vm
.
$el
.
querySelector
(
'
.loading-animation
'
);
expect
(
loadingEl
).
toBeDefined
();
expect
(
loadingEl
.
classList
.
contains
(
'
prepend-top-20
'
)).
toBeTruthy
();
expect
(
loadingEl
.
querySelector
(
'
i
'
).
getAttribute
(
'
aria-label
'
)).
toBe
(
'
Loading projects
'
);
done
();
});
});
it
(
'
should render frequent projects list header
'
,
(
done
)
=>
{
vm
.
toggleFrequentProjectsList
(
true
);
Vue
.
nextTick
(()
=>
{
const
sectionHeaderEl
=
vm
.
$el
.
querySelector
(
'
.section-header
'
);
expect
(
sectionHeaderEl
).
toBeDefined
();
expect
(
sectionHeaderEl
.
innerText
.
trim
()).
toBe
(
'
Frequently visited
'
);
done
();
});
});
it
(
'
should render frequent projects list
'
,
(
done
)
=>
{
vm
.
toggleFrequentProjectsList
(
true
);
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.projects-list-frequent-container
'
)).
toBeDefined
();
done
();
});
});
it
(
'
should render searched projects list
'
,
(
done
)
=>
{
vm
.
toggleSearchProjectsList
(
true
);
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.section-header
'
)).
toBe
(
null
);
expect
(
vm
.
$el
.
querySelector
(
'
.projects-list-search-container
'
)).
toBeDefined
();
done
();
});
});
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录