Testing the frontend
-
Upload
heiko-hardt -
Category
Software
-
view
151 -
download
0
Transcript of 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
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
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
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']
},
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']);
};
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
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
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