1 files changed, 267 insertions, 0 deletions
diff --git a/polygerrit-ui/app/elements/plugins/gr-endpoint-decorator/gr-endpoint-decorator_test.ts b/polygerrit-ui/app/elements/plugins/gr-endpoint-decorator/gr-endpoint-decorator_test.ts
new file mode 100644
index 0000000000..d7acc617fc
--- /dev/null
+++ b/polygerrit-ui/app/elements/plugins/gr-endpoint-decorator/gr-endpoint-decorator_test.ts
@@ -0,0 +1,267 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../test/common-test-setup-karma';
+import './gr-endpoint-decorator';
+import '../gr-endpoint-param/gr-endpoint-param';
+import '../gr-endpoint-slot/gr-endpoint-slot';
+import {fixture, html} from '@open-wc/testing-helpers';
+import {
+  mockPromise,
+  queryAndAssert,
+  resetPlugins,
+} from '../../../test/test-utils';
+import {getPluginLoader} from '../../shared/gr-js-api-interface/gr-plugin-loader';
+import {GrEndpointDecorator} from './gr-endpoint-decorator';
+import {PluginApi} from '../../../api/plugin';
+import {GrEndpointParam} from '../gr-endpoint-param/gr-endpoint-param';
+
+suite('gr-endpoint-decorator', () => {
+  let container: HTMLElement;
+
+  let plugin: PluginApi;
+  let decorationHook: any;
+  let decorationHookWithSlot: any;
+  let replacementHook: any;
+  let first: GrEndpointDecorator;
+  let second: GrEndpointDecorator;
+  let banana: GrEndpointDecorator;
+
+  setup(async () => {
+    resetPlugins();
+    container = await fixture(
+      html`<div>
+        <gr-endpoint-decorator name="first">
+          <gr-endpoint-param
+            name="first-param"
+            .value=${'barbar'}
+          ></gr-endpoint-param>
+          <p>
+            <span>test slot</span>
+            <gr-endpoint-slot name="test"></gr-endpoint-slot>
+          </p>
+        </gr-endpoint-decorator>
+        <gr-endpoint-decorator name="second">
+          <gr-endpoint-param
+            name="second-param"
+            .value=${'foofoo'}
+          ></gr-endpoint-param>
+        </gr-endpoint-decorator>
+        <gr-endpoint-decorator name="banana">
+          <gr-endpoint-param
+            name="banana-param"
+            .value=${'yes'}
+          ></gr-endpoint-param>
+        </gr-endpoint-decorator>
+      </div>`
+    );
+    first = queryAndAssert<GrEndpointDecorator>(
+      container,
+      'gr-endpoint-decorator[name="first"]'
+    );
+    second = queryAndAssert<GrEndpointDecorator>(
+      container,
+      'gr-endpoint-decorator[name="second"]'
+    );
+    banana = queryAndAssert<GrEndpointDecorator>(
+      container,
+      'gr-endpoint-decorator[name="banana"]'
+    );
+
+    window.Gerrit.install(
+      p => {
+        plugin = p;
+      },
+      '0.1',
+      'http://some/plugin/url.js'
+    );
+    // Decoration
+    decorationHook = plugin.registerCustomComponent('first', 'some-module');
+    const decorationHookPromise = mockPromise();
+    decorationHook.onAttached(() => decorationHookPromise.resolve());
+
+    // Decoration with slot
+    decorationHookWithSlot = plugin.registerCustomComponent(
+      'first',
+      'some-module-2',
+      {slot: 'test'}
+    );
+    const decorationHookSlotPromise = mockPromise();
+    decorationHookWithSlot.onAttached(() =>
+      decorationHookSlotPromise.resolve()
+    );
+
+    // Replacement
+    replacementHook = plugin.registerCustomComponent('second', 'other-module', {
+      replace: true,
+    });
+    const replacementHookPromise = mockPromise();
+    replacementHook.onAttached(() => replacementHookPromise.resolve());
+
+    // Mimic all plugins loaded.
+    getPluginLoader().loadPlugins([]);
+
+    await decorationHookPromise;
+    await decorationHookSlotPromise;
+    await replacementHookPromise;
+  });
+
+  teardown(() => {
+    resetPlugins();
+  });
+
+  test('imports plugin-provided modules into endpoints', () => {
+    const endpoints = Array.from(
+      container.querySelectorAll('gr-endpoint-decorator')
+    );
+    assert.equal(endpoints.length, 3);
+  });
+
+  test('first decoration', () => {
+    const element = first;
+    const modules = Array.from(element.children).filter(
+      element => element.nodeName === 'SOME-MODULE'
+    );
+    assert.equal(modules.length, 1);
+    const [module] = modules;
+    assert.isOk(module);
+    assert.equal((module as any)['first-param'], 'barbar');
+    return decorationHook
+      .getLastAttached()
+      .then((element: any) => {
+        assert.strictEqual(element, module);
+      })
+      .then(() => {
+        element.remove();
+        assert.equal(decorationHook.getAllAttached().length, 0);
+      });
+  });
+
+  test('decoration with slot', () => {
+    const element = first;
+    const modules = [...element.querySelectorAll('some-module-2')];
+    assert.equal(modules.length, 1);
+    const [module] = modules;
+    assert.isOk(module);
+    assert.equal((module as any)['first-param'], 'barbar');
+    return decorationHookWithSlot
+      .getLastAttached()
+      .then((element: any) => {
+        assert.strictEqual(element, module);
+      })
+      .then(() => {
+        element.remove();
+        assert.equal(decorationHookWithSlot.getAllAttached().length, 0);
+      });
+  });
+
+  test('replacement', () => {
+    const element = second;
+    const module = Array.from(element.children).find(
+      element => element.nodeName === 'OTHER-MODULE'
+    );
+    assert.isOk(module);
+    assert.equal((module as any)['second-param'], 'foofoo');
+    return replacementHook
+      .getLastAttached()
+      .then((element: any) => {
+        assert.strictEqual(element, module);
+      })
+      .then(() => {
+        element.remove();
+        assert.equal(replacementHook.getAllAttached().length, 0);
+      });
+  });
+
+  test('late registration', async () => {
+    const bananaHook = plugin.registerCustomComponent('banana', 'noob-noob');
+    const bananaHookPromise = mockPromise();
+    bananaHook.onAttached(() => bananaHookPromise.resolve());
+    await bananaHookPromise;
+
+    const element = banana;
+    const module = Array.from(element.children).find(
+      element => element.nodeName === 'NOOB-NOOB'
+    );
+    assert.isOk(module);
+  });
+
+  test('two modules', async () => {
+    const bananaHook1 = plugin.registerCustomComponent('banana', 'mod-one');
+    const bananaHookPromise1 = mockPromise();
+    bananaHook1.onAttached(() => bananaHookPromise1.resolve());
+    await bananaHookPromise1;
+
+    const bananaHook = plugin.registerCustomComponent('banana', 'mod-two');
+    const bananaHookPromise2 = mockPromise();
+    bananaHook.onAttached(() => bananaHookPromise2.resolve());
+    await bananaHookPromise2;
+
+    const element = banana;
+    const module1 = Array.from(element.children).find(
+      element => element.nodeName === 'MOD-ONE'
+    );
+    assert.isOk(module1);
+    const module2 = Array.from(element.children).find(
+      element => element.nodeName === 'MOD-TWO'
+    );
+    assert.isOk(module2);
+  });
+
+  test('late param setup', async () => {
+    let element = banana;
+    const param = queryAndAssert<GrEndpointParam>(element, 'gr-endpoint-param');
+    param['value'] = undefined;
+    await param.updateComplete;
+
+    const bananaHook = plugin.registerCustomComponent('banana', 'noob-noob');
+    const bananaHookPromise = mockPromise();
+    bananaHook.onAttached(() => bananaHookPromise.resolve());
+
+    element = queryAndAssert<GrEndpointDecorator>(
+      container,
+      'gr-endpoint-decorator[name="banana"]'
+    );
+    let module = Array.from(element.children).find(
+      element => element.nodeName === 'NOOB-NOOB'
+    );
+    // Module waits for param to be defined.
+    assert.isNotOk(module);
+    const value = {abc: 'def'};
+    param.value = value;
+    await param.updateComplete;
+    await bananaHookPromise;
+
+    module = Array.from(element.children).find(
+      element => element.nodeName === 'NOOB-NOOB'
+    );
+    assert.isOk(module);
+    assert.strictEqual((module as any)['banana-param'], value);
+  });
+
+  test('param is bound', async () => {
+    const element = banana;
+    const param = queryAndAssert<GrEndpointParam>(element, 'gr-endpoint-param');
+    const value1 = {abc: 'def'};
+    const value2 = {def: 'abc'};
+    param.value = value1;
+    await param.updateComplete;
+
+    const bananaHook = plugin.registerCustomComponent('banana', 'noob-noob');
+    const bananaHookPromise = mockPromise();
+    bananaHook.onAttached(() => bananaHookPromise.resolve());
+    await bananaHookPromise;
+
+    const module = Array.from(element.children).find(
+      element => element.nodeName === 'NOOB-NOOB'
+    );
+    assert.isOk(module);
+    assert.strictEqual((module as any)['banana-param'], value1);
+
+    param.value = value2;
+    await param.updateComplete;
+    assert.strictEqual((module as any)['banana-param'], value2);
+  });
+});