Testing the frontend

Testing the frontend, a brief introduction to the main techniques and tools.

Cluj-Napoca, 13th November 2015

ABOUT

2

•  senior it developer @ publicis pixelpark

•  experience since 1998

•  supporting:

•  processes

•  infrastructure

•  quality assurance

heiko hardt

Mission

3

MISSION

voting module

The user should be able to vote on a topic

should enter a name and an email address for voting should vote once a topic

The topic

should be maintained in a protected frontend area The results

should be shown in a protected frontend area

4

MISSION

voting module, scribble

5

buttons

Please enter your name and Email address

Email:

Name:

NO YES BACK

Oooops an error...

voting

Well done...

What do you think about ... ?

VOTE

Yes 1023 No

536

teaser

message(s)

topic

form result

unit- and integration tests

6

UNIT- AND INTEGRATION TESTS

7

Jasmine is a behavior-driven development framework for testing JavaScript code. (Source: http://jasmine.github.io)


8

jasmine, filetype and structure

spec(s)?

it('should give me a brief introduction', function() { // expect ... });

*.spec.js?

In jasmine the tests are written in a *spec.js file. I prefer using the „source-file-name“.spec.js src/t3ee_voting_example.js = spec/t3ee_voting_example.spec.js

suite(s)?

describe('This awesome session', function() {

// should be ...

});


9

jasmine, spec and suite example

spec/t3ee_voting_example.spec.js

// suitedescribe('This awesome session', function() {

// spec it('should give me a brief introduction', function() {

// matcher... }); });

Results in: This awesome session should give me a brief introduction J


10

jasmine, expectation ... toBe or not.toBet

not.toBe()

By using „not“ you are able to test against a negative/reverted „given“ expect(argument).not.toBe(given)

expect(false).not.toBe(true)

expectation

All tests are written in expectations. You expect that an „argument or obj or ...“ will „match“ expect(argument).matcher

toBe()

The matcher „toBe“ test if the „argument“ is the same like „given“ expect(argument).toBe(given)

expect(1+2).toBe(3)


11

jasmine, expectation ... spy

toBeCalledWith(argument)

document.getElementsByClassName(„tester“)

expect(window.document, getElementsByClassName).toBeCalledWidth(„tester“)

spyOn(object, function)

spyOn(window.document, "getElementsByClassName");

toBeCalled()

document.getElementsByClassName(„tester“)

expect(window.document, getElementsByClassName).toBeCalled()

practical part t3ee_voting_example

12


13

karma

Karma - Spectacular Test Runner for Javascript

PRACTICAL PART

14

karma

setup intellij / phpstorm / ...

Menu -> Run -> Edit Configuration

Add (+) Karma

Setup Configuration file to karma.conf.js

setup karma via node package manager

# npm init

# npm install karma –save-dev

# node_modules/karma/bin/karma init

start and run

# node_modules/karma/bin/karma start

# node_modules/karma/bin/karma run

PRACTICAL PART

15

karma - code coverage

edit karma.conf.js: reporter

reporters: ['progress', 'coverage'],

install karma-coverage via node package manager

# npm install karma-coverage --save-dev

edit karma.conf.js: preprocessor

preprocessors: {

'src/*.js': ['coverage']

},


16

grunt

grunt, a javascript task runner

PRACTICAL PART

17

grunt

install grunt

# npm install grunt --save-dev

# npm install grunt-cli --save-dev

install uglify

# npm install grunt-contrib-uglify --save-dev

PRACTICAL PART

18

grunt

Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({

uglify: {

options: {

beautify: { width: 80, beautify: true },

compress: { global_defs: { "jasmine" : false }, dead_code: true }

},

my_target: { files:{'src/t3ee_voting_example.min.js’:['src/t3ee_voting_example.js’]}}

}

});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['uglify']);

};

PRACTICAL PART

19

grunt

execute

# grunt

functional- and acceptance test

20

FUNCTIONAL- AND ACCEPTANCE TEST

21

