Friday, December 26, 2014

Polymer and Karma-Ie-Launcher


Testing in Internet Explorer is a low priority for me. It always seems to be more effort than it is worth, given its dwindling market share. Still, I recognize that there is value and that some folks need it. So, even if I will not run automated tests for the code in Patterns in Polymer, I would like to be able to tell people that it does work.

Except that I was unable to get karma-webdriver-launcher to launch IE tests against Polymer last night. I suspect that the problems lie with WebDriver, so tonight, I try karma-ie-launcher instead.

First, I copy the code and tests onto my Windows VM. In there I add karma-ie-launcher to the list of NPM package.json dependencies:
{
  "name": "plain_old_forms",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-watch": "~0.5.0",
    "karma-jasmine": "~0.2.0",
    "karma-ie-launcher": ">0.0"
  }
}
After an npm install, I try to start Karma:
C:\Users\IEUser\plain_old_forms>karma start --single-run --browsers IE
'karma' is not recognized as an internal or external command,
operable program or batch file.
OK, so I install it globally:
C:\Users\IEUser\plain_old_forms>npm install -g karma
npm WARN optional dep failed, continuing fsevents@0.3.1

> ws@0.4.32 install C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
karma@0.12.28 C:\Users\IEUser\AppData\Roaming\npm\node_modules\karma
├── ...
With that, when I try Karma now, I get:
C:\Users\IEUser\plain_old_forms>karma start --single-run --browsers IE
'karma' is not recognized as an internal or external command,
operable program or batch file.
Sigh. It looks like I need the full path instead:
C:\Users\IEUser\plain_old_forms>node node_modules\karma\bin\karma start --single-run --browsers IE
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser IE
WARN [watcher]: Pattern "C:/Users/IEUser/plain_old_forms/bower_components/webcomponentsjs/webcomponents.js" does not match any file.
WARN [watcher]: Pattern "C:/Users/IEUser/plain_old_forms/bower_components/**" does not match any file.
INFO [IE 11.0.0 (Windows 7)]: Connected on socket _0g9fTtXw2PJOCjb5b2y with id 98303942
IE 11.0.0 (Windows 7) <x-pizza> element content has a shadow DOM FAILED
        ReferenceError: 'Polymer' is undefined
           at waitForPolymer (C:/Users/IEUser/plain_old_forms/test/PolymerSetup.js:19:5)
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/PolymerSetup.js:29:3)
...
IE 11.0.0 (Windows 7): Executed 3 of 3 (3 FAILED) ERROR (0.047 secs / 0.038 secs)
Oops! I neglected to bower install my client-side dependencies (this time I globally install from the start):
C:\Users\IEUser\plain_old_forms>npm install -g bower
C:\Users\IEUser\AppData\Roaming\npm\bower -> C:\Users\IEUser\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.12 C:\Users\IEUser\AppData\Roaming\npm\node_modules\bower
└── ...
That does get installed in a useful location and it works… to a point:
C:\Users\IEUser\plain_old_forms>bower install
bower polymer#*                 ENOGIT git is not installed or not in the PATH
So it seems that I need Git installed to work with Polymer on Windows. This is already more trouble than it is worth to me, but I must see it through. I install Git the usual way and accept all of the default options but one:



This will allow bower to access Git when running from the command prompt:
C:\Users\IEUser\plain_old_forms>bower install
...
a-form-input#0.0.1 bower_components\a-form-input
└── polymer#0.5.2
polymer#0.5.2 bower_components\polymer
├── core-component-page#0.5.2
└── webcomponentsjs#0.5.2
core-component-page#0.5.2 bower_components\core-component-page
├── polymer#0.5.2
└── webcomponentsjs#0.5.2
webcomponentsjs#0.5.2 bower_components\webcomponentsjs
Yay!

