testing the frontend

40
Testing the frontend, a brief introduction to the main techniques and tools. Cluj-Napoca, 13th November 2015

Upload: heiko-hardt

Post on 14-Apr-2017

151 views

Category:

Software


0 download

TRANSCRIPT

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)

UNIT- AND INTEGRATION TESTS

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 ...

});

UNIT- AND INTEGRATION TESTS

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

UNIT- AND INTEGRATION TESTS

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)

UNIT- AND INTEGRATION TESTS

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

UNIT- AND INTEGRATION TESTS

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']

},

UNIT- AND INTEGRATION TESTS

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)

FUNCTIONAL- AND ACCEPTANCE TEST

22

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

FUNCTIONAL- AND ACCEPTANCE TEST

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)

FUNCTIONAL- AND ACCEPTANCE TEST

24

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

FUNCTIONAL- AND ACCEPTANCE TEST

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

FUNCTIONAL- AND ACCEPTANCE TEST

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.

...

FUNCTIONAL- AND ACCEPTANCE TEST

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 ...

FUNCTIONAL- AND ACCEPTANCE TEST

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

FUNCTIONAL- AND ACCEPTANCE TEST

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"

FUNCTIONAL- AND ACCEPTANCE TEST

30

using behat / mink within TYPO3 context

FUNCTIONAL- AND ACCEPTANCE TEST

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

FUNCTIONAL- AND ACCEPTANCE TEST

32

behat-typo3-extension

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: ~

FUNCTIONAL- AND ACCEPTANCE TEST

33

behat-typo3-extension

behat.yml

setTYPO3CoreExtensionsToLoad(array)

setTYPO3TestExtensionsToLoad(array)

setTYPO3LocalConfiguration(array)

setTYPO3DatasetToImport(array)

setTYPO3FrontendRootPage( int, array)

setTYPO3CreateDirectories(array)

TYPO3Boot($this, $scope);

FUNCTIONAL- AND ACCEPTANCE TEST

34

behat-typo3-extension

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 }

FUNCTIONAL- AND ACCEPTANCE TEST

35

behat-typo3-extension

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 }

FUNCTIONAL- AND ACCEPTANCE TEST

36

behat-typo3-extension

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