Unverified Commit fca8ac61 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
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
......@@ -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: $black;
color: $blue;
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;
}
@import 'src/styles/common';
.container {
.externalLinkContainer {
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;
}
......@@ -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();
});
});
......@@ -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 link container">
<span className={styles.externalLinkContainer}>
<LinkIcon className={iconClass} />
<a
className={linkClass}
......
......@@ -2,9 +2,14 @@
.label {
margin-right: 5px;
font-weight: $light;
}
.xrefText {
font-weight: $light;
margin-left: 7px;
}
.noLink {
margin-left: 5px;
}
......@@ -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
);
});
});
......@@ -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>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment