CODEWITHSUNDEEP
automated-testspolymer
hawkett
hawkett

Reputation: 3083

Polymer web-component-tester failing due to variant browser viewport sizes

I'm using the Polymer/web-component-tester to run automated tests of my components.

I've run into an issue where a component test will pass if run in isolation, but fail when run using a file glob - for example:

FAILS:    wct components/**/test
SUCCEEDS: wct components/btn-component/test

After a fair bit of digging, I found the reason is the change in browser behaviour: in both cases the launched browser has two iFrames side-by-side, with the right one showing the test progress, and the left showing the component. The globbed test run results in a significantly narrower left (component) iFrame.

When using polymer-gestures to simulate mouse clicks, the narrower iFrame causes issues because it can often render a horizontal scrollbar and change a component's clickability.

The following is an example of a component & test that fails as described. It renders a Cancel button a few hundred pixels to the right.

Component

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="btn-component" attributes="name">
  <template>
    <style>
    :host {
      display: block;
      width: 400px;
    }
    </style>

    <div layout horizontal>
      <span flex></span>
      <div id="cancel_button" on-tap="{{cancel}}">Cancel</div>
    </div>
  </template>

  <script>
    Polymer({
      ready: function() {
        console.log("btn-component component ready!");
      },

      cancel: function(event, detail, sender) {
        console.log("Cancel Btn!", event, detail, sender);

        this.fire('cancel_btn', {});
      }
    });
  </script>
</polymer-element>

Test

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>btn-component Tests</title>

  <script src="../../../bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="../../../bower_components/web-component-tester/browser.js"></script>
  <script src="../../../bower_components/polymer-gestures/test/js/fake.js"></script>

  <link href="../btn-component.html" rel="import">

</head>
<body>

<btn-component id="component"></btn-component>

<script>
  function runAfterEvent(eventName, element, callback) {
    var listener = function(event) {
      element.removeEventListener(eventName, listener)
      callback(event.detail);
    };
    element.addEventListener(eventName, listener);
  }

  suite('<btn-component>', function() {
    var c = document.getElementById('component');
    var fake = new Fake();

    test('hitting cancel fires cancel event', function(done) {
      runAfterEvent('cancel_btn', c, function(event) {
        assert.ok(1, "the cancel_btn event should be fired");

        done();
      });

      var cancelBtn = document.querySelectorAll("btn-component /deep/ #cancel_button")[0];

      console.log(cancelBtn);

      setTimeout(function() {
        fake.downOnNode(cancelBtn);
        fake.upOnNode(cancelBtn);
      }, 1000);
    });
  });
</script>

The fail happens trying to click the button.

I guess there's a variety of ways to approach resolving this - including in my own tests (e.g. checking the viewport size vs the element position and scrolling right before trying to simulate a click), but starts to get quite fiddly/fragile. A reasonable option might be to add a config to wct that specifies a minimum viewport size on the component iFrame.

Perhaps I'm missing some available configuration that could help here. Is there a recommended way to handle this scenario?

Upvotes: 1

Views: 756

Answers (1)

hawkett
hawkett

Reputation: 3083

A simple solution is pretty obvious. I added the following to my test's index.html

<style>
  #subsuites {
    width: 600px !important;
  }
</style>

The css used by the wct tool sets the width at 50% and nests frames when using file globs - resulting in progressive narrowing.

Upvotes: 2

Related Questions