Now, when I karma, I find:
C:\Users\IEUser\plain_old_forms>node node_modules\karma\bin\karma start --single-run --browsers IE
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser IE
INFO [IE 11.0.0 (Windows 7)]: Connected on socket qNf8JVIEqjDNilL7AQFH with id 9528228
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:29:7)
IE 11.0.0 (Windows 7) <x-pizza> syncing <input> values updates the input FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:42:7)
        TypeError: Unable to get property 'value' of undefined or null reference
           at Anonymous function (C:/Users/IEUser/plain_old_forms/test/XPizzaSpec.js:47:7)
IE 11.0.0 (Windows 7): Executed 3 of 3 (2 FAILED) (0.453 secs / 0.444 secs)
Dang it! Those are the same errors that I saw yesterday with WebDriver. So it seems that this is a problem with IE and Polymer rather than WebDriver. The failure is occurring when the test adds a topping to the first half of the pizza being built by the <x-pizza> Polymer element:
  describe('properties', function(){
    it('updates value when internal state changes', function(done) {
      el.model.firstHalfToppings.push('pepperoni');
      el.async(function(){
        expect(el.value).toContain('pepperoni');
        done();
      });
    });
  });
This works in Chrome and Firefox, but it seems that I need a different approach in Internet Explorer. Unfortunately, the web developer tools are still broken in my install so this is going to be tricky to troubleshoot.



Day #36

11 comments:

  1. When I've seen errors like this elsewhere it has been because of a line ending assumption in the code... or git's tendency to be "helpful" and change the line endings of a file you just cloned.

    ReplyDelete
    Replies
    1. Thanks, I'll keep that in mind. I'm not sure that's my immediate problem (I still think it's IE), but I'll probably run into Git woes before long...

      Delete
  2. one of the most in vogue things of each man's closet as they are a la mode, agreeable, and you look one of a kind one of a kind also. A lot of alternatives are accessible in fascinating shoes, Zing Flowers Discount codes get the best one for you and dazzle all the spectators with your style and character.

    ReplyDelete
  3. i keep this in my mind https://coupontoaster.co.uk/

    ReplyDelete
  4. Get Stadium Goods Promo Code and avail 5% OFF, it is an online store that offers a various version of shoes, sweat-shirts, and in vogue activewear. Stadium Goods is known for its head-turning plans, Quality, and reasonableness. We offer clients an available front to find the most recent, popular items at radically low prices only by Stadium Goods Coupons Code. Footwear intended for different games should meet the extraordinary necessities of its particular reason. Stadium Goods Promo Code

    ReplyDelete
  5. Tuckernuck promo codes, southern tide discount code, eberjey discount code are making a hot impact on the market through fairycoupons.com.
    I have gone through the above context and have arose the thoughts that the coupons are a very demanding market in recent times as we can sell meshki discount code with our fairycoupons.com.

    ReplyDelete
  6. Timberworld Discount code is best code provided by Timberworld. Amazing Discount Offers, Get Timberworld & Promo Codes and save up to 25% on the offer, so get the code helps you to save on coupon and promo codes
    Timberworld Discount code

    ReplyDelete
  7. FSA store Promo Code is best code provided by FSA Store. Amazing Discount Offers Get, FSA Store & Promo Codes and save up to $25 on the offer, so get the code helps you to save on coupon and promo codes. FSA store Promo Code

    ReplyDelete
  8. Blackovis coupon code is the home for solid.hunting.gear. if your hunting passion is western big game, Midwest whitetail, Sheep hunting, Waterfowl, upland or a mix of everything, Blackovis is where you'll find hunting gear that performs and stands up to the demands of your hunt. If it's not a piece of hunting gear that we'd use, It doesn't belong on Blackovis. Blackovis coupon code

    ReplyDelete
  9. Shakti Mat Promo code is best code provided by Shakti Mat. Amazing Discount Offers Get, Shakti Mat & Promo Codes and save up to 15% on the offer, so get the code helps you to save on coupon and promo codes. Shakti Mat Promo code

    ReplyDelete