From Good to Great: Functional and Acceptance Testing in WordPress.

54
From good to great! Functional and Acceptance Testing in WordPress

Transcript of From Good to Great: Functional and Acceptance Testing in WordPress.

From good to great!

Functional and Acceptance Testing in WordPress

David AguileraI co-founded Nelio Software (2013)

You can find me at @davilera

Who I am...

My Work at Nelio

◎ Plugin Development

◉ A/B Testing for WordPress◉ External Featured Images◉ Others...

◎ Customer Support

My Work at Nelio

◎ Plugin Development

◉ A/B Testing for WordPress◉ External Featured Images◉ Others...

◎ Customer Support

The Problem with A/B Testing

◎ Several Dashboard Screens

◎ Impact on Front-end

◎ Data Synchronization to Cloud

The Problem with A/B Testing

◎ Several Dashboard Screens

◎ Impact on Front-end

◎ Data Synchronization to Cloud

Complex ArchitectureHow can we make sure it works?

WordPress Plugins and Themes

1

Quality

What Is Quality?

“how good or bad something is”

“a high level of value or excellence”

Merriam Webster Dictionary

What Is Quality?

◎ WordPress Coding Standards

◎ Guidelines◉ Plugin Handbook◉ Theme Handbook

◎ Plugin and Theme Reviews

Quality is (also) about

User Experience

Image by Moyan Brenn - http://flickr.com/photos/aigle_dore/

My Experience(and yours?)

2

Plugin & Theme Development

Development

◎ Functionalities

◎ Write New Code

◎ Try it out

Image by WordPress Barcelona - http://www.wpbarcelona.com

Pre-Release

◎ Check-List

◎ Do things work as expected?

Image by Crispy - http://flickr.com/photos/37333113@N03/

Release… and bug!

◎ Unnoticed

◎ Obvious

◎ WSOD

Image by Nokton - http://flickr.com/photos/nokton/

Quality matters!

Especially when it affects your users

Image by Peter A. Hess - http://flickr.com/photos/peterhess/

There must be abetter way!

and it’s called

Automated Testing

Image by Mark Strozier - http://flickr.com/photos/r80o/

The First Step Towards Excellence

3

Unit Testing

What is Unit Testing?

“A method for verifying that individual units of source code are fit for use”

How does Unit Testing look like?/**

* Returns whether a telephone number is valid or not.

*

* The telephone number has to be a list of digits. Any

* other char is not accepted.

*/

function validateTelNumber( $num ) {

return preg_match( '/^[0-9]+$/', $num );

}

How does Unit Testing look like?class TheTest extends PHPUnit_Framework_TestCase {

public function testTelephoneNumber() {

// Arrange

$num = ‘934.123.456’;

// Act

$result = validateTelNumber( $num );

// Assert

$this->assertTrue( $result );

}

How does Unit Testing look like?david@nelio:~$ phpunit …

Time: 102 ms, Memory: 8.92Mb

There was 1 failure:

1) TheTest::testTelephoneNumber

Failed asserting that false is true.

/home/david/sandbox/tests/TheTest.php:23

FAILURES!

Tests: 1, Assertions: 1, Failures: 1.

We’re already using it!

https://make.wordpress.org/core/handbook/automated-testing/

Really?

But...

It’s focused on individual units and the internal structure

But...

It’s focused on individual units and the internal structure

It tells us nothing about: Do we satisfy our users’ expectations?

Image by Todd Martin - http://flickr.com/photos/tmartin/

How?

Acceptance and Functional Testing

4

The Next Level

“Software delivery

is about writing softwareto achieve (business) outcomes

Dann North & Associateshttp://dannorth.net/whats-in-a-story/

Quality is about

Achieving These Outcomes

Image by Kieran Clarke - http://flickr.com/photos/goonerpower/

“Acceptance Tests

replicate user’s experience and

are driven by expectation logic

Chris Lema

Behavior-Driven Development (BDD)

