@atlassian/atlassian-connect-js 5.3.190

package/spec/tests/iframe_spec.js

@@ -0,0 +1,265 @@
+import IframeComponent from 'src/host/components/iframe';
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+import simpleXDM from 'simple-xdm/host';
+import urlUtil from 'src/host/utils/url';
+import { Flags } from 'src/host/utils/feature-flag';
+
+describe('Iframe component', () => {
+  function randomWholeNumber(max){
+    return Math.floor(Math.random() * max);
+  }
+
+  describe('resize', () =>{
+    it('sets dimensions', () => {
+      var $mock = $('<div />');
+      var width = randomWholeNumber(1000) + 'px';
+      var height = randomWholeNumber(1000) + 'px';
+      IframeComponent.resize(width, height, $mock);
+      expect($mock.css('height')).toEqual(height);
+      expect($mock.css('width')).toEqual(width);
+    });
+
+    it('sets dimensions by %', () => {
+      var $mock = $('<div />');
+      var width = randomWholeNumber(99) + '%';
+      var height = randomWholeNumber(99) + '%';
+      IframeComponent.resize(width, height, $mock);
+      expect($mock.css('height')).toEqual(height);
+      expect($mock.css('width')).toEqual(width);
+    });
+
+    it('triggers a resized dom event', () => {
+      var $mock = $('<div />');
+      var spy = jasmine.createSpy('spy');
+      var width = randomWholeNumber(1000) + 'px';
+      var height = randomWholeNumber(1000) + 'px';
+      $mock.on('resized', spy);
+      IframeComponent.resize(width, height, $mock);
+      expect(spy.calls.count()).toEqual(1);
+      expect(spy.calls.first().args[1]).toEqual({
+        height: height,
+        width: width
+      });
+    });
+
+    it('is triggered by a iframe-resize event', () => {
+      var data = {
+        $el: $('<div />'),
+        width: randomWholeNumber(1000) + 'px',
+        height: randomWholeNumber(1000) + 'px'
+      };
+      spyOn(IframeComponent, 'resize');
+      EventDispatcher.dispatch('iframe-resize', data);
+      expect(IframeComponent.resize.calls.count()).toEqual(1);
+      var args = IframeComponent.resize.calls.first().args;
+      expect(args[0]).toEqual(data.width);
+      expect(args[1]).toEqual(data.height);
+      expect(args[2]).toEqual(data.$el);
+    });
+  });
+
+  describe('content resolver', () =>{
+    it('setContentResolver sets the content resolver', () => {
+      var spy = jasmine.createSpy('spy');
+      expect(IframeComponent._contentResolver).not.toEqual(spy);
+      IframeComponent.setContentResolver(spy);
+      expect(IframeComponent._contentResolver).toEqual(spy);
+    });
+
+    it('sets the content resolver when content-resolver-register-by-extension is triggered', () => {
+      var spy = jasmine.createSpy('spy');
+      expect(IframeComponent._contentResolver).not.toEqual(spy);
+      EventDispatcher.dispatch('content-resolver-register-by-extension', {
+        callback: spy
+      });
+      expect(IframeComponent._contentResolver).toEqual(spy);
+    });
+
+    it('renders an error when content resolver fails', () => {
+      var addon_key = 'someaddonkey';
+      var key = 'somekey';
+      var options = {};
+      var errorText = 'some error text';
+      var $container = $('<div />');
+      var failingResolver = function(){
+        return AJS.$.Deferred(function(defer){
+          defer.reject({
+            addon_key: addon_key,
+            key: key,
+            options: options
+          }, {
+            text: errorText
+          });
+        }).promise();
+      };
+      IframeComponent.setContentResolver(failingResolver);
+      var simpleExtension = IframeComponent.simpleXdmExtension({
+        addon_key: addon_key,
+        key: key,
+        options: options
+      }, $container);
+      expect($container.text()).toContain(errorText);
+    });
+  });
+
+  describe('_simpleXdmCreate', () => {
+    it('returns an ID', () => {
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example.com'
+      };
+      var simpleExtension = IframeComponent._simpleXdmCreate(extension);
+      expect(simpleExtension.id).toEqual(jasmine.stringMatching(new RegExp('^' + extension.addon_key + '__' + extension.key)));
+    });
+  });
+
+
+  describe('simpleXdmExtension', () => {
+    beforeEach(() => {
+      IframeComponent._contentResolver = false;
+    });
+
+    it('appends an iframe', () => {
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example.com'
+      };
+      var $container = $('<div />');
+      var simpleExtension = IframeComponent.simpleXdmExtension(extension, $container);
+      expect($container.find('iframe').length).toEqual(1);
+    });
+
+    it('JWT url', () => {
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example.com/?jwt=abc123'
+      };
+      var $container = $('<div />');
+      spyOn(urlUtil,'hasJwt').and.returnValue(true);
+      spyOn(urlUtil,'isJwtExpired').and.returnValue(false);
+      IframeComponent.simpleXdmExtension(extension, $container);
+      expect($container.find('iframe').length).toEqual(1);
+      expect($container.find('iframe').attr('src')).toEqual(extension.url);
+    });
+
+    it('expired JWT', () => {
+      var spy = jasmine.createSpy('spy');
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example.com?jwt=abc123',
+        id: 'some-id'
+      };
+      var $container = $('<div />');
+
+      spyOn(urlUtil,'hasJwt').and.returnValue(true);
+      spyOn(urlUtil,'isJwtExpired').and.returnValue(true);
+
+      var createdExtension = IframeComponent.simpleXdmExtension($container, extension);
+      expect($container.find('iframe').length).toEqual(0);
+    });
+
+    it('triggers an event on bridge established', (done) => {
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example2.com',
+        options: {
+          noDom: true,
+        }
+      };
+      var $container = $('<div />');
+
+      $('body').append($container);
+      EventDispatcher.registerOnce('iframe-bridge-established', (data) => {
+        expect(data.$el[0].nodeName).toEqual('IFRAME');
+        expect(data.extension).toEqual(extension);
+        $container.remove();
+        done();
+      });
+      var spy = spyOn(simpleXDM, 'create').and.returnValue({id: 'abc123'});
+      IframeComponent.simpleXdmExtension(extension, $container);
+      setTimeout(function(){
+        spy.calls.first().args[1]();
+      }, 300);
+    });
+
+    it('triggers an event on iframe reload', (done) => {
+      var extension = {
+        addon_key: 'some-addon-key',
+        key: 'some-module-key',
+        url: 'https://www.example2.com'
+      };
+      var $container = $('<div />');
+
+      EventDispatcher.registerOnce('iframe-unload', (data) => {
+        expect(data.$el[0].nodeName).toEqual('IFRAME');
+        expect(data.extension).toEqual(extension);
+        done();
+      });
+      var spy = spyOn(simpleXDM, 'create').and.returnValue({id: 'abc123'});
+      IframeComponent.simpleXdmExtension(extension, $container);
+      setTimeout(function(){
+        spy.calls.first().args[2]();
+      }, 300);
+    });
+
+  });
+
+  it('render returns an iframe with attributes', () => {
+    var attributes = {
+      width: '123',
+      custom: 'somethingelse'
+    };
+    var $iframe = IframeComponent.render(attributes);
+    expect($iframe.attr('width')).toEqual(attributes.width);
+    expect($iframe.attr('custom')).toEqual(attributes.custom);
+    expect($iframe[0].nodeName).toEqual('IFRAME');
+  });
+
+  it('renders an iframe with the referrer set to no-referrer', () => {
+    var $iframe = IframeComponent.render();
+    expect($iframe.attr('referrerpolicy')).toEqual('no-referrer');
+  });
+
+  describe('_appendExtensionError', () => {
+    it('displays error message without trace ID when gate display_trace_for_confluence_top_errors is off', () => {
+      var $container = $('<div />');
+      var traceId = 'trace-123';
+      spyOn(Flags, 'getBooleanFeatureFlag').and.callFake((flag) => (
+        !(flag === 'display_trace_for_confluence_top_errors')
+      ));
+      IframeComponent._appendExtensionError($container, 'test error message', traceId);
+      expect($container.find('.connect-resolve-error').length).toEqual(1);
+      expect($container.find('.error').text()).toContain('Error: The content resolver threw the following error:');
+      expect($container.find('.error-trace-id').length).toBe(0);
+    });
+
+    it('displays error message with trace ID when gate display_trace_for_confluence_top_errors is on', () => {
+      var $container = $('<div />');
+      var traceId = 'trace-123';
+      spyOn(Flags, 'getBooleanFeatureFlag').and.callFake((flag) => (
+        flag === 'display_trace_for_confluence_top_errors'
+      ));
+      IframeComponent._appendExtensionError($container, 'test error message', traceId);
+      expect($container.find('.connect-resolve-error').length).toEqual(1);
+      expect($container.find('.error').text()).toContain('Error: The content resolver threw the following error:');
+      expect($container.find('.error-trace-id').text()).toContain('Trace: trace-123');
+    });
+
+    it('displays error message without trace ID when traceId is not provided and gate display_trace_for_confluence_top_errors is on', () => {
+      var $container = $('<div />');
+      spyOn(Flags, 'getBooleanFeatureFlag').and.callFake((flag) => (
+        flag === 'display_trace_for_confluence_top_errors'
+      ));
+      IframeComponent._appendExtensionError($container, 'test error message');
+      expect($container.find('.connect-resolve-error').length).toEqual(1);
+      expect($container.find('.error').text()).toContain('Error: The content resolver threw the following error:');
+      expect($container.find('.error-trace-id').length).toBe(0);
+    });
+  });
+
+});

