Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Live Coding Tester une Application HTML5
Search
Jean-Laurent de Morlhon
November 20, 2013
Programming
1
84
Live Coding Tester une Application HTML5
Live coding Tester une Application HTML5, talk given @ Codeurs en Seine, MIX-IT
Jean-Laurent de Morlhon
November 20, 2013
Tweet
Share
More Decks by Jean-Laurent de Morlhon
See All by Jean-Laurent de Morlhon
Retour Sur DockerCon 2016 - Docker Mega Meetup
jeanlaurent
1
120
Retour sur DockerCon 2016
jeanlaurent
2
200
Pourquoi Maurice ne doit surtout pas coder en Go.
jeanlaurent
0
170
Diamond Kata Workshop
jeanlaurent
0
180
Testing sur code legacy
jeanlaurent
0
120
FruitShop
jeanlaurent
3
800
Phantom, Zombie & Karma, overview of the greatest testing tools for modern web app
jeanlaurent
5
750
Testing sur Legacy Code
jeanlaurent
1
54
Le fantome, le zombie et testacular Karma. Panorama des outils de tests pour application web moderne.
jeanlaurent
1
83
Other Decks in Programming
See All in Programming
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
WebDriver BiDiとは何なのか
yotahada3
1
130
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
720
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5.1k
技術を根付かせる / How to make technology take root
kubode
1
230
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
290
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
7
3.1k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
1
200
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Bash Introduction
62gerente
610
210k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Facilitating Awesome Meetings
lara
51
6.2k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
It's Worth the Effort
3n
184
28k
Transcript
Tester une application Live coding sur les tests d'acceptances d'une
application html5/javascript #bdd #javascript Jean-Laurent de Morlhon - mai 2013
Jean-Laurent de Morlhon Programmeur @morlhon
None
None
None
http://www.growing-object-oriented-software.com/
Projets d'aujourd'hui JavaScript CoffeeScript 8,3 Java 36,1
http://martinfowler.com/bliki/TestPyramid.html
Abbot public class LabeledListTest extends ComponentTestFixture {! ! public void
testLabelChangedOnSelectionChange() throws Throwable {! String[] contents = { "one", "two", "three" };! final LabeledList labeledList = new LabeledList(contents);! showFrame(labeledList);! ! Component list = getFinder().find(new ClassMatcher(JList.class));! JListTester tester = new JListTester();! ! JLabel label = (JLabel)getFinder().find(labeledList, new Matcher() {! public boolean matches(Component c) {! return c.getClass().equals(JLabel.class)! && c.getParent() == labeledList;! }! });! ! ! tester.actionSelectRow(list, new JListLocation(1)); ! ! assertEquals("Wrong label after selection",! "Selected: two", label.getText());! ! tester.actionSelectRow(list, new JListLocation(2));! assertEquals("Wrong label after selection",! "Selected: three", label.getText());! ! tester.actionSelectRow(list, new JListLocation(0));! assertEquals("Wrong label after selection",! "Selected: one", label.getText());! }! ! public LabeledListTest(String name) { super(name); }! ! }!
@Test! public void homePage() throws Exception {! WebClient webClient =
new WebClient();! HtmlPage page = webClient.getPage("http://www.conference-agile.fr/");! assertEquals("Agile France", page.getTitleText());! ! String pageAsXml = page.asXml();! assertTrue(pageAsXml.contains("<body itemscope"));! ! String pageAsText = page.asText();! assertTrue(pageAsText.contains("Des idées pour tout de suite!"));! ! webClient.closeAllWindows();! }! ! HtmlUnit
public class NewTest extends SeleneseTestCase {! // We create our
Selenium test case! ! public void setUp() throws Exception {! setUp("http://www.mix-it.fr/", "*firefox");! }! ! public void testNew() throws Exception {! selenium.open("/");! selenium.type("q", "rocks");! selenium.click("btnG");! ! selenium.waitForPageToLoad("30000");! ! assertTrue(selenium.isTextPresent("ROCKS !"));! }! }! Selenium
Zombie.js var Browser = require("zombie");! ! browser = new Browser();!
browser.visit("http://localhost:3000/", function () {! ! browser.fill("email", "
[email protected]
");! browser.fill("password", "youDontWantToKnow");! ! browser.pressButton("Login", function() {! assert.ok(browser.success);! assert.equal(browser.text("title"), "Welcome to Serpodile");! });! ! });!
Zombie.js Browser = require("zombie")! ! browser = new Browser()! browser.visit
"http://localhost:3000/", ->! ! browser.fill "email", "
[email protected]
"! browser.fill "password", "youDontWantToKnow"! ! browser.pressButton "Login", ->! assert.ok browser.success! assert.equal browser.text "title" , "Welcome to Serpodile"!
Cucumber Feature: Addition! In order to avoid silly mistakes! As
a math idiot ! I want to be told the sum of two numbers! ! Scenario: Add two numbers! Given I have entered 5 into the calculator! And I have entered 7 into the calculator! When I press the button! Then the result should be 12 on the screen!
Talk - Action = S**t D EM O TIM E
Références • BDD • http://referentiel.institut-agile.fr/bdd.html • Zombie.js • http://zombie.labnotes.org/ •
Cucumber.js • https://github.com/cucumber/cucumber-js • Chai.js • http://chaijs.com/
Alternatives http://karma-runner.github.io http://dalekjs.com/ http://casperjs.org/ https://github.com/FluentLenium FluentLenium
Source & Slides https://github.com/jeanlaurent/CucumberAndZombie
Pour aller plus loin • UI Test • Karma: http://karma-runner.github.io
• Casper.js: http://casperjs.org/ • FluentLenium: https://github.com/ FluentLenium/ • Unit Testing • Jasmine: https://github.com/pivotal/jasmine • Buster.js : http://docs.busterjs.org/en/latest/ • Mocha : https://github.com/visionmedia/mocha • QUnit : http://qunitjs.com/ • Sinon.js: http://sinonjs.org/
?