Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
f71bb648
Commit
f71bb648
authored
Sep 22, 2020
by
Nicolò Maria Mezzopera
Committed by
Olena Horal-Koretska
Sep 22, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add test for pacage_path component
- add testid to source - test
parent
e71e90b9
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
175 additions
and
36 deletions
+175
-36
app/assets/javascripts/packages/shared/components/package_list_row.vue
...vascripts/packages/shared/components/package_list_row.vue
+4
-12
app/assets/javascripts/packages/shared/components/package_path.vue
...s/javascripts/packages/shared/components/package_path.vue
+71
-0
changelogs/unreleased/225644-package-registry-in-the-group-registry-view-make-the-project-ui-mo.yml
...try-in-the-group-registry-view-make-the-project-ui-mo.yml
+5
-0
spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
...ed/components/__snapshots__/package_list_row_spec.js.snap
+4
-21
spec/frontend/packages/shared/components/package_list_row_spec.js
...ntend/packages/shared/components/package_list_row_spec.js
+5
-3
spec/frontend/packages/shared/components/package_path_spec.js
.../frontend/packages/shared/components/package_path_spec.js
+86
-0
No files found.
app/assets/javascripts/packages/shared/components/package_list_row.vue
View file @
f71bb648
<
script
>
import
{
GlButton
,
GlIcon
,
GlLink
,
GlSprintf
,
GlTooltipDirective
,
GlTruncate
}
from
'
@gitlab/ui
'
;
import
PackageTags
from
'
./package_tags.vue
'
;
import
PackagePath
from
'
./package_path.vue
'
;
import
PublishMethod
from
'
./publish_method.vue
'
;
import
{
getPackageTypeLabel
}
from
'
../utils
'
;
import
timeagoMixin
from
'
~/vue_shared/mixins/timeago
'
;
...
...
@@ -15,6 +16,7 @@ export default {
GlSprintf
,
GlTruncate
,
PackageTags
,
PackagePath
,
PublishMethod
,
ListItem
,
},
...
...
@@ -92,22 +94,12 @@ export default {
</gl-sprintf>
</div>
<div
v-if=
"hasProjectLink"
class=
"gl-display-flex gl-align-items-center"
>
<gl-icon
name=
"review-list"
class=
"gl-ml-3 gl-mr-2 gl-min-w-0"
/>
<gl-link
class=
"gl-text-body gl-min-w-0"
data-testid=
"packages-row-project"
:href=
"`/${packageEntity.project_path}`"
>
<gl-truncate
:text=
"packageEntity.projectPathName"
/>
</gl-link>
</div>
<div
v-if=
"showPackageType"
class=
"d-flex align-items-center"
data-testid=
"package-type"
>
<gl-icon
name=
"package"
class=
"gl-ml-3 gl-mr-2"
/>
<span>
{{ packageType }}
</span>
</div>
<package-path
v-if=
"hasProjectLink"
:path=
"packageEntity.project_path"
/>
</div>
</template>
...
...
app/assets/javascripts/packages/shared/components/package_path.vue
0 → 100644
View file @
f71bb648
<
script
>
import
{
GlIcon
,
GlLink
,
GlTooltipDirective
}
from
'
@gitlab/ui
'
;
import
{
joinPaths
}
from
'
~/lib/utils/url_utility
'
;
export
default
{
name
:
'
PackagePath
'
,
components
:
{
GlIcon
,
GlLink
,
},
directives
:
{
GlTooltip
:
GlTooltipDirective
,
},
props
:
{
path
:
{
type
:
String
,
required
:
true
,
},
},
computed
:
{
pathPieces
()
{
return
this
.
path
.
split
(
'
/
'
);
},
root
()
{
// we skip the first part of the path since is the 'base' group
return
this
.
pathPieces
[
1
];
},
rootLink
()
{
return
joinPaths
(
this
.
pathPieces
[
0
],
this
.
root
);
},
leaf
()
{
return
this
.
pathPieces
[
this
.
pathPieces
.
length
-
1
];
},
deeplyNested
()
{
return
this
.
pathPieces
.
length
>
3
;
},
hasGroup
()
{
return
this
.
root
!==
this
.
leaf
;
},
},
};
</
script
>
<
template
>
<div
class=
"gl-display-flex gl-align-items-center"
>
<gl-icon
data-testid=
"base-icon"
name=
"project"
class=
"gl-mx-3 gl-min-w-0"
/>
<gl-link
data-testid=
"root-link"
class=
"gl-text-gray-500 gl-min-w-0"
:href=
"`/$
{rootLink}`">
{{
root
}}
</gl-link>
<template
v-if=
"hasGroup"
>
<gl-icon
data-testid=
"root-chevron"
name=
"chevron-right"
class=
"gl-mx-2 gl-min-w-0"
/>
<template
v-if=
"deeplyNested"
>
<span
v-gl-tooltip=
"
{ title: path }"
data-testid="ellipsis-icon"
class="gl-inset-border-1-gray-200 gl-rounded-base gl-px-2 gl-min-w-0"
>
<gl-icon
name=
"ellipsis_h"
/>
</span>
<gl-icon
data-testid=
"ellipsis-chevron"
name=
"chevron-right"
class=
"gl-mx-2 gl-min-w-0"
/>
</
template
>
<gl-link
data-testid=
"leaf-link"
class=
"gl-text-gray-500 gl-min-w-0"
:href=
"`/${path}`"
>
{{ leaf }}
</gl-link>
</template>
</div>
</template>
changelogs/unreleased/225644-package-registry-in-the-group-registry-view-make-the-project-ui-mo.yml
0 → 100644
View file @
f71bb648
---
title
:
Breadcrumb like UI for project path in packages list
merge_request
:
42684
author
:
type
:
changed
spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
View file @
f71bb648
...
...
@@ -51,27 +51,6 @@ exports[`packages_list_row renders 1`] = `
<!---->
<div
class="gl-display-flex gl-align-items-center"
>
<gl-icon-stub
class="gl-ml-3 gl-mr-2 gl-min-w-0"
name="review-list"
size="16"
/>
<gl-link-stub
class="gl-text-body gl-min-w-0"
data-testid="packages-row-project"
href="/foo/bar/baz"
>
<gl-truncate-stub
position="end"
text="foo/bar/baz"
/>
</gl-link-stub>
</div>
<div
class="d-flex align-items-center"
data-testid="package-type"
...
...
@@ -86,6 +65,10 @@ exports[`packages_list_row renders 1`] = `
Maven
</span>
</div>
<package-path-stub
path="foo/bar/baz"
/>
</div>
</div>
</div>
...
...
spec/frontend/packages/shared/components/package_list_row_spec.js
View file @
f71bb648
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
PackagesListRow
from
'
~/packages/shared/components/package_list_row.vue
'
;
import
PackageTags
from
'
~/packages/shared/components/package_tags.vue
'
;
import
PackagePath
from
'
~/packages/shared/components/package_path.vue
'
;
import
ListItem
from
'
~/vue_shared/components/registry/list_item.vue
'
;
import
{
packageList
}
from
'
../../mock_data
'
;
...
...
@@ -11,7 +12,7 @@ describe('packages_list_row', () => {
const
[
packageWithoutTags
,
packageWithTags
]
=
packageList
;
const
findPackageTags
=
()
=>
wrapper
.
find
(
PackageTags
);
const
findP
rojectLink
=
()
=>
wrapper
.
find
(
'
[data-testid="packages-row-project"]
'
);
const
findP
ackagePath
=
()
=>
wrapper
.
find
(
PackagePath
);
const
findDeleteButton
=
()
=>
wrapper
.
find
(
'
[data-testid="action-delete"]
'
);
const
findPackageType
=
()
=>
wrapper
.
find
(
'
[data-testid="package-type"]
'
);
...
...
@@ -63,8 +64,9 @@ describe('packages_list_row', () => {
mountComponent
({
isGroup
:
true
});
});
it
(
'
has project field
'
,
()
=>
{
expect
(
findProjectLink
().
exists
()).
toBe
(
true
);
it
(
'
has a package path component
'
,
()
=>
{
expect
(
findPackagePath
().
exists
()).
toBe
(
true
);
expect
(
findPackagePath
().
props
()).
toMatchObject
({
path
:
'
foo/bar/baz
'
});
});
});
...
...
spec/frontend/packages/shared/components/package_path_spec.js
0 → 100644
View file @
f71bb648
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
createMockDirective
,
getBinding
}
from
'
helpers/vue_mock_directive
'
;
import
PackagePath
from
'
~/packages/shared/components/package_path.vue
'
;
describe
(
'
PackagePath
'
,
()
=>
{
let
wrapper
;
const
mountComponent
=
(
propsData
=
{
path
:
'
foo
'
})
=>
{
wrapper
=
shallowMount
(
PackagePath
,
{
propsData
,
directives
:
{
GlTooltip
:
createMockDirective
(),
},
});
};
const
BASE_ICON
=
'
base-icon
'
;
const
ROOT_LINK
=
'
root-link
'
;
const
ROOT_CHEVRON
=
'
root-chevron
'
;
const
ELLIPSIS_ICON
=
'
ellipsis-icon
'
;
const
ELLIPSIS_CHEVRON
=
'
ellipsis-chevron
'
;
const
LEAF_LINK
=
'
leaf-link
'
;
const
findItem
=
name
=>
wrapper
.
find
(
`[data-testid="
${
name
}
"]`
);
const
findTooltip
=
w
=>
getBinding
(
w
.
element
,
'
gl-tooltip
'
);
afterEach
(()
=>
{
wrapper
.
destroy
();
wrapper
=
null
;
});
describe
.
each
`
path | rootUrl | shouldExist | shouldNotExist
${
'
foo/bar
'
}
|
${
'
/foo/bar
'
}
|
${[]}
|
${[
ROOT_CHEVRON
,
ELLIPSIS_ICON
,
ELLIPSIS_CHEVRON
,
LEAF_LINK
]}
${
'
foo/bar/baz
'
}
|
${
'
/foo/bar
'
}
|
${[
ROOT_CHEVRON
,
LEAF_LINK
]}
|
${[
ELLIPSIS_ICON
,
ELLIPSIS_CHEVRON
]}
${
'
foo/bar/baz/baz2
'
}
|
${
'
/foo/bar
'
}
|
${[
ROOT_CHEVRON
,
LEAF_LINK
,
ELLIPSIS_ICON
,
ELLIPSIS_CHEVRON
]}
|
${[]}
${
'
foo/bar/baz/baz2/bar2
'
}
|
${
'
/foo/bar
'
}
|
${[
ROOT_CHEVRON
,
LEAF_LINK
,
ELLIPSIS_ICON
,
ELLIPSIS_CHEVRON
]}
|
${[]}
`
(
'
given path $path
'
,
({
path
,
shouldExist
,
shouldNotExist
,
rootUrl
})
=>
{
const
pathPieces
=
path
.
split
(
'
/
'
).
slice
(
1
);
const
hasTooltip
=
shouldExist
.
includes
(
ELLIPSIS_ICON
);
beforeEach
(()
=>
{
mountComponent
({
path
});
});
it
(
'
should have a base icon
'
,
()
=>
{
expect
(
findItem
(
BASE_ICON
).
exists
()).
toBe
(
true
);
});
it
(
'
should have a root link
'
,
()
=>
{
const
root
=
findItem
(
ROOT_LINK
);
expect
(
root
.
exists
()).
toBe
(
true
);
expect
(
root
.
attributes
(
'
href
'
)).
toBe
(
rootUrl
);
});
if
(
hasTooltip
)
{
it
(
'
should have a tooltip
'
,
()
=>
{
const
tooltip
=
findTooltip
(
findItem
(
ELLIPSIS_ICON
));
expect
(
tooltip
).
toBeDefined
();
expect
(
tooltip
.
value
).
toMatchObject
({
title
:
path
,
});
});
}
if
(
shouldExist
.
length
)
{
it
.
each
(
shouldExist
)(
`should have %s`
,
element
=>
{
expect
(
findItem
(
element
).
exists
()).
toBe
(
true
);
});
}
if
(
shouldNotExist
.
length
)
{
it
.
each
(
shouldNotExist
)(
`should not have %s`
,
element
=>
{
expect
(
findItem
(
element
).
exists
()).
toBe
(
false
);
});
}
if
(
shouldExist
.
includes
(
LEAF_LINK
))
{
it
(
'
the last link should be the last piece of the path
'
,
()
=>
{
const
leaf
=
findItem
(
LEAF_LINK
);
expect
(
leaf
.
attributes
(
'
href
'
)).
toBe
(
`/
${
path
}
`
);
expect
(
leaf
.
text
()).
toBe
(
pathPieces
[
pathPieces
.
length
-
1
]);
});
}
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment