Dependency Injection

DI Container

class myContainer {

   public function getDomainBlog() {
     return new Tx_Blog_Domain_Blog(new Tx_Blog_System_Persitence('user','password'));
   }

   public function getDomainWebsite() {
     return new TX_Blog_Domain_Website($this->getDomainBlog());
   }

}

Container for TYPO3 4.3

• Constructor injection detection
• Setter injection detection via annotation or "inject*" Name
• Settings injection for extension settings (ext_conf_template)
• Singleton support via "t3lib_Singleton"
• Support for manual registration of implementations
• XClass awareness 
• Able to resolve cyclic dependencys with setter Injection
• First and Second Level reflection cache for the matter of speed

Introduction

Constructor Injection

class tx_container_tests_amixed_string {
     public function __construct(tx_container_tests_b $b, tx_container_tests_c $c, $myvalue='test') {
        
     }   
 }

Setter Injection

class tx_container_tests_injectmethods {
    public $b;
    public $bchild;
   
    public function injectClassB(tx_container_tests_b $o) {
        $this->b = $o;
    }
   
    /**
     * @inject
     * @param tx_container_tests_b $o
     */
    public function setClassBChild(tx_container_tests_b_child $o) {
        $this->bchild = $o;
    }
}

Settings Injection

Singletons

Interfaces and Abstract Classes

What if I need to call new?

Upcoming

• Extension context aware dependency resolving
• TypoScript Configuration Injection

2 Run your Tests in Zend Studio

• for the outline right click on the class-name in the editor and select "Open Type Hierarchy". You should see the PHPUnit classes somewhere there.
• For autosuggestion just click in one of your testmethods and start typing "$this->" now you should see all assert* methods as suggestion.

• Nice slides explaining software metrics: http://manuel-pichler.de/archives/65-Softwaremetriken-verstehen-und-nutzen.html
• The state of QA Tools for PHP: http://www.slideshare.net/sebastian_bergmann/the-state-of-quality-assurance-tools-for-php
• http://www.slideshare.net/sebastian_bergmann/analysing-php-code
• http://www.slideshare.net/sebastian_bergmann/continuous-inspection-and-integration-of-php-projects
• http://www.slideshare.net/sebastian_bergmann/cool-objects-sleep-on-the-couch
• Stress free Deloyment: http://akrabat.com/talks/#sfd
• Charsets & Encodings (via http://kore-nordmann.de/portfolio.html)
• CouchDB, PHPillow & PHP (via http://kore-nordmann.de/portfolio.html)

$(function(){
			
	var lastjavascripthash='';
			
	//if the current url has a hash on dom ready - than the user loads this url directly in browser
	if (location.hash) {
		alert('you navigated to this link using the browser address!');
		lastjavascripthash=location.hash;
	}
	//just add a dummy hash:
	lastjavascripthash=location.hash='#loaded';	
	
	//optional - when clicking the links append the hash to the url:
	$('#tostep1').click(function() {
			lastjavascripthash=location.hash='#step1';					
		});		
	
	//do regular check if the hash in the location still fits the last hash that was set via a valid javascript call
	// if not it means someone else modified the hash - typically the browser back
	setInterval(function() {
			if (location.hash != lastjavascripthash) {
				alert('you navigated to this link using the browser back!');
				lastjavascripthash=location.hash;
			}
		}, 300);
}

var browserback = {
        lastjavascripthash: '',

        setLastHash: function(hash) {            
            browserback.lastjavascripthash=hash;
        },    
        historyChangeHandler: function(hash) {
        	if (browserback.lastjavascripthash != hash) {
        		alert('you propably used browser back!');
        		browserback.setLastHash(hash);
        	}		
        },

        disableBrowserBack: function() {
        	$.history.init(this.historyChangeHandler);
        	var hash=new Date().getTime()+ Math.floor(Math.random()*1000)
        	browserback.setLastHash(hash);
        	$.history.load(hash);		
        }
}


$(function(){			
	browserback.disableBrowserBack();
}
 

Introduction

Every web application needs proper testing to ensure that it works like expected. Therefore you should have a set of test-cases, that verify the functionality of the application. For large applications you often need a separate test planning phase, where many test cases are designed – there can be  many hundreds of them.

A proper design of stable and useful test-cases is required – but that’s not part of this article. But at least we can say that:

• Most of the test-cases should focus on a single feature or requirement
• In order to keep the overview test cases should have speaking names
• test-cases should be grouped in test suites

Before a new release of a website or web-application is released, the test cases should be executed to ensure the quality of the application. For business critical websites, this phase is even more important! It’s obvious that this process can take a lot of time and effort. If you want to keep up with your competitors you do not only need a robust and high quality application - but you also need a short release cycles that adds new innovations and features to your website.

The key to solve both requirements, short release cycles and proper quality assurance, is automated frontend testing. Automated tests for web applications are furthermore also very useful in agile development processes: In an optimal way they can be used together with continuous integration, to provide early feedback for changes in the source.

Getting started with Selenium

Selenium is a suite of tools to automate web application testing across many platforms. The easiest way to start with it, is to install the Firefox add-on Selenium IDE. With this IDE you have an easy way to record and edit your test cases.

Let’s start with a simple test:

1)      Open your IDE and select "new" > "testsuite". A new test suite is created, with a first empty test-case.

2)      Now just click the red record button and switch to your browser window.

3)      Open www.google.de

4)      Do a search for "typo3".

5)      On the result page highlight the website "typo3.org" and click the left mouse button. Select "assertTextPresent" from the context menu. (screenshot)

6)      Now save your test and give it the name "can search for typo3.org".

7)      Save your test suite and give it the name "google search".

Every time you want to check if google still can search for typo3 and returns the expected result "typo3.org" you can run this test case. Do this by clicking the play button in the IDE.

Speaking Selenese

If you have a closer look at your test case, you see that it consist of a list of commands. The Selenium IDE records your actions in the browser and adds the correct commands to the test-case. All commands support one or two parameters.

In fact the commands create a testing language - and they are often referred to as "selenese". For having robust test cases, it’s often necessary to tune your test case commands after recording them with the Selenium IDE. Robust means that the test cases are stable against small changes in the markup. Also while running a test case, selenium executes the commands faster than a human  - that might cause unexpected behavior, of course a test case or the application should be insensible against this too.

Therefore let’s have a closer look at the commands. In general commands are divided into actions, accessors and assertions. As mentioned commands can have 1 or 2 parameters. In most cases the first parameter is a locator to a specific UI element and the second parameter is a text pattern.

Actions do something in the browser, like clicking (command click) a link or selecting some Selectbox entry (command select). Mostly it is necessary that your test-case will wait after an action, until the web application is ready doing something. Most of the action commands can be used with the suffix "AndWait". That means that Selenium waits till the server has send back the response for the action. (See below for an example how to deal with ajax)

Assertions are mainly the verification* or assert* commands (Like verifyTextPresent). The difference between assert and verify is, that a failed assert ends the test case and a verification only marks the test case as failed - but the following commands are still executed.

Simple Selenium test case example

Let’s have a look at a simple test-case example

A more advanced selenese example

Let’s have a look at a more advanced example:

Again we start with opening some URL. Than a click action is performed on a link that has a text ending with "ajax" (3). In AJAX applications you cannot use the "*AndWait" actions, since the website is not reloaded. Here it is better to place a seperate WaitFor* command after the action command. That’s what we did on line (4), we expect that after the Ajax Response is finished when a "span" element with a class "activated" is present. The "pause" command right after a waitFor* command tends to be useful to have a better robustness of the test case.

The next commands show what else is possible. In line (6) a random value is stored in the variable $userName. This variable is used in the echo command on line (7) and then an inputfield with the id "login" is filled with this value (8).

Interesting are the possibilities of the different locators. Here some examples:

• Using the identifier locator like: “identifier=loginForm”  (identifier prefix is optional)
• Using CSS Selectors: “css=.content div.grid”
• Selecting a link with a special text: “link=my link”
• DOM Selektors: “dom=document.forms[0].username”
• Using XPath Selektors: “xpath=//form[@id='loginForm']” (xpath prefix is optional, a “//” is sufficient)

Whats next

If you want to run your tests in other browser you can use Selenium Core. Selenium Core comes with a HTML based Test-Suite Runner that can simply be called from other browsers too:

There are more useful Selenium Tools. First to be mentioned is the Selenium RC Server. This is a Java based Server, that can run tests on multiple platforms and browsers. The cool thing is that you can connect to this server from other applications. So it is possible to run Unit Tests that use Selenese to test your web application.

The TYPO3 extension “selenium”

The TYPO3 extension “selenium” can help to build Selenium Tests for TYPO3 extensions. It has:

• A backendmodul that scans for *TestSuite*.html files inside “tests/selenium” folders and links them with the Selenium Core Runner. So you can easily start Selenium tests from the backend of TYPO3.
• In the extension configuration you can configure a Selenium RC Server (default port 4444) and you can use this in your phpunit tests.
• Therefore two abstract testsuite classes are provided.
  • tx_selenium_phpunittestcase: Uses the Selenium Testcase class that is part of phpunit.
  •  tx_selenium_testcase: Uses the PHP selenium Driver, that is part of the Selenium RC package.
  • Each of this classes has a method initializeSelenium($browser,$url) that instanciates the $this->selenium based on the configured RC Server.

Links

http://seleniumhq.org/

http://seleniumhq.org/docs/

// register for clicks on the "change color Link"
this.registerEvents=function() { 				
	$('#'+this.id+' .click').data('object',this).click(function(event) { $(this).data('object').clickColorAction(); });
};

Introducing the example:

Model

Controller

/**
* detail action shows the single view of an object, if a detail view of an object is
* requested.
*
* @return string
*/
public function showdetailAction() {
   if (empty ( $this->arguments ['id'] )) {
    throw new InvalidArgumentsExcepton('no valid id given');
   }
   $this->view->setArticle ( $this->articleRepository->findById ( $this->arguments ['id'] ) );
   return $this->view->render ();
}

The detail view

<div id="objects">
 <h2><?php echo $this->article->getTitle();  ?></h2>
 <p><small><?php echo
$this->labels->get('field_category'); ?>:<?php echo
$this->article->getCategory()->getTitle();
?></small></p>
       
 <p><small><?php echo
$this->labels->get('field_date'); ?>:<?php echo
$this->article->getDate(); ?></small></p>
  <div class="image">
    <?php     echo $this->article->getImage();   ?>
  </div>
  <?php     echo $this->article->getDescription();   ?>
</div>

1. we could use viewhelpers (like $this->fieldRenderer->asImage(...)) to transform the imagepath to a imagetag for example.
2. we can use a presentationmodel and do the transformation of fields for the view there.

new tx_mvcnews_presentation_articlePresentationModel ( $this->articleRepository->findById ( $this->arguments ['id'] ), $this->configuration->get ( 'presentationModel.article.' ), 'tx_mvcnews_article' );

The showlistAction and the listview:

1. get the correct collection of articles, that matches the search
2. render the output with: searchform, pagination and actual results.
   

• the paginationSubView has setter methods to provide the required informations for the pagination
• the searchformSubView - well it needs a formmodel. The formmodel tells the searchForm which formelements it can render. The seperate formmodel is also greate to validate the users input before doing anything.
• and finaly the listSubView needs the collection of articles that it should render.
  

Whats next?

• add AJAX loading for searching and paginating
• add more features like commenting and rating, that propably results in a richer domain model and more action methods in the controller.
  

Model:

View:

Controller:

The historic basic "smalltalks-80" classical MVC:

Downsides of the smalltalks 80 MVC concept:

MVP vs MVC

MVC for Webapplications

• The request that is send from the browser to the webserver is send to a front controller. This front controller builds a request object and starts the processing of this request.
• That means Controller Objects are called (normally action methods in the controller that belongs the current request. This process is called "dispatching") and this controllers are responsible to return the correct response. Like normal controllers they do:
  • The controller loads/modify model objects
  • Pass the model to a view
  • calls the view "render()" method to get the response.
• Normally the view that is returned to the browser consist of a hierarchie of subviews and/or widgets.

• http://flow3.typo3.org - the upcoming framework for TYPO3 5.0
• http://typo3.org/extensions/repository/view/mvc/current/ - extension enables MVC based plugin on top of the CMS TYPO3 4.x
• http://framework.zend.com/ - powerful collection of PHP5 classes and modules, includes also a full featured MVC framework

cd /opt/local/bin
sudo ./port selfupdate -f
sudo ./port search php5
sudo ./port variants php5-devel
sudo ./port install php5-devel +apache2 +macosx +mysql5 +sqlite

Installing FLOW3

Update (18.10.2009)

( sudo ./port installed )
sudo ./port uninstall php5-devel
sudo ./port install php5 +apache2 +macosx +mysql5 +sqlite