Port the paper-element tests!

[jakemac53]

Part of #1. This may need to be split up into multiple sub-tasks.

[vsheyanov]

Guys, does anyone started working on this one?

[ErikGrimes]

I'd like to help, but I might not be able to get to it until the weekend. There's 30 so of them, so maybe just pick 5-10 at a time and post them here so we know who's working on what?

[vsheyanov]

sounds good!

[jakemac53]

If its easier I am also more than happy to split these up into a few different tasks

[vsheyanov]

Ok, I'll take first 6 in the /src/paper-*

• paper-badge
• paper-button
• paper-card
• paper-checkbox
• paper-dialog
• paper-dialog-scrollable

These elements are skipped:

• paper-behaviors
• paper-dialog-behavior

[ErikGrimes]

@jakemac53 Thanks, but I think this will work fine.

@vsheyanov Ok. I'll take these:

• paper-drawer-panel - no tests
• paper-fab
• paper-header-panel
• paper-icon-button
• paper-icon-item (no separate test, included in paper-item tests)
• paper-input
• paper-input-char-counter
• paper-input-container
• paper-input-error
• paper-input-text-area

[vsheyanov]

next batch

• paper-item
• paper-material
• paper-menu
• paper-submenu
• paper-menu-button
• paper-progress

[vsheyanov]

@jakemac53 should we create a pull request when a batch of test is ready or better to create one in the end?

[jakemac53]

@vsheyanov however you would prefer

[vsheyanov]

@jakemac53 looks like paper-submenu is missing in polymer-dart, but exists in original repo. What should be done in this case?

[vsheyanov]

@jakemac53 also, could you clarify, is it normally, that constants from JS elements don't exist in generated dart sources? For instance PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; doesn't exist in paper_menu_button.dart and thus cannot be used. Thanks

[ErikGrimes]

@jakemac53 I'm looking at the one of the tests for paper-icon-button that's failing.

the dom

<paper-icon-button id="fab1" icon="add" class="style-scope main-app x-scope paper-icon-button-0" role="button" tabindex="0" aria-disabled="false">
    <paper-ripple id="ink" class="circle style-scope paper-icon-button" center="" animating="">
    <div id="background" class="style-scope paper-ripple" style="opacity: 0; background-color: rgb(33, 33, 33);"></div>
    <div id="waves" class="style-scope paper-ripple"><div class="wave-container style-scope paper-ripple" style="top: 0px; left: -3px; width: 46px; height: 46px; -webkit-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);"><div class="wave style-scope paper-ripple" style="opacity: 0.25; -webkit-transform: scale(3.132821864268, 3.132821864268); transform: scale3d(3.132821864268, 3.132821864268, 1); background-color: rgb(33, 33, 33);"></div></div></div>
  </paper-ripple>
    <iron-icon id="icon" class="style-scope paper-icon-button x-scope iron-icon-0">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" class="style-scope iron-icon"></path></g></svg>
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  </iron-icon>
  </paper-icon-button>

this test is failing

expect(Polymer.dom(b1.$['icon'].jsElement['root']).querySelector('svg'),
          isNotNull);
    });

but I can find iron-meta

expect(Polymer.dom(b1.$['icon'].jsElement['root']).querySelector('iron-meta'),
          isNotNull);
    });

Bug in polymer?

[ErikGrimes]

taking the additional tests in the paper-input repo (Added to my original comment)

[jakemac53]

@vsheyanov I am working on adding a few other missing elements, and I will make sure paper-submenu is a part of that.

In terms of js constants we don't have support for accessing those from dart wrappers today. Usually they are just things used internally, but you could feel free to add an issue if there is a constant which we should actually be exposing.

[jakemac53]

@ErikGrimes that does seem like a bug, what about if you just do:

expect(b1.$['icon'].querySelector('svg'), isNotNull);

[jakemac53]

@vsheyanov paper-submenu has now been added in master

[ErikGrimes]

