Commit 35e8ca6a authored by Imran Salam's avatar Imran Salam
Browse files

fix test cases after refactoring

parent 432a719d
......@@ -4,7 +4,7 @@ exports[`<Root /> renders correctly 1`] = `
<BrowserRouter>
<StrictMode>
<React.Memo />
<withRouter(Connect(Content)) />
<withRouter(Connect(Component)) />
</StrictMode>
</BrowserRouter>
`;
......@@ -7,7 +7,7 @@ import {
import { mount, render } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Content } from './Content';
import { Content, getExpandClass } from './Content';
describe('<Content />', () => {
let WrappedComponent: any;
......@@ -31,10 +31,7 @@ describe('<Content />', () => {
);
expect(
wrapper
.find(Content)
.instance()
.getExpandClass()
getExpandClass(wrapper.find(Content).prop('launchbarExpanded'))
).toBe('');
});
......@@ -49,12 +46,9 @@ describe('<Content />', () => {
</MemoryRouter>
);
expect(
wrapper
.find(Content)
.instance()
.getExpandClass()
).toBe('expanded');
expect(getExpandClass(wrapper.prop('launchbarExpanded'))).toBe(
'expanded'
);
});
});
......
......@@ -18,15 +18,17 @@ type OwnProps = {};
type ContentProps = RouteComponentProps & StateProps & OwnProps;
export const getExpandClass = (launchbarExpanded: boolean): string => {
return launchbarExpanded ? '' : styles.expanded;
};
export const Content: FunctionComponent<ContentProps> = (
props: ContentProps
) => {
const getExpandClass = (): string => {
return props.launchbarExpanded ? '' : styles.expanded;
};
return (
<main className={`${styles.content} ${getExpandClass()}`}>
<main
className={`${styles.content} ${getExpandClass(props.launchbarExpanded)}`}
>
<Route path="/app" component={App} />
</main>
);
......
......@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserBar from './BrowserBar';
import { BrowserBar } from './BrowserBar';
describe('<BrowserBar />', () => {
let toggleBrowserNavFn: () => void;
......
......@@ -11,72 +11,72 @@ type BrowserBarProps = {
toggleBrowserNav: () => void;
};
const BrowserBar: FunctionComponent<BrowserBarProps> = memo(
(props: BrowserBarProps) => {
const { navigator, reset } = browserInfoConfig;
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
props: BrowserBarProps
) => {
const { navigator, reset } = browserInfoConfig;
return (
<div className={styles.browserBar}>
<div className={styles.browserInfo}>
<dl className={styles.browserInfoLeft}>
<dd className={styles.resetButton}>
<button>
<img src={reset.icon.default} alt={reset.description} />
</button>
</dd>
<dd className={styles.geneSymbol}>
<label>Gene</label>
<span className={styles.value}>BRAC2</span>
</dd>
<dd>
<label>Stable ID</label>
<span className={styles.value}>ENSG00000139618</span>
</dd>
<dd>
<label>Spliced mRNA length</label>
<span className={styles.value}>84,793</span>
<label>bp</label>
</dd>
<dd>protein coding</dd>
<dd>forward strand</dd>
</dl>
<dl className={styles.browserInfoRight}>
<dd>
<label>Chromosome</label>
<ContentEditable html={'13'} className="content-editable-box" />
<ContentEditable html={'32,315,474 - 32,400,266'} />
</dd>
<dd className={styles.navigator}>
<button
title={navigator.description}
onClick={props.toggleBrowserNav}
>
<img
src={
props.browserNavOpened
? navigator.icon.selected
: navigator.icon.default
}
alt={navigator.description}
/>
</button>
</dd>
</dl>
</div>
<dl className={styles.browserTabs}>
return (
<div className={styles.browserBar}>
<div className={styles.browserInfo}>
<dl className={styles.browserInfoLeft}>
<dd className={styles.resetButton}>
<button>
<img src={reset.icon.default} alt={reset.description} />
</button>
</dd>
<dd className={styles.geneSymbol}>
<label>Gene</label>
<span className={styles.value}>BRAC2</span>
</dd>
<dd>
<button className={styles.active}>Key Data</button>
<label>Stable ID</label>
<span className={styles.value}>ENSG00000139618</span>
</dd>
<dd>
<button>Variation</button>
<label>Spliced mRNA length</label>
<span className={styles.value}>84,793</span>
<label>bp</label>
</dd>
<dd>protein coding</dd>
<dd>forward strand</dd>
</dl>
<dl className={styles.browserInfoRight}>
<dd>
<button>Expression</button>
<label>Chromosome</label>
<ContentEditable html={'13'} className="content-editable-box" />
<ContentEditable html={'32,315,474 - 32,400,266'} />
</dd>
<dd className={styles.navigator}>
<button
title={navigator.description}
onClick={props.toggleBrowserNav}
>
<img
src={
props.browserNavOpened
? navigator.icon.selected
: navigator.icon.default
}
alt={navigator.description}
/>
</button>
</dd>
</dl>
</div>
);
}
);
<dl className={styles.browserTabs}>
<dd>
<button className={styles.active}>Key Data</button>
</dd>
<dd>
<button>Variation</button>
</dd>
<dd>
<button>Expression</button>
</dd>
</dl>
</div>
);
};
export default BrowserBar;
export default memo(BrowserBar);
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BrowserBar /> renders correctly 1`] = `undefined`;
exports[`<BrowserBar /> renders correctly 1`] = `
<div
className="browserBar"
>
<div
className="browserInfo"
>
<dl
className="browserInfoLeft"
>
<dd
className="resetButton"
>
<button>
<img
alt="reset browser image"
src={Object {}}
/>
</button>
</dd>
<dd
className="geneSymbol"
>
<label>
Gene
</label>
<span
className="value"
>
BRAC2
</span>
</dd>
<dd>
<label>
Stable ID
</label>
<span
className="value"
>
ENSG00000139618
</span>
</dd>
<dd>
<label>
Spliced mRNA length
</label>
<span
className="value"
>
84,793
</span>
<label>
bp
</label>
</dd>
<dd>
protein coding
</dd>
<dd>
forward strand
</dd>
</dl>
<dl
className="browserInfoRight"
>
<dd>
<label>
Chromosome
</label>
<ContentEditable
className="content-editable-box"
html="13"
/>
<ContentEditable
html="32,315,474 - 32,400,266"
/>
</dd>
<dd
className="navigator"
>
<button
onClick={[MockFunction]}
title="toggle browser navigation"
>
<img
alt="toggle browser navigation"
src={Object {}}
/>
</button>
</dd>
</dl>
</div>
<dl
className="browserTabs"
>
<dd>
<button
className="active"
>
Key Data
</button>
</dd>
<dd>
<button>
Variation
</button>
</dd>
<dd>
<button>
Expression
</button>
</dd>
</dl>
</div>
`;
......@@ -3,7 +3,7 @@
exports[`<BrowserImage /> renders correctly 1`] = `
<BrowserImage>
<div
className="browser-stage"
className="browserStage"
/>
</BrowserImage>
`;
......@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserNavIcon from './BrowserNavIcon';
import { BrowserNavIcon } from './BrowserNavIcon';
import { browserNavConfig } from '../browserConfig';
......
......@@ -9,33 +9,33 @@ type BrowserNavIconProps = {
browserNavItem: BrowserNavItem;
};
const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = memo(
(props: BrowserNavIconProps) => {
const navigateBrowser = () => {
const { detail } = props.browserNavItem;
const navEvent = new CustomEvent('bpane', {
bubbles: true,
detail
});
const browserCanvas = document.querySelector(
`.${imageStyles.browserStage}`
) as HTMLElement;
browserCanvas.dispatchEvent(navEvent);
};
const { browserNavItem } = props;
return (
<dd className={iconStyles.browserNavIcon}>
<button title={browserNavItem.description} onClick={navigateBrowser}>
<img src={browserNavItem.icon.on} alt={browserNavItem.description} />
</button>
</dd>
);
}
);
export default BrowserNavIcon;
export const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = (
props: BrowserNavIconProps
) => {
const navigateBrowser = () => {
const { detail } = props.browserNavItem;
const navEvent = new CustomEvent('bpane', {
bubbles: true,
detail
});
const browserCanvas = document.querySelector(
`.${imageStyles.browserStage}`
) as HTMLElement;
browserCanvas.dispatchEvent(navEvent);
};
const { browserNavItem } = props;
return (
<dd className={iconStyles.browserNavIcon}>
<button title={browserNavItem.description} onClick={navigateBrowser}>
<img src={browserNavItem.icon.on} alt={browserNavItem.description} />
</button>
</dd>
);
};
export default memo(BrowserNavIcon);
......@@ -5,7 +5,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
className="browserNavBar"
>
<dl>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "navigate up",
......@@ -21,7 +21,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
}
key="navigate-up"
/>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "navigate down",
......@@ -37,7 +37,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
}
key="navigate-down"
/>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "zoom out",
......@@ -53,7 +53,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
}
key="zoom-out"
/>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "zoom in",
......@@ -69,7 +69,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
}
key="zoom-in"
/>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "navigate left",
......@@ -85,7 +85,7 @@ exports[`<BrowserNavBar /> renders correctly 1`] = `
}
key="navigate left"
/>
<BrowserNavIcon
<React.Memo
browserNavItem={
Object {
"description": "navigate right",
......
......@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Header from './Header';
import { Header } from './Header';
import Account from './account/Account';
import LaunchbarContainer from './launchbar/LaunchbarContainer';
import HeaderButtons from './header-buttons/HeaderButtons';
......
......@@ -8,7 +8,7 @@ import styles from './Header.scss';
type HeaderProps = {};
const Header: FunctionComponent<HeaderProps> = memo(() => (
export const Header: FunctionComponent<HeaderProps> = () => (
<header>
<div className={styles.topBar}>
<div>
......@@ -23,6 +23,6 @@ const Header: FunctionComponent<HeaderProps> = memo(() => (
<Account />
<LaunchbarContainer />
</header>
));
);
export default Header;
export default memo(Header);
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Header /> renders correctly 1`] = `undefined`;
exports[`<Header /> renders correctly 1`] = `
<header>
<div
className="topBar"
>
<div>
<div
className="companyText"
>
Ensembl
</div>
<div
className="strapline"
>
Pre-release - March 2019
</div>
<div
className="copyright"
>
<a
href="https://www.ebi.ac.uk"
>
© EMBL-EBI
</a>
</div>
</div>
<Connect(Component) />
</div>
<Connect(Component) />
<Connect(Component) />
</header>
`;
......@@ -2,7 +2,9 @@
exports[`<Account /> renders correctly 1`] = `
<ForwardRef>
<div>
<div
className="account"
>
<h2>
Account area placeholder
</h2>
......
import React, { FunctionComponent, memo } from 'react';
import React, { FunctionComponent } from 'react';
import { connect } from 'react-redux';
import { toggleAccount, toggleLaunchbar } from '../headerActions';
......@@ -19,17 +19,15 @@ type OwnProps = {};
type HeaderButtonsProps = StateProps & DispatchProps & OwnProps;
export const HeaderButtons: FunctionComponent<HeaderButtonsProps> = memo(
(props) => (
<div className={styles.headerButtons}>
<button className="launchbarButton" onClick={props.toggleLaunchbar}>
<img src={launchbarIcon} alt="toggle launchbar" title="Launchbar" />
</button>
<button className="accountButton" onClick={props.toggleAccount}>
<img src={userIcon} alt="toggle account" title="Account" />
</button>
</div>
)
export const HeaderButtons: FunctionComponent<HeaderButtonsProps> = (props) => (
<div className={styles.headerButtons}>
<button className="launchbarButton" onClick={props.toggleLaunchbar}>
<img src={launchbarIcon} alt="toggle launchbar" title="Launchbar" />
</button>
<button className="accountButton" onClick={props.toggleAccount}>
<img src={userIcon} alt="toggle account" title="Account" />
</button>
</div>
);
const mapStateToProps = (): StateProps => ({});
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<HeaderButtons /> renders correctly 1`] = `undefined`;
exports[`<HeaderButtons /> renders correctly 1`] = `
<div
className="headerButtons"