Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
fca8ac61
Unverified
Commit
fca8ac61
authored
Apr 09, 2021
by
Manoj Pandian Sakthivel
Committed by
GitHub
Apr 09, 2021
Browse files
Update display of External references where there is no URL (#483)
parent
b51efa44
Pipeline
#145481
passed with stages
in 11 minutes and 4 seconds
Changes
7
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
57 additions
and
33 deletions
+57
-33
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss
...w-sidebar/external-references/GeneExternalReferences.scss
+6
-3
src/ensembl/src/shared/components/external-link/ExternalLink.scss
...mbl/src/shared/components/external-link/ExternalLink.scss
+4
-3
src/ensembl/src/shared/components/external-link/ExternalLink.test.tsx
...src/shared/components/external-link/ExternalLink.test.tsx
+9
-7
src/ensembl/src/shared/components/external-link/ExternalLink.tsx
...embl/src/shared/components/external-link/ExternalLink.tsx
+1
-1
src/ensembl/src/shared/components/external-reference/ExternalReference.scss
...ared/components/external-reference/ExternalReference.scss
+5
-0
src/ensembl/src/shared/components/external-reference/ExternalReference.test.tsx
.../components/external-reference/ExternalReference.test.tsx
+30
-18
src/ensembl/src/shared/components/external-reference/ExternalReference.tsx
...hared/components/external-reference/ExternalReference.tsx
+2
-1
No files found.
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss
View file @
fca8ac61
...
...
@@ -4,7 +4,7 @@
font-size
:
13px
;
}
.sectionHead
{
color
:
$dark-grey
;
font-weight
:
$light
;
font-size
:
12px
;
border-bottom
:
1px
solid
$grey
;
margin-bottom
:
15px
;
...
...
@@ -35,11 +35,12 @@
}
.xrefAccordionButton
{
color
:
$bl
ack
;
color
:
$bl
ue
;
padding
:
0px
;
width
:
auto
;
padding-right
:
60px
;
display
:
inline-block
;
margin-left
:
20px
;
&
:before
,
&
:after
{
...
...
@@ -62,9 +63,11 @@
cursor
:
pointer
;
}
.transcriptXrefs
{
margin
:
10px
0
20px
20px
;
margin
:
10px
0
20px
0
;
}
.externalReferenceContainer
{
margin-bottom
:
10px
;
margin-left
:
20px
;
}
src/ensembl/src/shared/components/external-link/ExternalLink.scss
View file @
fca8ac61
@import
'src/styles/common'
;
.
c
ontainer
{
.
externalLinkC
ontainer
{
display
:
inline-grid
;
grid-template-columns
:
[
icon
]
12px
5px
[
link
]
auto
;
grid-template-columns
:
[
icon
]
auto
[
link
]
auto
;
}
.icon
{
...
...
@@ -12,11 +12,12 @@
top
:
1px
;
position
:
relative
;
height
:
12px
;
width
:
12px
;
}
.link
{
display
:
inline-block
;
grid-column
:
link
;
position
:
relative
;
top
:
-2px
;
margin-left
:
5px
;
}
src/ensembl/src/shared/components/external-link/ExternalLink.test.tsx
View file @
fca8ac61
...
...
@@ -16,7 +16,6 @@
import
React
from
'
react
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
ExternalLink
,
{
ExternalLinkProps
}
from
'
./ExternalLink
'
;
...
...
@@ -31,9 +30,7 @@ const defaultProps: ExternalLinkProps = {
};
describe
(
'
<ExternalLink />
'
,
()
=>
{
const
renderExternalLink
=
(
props
:
Partial
<
ExternalLinkProps
>
=
{})
=>
render
(<
ExternalLink
{
...
defaultProps
}
{
...
props
}
/>);
const
renderExternalLink
=
()
=>
render
(<
ExternalLink
{
...
defaultProps
}
/>);
it
(
'
renders without error
'
,
()
=>
{
const
{
container
}
=
renderExternalLink
();
expect
(()
=>
container
).
not
.
toThrow
();
...
...
@@ -41,11 +38,16 @@ describe('<ExternalLink />', () => {
it
(
'
applies the passed in classNames
'
,
()
=>
{
const
{
container
}
=
renderExternalLink
();
expect
(
container
.
getElementsByClassName
(
'
.icon
'
)).
toBeTruthy
();
expect
(
container
.
querySelector
(
'
.link
'
)
?.
classList
.
contains
(
defaultProps
.
classNames
?.
link
as
string
)
.
querySelector
(
`icon-mock`
)
?.
getAttribute
(
'
classname
'
)
?.
includes
(
defaultProps
.
classNames
?.
icon
as
string
)
).
toBeTruthy
();
expect
(
container
.
querySelector
(
`.link.
${
defaultProps
.
classNames
?.
link
}
`
)
).
toBeTruthy
();
});
});
src/ensembl/src/shared/components/external-link/ExternalLink.tsx
View file @
fca8ac61
...
...
@@ -36,7 +36,7 @@ const ExternalLink = (props: ExternalLinkProps) => {
const
linkClass
=
classNames
(
styles
.
link
,
props
.
classNames
?.
link
);
return
(
<
span
className
=
{
styles
.
container
}
data
-
test
-
id
=
"
external
l
ink
c
ontainer
"
>
<
span
className
=
{
styles
.
external
L
ink
C
ontainer
}
>
<
LinkIcon
className
=
{
iconClass
}
/>
<
a
className
=
{
linkClass
}
...
...
src/ensembl/src/shared/components/external-reference/ExternalReference.scss
View file @
fca8ac61
...
...
@@ -2,9 +2,14 @@
.label
{
margin-right
:
5px
;
font-weight
:
$light
;
}
.xrefText
{
font-weight
:
$light
;
margin-left
:
7px
;
}
.noLink
{
margin-left
:
5px
;
}
src/ensembl/src/shared/components/external-reference/ExternalReference.test.tsx
View file @
fca8ac61
...
...
@@ -15,7 +15,7 @@
*/
import
React
from
'
react
'
;
import
{
render
,
screen
}
from
'
@testing-library/react
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
ExternalReference
,
{
ExternalReferenceProps
}
from
'
./ExternalReference
'
;
...
...
@@ -37,45 +37,57 @@ describe('<ExternalReference />', () => {
props
:
Partial
<
ExternalReferenceProps
>
=
{}
)
=>
render
(<
ExternalReference
{
...
defaultProps
}
{
...
props
}
/>);
let
container
:
any
;
beforeEach
(()
=>
{
jest
.
resetAllMocks
();
container
=
renderExternalReference
().
container
;
});
it
(
'
renders without error
'
,
()
=>
{
const
{
container
}
=
renderExternalReference
();
expect
(()
=>
container
).
not
.
toThrow
();
});
it
(
'
hides label container div when there is no label
'
,
()
=>
{
container
=
renderExternalReference
({
label
:
undefined
}).
container
;
expect
(
container
.
querySelectorAll
(
'
.label
'
)).
toHaveLength
(
0
);
const
{
container
}
=
renderExternalReference
({
label
:
undefined
});
expect
(
container
.
querySelector
(
'
.label
'
)).
toBeFalsy
();
});
it
(
'
applies the passed in classNames
'
,
()
=>
{
const
{
container
}
=
renderExternalReference
();
expect
(
screen
.
getByTestId
(
'
external reference container
'
)
.
classList
.
contains
(
defaultProps
.
classNames
?.
container
as
string
)
container
.
querySelector
(
`.
${
defaultProps
.
classNames
?.
container
}
`
)
).
toBeTruthy
();
expect
(
container
.
querySelector
(
'
.label
'
)
.
classList
.
contains
(
defaultProps
.
classNames
?.
label
)
?
.
classList
.
contains
(
defaultProps
.
classNames
?.
label
as
string
)
).
toBeTruthy
();
const
externalLink
=
screen
.
getByTestId
(
'
external link container
'
);
expect
(
externalLink
.
getElementsByTagName
(
'
icon-mock
'
)[
0
]
.
getAttribute
(
'
classname
'
)
).
toMatch
(
defaultProps
.
classNames
?.
icon
as
string
);
container
.
querySelector
(
`.externalLinkContainer icon-mock`
)
?.
getAttribute
(
'
classname
'
)
?.
includes
(
defaultProps
.
classNames
?.
icon
as
string
)
).
toBeTruthy
();
expect
(
externalLink
.
getElementsByTagName
(
'
a
'
)[
0
]
.
classList
.
contains
(
defaultProps
.
classNames
?.
link
as
string
)
container
.
querySelector
(
`.externalLinkContainer .
${
defaultProps
.
classNames
?.
link
}
`
)
).
toBeTruthy
();
});
it
(
'
does not display ExternalLink component when there is no link
'
,
()
=>
{
const
{
container
}
=
renderExternalReference
({
to
:
undefined
});
expect
(
container
.
querySelector
(
`.externalLinkContainer`
)).
toBeFalsy
();
expect
(
container
.
querySelector
(
`.noLink`
)).
toBeTruthy
();
expect
(
container
.
querySelector
(
`.noLink`
)?.
textContent
).
toBe
(
defaultProps
.
linkText
);
});
});
src/ensembl/src/shared/components/external-reference/ExternalReference.tsx
View file @
fca8ac61
...
...
@@ -46,6 +46,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
return
(
<
div
{
...
containerProps
}
data
-
test
-
id
=
"external reference container"
>
{
!!
props
.
label
&&
<
span
className
=
{
labelClass
}
>
{
props
.
label
}
</
span
>
}
{
props
.
to
?
(
<
ExternalLink
to
=
{
props
.
to
}
...
...
@@ -56,7 +57,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
}
}
/>
)
:
(
<
span
className
=
{
styles
.
xrefText
}
>
{
props
.
linkText
}
</
span
>
<
span
className
=
{
styles
.
noLink
}
>
{
props
.
linkText
}
</
span
>
)
}
</
div
>
);
...
...
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