@jakemac53 I get the same result. The svg element isn't present in the children property either. The DOM above is from using paper-icon-button in a demo application and inspecting via Dartium. The element is setup properly and the queries work in the demo app. I was hoping to reproduce the issue in a gist but it's proving to be a bit of pain. I'm not sure if it's another bug or simply my lack of understanding.

<dom-module id="main-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <paper-button on-click="runTest" raised>run test</paper-button>

    <div style="line-height:30px;">
      <paper-icon-button id="fab2" icon="add" on-click="inspectDom"></paper-icon-button>
    </div>

      <template id="TrivialIconButton">
          <div style="line-height:30px;">
              <paper-icon-button id="fab1" icon="add"></paper-icon-button>
          </div>
      </template>

  </template>
</dom-module>

@HtmlImport('main_app.html')
import 'dart:html';

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer_elements/paper_icon_button.dart';
import 'package:polymer_elements/paper_fab.dart';
import 'package:polymer_elements/iron_icons.dart';
import 'package:polymer_elements/iron_icon.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:test/test.dart';



@PolymerRegister('main-app')
class MainApp extends PolymerElement {

  factory MainApp() => new Element.tag('main-app');
  MainApp.created() : super.created();

  @eventHandler
  void inspectDom(Event event) {
   PaperIconButton b = event.currentTarget;
    IronIcon i = b.$['icon'];
    print(i.children);
    print(Polymer.dom(b.$['icon'].jsElement['root']).querySelector('svg'));
  }

  @eventHandler
  void runTest(Event e){
    PaperIconButton b1 = fixture('TrivialIconButton').querySelector('#fab1');
    expect(b1.src, isNull);
    expect(Polymer.dom(b1.$['icon'].jsElement['root']).querySelector('svg'),
    isNotNull);
  }

  fixture(String id) {
    var container = this.querySelector('#testContainer');
    if (container == null) {
      container = new Element.html('<div id="testContainer"></div>');
      this.append(container);
    }
    container.children.clear();

    var elements = new List.from((document.importNode(
        this.querySelector('#$id').content,
        true) as DocumentFragment).children);
    for (var element in elements) {
      container.append(element);
    }
    return elements.length == 1 ? elements[0] : elements;
  }

}

In the above the template is in the children, but can't be found by querySelector. I grabbed it by id from $, but the it turns out the content is null.

Any advice on getting the repro to work? Should I merge with the failing test and file a bug pointing to the test?

[jakemac53]

@ErikGrimes I would just mark it as skipped and link an issue to investigate, I can take a look at it later. Thanks!

[ErikGrimes]

Picking up:

• paper-radio-button
• paper-radio-group
• paper-spinner
• paper-styles (no tests)

[vsheyanov]

Next batch:

• paper-tab
• paper-tabs

[vsheyanov]

• paper-toast (no tests)

[vsheyanov]

• paper-toggle-button
• paper-toolbar
• paper-tooltip

[ErikGrimes]

Just a heads up, I'm not sure when I'll get back to this. I upgraded my Mac and now content-shell and dartium don't work with test. Test just times out trying to connect. I filed an issue dart-lang/test#324. So, feel free to pick up the last three from my batch. I won't be doing anything until I get my dev environment sorted out.

[jakemac53]

@ErikGrimes no problem thanks for the help and the heads up!

[ErikGrimes]

@jakemac53 You're welcome! Don't merge my last pull request. I think it might have something to do with my problems. I made a fresh clone of dart-lang/polymer_elements and the tests work fine. Tests from other projects work as well. My last change was to common which is included in every test. The odd thing is I swear all the tests before I pushed and they passed.

[ErikGrimes]

@jakemac53 I confirmed it's related to my fork. I cloned my fork of polymer_elements on my Mac at work and it crashed content-shell.

[jakemac53]

@ErikGrimes I edited your comment above to remove the remaining items, and I will start working on them:

• paper-ripple
• paper-scroll-header-panel
• paper-slider

[jakemac53]

ok, all done it looks like!