AngularJS, Protractor, ja hidas testiympäristö

Tulipa ajankohtaiseksi miettiä miten protractorin voisi saada odottelemaan että jotain on saatavana ruudulla, ennen kuin yrittää alkaa sitä klikkailemaan.

Periaattessahan protractorin pitäisi olla Angular-elinkaaresta hyvinkin tietoinen, ja odotella asynkronisten kutsujen valmistumista ennen kuin etenee. Hätätapauksessa on taikauskonomainen browser.waitForAngular() jonka pitäisi tehdä samantapaista.

Nyt näyttäisi kuitenkin siltä, että protractor (traktorin puolesta? 🙂 ei näin aina tee, etenkin jos testikone on hidas/jähmeä *köhköhvirtuaalikoneköhköh*. Voi siis käydä niin että yhdessä koneessa testit sujahtavat iloisen vihreänä läpi ja toisessa helottavat punaisina satunnaisesti. Tämä ei ole oikein hyvä juttu testiympäristön kannalta.

Protractorissa on melkoisen epämiellyttävää kirjailla koodia joka tutkii onko elementit näkösällä – nuo element(by.xxx()) komennot kun palauttavat lupausta tulevasta, promiseja, jotka pitää ratkoa asynkronisesti. Kun haluaa tarkistaa useamman elementin näkyvyyden/enabloinnin, tulee ihastuttavia sisäkkäisiä lohkoja joita itse en tykkää koodissa katsella.

Vaan eipä hätää. Löysin taannoin juuri tähän sopivan syntaksin, joka toimii porttina estäen testin etenemisen kunnes kohde löytyy tai timeout pamahtaa. Se on näinkin simppeli:

browser.wait(element(by.id('my-id')).isPresent);

browser.wait(element(by.id('my-id')).isDisplayed);

browser.wait(element(by.id('my-id')).isEnabled);

Tämäkin on jonnekin manuaalin uumeniin haudottu. Näillä voi hidastaa tahtia sen verran että hitaammatkin myllyt ehtivät painelemaan nappeja kun käyttöliittymä morffaa silmien edessä. Tuolle browser.wait funktiolle muuten kelpaa miten hyvänsä muotoiltu promise jota voi tutkiskella.

Tietysti menisi liian helpoksi jo se olisi ihan noin toiminut. Tuo isPresent ainakin itsellä antoi jotain herkullista cannot get count for undefined erroriherjaa joten tein sille hiukan kankeamman vastineen:

browser.wait(function () {
 return browser.isElementPresent(element(by.id('zzzzz')));
 }, 10000);

Nämä voi hautoa mukaviin uudelleenkäytettäviin funktioihin, ja taas testiautomaatio jauhaa luotettavammin!

 

Google Polymer – Web Components

Tutkaan on osunut hiljattain Googlen Polymer-projekti. Projekti on vasta varhais-asteella, ei edes beta-tasolla, mutta omaan makuun varsin lupaava. Sen ohella että se on cool ja näyttää hyvältä, ja vastaa visuaalisesti omaa makua (tilankäyttö, yksinkertaisuus, animaatiot) – se tarjoaa myös puhtia ja ammattimaisuutta uudelleenkäyttöön.

 http://www.polymer-project.org/

Polymerin ideana on laajentaa selaimen tarjoamaa html-tagistöä omilla custom tageilla. Tarjolla on jo reipas määrä komponentteja, mutta kun jokainen kehittäjä voi tehdä ja paketoida niitä lisää, hommassa on potentiaalia.Uusista elementeistä syntyy ’Shadow DOM’ – eli Document Object Model mukainen rakenne jota voi tuttuun tapaan käsitellä JavaScriptistä ja viitata CSS:stä – mutta jota voi itse laajentaa tekemällä uusia komponentteja. Tässä esimerkki Polymer Shadow DOM tagista:

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

Tuon takana on tietysti HTML ja JavaScript-koodia. Serveripäässä tässä ei olisi mitään ihmeellistä – mutta tämä toimiikin Polymerin ansiosta suoraan selaimessa.

Tässä esimerkki omasta custom elementistä:

<!-- Import polymer library -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Define hello-world element with Polymer -->
<polymer-element name="my-element" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
  </template>
</polymer-element>

<!-- (re)Use your element -->
<my-element/>

Lisäksi tähän liittyy Android Material Design – Polymer alustalle on määritetty jo komponenttipaketti nimellä Paper, joka esittelee näitä Material Design periaatteita. Sieltä löytyy paperisivun tapoin käyttäytyviä leiskoja, helppoja varjostus ja syvyysefektejä, animaatioita Hero-elementillä, ja ripple-efektejä joilla demonstroidaan selkeästi mitä voi klikata/koskettaa ja mitä ei.

Näyttäisi siltä että AngularJS versioon 2 on tulossa myös Polymer/Web Components komponenttimalliksi. Silti ei ehkä kannata henkeään pidätellä odotettaessa; Näyttää että Angular v2 tulee sisältämään suunnilleen kaiken mitä ihmiskunta on keksinyt joten on hyvin todennäköistä että se ei valmistu/toimi koskaan. Sinällään Polymer ja Angular toimivat jo nyt hyvin yhteen, mutta aina on nikottelua, esim. karma-testit PhantomJS:llä eivät pelaa Polymerin kanssa – phantomista kun puuttuu osia joita Polymer suorastaan vaatii.

Polymerin roolina on tuoda Polyfill tuki jo ennen kuin se virallisesti selaimista sisäänrakennettuina löytyisi. Polyfill taas luo perustan laajennettavuudelle. Mutta ihan joka selaimeen ei tukea ole tarjolla tälläkään hetkellä. IE-puolella lähdetään versiosta 10 liikkeelle.

Polymer ei keksi koko pyörää uudestaan – nykyisellään se on vain laajennettavien UI-komponenttien framework: Se ei tuo esim. mitään MVC mallia eikä sisällä esim. useita Angular-piirteitä. Polymer on yhden tempun poni, mutta se tekee sen todella hyvin.

Mutta hieno ja varsin lupaava palikka tämäkin! Sormet syyhyäisivät päästä soveltamaan isosti..

Linkkejä:

http://en.wikipedia.org/wiki/Polyfill

http://www.polymer-project.org/resources/compatibility.html

http://googlewebcomponents.github.io/google-map/components/google-map/#google-map

http://www.polymer-project.org/docs/elements/paper-elements.html

Android sovellusten käyttäliittymädesign

Törmäsin kiintoisaan artikkeliin Android sovellusten tuunauksesta.

http://java.dzone.com/articles/android-apps-redesigned?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+javalobby%2Ffrontpage+%28Javalobby+%2F+Java+Zone%29

Tuossa on aika hyviä kuvaruutukaappauksia ennen-jälkeen tilanteesta. Itsellä on ollut aina peukalo keskellä kämmentä mitä tulee kauniiseen käyttöliittymiin, värejäkin taidan tunnustaa löytyvän kolme – ja niistäkin kaksi on mustaa. Paras mihin itse pystyn on tähdätä yksinkertaisuuteen ja intuitiivisuuteen. Silti Android sovellukset laajaltikin kärsivät rumista, kömpelöistä ja monimutkaisista käyttöliittymistä.

Tuossa artikkelissa oli aika reippaastikin upeita käyttöliittymiä jotka hyödyntävät Jelly Beans/Ice Cream Sandwich androidien uusia piirteitä. Esim. ComingSoon ja Runtastic Altimeter

P.S. Sain muuten vanhan Galaxy Nexukseni henkiin kun siitä kärähti usb portti vesisateen vuoksi – kolmen taalan varaosalla. Nyt tuli kurkattua myös laitteen sisuksiin ihan emolevyä myöten 😉 Photo Sphere panoraamat ovat aika hupaisia.