Story - Title As a [role] I want [feature] So that [benefit]

Acceptance Criteria Scenario - Title Given [context] When [event] Then [outcome]

Dann North & Associateshttp://dannorth.net/whats-in-a-story/

BDD starts at the outside by identifyingbusiness outcomes, and then drills down into the feature set that will achieve those outcomes.

Story - An author (John) publishes a post As an author (John) I want to publish a post So that new content is available in my blog

Example

Scenario 1 - John has a draft postGiven a draft post in the Dashboard and the post’s author is John and the post’s title is X and the post’s content is YWhen John publishes the postThen the post’s status is no longer Draft and the Latest Posts page contains X and Y

Example

“Functional Tests

replicate developer’s experience.

Not only we look into expectations,

but also into the implementation

Acceptance and Functional Testing with Codeception and WebDriver

5

How-To

Codeception

It’s all aboutbehavior-driven testing.

For each part of application,- user actions and- expected results

Codeception (open-source and MIT licensed) - http://codeception.com

Quick Demo

Acceptance Tests in Codeception$I = new AcceptanceTester( $scenario )

$I->am( ‘an Author’ );

$I->wantTo( ‘publish a post’ );

$I->lookForwardTo( ‘seeing more content’ );

Acceptance Tests in Codeception

As an author (John)I want to publish a postSo that new content is available in my blog

$I = new AcceptanceTester( $scenario )

$I->am( ‘an Author’ );

$I->wantTo( ‘publish a post’ );

$I->lookForwardTo( ‘seeing more content’ );

//...

$I->amOnPage( ‘/wp-admin/edit.php?p=X’ );

$I->click( ‘Publish’, ‘#submitdiv’ );

$I->see( ‘Post published.’ );

$I->amOnPage( ‘/blog’ );

$I->see( ‘The title X’ );

$I->see( ‘First words of the content Y’ );

Acceptance Tests in Codeception

Codeception Commandsam

wantTo

lookForwardTo

amOnPage

click

fillField

selectOption

submitForm

see

seeLink

seeInTitle

seeInField

dontSee

checkOption

uncheckOption

Codeception Commands

You can reproduceuser’s behavioron a simulated environment

Codeception Commands

You can reproduceuser’s behavioron a simulated environment

wait… “simulated”?

WebDriver

http://w3c.github.io/webdriver/webdriver-spec.html

The WD API is a platform and language-neutral interface (...) that allows programs or scripts to introspect into, and control the behaviour of, a web browser.

WebDriverIn other words,

you can start a new instance of Chrome, Firefox, IE…and control them from a script.

Pros/Cons◎ Real Browsers◎ Real Behavior◎ JavaScript

◎ Slower◎ Platforms

WebDriverNew Methodswait

waitForElementVisible

waitForElementChange

waitForJS

moveMouseOver

pressKey

reloadWindow

◎ User Automated Tests

◎ Developer Automated Tests

So, Codeception will help you with…

◎ User Automated Tests

◎ Developer Automated Tests

◎ Automate Bug (re)detection

On real or simulated browsers!

So, Codeception will help you with…

◎ Acceptance Tests are notthe solution to all your problems.

◎ There’s a whole range of tests.

Use the one thatbetter suits your needs

But...

What I Want You to Remember

6

Summary

Remember

1. Quality matters

2. That means code quality matters

3. But also fulfilling expectations

4. Codeception is a great tool

Remember

1. Quality matters

2. That means code quality matters

3. But also fulfilling expectations

4. Codeception is a great tool

Remember

1. Quality matters

2. That means code quality matters

3. But also fulfilling expectations

4. Codeception is a great tool

Remember

1. Quality matters

2. That means code quality matters

3. But also fulfilling expectations

4. Codeception is a great tool

Thanks!

Always Test Your Work

You can find me at

@[email protected]

?

Feedback Link

europe.wordcamp.org/2015/speaker/david-aguilera