test(e2e): add test scenario to display published packages on ui

package.json

@@ -148,7 +148,7 @@
     "flow": "flow",
     "pretest": "npm run code:build",
     "test": "cross-env NODE_ENV=test BABEL_ENV=test jest --maxWorkers 2",
-    "test:e2e": "npm run code-test:build && cross-env BABEL_ENV=registry jest --config ./jest.e2e.config.js --maxWorkers 2",
+    "test:e2e": "cross-env BABEL_ENV=registry jest --config ./jest.e2e.config.js --maxWorkers 2",
     "test:unit": "cross-env NODE_ENV=test BABEL_ENV=test jest '(/test/unit.*\\.spec|/test/webui/.*\\.spec)\\.js' --maxWorkers 2",
     "test:func": "cross-env NODE_ENV=test BABEL_ENV=test jest '(/test/functional.*\\.func)\\.js' --maxWorkers 2",
     "pre:ci": "npm run lint && npm run build:webui",
@@ -158,7 +158,6 @@
     "lint:css": "stylelint 'src/**/*.scss' --syntax scss",
     "dev:start": "cross-env BABEL_ENV=registry babel-node src/lib/cli",
     "code:build": "cross-env BABEL_ENV=registry babel src/ --out-dir build/ --ignore src/webui/ --copy-files",
-    "code-test:build": "cross-env BABEL_ENV=test babel test/src --out-dir test/build --copy-files",
     "pre:webpack": "rimraf static/*",
     "dev:webui": "cross-env BABEL_ENV=ui babel-node tools/dev.server.js",
     "build:webui": "npm run pre:webpack && BABEL_ENV=ui webpack --config tools/webpack.prod.config.babel.js",

src/webui/src/components/PackageList/index.js

@@ -17,7 +17,7 @@ export default class PackageList extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="package-list-items">
         <div className={classes.pkgContainer}>
           {this.renderTitle()}
           {this.isTherePackages() ? this.renderList(): this.renderOptions()}
