Unverified Commit 877a0243 authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

Make BrowserInfo a shared component (#241)

* moving BrowserInfo to shared component so that it can be used again for entity viewer top bar

* made changes base on review, createing a separate test for featuresummarystrip, adding isGhosted for regionsummarystrip

* use && instead of ternary to check whether to render component
parent c97d9b2c
Pipeline #58406 passed with stages
in 4 minutes and 58 seconds
import React from 'react';
import { mount } from 'enzyme';
import { BrowserBar, BrowserInfo, BrowserBarProps } from './BrowserBar';
import { BrowserBar, BrowserBarProps } from './BrowserBar';
import BrowserReset from 'src/content/app/browser/browser-reset/BrowserReset';
import BrowserLocationIndicator from 'src/content/app/browser/browser-location-indicator/BrowserLocationIndicator';
import {
GeneSummaryStrip,
RegionSummaryStrip
} from 'src/shared/components/feature-summary-strip';
import FeatureSummaryStrip from 'src/shared/components/feature-summary-strip/FeatureSummaryStrip';
import { ChrLocation } from '../browserState';
......@@ -20,10 +17,10 @@ jest.mock(
'src/content/app/browser/browser-location-indicator/BrowserLocationIndicator',
() => () => <div>Browser Location Indicator</div>
);
jest.mock('src/shared/components/feature-summary-strip', () => ({
GeneSummaryStrip: () => <div>Gene Summary Strip</div>,
RegionSummaryStrip: () => <div>Region Summary Strip</div>
}));
jest.mock(
'src/shared/components/feature-summary-strip/FeatureSummaryStrip',
() => () => <div>Feature Summary Strip</div>
);
describe('<BrowserBar />', () => {
const defaultProps = {
......@@ -52,25 +49,20 @@ describe('<BrowserBar />', () => {
expect(renderedBrowserBar.find(BrowserLocationIndicator).length).toBe(1);
});
test('renders GeneSummaryStrip if focus object is gene', () => {
const renderedBrowserBar = mount(
renderBrowserBar({ ensObject: createEnsObject('gene') })
);
expect(renderedBrowserBar.find(GeneSummaryStrip).length).toBe(1);
});
test('renders RegionSummaryStrip if focus object is region', () => {
const renderedBrowserBar = mount(
renderBrowserBar({ ensObject: createEnsObject('region') })
);
expect(renderedBrowserBar.find(RegionSummaryStrip).length).toBe(1);
test('contains FeatureSummaryStrip', () => {
expect(renderedBrowserBar.find(FeatureSummaryStrip).length).toBe(1);
});
});
describe('behaviour', () => {
test('shows BrowserInfo panel by default', () => {
const renderedBrowserBar = mount(renderBrowserBar());
expect(renderedBrowserBar.find(BrowserInfo).length).toBe(1);
let renderedBrowserBar: any;
test('shows FeatureSummaryStrip when ensObject is not null', () => {
renderedBrowserBar = mount(renderBrowserBar());
expect(renderedBrowserBar.find(FeatureSummaryStrip).length).toBe(1);
renderedBrowserBar = mount(renderBrowserBar({ ensObject: null }));
expect(renderedBrowserBar.find(FeatureSummaryStrip).length).toBe(0);
});
});
});
......@@ -9,10 +9,7 @@ import {
import { getIsDrawerOpened } from '../drawer/drawerSelectors';
import BrowserReset from '../browser-reset/BrowserReset';
import {
GeneSummaryStrip,
RegionSummaryStrip
} from 'src/shared/components/feature-summary-strip';
import FeatureSummaryStrip from 'src/shared/components/feature-summary-strip/FeatureSummaryStrip';
import BrowserLocationIndicator from '../browser-location-indicator/BrowserLocationIndicator';
import { RootState } from 'src/store';
......@@ -28,11 +25,6 @@ export type BrowserBarProps = {
ensObject: EnsObject | null;
};
type BrowserInfoProps = {
ensObject: EnsObject;
isDrawerOpened: boolean;
};
export const BrowserBar = (props: BrowserBarProps) => {
// return empty div instead of null, so that the dedicated slot in the CSS grid of StandardAppLayout
// always contains a child DOM element
......@@ -45,10 +37,12 @@ export const BrowserBar = (props: BrowserBarProps) => {
<div className={styles.browserResetWrapper}>
<BrowserReset />
</div>
<BrowserInfo
ensObject={props.ensObject}
isDrawerOpened={props.isDrawerOpened}
/>
{props.ensObject && (
<FeatureSummaryStrip
ensObject={props.ensObject}
isGhosted={props.isDrawerOpened}
/>
)}
<div className={styles.browserLocationIndicatorWrapper}>
<BrowserLocationIndicator />
</div>
......@@ -56,21 +50,6 @@ export const BrowserBar = (props: BrowserBarProps) => {
);
};
export const BrowserInfo = (props: BrowserInfoProps) => {
const { ensObject, isDrawerOpened } = props;
const childProps = {
isGhosted: isDrawerOpened
};
switch (ensObject.object_type) {
case 'gene':
return <GeneSummaryStrip gene={ensObject} {...childProps} />;
case 'region':
return <RegionSummaryStrip region={ensObject} {...childProps} />;
default:
return null;
}
};
const mapStateToProps = (state: RootState) => ({
chrLocation: getChrLocation(state),
defaultChrLocation: getDefaultChrLocation(state),
......
import React from 'react';
import { mount } from 'enzyme';
import {
FeatureSummaryStrip,
FeatureSummaryStripProps
} from './FeatureSummaryStrip';
import { GeneSummaryStrip, RegionSummaryStrip } from '../feature-summary-strip';
import { createEnsObject } from 'tests/fixtures/ens-object';
jest.mock('../feature-summary-strip', () => ({
GeneSummaryStrip: () => <div>Gene Summary Strip</div>,
RegionSummaryStrip: () => <div>Region Summary Strip</div>
}));
describe('<FeatureSummaryStrip />', () => {
const defaultProps = {
ensObject: createEnsObject(),
isGhosted: false
};
const renderFeatureSummaryStrip = (
props?: Partial<FeatureSummaryStripProps>
) => <FeatureSummaryStrip {...defaultProps} {...props} />;
describe('general', () => {
test('contains GeneSummaryStrip if focus object is gene', () => {
const renderedFeatureSummaryStrip = mount(
renderFeatureSummaryStrip({ ensObject: createEnsObject('gene') })
);
expect(renderedFeatureSummaryStrip.find(GeneSummaryStrip).length).toBe(1);
});
test('contains RegionSummaryStrip if focus object is region', () => {
const renderedFeatureSummaryStrip = mount(
renderFeatureSummaryStrip({ ensObject: createEnsObject('region') })
);
expect(renderedFeatureSummaryStrip.find(RegionSummaryStrip).length).toBe(
1
);
});
test('does not contain anything if focus object is not defined', () => {
const renderedFeatureSummaryStrip = mount(
renderFeatureSummaryStrip({ ensObject: createEnsObject('xyz') })
);
expect(renderedFeatureSummaryStrip.html()).toBe(null);
});
});
});
import React from 'react';
import { GeneSummaryStrip, RegionSummaryStrip } from '../feature-summary-strip';
import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
export type FeatureSummaryStripProps = {
ensObject: EnsObject;
isGhosted: boolean;
};
export const FeatureSummaryStrip = (props: FeatureSummaryStripProps) => {
const { ensObject, isGhosted } = props;
switch (ensObject.object_type) {
case 'gene':
return <GeneSummaryStrip gene={ensObject} isGhosted={isGhosted} />;
case 'region':
return <RegionSummaryStrip region={ensObject} isGhosted={isGhosted} />;
default:
return null;
}
};
export default FeatureSummaryStrip;
import React from 'react';
import classNames from 'classnames';
import { getFormattedLocation } from 'src/shared/helpers/regionFormatter';
......@@ -8,11 +9,15 @@ import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
type Props = {
region: EnsObject;
isGhosted?: boolean;
};
const RegionSummaryStrip = ({ region }: Props) => {
const RegionSummaryStrip = ({ region, isGhosted }: Props) => {
const stripClasses = classNames(styles.featureSummaryStrip, {
[styles.featureSummaryStripGhosted]: isGhosted
});
return (
<div className={styles.featureSummaryStrip}>
<div className={stripClasses}>
<span className={styles.featureSummaryStripLabel}>Region:</span>
<span className={styles.featureDisplayName}>
{getFormattedLocation(region.location)}
......
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