github.com/verdaccio
1
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-11-08 23:25:51 +01:00
Code Releases Wiki Activity

refactor: <Help /> component (#1118)

Browse Source 
* refactor: removes react-syntax-highlighter deps

* refactor: updates help component

* refactor: test cases for <Help/> component

* refactor: e2e test cases for <Help/> component

* refactor: implements code review <Help /> component
This commit is contained in:
Ayush Sharma 2018-11-16 22:29:56 +01:00 committed by Juan Picado @jotadeveloper
parent 9ef29df947
commit 4d1349a328
12 changed files with 80 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -130,7 +130,6 @@
"react-emotion": "9.2.8",
"react-hot-loader": "4.2.0",
"react-router-dom": "4.2.2",
"react-syntax-highlighter": "5.8.0",
"rimraf": "2.6.2",
"sass-loader": "7.1.0",
"source-map-loader": "0.2.4",

3
src/webui/components/CopyToClipBoard/styles.js
View File

@ -3,7 +3,8 @@ import IconButton from '@material-ui/core/IconButton/index';
export const ClipBoardCopy = styled.p`
&& {
padding: 5px 0 0 0;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
padding: 5px 0 5px 0;
margin: 0;
display: flex;
align-items: center;

29
src/webui/components/Help/help.scss
View File

@ -1,29 +0,0 @@
@import '../../styles/variables';
@import '../../styles/mixins';
.help {
.noPkg {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
font-size: $font-size-lg;
color: $nobel-02;
.noPkgTitle {
margin: 1em 0;
padding: 0;
font-size: $font-size-xl;
}
.noPkgIntro {
line-height: $line-height-xxs;
margin: 0 auto;
font-size: $font-size-sm;
}
code {
font-style: italic;
}
}
}

79
src/webui/components/Help/index.js
View File

@ -1,42 +1,51 @@
import React from 'react';
import SyntaxHighlighter, {registerLanguage} from 'react-syntax-highlighter/dist/light';
import sunburst from 'react-syntax-highlighter/src/styles/sunburst';
import js from 'react-syntax-highlighter/dist/languages/javascript';
/**
* @prettier
* @flow
*/
import classes from './help.scss';
import {getRegistryURL} from '../../utils/url';
import React, { Fragment } from 'react';
import type { Node } from 'react';
import CardActions from '@material-ui/core/CardActions/index';
import CardContent from '@material-ui/core/CardContent/index';
import Button from '@material-ui/core/Button/index';
import Typography from '@material-ui/core/Typography/index';
registerLanguage('javascript', js);
import CopyToClipBoard from '../CopyToClipBoard/index';
import { getRegistryURL } from '../../utils/url';
import { CardStyled as Card, HelpTitle } from './styles';
const Help = () => {
const registryURL = getRegistryURL();
function renderHeadingClipboardSegments(title: string, text: string): Node {
return (
<Fragment>
<Typography variant="body2">{title}</Typography>
<CopyToClipBoard text={text} />
</Fragment>
);
}
return (
<div className={classes.help}>
<li className={classes.noPkg}>
<h1 className={classes.noPkgTitle}>
No Package Published Yet
</h1>
<div className={classes.noPkgIntro}>
<div>
To publish your first package just:
</div>
<br/>
<strong>
1. Login
</strong>
<SyntaxHighlighter language='javascript' style={sunburst} id="adduser">
{`npm adduser --registry ${registryURL}`}
</SyntaxHighlighter>
<strong>2. Publish</strong>
<SyntaxHighlighter language='javascript' style={sunburst} id="publish">
{`npm publish --registry ${registryURL}`}
</SyntaxHighlighter>
<strong>3. Refresh this page!</strong>
</div>
</li>
</div>
);
const Help = (): Node => {
const registryUrl = getRegistryURL();
return (
<Card id="help-card">
<CardContent>
<Typography component="h2" variant="headline" gutterBottom id="help-card__title">
No Package Published Yet.
</Typography>
<HelpTitle color="textSecondary" gutterBottom>
To publish your first package just:
</HelpTitle>
{renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
{renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
<Typography variant="body2">3. Refresh this page.</Typography>
</CardContent>
<CardActions>
<Button href="https://verdaccio.org/docs/en/installation" target="_blank" size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
};
export default Help;

21
src/webui/components/Help/styles.js Normal file
View File

@ -0,0 +1,21 @@
/**
* @prettier
* @flow
*/
import styled from 'react-emotion';
import Card from '@material-ui/core/Card/index';
import Typography from '@material-ui/core/Typography/index';
export const CardStyled = styled(Card)`
&& {
width: 600px;
margin: auto;
}
`;
export const HelpTitle = styled(Typography)`
&& {
margin-bottom: 20px;
}
`;

14
test/e2e/e2e.spec.js
View File

@ -56,25 +56,25 @@ describe('/ (Verdaccio Page)', () => {
});
it('should load without error', async () => {
let text = await page.evaluate(() => document.body.textContent);
const text = await page.evaluate(() => document.body.textContent);
// FIXME: perhaps it is not the best approach
expect(text).toContain('Powered by');
});
it('should match title with no packages published', async () => {
let text = await page.evaluate(() => document.querySelector('.container h1').textContent);
const text = await page.evaluate(() => document.querySelector('#help-card__title').textContent);
expect(text).toMatch('No Package Published Yet');
});
it('should match title with first step', async () => {
let text = await page.evaluate(() => document.querySelector('#adduser code').textContent);
expect(text).toMatch('npm adduser --registry http://0.0.0.0:55558');
const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
expect(text).toContain('$ npm adduser --registry http://0.0.0.0:55558');
});
it('should match title with second step', async () => {
let text = await page.evaluate(() => document.querySelector('#publish code').textContent);
expect(text).toMatch('npm publish --registry http://0.0.0.0:55558');
const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
expect(text).toContain('$ npm publish --registry http://0.0.0.0:55558');
});
it('should match button Login to sign in', async () => {
@ -151,7 +151,7 @@ describe('/ (Verdaccio Page)', () => {
await page.waitFor(500);
await page.reload();
await page.waitFor(500);
let text = await page.evaluate(() => document.querySelector('.container h1').textContent);
const text = await page.evaluate(() => document.querySelector('#help-card__title').textContent);
expect(text).toMatch('No Package Published Yet');
});
});

2
test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<CopyToClipBoard /> component render the component 1`] = `"<p class=\\"css-1cxz858 eduq2bv0\\"><span class=\\"css-1m8aenu eduq2bv1\\">copy text</span><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-14 MuiIconButton-root-8 css-56v3u0 eduq2bv2\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-13\\"><svg class=\\"MuiSvgIcon-root-17\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-26\\"></span></button></p>"`;
exports[`<CopyToClipBoard /> component render the component 1`] = `"<p class=\\"css-1a0lalv eduq2bv0\\"><span class=\\"css-1m8aenu eduq2bv1\\">copy text</span><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-14 MuiIconButton-root-8 css-56v3u0 eduq2bv2\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-13\\"><svg class=\\"MuiSvgIcon-root-17\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-26\\"></span></button></p>"`;

