blossom/tests/application/qunit/desktop/panes/alert/ui.js

Modern, Cross-Platform Application Framework

// ==========================================================================
// Project:   SproutCore - JavaScript Application Framework
// Copyright: ©2006-2011 Strobe Inc. and contributors.
//            portions copyright @2009 Apple Inc.
// License:   Licensed under MIT license (see license.js)
// ==========================================================================

/*global module test htmlbody ok equals same stop start */

suite("SC.AlertPane UI");

var pane ;

function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass) {
  // wrapper
  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be true');
  ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class');
  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be true');
  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
  ok(pane.childViews[0].childViews[0].get('isVisibleInWindow'), 'pane.div.info.isVisibleInWindow should be true');
  ok(pane.childViews[0].childViews[0].$().hasClass('info'), 'pane.div.info should have info class');
  ok(pane.childViews[0].childViews[1].get('isVisibleInWindow'), 'pane.div.div.isVisibleInWindow should be true');

  // content
  ok(pane.childViews[0].childViews[0].$('img'), 'pane.div.info.img existance should be true');
  ok(pane.childViews[0].childViews[0].$('img').hasClass('icon'), 'pane.div.info.img should have icon class');
  ok(pane.childViews[0].childViews[0].$('img').hasClass(iconClass), 'pane.div.info.img should have %@ class'.fmt(iconClass));
  ok(pane.childViews[0].childViews[0].$('h1'), 'pane.div.info.h1 existance should be true');
  equals(pane.childViews[0].childViews[0].$('h1').text(), 'AlertPane.message', 'pane.div.info.h1 should have title');

  if (description) {
    ok(pane.childViews[0].childViews[0].$('p.description'), 'pane.div.info.description existance should be true');
    equals(pane.childViews[0].childViews[0].$('p.description').text(), 'AlertPane.description', 'pane.div.info.description should have description');
  } else {
    equals(pane.childViews[0].childViews[0].$('p.description').length, 0, 'pane.div.info should have 0 description');
  }

  if (caption) {
    ok(pane.childViews[0].childViews[0].$('p.caption'), 'pane.div.info.caption existance should be true');
    equals(pane.childViews[0].childViews[0].$('p.caption').text(), 'AlertPane.caption', 'pane.div.info.caption should have caption');
  } else {
    equals(pane.childViews[0].childViews[0].$('p.caption').length, 0, 'pane.div.info should have 0 caption');
  }
  
  // buttons
  ok(pane.childViews[0].childViews[1].$('div'), 'pane.div.div.div existance should be true');
  equals(pane.childViews[0].childViews[1].$('div').length, 2, 'pane.div.div should have 2 Buttons');
  ok(pane.childViews[0].$('div'), 'pane.div.div existance should be true');
  
  var button1 = pane.childViews[0].childViews[1].childViews[1];
  var button2 = pane.childViews[0].childViews[1].childViews[0];
  var button3 = pane.childViews[0].childViews[2].childViews[0];
  
  if (button1Title) {
    equals(button1.$('span').text(), button1Title, 'pane.div.div button1 should have custom title %@'.fmt(button1Title));
  } else {
    equals(button1.$('span').text(), 'OK', 'pane.div.div button1 should have default title OK');
  }
  if (button2Title) {
    equals(button2.$('span').text(), button2Title, 'pane.div.div button2 should have custom title %@'.fmt(button2Title));
  } else {
    ok(button2.$().hasClass('hidden'), 'pane.div.div button2 should be hidden');
  }
  if (button3Title) {
    equals(button3.$('span').text(), button3Title, 'pane.div button3 should have custom title %@'.fmt(button3Title));
  } else {
    ok(button3.$().hasClass('hidden'), 'pane.div button3 should be hidden');
  }
}

test("AlertPane.show with icon, message, description, caption and 3 buttons", function() {
  pane = SC.AlertPane.show("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24');
  pane.dismiss();
});

test("AlertPane.warn with icon, message, description, caption and 3 buttons", function() {
  pane = SC.AlertPane.warn("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-alert-48');
  pane.dismiss();
});

test("AlertPane.error with icon, message, description, caption and 3 buttons", function() {
  pane = SC.AlertPane.error("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-error-48');
  pane.dismiss();
});

test("AlertPane.plain with message, description, caption and 3 buttons", function() {
  pane = SC.AlertPane.plain("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'blank');
  pane.dismiss();
});

test("AlertPane.info with icon, message, description, caption and 3 buttons", function() {
  pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
  pane.dismiss();
});

test("AlertPane.info with icon, message and 1 default button (omit all optional parameters)", function() {
  pane = SC.AlertPane.info("AlertPane.message");      
  evaluatePane(pane, "AlertPane.message", null, null, null, null, null, 'sc-icon-info-48');
  pane.dismiss();
});

test("AlertPane.info with icon, message and 3 buttons (passing null to optional description and caption)", function() {
  pane = SC.AlertPane.info("AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
  evaluatePane(pane, "AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
  pane.dismiss();
});

test("AlertPane.info with icon, message, description, caption and 1 button (passing null to 3 buttons)", function() {
  pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, this);      
  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, 'sc-icon-info-48');
  pane.dismiss();
});

test("users interaction with mutiple alert panes with 1-3 buttons", function() {
  
  var delegate = SC.Object.create({
    
    threeButtonAlertPane: function() {
      pane = SC.AlertPane.warn("AlertPane.warn title", 'Click OK to see this alert pane again.  \nClick Other... to see other alert panes.', 'Click cancel to dismiss.', "OK", "Cancel", 'Other...', this);      
    },

    twoButtonAlertPane: function() {
      pane = SC.AlertPane.error("AlertPane.error title", 'Click OK to see one button alert pane.', 'Click cancel to dismiss.', "OK", "Cancel", delegate);      
    },

    oneButtonAlertPane: function() {
      pane = SC.AlertPane.info("AlertPane.info title", 'Click OK to dismiss.', delegate);      
    },
   
    alertPaneDidDismiss: function(alert, status) {
      //console.log("%@.alertDidDismiss - %@".fmt(alert, status));
      switch(status) {
        case SC.BUTTON1_STATUS:
          if(alert.icon && alert.icon.indexOf('alert')!=-1) this.invokeLater(this.threeButtonAlertPane, 1000);
          if(alert.icon && alert.icon.indexOf('error')!=-1) this.oneButtonAlertPane();
          break;
        case SC.BUTTON3_STATUS:
          this.twoButtonAlertPane();
          break;
      }
    }
  });

  SC.RunLoop.begin();
  delegate.threeButtonAlertPane();
  SC.RunLoop.end();
}) ;