@@ -49,7 +49,7 @@ export default class PackageList extends React.Component {
   }
 
   renderNoItems() {
-   return <NoItems text={'No items were found with that query'}/>;
+   return <NoItems className="package-no-items" text={'No items were found with that query'}/>;
   }
 
   renderHelp() {

test/e2e/config-e2e.yaml

@@ -19,8 +19,12 @@ logs:
   - {type: stdout, format: pretty, level: trace}
 
 packages:
-  '*':
+  '@*/*':
     access: $all
+    publish: $all
+  '**':
+    access: $all
+    publish: $all
 
 listen: 0.0.0.0:55558
 

test/e2e/e2e.spec.js

@@ -1,7 +1,9 @@
+const publishMetadata = require('../unit/partials/publish-api');
+
 describe('/ (Verdaccio Page)', () => {
     let page;
     // this might be increased based on the delays included in all test
-    jest.setTimeout(10000);
+    jest.setTimeout(10000000);
 
     const clickButton = async function(selector, options = {button: 'middle', delay: 100}) {
       const button = await page.$(selector);
@@ -14,6 +16,10 @@ describe('/ (Verdaccio Page)', () => {
       expect(text).toMatch('Login');
     };
 
+    const getPackages = async function() {
+      return await page.$$('.package-list-items > div');
+    }
+
     const logIn = async function() {
       await clickButton('header button');
       await page.waitFor(500);
@@ -100,4 +106,13 @@ describe('/ (Verdaccio Page)', () => {
     await page.waitFor(1000);
     await evaluateSignIn();
   })
+
+  it('should publish a package', async () => {
+    await global.__SERVER__.putPackage(publishMetadata.name, publishMetadata);
+    await page.waitFor(1000);
+    await page.reload();
+    await page.waitFor(1000);
+    const packagesList = await getPackages();
+    expect(packagesList).toHaveLength(1);
+  });
 });

test/e2e/puppeteer_environment.js

@@ -4,6 +4,10 @@ const puppeteer = require('puppeteer');
 const fs = require('fs');
 const os = require('os');
 const path = require('path');
+const {VerdaccioConfig} = require("../src/verdaccio-server");
+const VerdaccioProcess = require("../src/server_process");
+const Server = require("../src/server");
+
 
 const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 
@@ -13,12 +17,20 @@ class PuppeteerEnvironment extends NodeEnvironment {
   }
 
   async setup() {
+    const config1 = new VerdaccioConfig(path.join(__dirname, './store-e2e'),
+      path.join(__dirname, './config-e2e.yaml'), 'http://0.0.0.0:55558/', 55558);
+    const server1 = new Server.default(config1.domainPath);
+    const process1 = new VerdaccioProcess.default(config1, server1, false);
+    const fork = await process1.init();
+    this.global.__VERDACCIO_E2E__ = fork[0];
+
     console.log(chalk.yellow('Setup Test Environment.'));
     await super.setup();
     const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf8');
     if (!wsEndpoint) {
       throw new Error('wsEndpoint not found')
     }
+    this.global.__SERVER__ = server1;
     this.global.__BROWSER__ = await puppeteer.connect({
       browserWSEndpoint: wsEndpoint,
     })
@@ -26,11 +38,12 @@ class PuppeteerEnvironment extends NodeEnvironment {
 
   async teardown() {
     console.log(chalk.yellow('Teardown Test Environment.'));
-    await super.teardown()
+    await super.teardown();
+    this.global.__VERDACCIO_E2E__.stop();
   }
 
   runScript(script) {
-    return super.runScript(script)
+    return super.runScript(script);
   }
 }
 

test/e2e/setup.js

@@ -4,25 +4,13 @@ const fs = require('fs');
 const mkdirp = require('mkdirp');
 const os = require('os');
 const path = require('path');
-const {VerdaccioConfig} = require("../src/verdaccio-server");
-const VerdaccioProcess = require("../src/server_process");
-const Server = require("../src/server");
 
 const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 
 module.exports = async function() {
-  const config1 = new VerdaccioConfig(
-    path.join(__dirname, './store-e2e'),
-    path.join(__dirname, './config-e2e.yaml'),
-    'http://localhost:55558/', 55558);
-  const server1 = new Server.default(config1.domainPath);
-  const process1 = new VerdaccioProcess.default(config1, server1, false);
-
-  const fork = await process1.init();
   console.log(chalk.green('Setup Puppeteer'));
-  const browser = await puppeteer.launch();
+  const browser = await puppeteer.launch({headless: true});
   global.__BROWSER__ = browser;
-  global.__VERDACCIO_E2E__ = fork[0];
   mkdirp.sync(DIR);
   fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
 };

test/e2e/teardown.js

@@ -8,6 +8,5 @@ const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 module.exports = async function() {
   console.log(chalk.green('Teardown Puppeteer'));
   await global.__BROWSER__.close();
-  global.__VERDACCIO_E2E__.stop();
   rimraf.sync(DIR)
 };

test/functional/fixtures/package.js

@@ -1,10 +1,10 @@
-module.exports = function(name, version) {
+module.exports = function(name, version = '0.0.0', port = '55551', domain= `http://localhost:${port}`) {
   return {
     name: name,
-    version: version || '0.0.0',
+    version: version,
     dist: {
       shasum: 'fake',
-      tarball: `http://localhost:55551/${encodeURIComponent(name)}/-/blahblah`,
+      tarball: `${domain}/${encodeURIComponent(name)}/-/blahblah`,
     },
   };
 };

test/webui/components/__snapshots__/packagelist.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageList /> component should load the component with packages 1`] = `"<div><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><li><a class=\\"package\\" href=\\"detail/verdaccio\\"><h1>verdaccio<span class=\\"el-tag el-tag--gray\\">v1.0.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Sam</span><p>Private NPM repository</p></a></li><li><a class=\\"package\\" href=\\"detail/abc\\"><h1>abc<span class=\\"el-tag el-tag--gray\\">v1.0.1</span></h1><span role=\\"author\\" class=\\"author\\">By: Rose</span><p>abc description</p></a></li><li><a class=\\"package\\" href=\\"detail/xyz\\"><h1>xyz<span class=\\"el-tag el-tag--gray\\">v1.1.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Martin</span><p>xyz description</p></a></li></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><li><a class=\\"package\\" href=\\"detail/verdaccio\\"><h1>verdaccio<span class=\\"el-tag el-tag--gray\\">v1.0.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Sam</span><p>Private NPM repository</p></a></li><li><a class=\\"package\\" href=\\"detail/abc\\"><h1>abc<span class=\\"el-tag el-tag--gray\\">v1.0.1</span></h1><span role=\\"author\\" class=\\"author\\">By: Rose</span><p>abc description</p></a></li><li><a class=\\"package\\" href=\\"detail/xyz\\"><h1>xyz<span class=\\"el-tag el-tag--gray\\">v1.1.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Martin</span><p>xyz description</p></a></li></div></div>"`;

test/webui/components/packagelist.spec.js

@@ -62,10 +62,10 @@ describe('<PackageList /> component', () => {
     expect(instance.renderHelp()).toBeUndefined();
     expect(instance.renderTitle().props.children).toEqual('Available Packages');
     expect(instance.renderNoItems()).toEqual(
-      <NoItems text="No items were found with that query" />
+      <NoItems className="package-no-items" text="No items were found with that query" />
     );
     expect(instance.renderOptions()).toEqual(
-      <NoItems text="No items were found with that query" />
+      <NoItems className="package-no-items" text="No items were found with that query" />
     );
     // package count
     expect(wrapper.find('Package')).toHaveLength(3);