4
test/unit/webui/components/__snapshots__/help.spec.js.snap
View File

@ -1,5 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Help /> component should set html from props with / base path 1`] = `"<div class=\\"help\\"><li class=\\"noPkg\\"><h1 class=\\"noPkgTitle\\">No Package Published Yet</h1><div class=\\"noPkgIntro\\"><div>To publish your first package just:</div><br/><strong>1. Login</strong><pre id=\\"adduser\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm adduser --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com</span></code></pre><strong>2. Publish</strong><pre id=\\"publish\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm publish --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com</span></code></pre><strong>3. Refresh this page!</strong></div></li></div>"`;
exports[`<Help /> component should set html from props with someOtherPath 1`] = `"<div class=\\"help\\"><li class=\\"noPkg\\"><h1 class=\\"noPkgTitle\\">No Package Published Yet</h1><div class=\\"noPkgIntro\\"><div>To publish your first package just:</div><br/><strong>1. Login</strong><pre id=\\"adduser\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm adduser --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com/someOtherPath</span></code></pre><strong>2. Publish</strong><pre id=\\"publish\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm publish --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com/someOtherPath</span></code></pre><strong>3. Refresh this page!</strong></div></li></div>"`;
exports[`<Help /> component should render the component in default state 1`] = `"<div class=\\"MuiPaper-root-2 MuiPaper-elevation1-5 MuiPaper-rounded-3 MuiCard-root-1 css-ryznli e1vnhvvu0\\" id=\\"help-card\\"><div class=\\"MuiCardContent-root-29\\"><h2 class=\\"MuiTypography-root-30 MuiTypography-headline-35 MuiTypography-gutterBottom-48\\" id=\\"help-card__title\\">No Package Published Yet.</h2><p class=\\"MuiTypography-root-30 MuiTypography-body1-39 MuiTypography-colorTextSecondary-54 MuiTypography-gutterBottom-48 css-zg2fwz e1vnhvvu1\\">To publish your first package just:</p><aside class=\\"MuiTypography-root-30 MuiTypography-body2-38\\">1. Login</aside><p class=\\"css-1a0lalv eduq2bv0\\"><span class=\\"css-1m8aenu eduq2bv1\\">$ npm adduser --registry http://localhost</span><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-69 MuiIconButton-root-63 css-56v3u0 eduq2bv2\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-68\\"><svg class=\\"MuiSvgIcon-root-72\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-81\\"></span></button></p><aside class=\\"MuiTypography-root-30 MuiTypography-body2-38\\">2. Publish</aside><p class=\\"css-1a0lalv eduq2bv0\\"><span class=\\"css-1m8aenu eduq2bv1\\">$ npm publish --registry http://localhost</span><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-69 MuiIconButton-root-63 css-56v3u0 eduq2bv2\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-68\\"><svg class=\\"MuiSvgIcon-root-72\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-81\\"></span></button></p><aside class=\\"MuiTypography-root-30 MuiTypography-body2-38\\">3. Refresh this page.</aside></div><div class=\\"MuiCardActions-root-88\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-69 MuiButton-root-90 MuiButton-text-92 MuiButton-textPrimary-93 MuiButton-flat-95 MuiButton-flatPrimary-96 MuiButton-sizeSmall-113 MuiCardActions-action-89\\" role=\\"button\\" href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\"><span class=\\"MuiButton-label-91\\">Learn More</span><span class=\\"MuiTouchRipple-root-81\\"></span></a></div></div>"`;

