Ensure degradation upon error.

[kenkeiter]

Although Skeuocard is unlikely to fail after instantiation, in the next version of Skeuocard, I want to focus upon increasing the likelihood that credit card entry will still be usable even if Skeuocard fails for some reason or another.

In my mind, this means that we need to:

• move all DOM transformations to the end of the initialization process;
• catch all exceptions raised in any other part of the init process;
• figure out what expected behavior is when a runtime error occurs (do we revert to the unstyled form? disable complex interaction? etc.)

Awesome.

[jarthod]

Good idea, the simplest way to prevent javascript issues is to do all the work with virtual or cloned DOM and replace the form at the end.
But the hard problem I guess is rendering issue (like the one there was with chrome not showing the back face of the card), they makes the user unable to fill the form, without any javascript errors.
The only solution I know to this kind of problems is a tiny "legacy mode" link reverting to the regular form.

[kenkeiter]

Yeah, the fact that this all has to happen in a bunch of browsers generally tends to make things trickier -- however, it would be pretty trivial to use something like document.elementFromPoint to check if an element is top-layer visible and trigger reversion if an error is detected.

I'm trying to avoid a legacy-mode link at all costs. The user shouldn't have to make a choice; if things don't/can't work, they should degrade gracefully. If it's an instantiation error, the user should never have to know that Skeuocard was even on the page to begin with -- and if it's a runtime error, we should alert them somehow that there was a small problem, and gracefully (with some sort of animation or something) transition back to the legacy form.

Even better, I should just automate browser testing, and make sure this never happens in the first place ;)

[jarthod]

I totally agree ;) It's better, and you seems to master js way better than me so i'll let you handle this =p

BTW about testing, this might be a good idea indeed :) And while I was adding some integrations specs for my payment form, I ran into issues (I'm using PhantomJS). I don't know why yet, i'm still investigating but phantomJS fail to run skeuocard.js with some weird exception:

     Capybara::Poltergeist::JavascriptError:
       One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

       TypeError: 'undefined' is not a function (evaluating 'this._isCardNameFilled.bind(this)')
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:1360 in CardProduct
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:1324
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:1532
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:1687
       TypeError: 'undefined' is not a function (evaluating 'this._faceStateChanged.bind(this)')
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:534 in FlipTabView
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:122
           at http://127.0.0.1:40830/assets/skeuocard.js?body=1:62 in Skeuocard

I'll do more testing but if you have any idea ;)

[jarthod]

Ok I found the solution here: teampoltergeist/poltergeist#292
I tried phantomJS and capybara-webkit, they both failed because the webkit version it too old and doesn't implement bind. I had to redefine it for the tests to run:

if(typeof Function.prototype.bind == 'undefined') {
  Function.prototype.bind = function(target) {
    var f = this;
    return function() {
      f.apply(target, arguments);
    };
  };
}

It should be ok with selenium, but with headless solutions you may get into the same issue :)

[kenkeiter]

Yeah, I had a feeling it'd have something to do with #bind being available. It's only available in ECMAScript 5, if I'm not mistaken. I considered conditionally defining #bind, but I decided not to, because several of Skeuocard's features won't work without ECMAScript 5, anyway.

[jarthod]

Yes, I got more errors with focused = $('*:focus'), this selector is not working in phantomJS (guard/guard-jasmine#48) I stopped here but i'm pretty sure there is a lot more xD
If you just want to support ECMAScript 5, the best way to test will probably be selenium, with an up-to-date firefox and/or chrome.

[kenkeiter]

@jarthod If you wanna give your tests another shot, I've changed the selectors on master as of v1.0.3.

[jarthod]

@kenkeiter I haven't tested yet but I'm gonna drop phantomJS anyway, I got other issues with my own js, the phantomjs webkit engine is too old. I'm switching to selenium.

BTW I don't think this will fix the issue, in the post I linked they said the whole :focus selector is broken and the workaround is to use activeElement:

$('input[name=q]').get(0) == document.activeElement