package/spec/tests/inline_dialog_spec.js

@@ -0,0 +1,41 @@
+import InlineDialogComponent from 'src/host/components/inline_dialog';
+
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+
+
+describe('Inline Dialog Component', () => {
+
+  beforeEach(() => {
+    $('.aui-inline-dialog').remove();
+  });
+
+  afterEach(() => {
+  });
+
+  describe('rendering', () => {
+    var $content = $('<div />').attr('id', 'inline-dialog-content');
+
+    it('renders an inline dialog', () => {
+      var $inlineDialog = InlineDialogComponent.render({
+        id: 'some-id',
+        $content: $content
+      });
+      expect($inlineDialog.hasClass('aui-inline-dialog')).toBe(true);
+      expect($inlineDialog.attr('id')).toEqual('inline-dialog-some-id');
+      expect($inlineDialog.hide).toEqual(jasmine.any(Function));
+      expect($inlineDialog.show).toEqual(jasmine.any(Function));
+      expect($inlineDialog.refresh).toEqual(jasmine.any(Function));
+    });
+
+    it('contains the inline dialog content', () => {
+      var $inlineDialog = InlineDialogComponent.render({
+        id: 'some-id',
+        bindTo: $('body'),
+        $content: $content
+      });
+      $inlineDialog.show();
+      expect($inlineDialog.find('#inline-dialog-content').length).toEqual(1);
+    });
+  });
+
+});

