Files
gerrit/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-plugin-endpoints_test.html
Tao Zhou 474bcc00a2 Add gr-endpoint-slot to enhance decorate endpoint
This will allow gerrit to provide more granualar control over where
plugin's component should register to.

As an example:
```
<gr-endpoint-decorator name="some-endpoint">
  <h3>
     header
    <gr-endpoint-slot name="sub-header"></gr-endpoint-slot>
  <h3>
  <section>
      // some other content
  </section>
  <gr-endpoint-slot name="footer">
</gr-endpoint-decorator>
```
```
// plugin to provide either or both slots
plugin.registerCustomComponent(
  'some-endpoint',
  'some-module',
  {slot: 'sub-header'}
);
plugin.registerCustomComponent(
  'some-endpoint',
  'some-other-module',
  {slot: 'footer'}
);
```

Now a plugin can register with one `some-endpoint` with two components
and have them in a controllable place.

When slot not provided or not defined, will fallback to old behavior:
append to the endpoint-decorator.

Change-Id: I2fe1852d3e9d94db14e570f42729709ceadc3761
2020-06-05 21:35:22 +02:00

181 lines
4.7 KiB
HTML

<!DOCTYPE html>
<!--
@license
Copyright (C) 2017 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<title>gr-plugin-endpoints</title>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/components/wct-browser-legacy/browser.js"></script>
<script type="module">
import '../../../test/common-test-setup.js';
import './gr-js-api-interface.js';
import {GrPluginEndpoints} from './gr-plugin-endpoints.js';
import {pluginLoader} from './gr-plugin-loader.js';
import {_testOnly_initGerritPluginApi} from './gr-gerrit.js';
const pluginApi = _testOnly_initGerritPluginApi();
suite('gr-plugin-endpoints tests', () => {
let sandbox;
let instance;
let pluginFoo;
let pluginBar;
let domHook;
setup(() => {
sandbox = sinon.sandbox.create();
domHook = {};
instance = new GrPluginEndpoints();
pluginApi.install(p => { pluginFoo = p; }, '0.1',
'http://test.com/plugins/testplugin/static/foo.html');
instance.registerModule(
pluginFoo,
{
endpoint: 'a-place',
type: 'decorate',
moduleName: 'foo-module',
domHook,
}
);
pluginApi.install(p => { pluginBar = p; }, '0.1',
'http://test.com/plugins/testplugin/static/bar.html');
instance.registerModule(
pluginBar,
{
endpoint: 'a-place',
type: 'style',
moduleName: 'bar-module',
domHook,
}
);
sandbox.stub(pluginLoader, 'arePluginsLoaded').returns(true);
});
teardown(() => {
sandbox.restore();
});
test('getDetails all', () => {
assert.deepEqual(instance.getDetails('a-place'), [
{
moduleName: 'foo-module',
plugin: pluginFoo,
pluginUrl: pluginFoo._url,
type: 'decorate',
domHook,
slot: undefined,
},
{
moduleName: 'bar-module',
plugin: pluginBar,
pluginUrl: pluginBar._url,
type: 'style',
domHook,
slot: undefined,
},
]);
});
test('getDetails by type', () => {
assert.deepEqual(instance.getDetails('a-place', {type: 'style'}), [
{
moduleName: 'bar-module',
plugin: pluginBar,
pluginUrl: pluginBar._url,
type: 'style',
domHook,
slot: undefined,
},
]);
});
test('getDetails by module', () => {
assert.deepEqual(
instance.getDetails('a-place', {moduleName: 'foo-module'}),
[
{
moduleName: 'foo-module',
plugin: pluginFoo,
pluginUrl: pluginFoo._url,
type: 'decorate',
domHook,
slot: undefined,
},
]);
});
test('getModules', () => {
assert.deepEqual(
instance.getModules('a-place'), ['foo-module', 'bar-module']);
});
test('getPlugins', () => {
assert.deepEqual(
instance.getPlugins('a-place'), [pluginFoo._url]);
});
test('onNewEndpoint', () => {
const newModuleStub = sandbox.stub();
instance.onNewEndpoint('a-place', newModuleStub);
instance.registerModule(
pluginFoo,
{
endpoint: 'a-place',
type: 'replace',
moduleName: 'zaz-module',
domHook,
});
assert.deepEqual(newModuleStub.lastCall.args[0], {
moduleName: 'zaz-module',
plugin: pluginFoo,
pluginUrl: pluginFoo._url,
type: 'replace',
domHook,
slot: undefined,
});
});
test('reuse dom hooks', () => {
instance.registerModule(
pluginFoo, 'a-place', 'decorate', 'foo-module', domHook);
assert.deepEqual(instance.getDetails('a-place'), [
{
moduleName: 'foo-module',
plugin: pluginFoo,
pluginUrl: pluginFoo._url,
type: 'decorate',
domHook,
slot: undefined,
},
{
moduleName: 'bar-module',
plugin: pluginBar,
pluginUrl: pluginBar._url,
type: 'style',
domHook,
slot: undefined,
},
]);
});
});
</script>