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 @@ ...@@ -4,7 +4,7 @@
font-size: 13px; font-size: 13px;
} }
.sectionHead { .sectionHead {
color: $dark-grey; font-weight: $light;
font-size: 12px; font-size: 12px;
border-bottom: 1px solid $grey; border-bottom: 1px solid $grey;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -35,11 +35,12 @@ ...@@ -35,11 +35,12 @@
} }
.xrefAccordionButton { .xrefAccordionButton {
color: $black; color: $blue;
padding: 0px; padding: 0px;
width: auto; width: auto;
padding-right: 60px; padding-right: 60px;
display: inline-block; display: inline-block;
margin-left: 20px;
&:before, &:before,
&:after { &:after {
...@@ -62,9 +63,11 @@ ...@@ -62,9 +63,11 @@
cursor: pointer; cursor: pointer;
} }
.transcriptXrefs { .transcriptXrefs {
margin: 10px 0 20px 20px; margin: 10px 0 20px 0;
} }
.externalReferenceContainer{ .externalReferenceContainer{
margin-bottom:10px; margin-bottom:10px;
margin-left: 20px;
} }
@import 'src/styles/common'; @import 'src/styles/common';
.container { .externalLinkContainer {
display: inline-grid; display: inline-grid;
grid-template-columns: [icon] 12px 5px [link] auto; grid-template-columns: [icon] auto [link] auto;
} }
.icon { .icon {
...@@ -12,11 +12,12 @@ ...@@ -12,11 +12,12 @@
top: 1px; top: 1px;
position: relative; position: relative;
height: 12px; height: 12px;
width: 12px;
} }
.link { .link {
display: inline-block; display: inline-block;
grid-column: link;
position: relative; position: relative;
top: -2px; top: -2px;
margin-left: 5px;
} }
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
import React from 'react'; import React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import faker from 'faker'; import faker from 'faker';
import ExternalLink, { ExternalLinkProps } from './ExternalLink'; import ExternalLink, { ExternalLinkProps } from './ExternalLink';
...@@ -31,9 +30,7 @@ const defaultProps: ExternalLinkProps = { ...@@ -31,9 +30,7 @@ const defaultProps: ExternalLinkProps = {
}; };
describe('<ExternalLink />', () => { describe('<ExternalLink />', () => {
const renderExternalLink = (props: Partial<ExternalLinkProps> = {}) => const renderExternalLink = () => render(<ExternalLink {...defaultProps} />);
render(<ExternalLink {...defaultProps} {...props} />);
it('renders without error', () => { it('renders without error', () => {
const { container } = renderExternalLink(); const { container } = renderExternalLink();
expect(() => container).not.toThrow(); expect(() => container).not.toThrow();
...@@ -41,11 +38,16 @@ describe('<ExternalLink />', () => { ...@@ -41,11 +38,16 @@ describe('<ExternalLink />', () => {
it('applies the passed in classNames', () => { it('applies the passed in classNames', () => {
const { container } = renderExternalLink(); const { container } = renderExternalLink();
expect(container.getElementsByClassName('.icon')).toBeTruthy();
expect( expect(
container container
.querySelector('.link') .querySelector(`icon-mock`)
?.classList.contains(defaultProps.classNames?.link as string) ?.getAttribute('classname')
?.includes(defaultProps.classNames?.icon as string)
).toBeTruthy();
expect(
container.querySelector(`.link.${defaultProps.classNames?.link}`)
).toBeTruthy(); ).toBeTruthy();
}); });
}); });
...@@ -36,7 +36,7 @@ const ExternalLink = (props: ExternalLinkProps) => { ...@@ -36,7 +36,7 @@ const ExternalLink = (props: ExternalLinkProps) => {
const linkClass = classNames(styles.link, props.classNames?.link); const linkClass = classNames(styles.link, props.classNames?.link);
return ( return (
<span className={styles.container} data-test-id="external link container"> <span className={styles.externalLinkContainer}>
<LinkIcon className={iconClass} /> <LinkIcon className={iconClass} />
<a <a
className={linkClass} className={linkClass}
......
...@@ -2,9 +2,14 @@ ...@@ -2,9 +2,14 @@
.label { .label {
margin-right: 5px; margin-right: 5px;
font-weight: $light;
} }
.xrefText { .xrefText {
font-weight: $light; font-weight: $light;
margin-left: 7px; margin-left: 7px;
} }
.noLink {
margin-left: 5px;
}
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
*/ */
import React from 'react'; import React from 'react';
import { render, screen } from '@testing-library/react'; import { render } from '@testing-library/react';
import faker from 'faker'; import faker from 'faker';
import ExternalReference, { ExternalReferenceProps } from './ExternalReference'; import ExternalReference, { ExternalReferenceProps } from './ExternalReference';
...@@ -37,45 +37,57 @@ describe('<ExternalReference />', () => { ...@@ -37,45 +37,57 @@ describe('<ExternalReference />', () => {
props: Partial<ExternalReferenceProps> = {} props: Partial<ExternalReferenceProps> = {}
) => render(<ExternalReference {...defaultProps} {...props} />); ) => render(<ExternalReference {...defaultProps} {...props} />);
let container: any;
beforeEach(() => { beforeEach(() => {
jest.resetAllMocks(); jest.resetAllMocks();
container = renderExternalReference().container;
}); });
it('renders without error', () => { it('renders without error', () => {
const { container } = renderExternalReference();
expect(() => container).not.toThrow(); expect(() => container).not.toThrow();
}); });
it('hides label container div when there is no label', () => { it('hides label container div when there is no label', () => {
container = renderExternalReference({ label: undefined }).container; const { container } = renderExternalReference({ label: undefined });
expect(container.querySelectorAll('.label')).toHaveLength(0);
expect(container.querySelector('.label')).toBeFalsy();
}); });
it('applies the passed in classNames', () => { it('applies the passed in classNames', () => {
const { container } = renderExternalReference();
expect( expect(
screen container.querySelector(`.${defaultProps.classNames?.container}`)
.getByTestId('external reference container')
.classList.contains(defaultProps.classNames?.container as string)
).toBeTruthy(); ).toBeTruthy();
expect( expect(
container container
.querySelector('.label') .querySelector('.label')
.classList.contains(defaultProps.classNames?.label) ?.classList.contains(defaultProps.classNames?.label as string)
).toBeTruthy(); ).toBeTruthy();
const externalLink = screen.getByTestId('external link container');
expect( expect(
externalLink container
.getElementsByTagName('icon-mock')[0] .querySelector(`.externalLinkContainer icon-mock`)
.getAttribute('classname') ?.getAttribute('classname')
).toMatch(defaultProps.classNames?.icon as string); ?.includes(defaultProps.classNames?.icon as string)
).toBeTruthy();
expect( expect(
externalLink container.querySelector(
.getElementsByTagName('a')[0] `.externalLinkContainer .${defaultProps.classNames?.link}`
.classList.contains(defaultProps.classNames?.link as string) )
).toBeTruthy(); ).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) => { ...@@ -46,6 +46,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
return ( return (
<div {...containerProps} data-test-id="external reference container"> <div {...containerProps} data-test-id="external reference container">
{!!props.label && <span className={labelClass}>{props.label}</span>} {!!props.label && <span className={labelClass}>{props.label}</span>}
{props.to ? ( {props.to ? (
<ExternalLink <ExternalLink
to={props.to} to={props.to}
...@@ -56,7 +57,7 @@ const ExternalReference = (props: ExternalReferenceProps) => { ...@@ -56,7 +57,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
}} }}
/> />
) : ( ) : (
<span className={styles.xrefText}>{props.linkText}</span> <span className={styles.noLink}>{props.linkText}</span>
)} )}
</div> </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