package/spec/tests/inline_dialog_webitem_spec.js

@@ -0,0 +1,331 @@
+import simpleXDM from 'simple-xdm/host';
+import { InlineDialogWebItem as InlineDialogWebItemConstructor } from 'src/host/components/inline_dialog_webitem';
+import 'src/host/components/inline_dialog';
+import WebItemActions from 'src/host/actions/webitem_actions';
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+import 'src/host/components/iframe_container';
+import jwtActions from 'src/host/actions/jwt_actions';
+import base64 from 'src/host/utils/base64';
+import { waitUntilReadyNextTick } from './utils/waitUntilReadyNextTick';
+
+describe('Inline Dialog Webitem', () => {
+  var webitemButton;
+  var InlineDialogWebitem;
+  const classPluginKey = 'ap-plugin-key-my-plugin';
+
+  function buildJWT(exp){
+    const claim = {
+      exp: Math.floor(Date.now() / 1000) + exp
+    };
+    const encodedClaim = base64.encode(JSON.stringify(claim));
+    return `alsdjfaj123.${encodedClaim}.khsadlj234`;
+  }
+
+  beforeEach(() => {
+    $('.aui-inline-dialog').remove();
+    webitemButton = $('<a />').attr('href', 'https://www.example.com?a.x=b#' + encodeURI(JSON.stringify({productCtx:'{"b.c":"d"}'})));
+    webitemButton.text('i am a webitem');
+    webitemButton.addClass(`ap-inline-dialog ${classPluginKey} ap-module-key-key ap-target-key-key ap-link-webitem`);
+    webitemButton.appendTo('body');
+
+    // We must do it this way as InlineDialogWebItem exports a singleton which is created before this value can be mocked
+    InlineDialogWebitem = new InlineDialogWebItemConstructor()
+  });
+
+  afterEach(() => {
+    jasmine.clock().uninstall();
+    webitemButton.remove();
+    if (window && window._AP) {
+      delete window._AP.inlineDialogModules;
+    }
+  });
+
+  it('getWebItem returns a webitem compatible object', function(){
+    var inlineDialogWebitemSpec = InlineDialogWebitem.getWebItem();
+    expect(inlineDialogWebitemSpec).toEqual({
+      name: 'inline-dialog',
+      selector: '.ap-inline-dialog',
+      triggers: [ 'mouseenter', 'click' ]
+    });
+  });
+
+  describe('rendering', () => {
+
+    it('renders an inline dialog', (done) => {
+      EventDispatcher.registerOnce('after:webitem-invoked:inline-dialog', function(){
+        expect($('.aui-inline-dialog').length).toBe(1);
+        done();
+      });
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').click();
+      });
+    });
+
+    it('does not render multiple times for the same extension', (done) => {
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').click();
+        expect($('.aui-inline-dialog').length).toBe(1);
+        $('.ap-inline-dialog').click();
+        expect($('.aui-inline-dialog').length).toBe(1);
+        done();
+      });
+    });
+
+
+    it('passes inline dialog options to component', (done) => {
+      var allPossibleOptions = {
+        closeOthers: true,
+        isRelativeToMouse: true,
+        offsetX: '1px',
+        offsetY: '1px',
+        onHover: true,
+        onTop: true,
+        persistent: true,
+        showDelay: true,
+        width: '100px'
+      };
+
+      window._AP = window._AP || {};
+      window._AP.inlineDialogModules = {};
+      window._AP.inlineDialogModules['my-plugin'] = {
+        key: {
+          options: allPossibleOptions
+        }
+      };
+
+      EventDispatcher.registerOnce('inline-dialog-opened', function(data){
+        Object.getOwnPropertyNames(allPossibleOptions).forEach(function(name){
+          expect(data.extension.options[name]).toEqual(allPossibleOptions[name]);
+        });
+        done();
+      });
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').click();
+      });
+    });
+
+  });
+
+  describe('triggers', () => {
+    beforeEach(() => {
+      window._AP = {
+        _convertConnectOptions: function(data){
+          return {
+            options: {
+              productContext: JSON.parse(data.productCtx)
+            }
+          };
+        }
+      }
+    });
+
+    afterEach(() => {
+      delete window._AP._convertConnectOptions;
+    });
+
+    it('is set to be triggered by hover and click', () => {
+      expect(InlineDialogWebitem.getWebItem().triggers).toEqual(['mouseenter', 'click']);
+    });
+
+    it('responds to a click event', (done) => {
+      var spy = jasmine.createSpy('spy');
+      spyOn(WebItemActions, 'webitemInvoked');
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').click();
+        expect(WebItemActions.webitemInvoked.calls.count()).toEqual(1);
+        done();
+      });
+    });
+
+    it('responds to a mouseenter event', (done) => {
+      var spy = jasmine.createSpy('spy');
+      spyOn(WebItemActions, 'webitemInvoked');
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').trigger('mouseenter');
+        expect(WebItemActions.webitemInvoked.calls.count()).toEqual(1);
+        done();
+      });
+    });
+
+
+    it('opens with product context', (done) => {
+      EventDispatcher.register('inline-dialog-extension', function(data){
+        expect(data.extension.options.productContext).toEqual({
+          a: 'b'
+        });
+        done();
+      });
+
+      jwtActions.registerContentResolver({callback: function(data){
+        return jQuery.Deferred(function(defer){
+          defer.resolve({
+            url: 'http://www.example.com',
+            addon_key: data.addon_key,
+            key: data.key,
+            options: {
+              productContext: {
+                a: 'b'
+              }
+            }
+          });
+        }).promise();
+      }});
+
+      InlineDialogWebitem.opened({
+        $el: $('<div />'),
+        extension: {
+          addon_key: 'a-key',
+          key: 'key'
+        }
+      });
+    });
+
+    it('invokes with product context', (done) => {
+      var spy = jasmine.createSpy('spy');
+      spyOn(WebItemActions, 'webitemInvoked');
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').trigger('click');
+        var extensionObj = WebItemActions.webitemInvoked.calls.first().args[1].extension;
+        expect(extensionObj.options.productContext).toEqual({'b.c': 'd'});
+        done();
+      });
+    });
+
+    it('only calls the content resolver once per add-on', (done) => {
+      var spy = jasmine.createSpy('spy');
+
+      jwtActions.registerContentResolver({callback: function(data){
+        spy();
+        // if you don't return a promise this regression test will always pass
+        return jQuery.Deferred(function(defer){
+          defer.resolve({
+            url: 'http://www.example.com',
+            addon_key: data.addon_key,
+            key: data.key,
+            options: {
+              productContext: {
+                a: 'b'
+              }
+            }
+          });
+        }).promise();
+      }});
+      waitUntilReadyNextTick(() => {
+        $('.ap-inline-dialog').trigger('click');
+        setTimeout(function(){
+          expect(spy.calls.count()).toEqual(1);
+          done();
+        }, 300);
+      });
+    });
+
+    it('reuses iframe if JWT has not timed out', () => {
+      const jwt = buildJWT(100);
+
+      jwtActions.registerContentResolver({callback: function(data){
+        return jQuery.Deferred(function(defer){
+          defer.resolve({
+            url: 'http://www.example.com?jwt=' + jwt,
+            addon_key: data.addon_key,
+            key: data.key,
+            options: {
+              productContext: {
+                a: 'b'
+              }
+            }
+          });
+        }).promise();
+      }});
+
+      let data = {
+        $el: $('<div />'),
+        extension: {
+          addon_key: 'a-key',
+          key: 'key'
+        }
+      };
+      expect(InlineDialogWebitem.opened(data)).toEqual(true);
+      expect(InlineDialogWebitem.opened(data)).toEqual(false);
+    });
+
+    it('gets new JWT if expired', () => {
+      jasmine.clock().install();
+      const jwt = buildJWT(0);
+      jwtActions.registerContentResolver({callback: function(data){
+        return jQuery.Deferred(function(defer){
+          defer.resolve({
+            url: 'http://www.example.com?jwt=' + jwt,
+            addon_key: data.addon_key,
+            key: data.key,
+            options: {
+              productContext: {
+                a: 'b'
+              }
+            }
+          });
+        }).promise();
+      }});
+
+      let data = {
+        $el: $('<div />'),
+        extension: {
+          addon_key: 'a-key',
+          key: 'key'
+        }
+      };
+      expect(InlineDialogWebitem.opened(data)).toEqual(true);
+      jasmine.clock().tick(10000000);
+      expect(InlineDialogWebitem.opened(data)).toEqual(true);
+      jasmine.clock().uninstall();
+    });
+
+    it('reuses iframe if url is known and no jwt', () => {
+      jwtActions.registerContentResolver({callback: function(data){
+        return jQuery.Deferred(function(defer){
+          defer.resolve({
+            url: 'http://www.example.com',
+            addon_key: data.addon_key,
+            key: data.key,
+            options: {
+              productContext: {
+                a: 'b'
+              }
+            }
+          });
+        }).promise();
+      }});
+
+      let data = {
+        $el: $('<div />'),
+        extension: {
+          addon_key: 'a-key',
+          key: 'key',
+          url: 'http://www.example.com'
+        }
+      };
+      expect(InlineDialogWebitem.opened(data)).toEqual(true);
+      expect(InlineDialogWebitem.opened(data)).toEqual(false);
+    });
+  });
+
+  it('drops events for confluence com.addonengine.analytics plugin until analytics module is loaded', (done) => {
+    spyOn(WebItemActions, 'webitemInvoked');
+    waitUntilReadyNextTick(() => {
+      // With a regular plugin key, the click should pass through uninterrupted
+      $(webitemButton).trigger('click');
+      expect(WebItemActions.webitemInvoked.calls.count()).toEqual(1);
+
+      // With the special plugin key, the click should be blocked if the analytics module isn't loaded
+      $(webitemButton).removeClass(classPluginKey).addClass('ap-plugin-key-com.addonengine.analytics');
+      $(webitemButton).trigger('click');
+      expect(WebItemActions.webitemInvoked.calls.count()).toEqual(1);
+
+      // When we load the analytics module the click passes through again
+      simpleXDM.defineModule('analytics', {});
+      $(webitemButton).trigger('click');
+      expect(WebItemActions.webitemInvoked.calls.count()).toEqual(2);
+      done();
+    });
+  });
+
+});

