a brief introduction to the main techniques and tools. (T3EE 11/2015)

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

2. ABOUT
2
• senior it developer @ publicis pixelpark
• experience since 1998
• supporting:
• processes
• infrastructure
• quality assurance
heiko hardt

3. Mission
3

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

5. MISSION
voting module, scribble
5
buttons
Please enter your name
and Email address
Email:
Name:
NOYES BACK
Oooops an error...
voting
Well done...
What do you think
about ... ?
VOTE
Yes
1023 No
536
teaser
message(s)
topic
formresult

6. unit- and integration tests
6

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

8. 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 ...
});

9. UNIT- AND INTEGRATION TESTS
9
jasmine, spec and suite example
spec/t3ee_voting_example.spec.js
// suite
describe('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. 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)

11. 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()

12. practical part
t3ee_voting_example
12

13. UNIT- AND INTEGRATION TESTS
13
karma
Karma - Spectacular Test Runner for Javascript

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

15. 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. UNIT- AND INTEGRATION TESTS
16
grunt
grunt, a javascript task runner

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

18. 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']);
};

19. PRACTICAL PART
19
grunt
execute
# grunt

20. functional- and acceptance test
20

21. FUNCTIONAL- AND ACCEPTANCE TEST
21
Behat is an open source
Behavior Driven Development framework
(Source: http://docs.behat.com)

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

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

24. FUNCTIONAL- AND ACCEPTANCE TEST
24
Mink is an open source
browser controller/emulator
for web applications
(Source: http://mink.behat.com)

25. FUNCTIONAL- AND ACCEPTANCE TEST
25
practical example
configure (behat.yml)
default:
extensions:
BehatMinkExtension:
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. FUNCTIONAL- AND ACCEPTANCE TEST
26
mink context
extend FeatureContext.php
...
use BehatGherkinNodeTableNode;
use BehatMinkExtensionContextMinkContext;
/**
* Defines application features from the specific context.
*/
class FeatureContext extends MinkContext implements Context, SnippetAcceptingContext
{
/**
* Initializes context.
...

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

28. FUNCTIONAL- AND ACCEPTANCE TEST
28
selenium
start server
# java –jar selenium-server-standalone-2.x.x.jar
extend behat.yml
default:
extensions:
BehatMinkExtension:
base_url: 'http://www.typo3.org'
# goutte: ~
selenium2: ~
install
# composer require behat/mink-selenium2-driver

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

30. FUNCTIONAL- AND ACCEPTANCE TEST
30
using behat / mink within
TYPO3 context

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

32. 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 user
BEHAT_TYPO3_DB_PASSWORD password of your behat database user

33. default:
suites:
default:
contexts:
- FeatureContext
- Typo3Context
extensions:
BehatMinkExtension:
base_url: 'http://behat.typo3v62.t3ee.conf'
goutte: ~
selenium2: ~
HeikoHardtBehatTYPO3ExtensionServiceContainerTypo3Extension: ~
FUNCTIONAL- AND ACCEPTANCE TEST
33
behat-typo3-extension
behat.yml

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

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

36. page = PAGE
page {
typeNum = 0
10 = USER
10 {
userFunc = TYPO3CMSExtbaseCoreBootstrap->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

37. practical part
t3ee_voting_example
37

38. questions?
38

39. Thanks J

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