@atlassian/atlassian-connect-js 5.3.190

package/spec/tests/dialog_module_spec.js

@@ -0,0 +1,395 @@
+import DialogModule from 'src/host/modules/dialog';
+import DialogComponent from 'src/host/components/dialog';
+import DialogExtensionComponent from 'src/host/components/dialog_extension';
+import EventActions from 'src/host/actions/event_actions';
+import baseDialogComponentTests from 'fixtures/base_dialog_component_tests';
+import IframeActions from 'src/host/actions/iframe_actions';
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+
+describe('Dialog module', () => {
+
+  afterEach(() => {
+    $('.aui-dialog2').remove();
+    $('.aui-blanket').remove();
+  });
+
+  it('defaults to chromeless', () => {
+    var options = {
+      key: 'anykey'
+    };
+    var callback = function(){};
+    callback._id = 'cbc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    expect($('.aui-dialog2').hasClass('aui-dialog2-chromeless')).toEqual(true);
+  });
+
+  it('defaults to chrome in a dialogModule', () => {
+    window._AP = {
+      dialogModules: {
+        someaddon_key: {
+          dialogmodulekey: {
+            options: {}
+          }
+        }
+      }
+    }
+    var options = {
+      key: 'dialogmodulekey'
+    };
+    var callback = function(){};
+    callback._id = 'abdc123';
+    callback._context = {
+      extension: {
+        addon_key: 'someaddon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    expect($('.aui-dialog2').hasClass('aui-dialog2-chromeless')).toEqual(false);
+    expect($('.aui-dialog2').hasClass('aui-dialog2')).toEqual(true);
+  });
+
+  it('renders a chromed dialog', () => {
+    var options = baseDialogComponentTests.getChromeOptions();
+    options.key = 'some.module_key';
+    var callback = function(){};
+    callback._id = 'abc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    baseDialogComponentTests.testChrome(options);
+  });
+
+  it('renders a chromed dialog with productContext', (done) => {
+    var options = baseDialogComponentTests.getChromeOptions();
+    options.key = 'some.module_key';
+    var callback = function(){};
+    callback._id = 'abc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {
+          productContext: {
+            'some': 'context'
+          }
+        }
+      }
+    };
+
+    EventDispatcher.registerOnce('dialog-extension-open', function(data){
+      expect(data.extension.options.productContext).toEqual(callback._context.extension.options.productContext);
+      done();
+    });
+    new DialogModule.create.constructor(options, callback);
+  });
+
+
+  it('renders a chromed dialog with dimensions', () => {
+    var options = baseDialogComponentTests.getChromeOptions();
+    delete options.size;
+    options.width = '123px';
+    options.height = '100px';
+    options.key = 'some.module_key';
+    var callback = function(){};
+    callback._id = 'abc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    baseDialogComponentTests.testChrome(options);
+  });
+
+  it('renders a chromeless dialog', () => {
+    var options = baseDialogComponentTests.getChromelessOptions();
+    options.key = 'some.module_key';
+    var callback = function(){};
+    callback._id = 'abc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    baseDialogComponentTests.testChromeless(options);
+  });
+
+  it('renders a chromeless dialog with dimensions', () => {
+    var options = baseDialogComponentTests.getChromelessOptions();
+    delete options.size;
+    options.width = '123px';
+    options.height = '100px';
+    options.key = 'some.module_key';
+    var callback = function(){};
+    callback._id = 'abc123';
+    callback._context = {
+      extension: {
+        addon_key: 'some.addon_key',
+        key: 'some.different_module',
+        options: {}
+      }
+    };
+    new DialogModule.create.constructor(options, callback);
+    baseDialogComponentTests.testChromeless(options);
+  });
+
+  it('closes on AP.dialog.close()', () => {
+    var extension = {
+      addon_key: 'some-key',
+      key: 'module-key',
+      url: 'http://www.example.com',
+      options: {
+        isDialog: true
+      }
+    };
+    var options = baseDialogComponentTests.getChromeOptions();
+    var $dialogExtension = DialogExtensionComponent.render(extension, options);
+    $dialogExtension.find('iframe')[0].bridgeEstablished = true;
+    var callback = function(){};
+    callback._context = {
+      extension: extension
+    };
+    expect($('.aui-dialog2').length).toEqual(1);
+    DialogModule.close(callback);
+    expect($('.aui-dialog2').length).toEqual(0);
+  });
+
+  it('button click dispatches an event', (done) => {
+    var extension = {
+      addon_key: 'some-key',
+      key: 'module-key',
+      url: 'http://www.example.com'
+    };
+
+    var options = baseDialogComponentTests.getChromeOptions();
+    var $dialogExtension = DialogExtensionComponent.render(extension, options);
+    $dialogExtension.find('iframe')[0].bridgeEstablished = true;
+    spyOn(EventActions, 'broadcast');
+    $dialogExtension.find('iframe').load(function(){
+      let cancelButton = $dialogExtension.find('button')[1];
+      cancelButton.click();
+      expect(EventActions.broadcast.calls.count()).toEqual(2);
+      expect(EventActions.broadcast.calls.first().args).toEqual([
+        'dialog.cancel',
+        jasmine.objectContaining({
+          addon_key: extension.addon_key,
+          key: extension.key
+        }),
+        {
+          button: {
+            name: 'cancel',
+            identifier: 'cancel',
+            text: 'some cancel text'
+          }
+        }
+      ]);
+      expect(EventActions.broadcast.calls.all()[1].args).toEqual([
+        'dialog.button.click',
+        jasmine.objectContaining({
+          addon_key: extension.addon_key,
+          key: extension.key
+        }),
+        {
+          button: {
+            name: 'cancel',
+            identifier: 'cancel',
+            text: 'some cancel text'
+          }
+        }
+      ]);
+
+      done();
+    });
+  });
+
+  it('closeOnEscape false button click dispatches an event', (done) => {
+    var extension = {
+      addon_key: 'some-key',
+      key: 'module-key',
+      url: 'http://www.example.com',
+      options: {
+        preventDialogCloseOnEscape: true
+      }
+    };
+
+    var options = baseDialogComponentTests.getChromeOptions();
+    options.closeOnEscape = false;
+    var $dialogExtension = DialogExtensionComponent.render(extension, options);
+    expect($dialogExtension.find('button.aui-button-primary')[0].getAttribute('aria-disabled')).toEqual('true');
+    EventDispatcher.registerOnce('after:iframe-bridge-established', (data) => {
+      expect($dialogExtension.find('button.aui-button-primary')[0].getAttribute('aria-disabled')).toEqual('false');
+      done();
+    });
+    EventDispatcher.dispatch('iframe-bridge-established', {
+      extension: extension,
+      $el: $dialogExtension.find('iframe')
+    });
+  });
+
+  it('creates a custom button', () => {
+    var extension = {
+      addon_key: 'some-key',
+      key: 'module-key',
+      url: 'http://www.example.com',
+      options: {
+        isDialog: true
+      }
+    };
+    var options = baseDialogComponentTests.getChromeOptions();
+    var $dialogExtension = DialogExtensionComponent.render(extension, options);
+    $dialogExtension.find('iframe')[0].bridgeEstablished = true;
+    var callback = function(){};
+    callback._context = {
+      extension: extension
+    };
+    expect($('.aui-dialog2').length).toEqual(1);
+    new DialogModule.createButton.constructor({text: 'abc123'}, callback);
+    expect($('.aui-dialog2 button').filter((i, button) => {
+      return button.innerHTML === 'abc123';
+    }).length).toEqual(1);
+  });
+
+  it('button click is ignored if iframe has not loaded', () => {
+    var extension = {
+      addon_key: 'some-key',
+      key: 'module-key',
+      url: 'http://www.example.com'
+    };
+
+    var options = baseDialogComponentTests.getChromeOptions();
+    var $dialogExtension = DialogExtensionComponent.render(extension, options);
+    spyOn(EventActions, 'broadcast');
+    $dialogExtension.find('button').first().click();
+    expect(EventActions.broadcast.calls.count()).toEqual(0);
+  });
+
+  describe('button modifier', () => {
+    it('hide dispatches an event', (done) => {
+      var extension = {
+        addon_key: 'some-key',
+        key: 'module-key',
+        url: 'http://www.example.com'
+      };
+      var options = baseDialogComponentTests.getChromeOptions();
+      DialogExtensionComponent.render(extension, options);
+
+      EventDispatcher.registerOnce('button-toggle-visibility', (data) => {
+        expect(data.hidden).toEqual(true);
+        expect(data.$el).not.toBeUndefined();
+        done();
+      });
+
+      var button = new DialogModule.getButton.constructor('submit');
+      button.hide();
+    });
+
+    it('show dispatches an event', (done) => {
+      var extension = {
+        addon_key: 'some-key',
+        key: 'module-key',
+        url: 'http://www.example.com'
+      };
+
+      var options = baseDialogComponentTests.getChromeOptions();
+      DialogExtensionComponent.render(extension, options);
+      EventDispatcher.registerOnce('button-toggle-visibility', (data) => {
+        expect(data.hidden).toEqual(false);
+        expect(data.$el).not.toBeUndefined();
+        done();
+      });
+      var button = new DialogModule.getButton.constructor('submit');
+      button.show();
+    });
+
+    it('enable dispatches an event', (done) => {
+      var extension = {
+        addon_key: 'some-key',
+        key: 'module-key',
+        url: 'http://www.example.com'
+      };
+
+      var options = baseDialogComponentTests.getChromeOptions();
+      DialogExtensionComponent.render(extension, options);
+      EventDispatcher.registerOnce('button-toggle', (data) => {
+        expect(data.disabled).toEqual(false);
+        expect(data.$el).not.toBeUndefined();
+        done();
+      });
+      var button = new DialogModule.getButton.constructor('submit');
+      button.enable();
+    });
+
+    it('disable dispatches an event', (done) => {
+      var extension = {
+        addon_key: 'some-key',
+        key: 'module-key',
+        url: 'http://www.example.com'
+      };
+
+      var options = baseDialogComponentTests.getChromeOptions();
+      DialogExtensionComponent.render(extension, options);
+      EventDispatcher.registerOnce('button-toggle', (data) => {
+        expect(data.disabled).toEqual(true);
+        expect(data.$el).not.toBeUndefined();
+        done();
+      });
+      var button = new DialogModule.getButton.constructor('submit');
+      button.disable();
+    });
+  });
+
+  describe('dialog custom data', () => {
+    it('is set in dialog module', () => {
+      var options = baseDialogComponentTests.getChromelessOptions();
+      options.key = 'some.module_key';
+      options.customData = {
+        someKey: 'some.value'
+      };
+      var callback = function(){};
+      callback._id = 'abc123';
+      callback._context = {
+        extension: {
+          addon_key: 'some.addon_key',
+          key: 'some.different_module',
+          options: {}
+        }
+      };
+      var dialog = new DialogModule.create.constructor(options, callback);
+      expect(dialog.customData).toEqual(options.customData);
+    });
+
+    it('callback runs even when no dialog is set', (done) => {
+      var cb = function(data){
+        expect(data).toEqual(undefined);
+        done();
+      };
+      cb._context = {
+        extension: {
+          addon_key: 'some.addon_key',
+          key: 'some.module_key',
+          options: { }
+        }
+      };
+      DialogModule.getCustomData(cb);
+    });
+  });
+});

