29

Browsern + Javascript = sant

Embed Size (px)

DESCRIPTION

Björn Skoglund, Valtech. Kärleken övervinner allt. En tydlig trend idag är att isolera sin javascript och testa funktionalitet isolerat från browsern via abstraktioner. Men förr eller senare måste vi alla erkänna att de hör ihop så jag kommer presentera ett experimentellt och annorlunda sätt att garantera funktionalitet i övergången mellan html och javascript.

Citation preview

Page 1: Browsern + Javascript = sant
Page 2: Browsern + Javascript = sant
Page 3: Browsern + Javascript = sant

Björn Skoglund@bjosk

http://github.com/bjorns

Page 4: Browsern + Javascript = sant
Page 5: Browsern + Javascript = sant

Mot internet!

Page 6: Browsern + Javascript = sant

Suitest DOH

LBRTW JSUnit

Enhance JS QUnit Unit.js RhUnit

Crosscheck J3Unit Mocha intern

JSNUnit YUI Test JSSpec

UnitTesting JSpec

Jasmine screw-unit Test.Simple Test.More TestCase

TestIt jsUnitTest

JSTest JSTest.NET

jsUnity RhinoUnit JasUnit FireUnit

Js-test-driver Js-test-runner

Sinon.js SOAtest

Vows Nodeunit

Tyrtle wru Compatible

Buster.JS Lighttest

Chai

Page 7: Browsern + Javascript = sant

”It does not require a DOM.”http://jasmine.github.io

Page 8: Browsern + Javascript = sant

JS HTML

Säker ? Osäker

Page 9: Browsern + Javascript = sant
Page 10: Browsern + Javascript = sant

TYDLIGT!

SÄKERT!

Page 11: Browsern + Javascript = sant

JS HTML

Säker Säker

Page 12: Browsern + Javascript = sant
Page 13: Browsern + Javascript = sant

gjut.js

Page 14: Browsern + Javascript = sant

• Node.js

• Finns i npm

• lib-modul eller terminal(gjutc)

• Experimentellt

gjut.js

Page 15: Browsern + Javascript = sant

• Tar annoterad html som input

• Validerar din html

gjut.js

Page 16: Browsern + Javascript = sant

<span>@package.variable</span>!

=>!

<span>hej världen!</span>

@mickec75

{ variable: ”hej världen!” }

Page 17: Browsern + Javascript = sant

<div @package.func()></div>=>

<div id=”dynamisktId”></div>

@mickec75

func: function(element) { element.attributes['id'].push('dynamisktId');}

Page 18: Browsern + Javascript = sant

<span @package.success()>Success!</span><span @!package.success()>Failure</span>

=><span>Success!</span>

@mickec75

Page 19: Browsern + Javascript = sant

<ul> <li @foreach(@func() in @array)> </li></ul>

@mickec75

array: [’Imse’, ’Vimse’, ’Spindel’],func: function(element, value) { element.content.push({ type: ’text', content: value + ’!’ });}

Page 20: Browsern + Javascript = sant

<ul> <li> Imse! </li> <li> Vimse! </li> <li> Spindel! </li></ul>

@mickec75

Page 21: Browsern + Javascript = sant

Verifiering

Page 22: Browsern + Javascript = sant

@verify .carousel -> .canvas!

@verify label <- input!

@verify exist div#topstory

Verifiering

Page 23: Browsern + Javascript = sant

Funkar det då?

Page 24: Browsern + Javascript = sant

http://openaid.skoglund.io

Page 25: Browsern + Javascript = sant

$ npm install gjut -g var gjut = require(’gjut’); !

$ gjutc index.html

Page 26: Browsern + Javascript = sant

https://github.com/bjorns/gjut.js

Page 27: Browsern + Javascript = sant
Page 28: Browsern + Javascript = sant

Björn Skoglund

Tack

@bjosk

http://github.com/bjorns

Page 29: Browsern + Javascript = sant