feat(plugins): add menu-bar extension point (#383)

README.md

@@ -285,8 +285,10 @@ directory.
   }
   ```
 
-  Currently the only registered extension points is `result` - allows to extend each test result; adds `resultId` and `testName` props to the plugin component.
-
+  Currently, there are extension points:
+  * `result` - allows to extend each test result; adds `resultId` and `testName` props to the plugin component.
+  * `menu-bar` - allows to extend menu bar.
+
   An extension point may be extended by more than one component. In that case order of components application is determined by `plugins` config order. Each following component is applied to all previously composed components at the extension point.
 
 * **customScripts** (optional) `function[]` - allows to add any scripts on the report html-page. Script will be executed immediately on page render. It can be helpful for adding some metrics or own extra functionality.

lib/constants/extension-points.js

@@ -0,0 +1,4 @@
+'use strict';
+
+export const RESULT = 'result';
+export const MENU_BAR = 'menu-bar';

lib/static/components/controls/menu-bar.js

@@ -5,6 +5,9 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {Dropdown} from 'semantic-ui-react';
 import {isEmpty} from 'lodash';
+import ExtensionPoint from '../extension-point';
+import plugins from '../../modules/plugins';
+import {MENU_BAR} from '../../../constants/extension-points';
 
 class MenuBar extends Component {
     static propTypes = {extraItems: PropTypes.object.isRequired};
@@ -20,15 +23,20 @@ class MenuBar extends Component {
     render() {
         const {extraItems} = this.props;
 
-        if (isEmpty(extraItems)) {
+        const hasMenuBarPlugins = plugins.getLoadedConfigs()
+            .some(e => e.point === MENU_BAR);
+
+        if (isEmpty(extraItems) && !hasMenuBarPlugins) {
             return null;
         }
 
         return (
             <div className="menu-bar">
                 <Dropdown item icon="bars" simple direction="left">
                     <Dropdown.Menu>
-                        {this._getItems(extraItems)}
+                        <ExtensionPoint name={MENU_BAR}>
+                            {this._getItems(extraItems)}
+                        </ExtensionPoint>
                     </Dropdown.Menu>
                 </Dropdown>
             </div>

lib/static/components/section/body/index.js

@@ -7,6 +7,7 @@ import ControlButton from '../../controls/control-button';
 import Result from './result';
 import * as actions from '../../../modules/actions';
 import ExtensionPoint from '../../extension-point';
+import {RESULT} from '../../../../constants/extension-points';
 
 class Body extends Component {
     static propTypes = {
@@ -115,7 +116,7 @@ class Body extends Component {
                         {this._addRetrySwitcher()}
                         {this._addRetryButton()}
                     </div>
-                    <ExtensionPoint name="result" resultId={activeResultId} testName={testName}>
+                    <ExtensionPoint name={RESULT} resultId={activeResultId} testName={testName}>
                         <Result resultId={activeResultId} testName={testName} />
                     </ExtensionPoint>
                 </div>

package.json

@@ -81,7 +81,6 @@
   "devDependencies": {
     "@gemini-testing/react-lazily-render": "^1.2.1",
     "@gemini-testing/react-lazyload": "^2.3.2",
-    "@scoped/html-reporter-redux-with-server-plugin": "file:test/func/html-reporter-plugins/redux-with-server",
     "app-module-path": "^2.2.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
@@ -110,7 +109,9 @@
     "hermione-global-hook": "^1.0.1",
     "hermione-headless-chrome": "0.0.2",
     "html-react-parser": "^0.4.0",
+    "html-reporter-redux-with-server-plugin": "file:test/func/html-reporter-plugins/redux-with-server",
     "html-reporter-basic-plugin": "file:test/func/html-reporter-plugins/basic",
+    "html-reporter-menu-bar-plugin": "file:test/func/html-reporter-plugins/menu-bar",
     "html-reporter-redux-plugin": "file:test/func/html-reporter-plugins/redux",
     "html-reporter-test-server": "file:test/func/hermione-plugins/html-reporter-test-server",
     "html-reporter-tester": "file:test/func/hermione-plugins/html-reporter-tester",

test/func/fixtures/.hermione.fixtures.js

@@ -72,7 +72,7 @@ module.exports = {
                     position: 'after'
                 },
                 {
-                    name: '@scoped/html-reporter-redux-with-server-plugin',
+                    name: 'html-reporter-redux-with-server-plugin',
                     component: 'ColorBorder',
                     point: 'result',
                     position: 'after'
@@ -81,6 +81,12 @@ module.exports = {
                     name: 'html-reporter-redux-plugin',
                     component: 'ColorBorder',
                     position: 'before'
+                },
+                {
+                    name: 'html-reporter-menu-bar-plugin',
+                    component: 'MenuBarItem',
+                    position: 'after',
+                    point: 'menu-bar'
                 }
             ]
         },

test/func/html-reporter-plugins/menu-bar/lib/menu-bar-item.css

@@ -0,0 +1,3 @@
+.menu-item__link.menu-bar-item {
+    color: red;
+}

test/func/html-reporter-plugins/menu-bar/lib/menu-bar-item.jsx

@@ -0,0 +1,20 @@
+import './menu-bar-item.css';
+
+export default ['react', 'semantic-ui-react', function(React, {Dropdown}, {pluginName}) {
+    class MenuBarItem extends React.Component {
+        // allow the component to be placed only on "menu-bar" extension point
+        static point = 'menu-bar';
+
+        render() {
+            return (
+                <Dropdown.Item>
+                    <a className="menu-item__link menu-bar-item" href="#">{pluginName}</a>
+                </Dropdown.Item>
+            );
+        }
+    }
+
+    return {
+        MenuBarItem
+    };
+}];

test/func/html-reporter-plugins/menu-bar/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "html-reporter-menu-bar-plugin",
+    "version": "0.1.0",
+    "scripts": {
+        "build": "webpack --config webpack.config.js"
+    }
+}

test/func/html-reporter-plugins/menu-bar/webpack.config.js

@@ -0,0 +1,40 @@
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        plugin: './lib/menu-bar-item.jsx'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ]
+            },
+            {
+                test: /\.jsx$/,
+                use: 'babel-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    output: {
+        filename: '[name].js',
+        path: __dirname,
+        library: '__hermione_html_reporter_register_plugin__',
+        libraryTarget: 'jsonp'
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            uglifyOptions: {
+                compress: {
+                    warnings: true,
+                    'drop_console': true,
+                    unsafe: true
+                }
+            }
+        })
+    ]
+};

test/func/html-reporter-plugins/redux-with-server/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@scoped/html-reporter-redux-with-server-plugin",
+    "name": "html-reporter-redux-with-server-plugin",
     "version": "0.1.0",
     "scripts": {
         "build": "webpack --config webpack.config.js"

test/func/plugins/tests-menu-bar-plugin.hermione.js

@@ -0,0 +1,22 @@
+const {mkNestedSelector} = require('../utils');
+
+describe('Test menu bar plugin', function() {
+    const selector = '.main-menu .menu-bar';
+
+    it('should show menu bar with plugins applied', async function() {
+        return this.browser
+            .waitForVisible(selector)
+            .assertView('menu bar plugins', selector);
+    });
+
+    it('should show menu bar item on click', async function() {
+        const menuSelector = mkNestedSelector(selector, '.menu');
+
+        return this.browser
+            .waitForVisible(selector)
+            .click(selector)
+            .waitForVisible(menuSelector)
+            .assertView('menu bar plugins clicked', [selector, menuSelector]);
+    });
+});
+