package/spec/tests/loading_indicator_spec.js

@@ -0,0 +1,48 @@
+import LoadingIndicatorComponent from 'src/host/components/loading_indicator';
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+
+
+describe('Loading indicator component', () => {
+  var loadingIndicator;
+  var $container;
+  var extensionId = 'sd32ndiu2idni';
+
+  beforeEach(() => {
+    $container = $('<div />').addClass('loading-indicator-container');
+    $container.appendTo('body');
+  });
+
+  afterEach(() => {
+    $container.remove();
+  });
+
+  it('will render', () =>{
+    var loadingIndicator = LoadingIndicatorComponent.render();
+    expect(loadingIndicator.length).toEqual(1);
+    expect(loadingIndicator.find('.small-spinner').length).toBe(1);
+  });
+
+  it('will hide', () => {
+    var loadingIndicator = LoadingIndicatorComponent.render();
+    $container.append(loadingIndicator);
+    expect(loadingIndicator.is(':visible')).toBe(true);
+    LoadingIndicatorComponent.hide($container, extensionId);
+    expect(loadingIndicator.is(':visible')).toBe(false);
+  });
+
+  it('will timeout', () => {
+    var loadingIndicator = LoadingIndicatorComponent.render();
+    $container.append(loadingIndicator);
+    LoadingIndicatorComponent.timeout($container, extensionId);
+    expect($container.find('a.ap-btn-cancel').length).toEqual(1);
+  });
+
+  it('will cancel', () => {
+    var loadingIndicator = LoadingIndicatorComponent.render();
+    $container.append(loadingIndicator);
+    LoadingIndicatorComponent.cancelled($container, extensionId);
+    expect($container.find('a.ap-btn-cancel').length).toEqual(0);
+    expect($container.text().length > 1).toBe(true);
+  });
+
+});