Behat is an open source Behavior Driven Development framework (Source: http://docs.behat.com)


22

Gherkin is a Business Readable, Domain Specific Language created especially for behavior descriptions. (Source: http://docs.behat.com)


23

gherkin example Feature: Some terse yet descriptive text of what is desired In order to realize a named business value As an explicit system actor I want to gain some beneficial outcome which furthers the goal

Additional text...

Scenario: Some determinable business situation Given some precondition And some other precondition When some action by the actor And some other action And yet another action Then some testable outcome is achieved And something else we can check happens too

Scenario: A different situation ...

(Source: http://docs.behat.com)


24

Mink is an open source browser controller/emulator for web applications (Source: http://mink.behat.com)


25

practical example

configure (behat.yml)

default:

extensions:

Behat\MinkExtension:

base_url: 'http://example.com'

goutte: ~

install

# mkdir ~/Desktop/Behat-Example

# cd ~/Desktop/Behat-Example

# composer.phar require behat/mink-extension behat/mink-goutte-driver

initialize

# ./vendor/bin/behat --init


26

mink context

extend FeatureContext.php

...

use Behat\Gherkin\Node\TableNode;

use Behat\MinkExtension\Context\MinkContext;

/**

* Defines application features from the specific context.

*/

class FeatureContext extends MinkContext implements Context, SnippetAcceptingContext

{

/**

* Initializes context.

...


27

feature

setup feature

# vim features/repository.feature

repository.feature

Feature: ...

In order to ...

As a ...

I need to be able to ...

Scenario:

Given ...

When ...

Then ...


28

selenium

start server

# java –jar selenium-server-standalone-2.x.x.jar

extend behat.yml

default:

extensions:

Behat\MinkExtension:

base_url: 'http://www.typo3.org'

# goutte: ~

selenium2: ~

install

# composer require behat/mink-selenium2-driver


29

feature

repository.feature

Feature: TYPO3 repository

In order to provide extensions

As a guest

I should be able to find an extension

Scenario: Finding the extension "extension builder"

Given I am on the homepage

When I follow "Extensions"

And I fill in "q" with "builder"

And I press "Search"

Then I should see "Extension Builder"


30

using behat / mink within TYPO3 context


31

behat-typo3-extension

extending composer.json

add the following lines to your TYPO3_SRC/composer.json: "require-dev": {

"phpunit/phpunit": "~4.8.0",

"mikey179/vfsStream": "1.6.0",

"behat/behat": "^3.0",

"behat/mink": "^1.7",

"behat/mink-extension": "^2.1",

"behat/mink-goutte-driver": "^1.2",

"behat/mink-selenium2-driver": "^1.3",

"heikohardt/behat-typo3-extension": "^1.0“

},

You need to execute the command: composer update after this change


32


environment variables, xdebug (optional) XDEBUG_CONFIG your ide key PHP_IDE_CONFIG serverName=servername which is configured in your xdebug configuration

environment variables, behat

TYPO3_PATH_WEB document root of your source TYPO3 instance

BEHAT_TYPO3_DOCROOT document root of your behat TYPO3 instance BEHAT_TYPO3_DB_HOST host address of your behat database BEHAT_TYPO3_DB_NAME database of your behat database user BEHAT_TYPO3_DB_USERNAME username of your behat database userBEHAT_TYPO3_DB_PASSWORD password of your behat database user

default:

suites: default: contexts: - FeatureContext - Typo3Context extensions:

Behat\MinkExtension: base_url: 'http://behat.typo3v62.t3ee.conf' goutte: ~ selenium2: ~

HeikoHardt\Behat\TYPO3Extension\ServiceContainer\Typo3Extension: ~


33


behat.yml

setTYPO3CoreExtensionsToLoad(array)

setTYPO3TestExtensionsToLoad(array)

setTYPO3LocalConfiguration(array)

setTYPO3DatasetToImport(array)

setTYPO3FrontendRootPage( int, array)

setTYPO3CreateDirectories(array)

TYPO3Boot($this, $scope);


34


TYPO3 methods

config { no_cache = 1 uniqueLinkVars = 1 renderCharset = utf-8 metaCharset = utf-8 doctype = html5 removeDefaultJS = external admPanel = 0 debug = 0 sendCacheHeaders = 0 sys_language_uid = 0 }


35


Fixtures::Setup.ts

page = PAGE page { typeNum = 0 10 = USER 10 { userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run extensionName = T3eeVotingExample pluginName = Pi1 vendorName = HeikoHardt controller = Topic action = list } includeJSlibs.file1 = EXT:t3ee_voting_example/Resources/.../jquery-1.11.3.min.js includeJS.file2 = EXT:t3ee_voting_example/Resources/.../t3ee_voting_example.min.js }


36


Fixtures::Setup.ts

practical part t3ee_voting_example

37

questions?

38

Thanks J

DISCLAIMER

The information contained in this presentation are the subject of intellectual property rights and/or copyright, or confidential information within the meaning of business or trade secrets of the Pixelpark AG and/or its affiliates. It is intended solely for internal use at the intended receiver and copies may be made for internal purposes only. Any publication, disclosure to third parties, as well as the application of intellectual property rights and provision with its own copyright notice is prohibited.

40

Testing the frontend

Software