2
test/unit/webui/components/__snapshots__/packagelist.spec.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><ul><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-1\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-20\\">v1.0.0</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Sam</div></div><div class=\\"footer\\"><p class=\\"description\\">Private NPM repository</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\">Published less than a minute ago</div><div class=\\"license\\"></div></div></a></section></li><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-1\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-20\\">v1.0.1</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Rose</div></div><div class=\\"footer\\"><p class=\\"description\\">abc description</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\">Published less than a minute ago</div><div class=\\"license\\"></div></div></a></section></li><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-1\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-20\\">v1.1.0</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Martin</div></div><div class=\\"footer\\"><p class=\\"description\\">xyz description</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\"></div><div class=\\"license\\"></div></div></a></section></li></ul></div></div>"`;
exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><ul><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-116\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-135\\">v1.0.0</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Sam</div></div><div class=\\"footer\\"><p class=\\"description\\">Private NPM repository</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\">Published less than a minute ago</div><div class=\\"license\\"></div></div></a></section></li><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-116\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-135\\">v1.0.1</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Rose</div></div><div class=\\"footer\\"><p class=\\"description\\">abc description</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\">Published less than a minute ago</div><div class=\\"license\\"></div></div></a></section></li><li><section class=\\"package\\"><a href=\\"detail/undefined\\"><div class=\\"header\\"><div class=\\"title\\"><h1> <div role=\\"button\\" class=\\"MuiChip-root-116\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-135\\">v1.1.0</span></div></h1></div><div role=\\"author\\" class=\\"author\\">By: Martin</div></div><div class=\\"footer\\"><p class=\\"description\\">xyz description</p></div><div class=\\"tags\\"></div><div class=\\"details\\"><div class=\\"homepage\\"></div><div class=\\"license\\"></div></div></a></section></li></ul></div></div>"`;

28
test/unit/webui/components/help.spec.js
View File

@ -3,38 +3,12 @@
*/
import React from 'react';
import { shallow } from 'enzyme';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/light';
import Help from '../../../../src/webui/components/Help/index';
describe('<Help /> component', () => {
it('should set html from props with / base path', () => {
jsdom.reconfigure({
url: "http://example.com/"
});
it('should render the component in default state', () => {
const wrapper = shallow(<Help />);
expect(
wrapper
.find('#adduser')
.find(SyntaxHighlighter)
.dive()
.text()
).toEqual('npm adduser --registry http://example.com');
expect(wrapper.html()).toMatchSnapshot();
});
it('should set html from props with someOtherPath', () => {
jsdom.reconfigure({
url: "http://example.com/someOtherPath"
});
const wrapper = shallow(<Help />);
expect(
wrapper
.find('#publish')
.find(SyntaxHighlighter)
.dive()
.text()
).toEqual('npm publish --registry http://example.com/someOtherPath');
expect(wrapper.html()).toMatchSnapshot();
});
});

5
test/unit/webui/components/packagelist.spec.js
View File

@ -5,6 +5,7 @@
import React from 'react';
import { mount } from 'enzyme';
import PackageList from '../../../../src/webui/components/PackageList/index';
import Help from '../../../../src/webui/components/Help/index';
import { BrowserRouter } from 'react-router-dom';
describe('<PackageList /> component', () => {
@ -16,9 +17,7 @@ describe('<PackageList /> component', () => {
const wrapper = mount(
<PackageList packages={props.packages} help={props.help} />
);
expect(wrapper.find('Help')).toHaveLength(1);
expect(wrapper.find('h1').text()).toEqual('No Package Published Yet');
expect(wrapper.find(Help).exists()).toBeTruthy();
});

BIN
yarn.lock
View File

Binary file not shown.