package/spec/tests/dialog_spec.js

@@ -0,0 +1,296 @@
+import DialogComponent from 'src/host/components/dialog';
+import EventDispatcher from 'src/host/dispatchers/event_dispatcher';
+import dialogUtils from 'src/host/utils/dialog';
+import DialogActions from 'src/host/actions/dialog_actions';
+
+function renderDialogWithCustomButton() {
+  DialogComponent.render({
+    chrome: true,
+    buttons: [{
+      text: 'custom button',
+      name: 'custom button',
+      identifier: 'custom-button-1'
+    }]
+  });
+}
+
+function renderDialogWithChrome() {
+  return DialogComponent.render({
+    chrome: true
+  });
+}
+
+describe('dialog component', () => {
+  afterEach(() => {
+    $('.aui-dialog2').remove();
+    $('.aui-blanket').remove();
+  });
+
+  describe('sanitize', () => {
+
+    it('extracts onHide if it is a function', () => {
+      var onHideSpy = jasmine.createSpy('onHide');
+      var raw = {
+        onHide: onHideSpy
+      };
+      var sanitizedOptions = dialogUtils.sanitizeOptions(raw);
+      expect(sanitizedOptions.onHide).toEqual(onHideSpy);
+    });
+
+    it('extracts noop function for onHide if it is not a function', () => {
+      var raw = {
+        onHide: 1
+      };
+      var sanitizedOptions = dialogUtils.sanitizeOptions(raw);
+      expect(typeof sanitizedOptions.onHide).toEqual('function');
+    });
+
+  });
+
+  describe('render', () => {
+
+    it('renders a dialog', () => {
+      var $dialog = DialogComponent.render();
+      expect($dialog.hasClass('aui-dialog2')).toEqual(true);
+      expect($dialog.hasClass('ap-aui-dialog2')).toEqual(true);
+    });
+
+    it('contains content', () => {
+      var content = $('<div />').text('some content');
+      var $dialog = DialogComponent.render({
+        $content: content
+      });
+      var $dialogContent = $dialog.find('.aui-dialog2-content');
+      expect($dialogContent.length).toEqual(1);
+      expect($dialogContent.text()).toEqual('some content');
+    });
+
+    it('is 50% height and width by default', () => {
+      var $dialog = DialogComponent.render();
+      expect($dialog[0].style.height).toEqual('50%');
+      expect($dialog[0].style.width).toEqual('50%');
+    });
+
+    it('calls onHide handler when dialog is closed', () => {
+      var onHideSpy = jasmine.createSpy('onHide');
+      var $dialog = DialogComponent.render({
+        onHide: onHideSpy
+      });
+      DialogActions.closeActive({});
+      expect(onHideSpy.calls.count()).toEqual(1);
+    });
+
+    describe('chrome', () => {
+
+      it('renders a chromeless dialog by default', () => {
+        var $dialog = DialogComponent.render();
+        expect($dialog.hasClass('aui-dialog2-chromeless')).toEqual(true);
+      });
+
+      it('iframe dimensions should be the opened dimensions', () => {
+        var $dialog = DialogComponent.render({
+          width: '200px',
+          height: '300px'
+        });
+        expect($dialog.width()).toEqual(200);
+        expect($dialog.height()).toEqual(300);
+      });
+
+
+      describe('footer', () => {
+
+        it('renders', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          var $footer = DialogComponent._renderFooter(sanitizedOptions);
+          expect($footer.hasClass('aui-dialog2-footer')).toEqual(true);
+        });
+
+        it('has a hint', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions({hint: 'abc123'});
+          var $footer = DialogComponent._renderFooter(sanitizedOptions);
+          var hint = $footer.find('.aui-dialog2-footer-hint');
+          expect(hint.length).toEqual(1);
+          expect(hint.text()).toEqual('abc123');
+        });
+
+        it('has actions', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          var $footer = DialogComponent._renderFooter(sanitizedOptions);
+          var $actions = $footer.find('.aui-dialog2-footer-actions');
+          expect($actions.length).toEqual(1);
+          expect($actions.find('button').length).toEqual(2);
+        });
+
+        it('does not trigger event on button clicks when iframe is has not loaded', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          var $footer = DialogComponent._renderFooter(sanitizedOptions);
+          spyOn(DialogActions, 'clickButton');
+          $footer.find('button').first().trigger('click');
+          expect(DialogActions.clickButton.calls.count()).toEqual(0);
+        });
+      });
+
+      describe('header', () => {
+
+        it('renders', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          var $header = DialogComponent._renderHeader(sanitizedOptions);
+          expect($header.hasClass('aui-dialog2-header')).toEqual(true);
+        });
+
+        it('adds header text', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          sanitizedOptions.header = 'header text';
+          var $header = DialogComponent._renderHeader(sanitizedOptions);
+          expect($header.find('.aui-dialog2-header-main').text()).toEqual(sanitizedOptions.header);
+        });
+
+        it('has a close button', () => {
+          var sanitizedOptions = dialogUtils.sanitizeOptions();
+          var $header = DialogComponent._renderHeader(sanitizedOptions);
+          expect($header.find('.aui-dialog2-header-close').length).toEqual(1);
+        });
+      });
+
+      describe('buttons', () => {
+
+        describe('default', () => {
+          it('gets the button visibility', () => {
+            renderDialogWithChrome();
+            expect(DialogComponent.buttonIsVisible('submit')).toBe(true);
+            expect(DialogComponent.buttonIsVisible('cancel')).toBe(true);
+          });
+
+          it('gets the button visibility of hidden buttons', () => {
+            renderDialogWithChrome();
+            $('.aui-dialog2-footer-actions .ap-aui-button').hide();
+            expect(DialogComponent.buttonIsVisible('submit')).toBe(false);
+            expect(DialogComponent.buttonIsVisible('cancel')).toBe(false);
+          });
+
+          it('gets the button state', () => {
+            renderDialogWithChrome();
+            expect(DialogComponent.buttonIsEnabled('submit')).toBe(false);
+            expect(DialogComponent.buttonIsEnabled('cancel')).toBe(true);
+          });
+
+          it('gets the state of disabled buttons', () => {
+            renderDialogWithChrome();
+            $('.aui-dialog2-footer-actions .ap-aui-button').attr('aria-disabled', true);
+            expect(DialogComponent.buttonIsEnabled('submit')).toBe(false);
+            expect(DialogComponent.buttonIsEnabled('cancel')).toBe(false);
+          });
+        });
+
+        describe('custom', () => {
+          it('gets the button visibility', () => {
+            renderDialogWithCustomButton()
+            expect(DialogComponent.buttonIsVisible('custom-button-1')).toBe(true);
+          });
+
+          it('gets the button visibility of hidden buttons', () => {
+            renderDialogWithCustomButton()
+            $('.aui-dialog2-footer-actions .ap-aui-button').hide();
+            expect(DialogComponent.buttonIsVisible('custom-button-1')).toBe(false);
+          });
+
+          it('gets the button state', () => {
+            renderDialogWithCustomButton()
+            expect(DialogComponent.buttonIsEnabled('custom-button-1')).toBe(true);
+          });
+
+          it('gets the state of disabled buttons', () => {
+            renderDialogWithCustomButton()
+            $('.aui-dialog2-footer-actions .ap-aui-button').attr('aria-disabled', true);
+            expect(DialogComponent.buttonIsEnabled('custom-button-1')).toBe(false);
+          });
+        });
+      });
+    });
+
+    describe('chromeless', () => {
+
+      it('does not have chrome', () => {
+        var $dialog = DialogComponent.render({
+          chrome: false
+        });
+        expect($dialog.hasClass('aui-dialog2-chromeless')).toEqual(true);
+        expect($dialog.find('header').length).toEqual(0);
+        expect($dialog.find('footer').length).toEqual(0);
+      });
+
+      it('iframe dimensions should be the opened dimensions', () => {
+        var $dialog = DialogComponent.render({
+          width: '200px',
+          height: '300px',
+          chrome: false
+        });
+
+        expect($dialog.width()).toEqual(200);
+        expect($dialog.height()).toEqual(300);
+      });
+
+    });
+
+    describe('fullscreen/maximum', () => {
+      // Back compatibility support for addons like Gliffy and Balsamiq which have a special 100% height and width chromeless Dialogs.
+      // This is not API or documented and should be deprecated.
+      it('100% width and height takes up the entire screen', () => {
+        var $dialog = DialogComponent.render({
+          height: '100%',
+          width: '100%'
+        });
+        expect($dialog.hasClass('aui-dialog2-chromeless')).toEqual(true);
+        expect($dialog.hasClass('ap-header-controls')).toEqual(false);
+        expect($dialog.height()).toEqual($(window).height());
+        expect($dialog.width()).toEqual($(window).width());
+      });
+
+      it('maximum dialog takes up the entire screen', () => {
+        var $dialog = DialogComponent.render({
+          size: 'maximum'
+        });
+        expect($dialog.hasClass('aui-dialog2-chromeless')).toEqual(true);
+        expect($dialog.hasClass('ap-header-controls')).toEqual(false);
+        expect($dialog.height()).toEqual($(window).height());
+        expect($dialog.width()).toEqual($(window).width());
+      });
+
+      it('combination of size and dimensions', () => {
+        var $dialog = DialogComponent.render({
+          height: '100%',
+          width: '100%',
+          size: 'maximum'
+        });
+        expect($dialog.hasClass('aui-dialog2-chromeless')).toEqual(true);
+        expect($dialog.hasClass('ap-header-controls')).toEqual(false);
+        expect($dialog.height()).toEqual($(window).height());
+        expect($dialog.width()).toEqual($(window).width());
+      });
+    })
+
+  });
+
+  describe('max dimensions are no greater than the window', () => {
+    it('will not open larger than 100% width / height', () => {
+      var $dialog = DialogComponent.render({
+        height: '101%',
+        width: '102%'
+      });
+
+      expect($dialog[0].style.height).toEqual('100%');
+      expect($dialog[0].style.width).toEqual('100%');
+    });
+
+    it('will not open larger than window in PX', () => {
+      var $dialog = DialogComponent.render({
+        height: '100000px',
+        width: '100000px',
+      });
+      expect($dialog.height()).toEqual($(window).height());
+      expect($dialog.width()).toEqual($(window).width());
+    });
+  });
+
+
+});