How Do I Use My Own Theme Or Layout?

Given that few people deploy live sites using the default design package there’s a pretty good chance you will need to customize at least some of the functionality in the ThemeConfiguration classes. The theme classes provided with Magium have been designed so that as much as possible can be re-used. If you are largely skinning your site with different CSS most theme settings should work.

Formatting Suggestions

If you are building your own theme and doing a lot of customizations note that the use of IDs for unique containers and CSS classes to denote types is incredibly useful, even if it is not being used for things like jQuery selectors. If you don’t already do that, and want to automate your testing, this is a good idea.

 <html>
    <body>
        <div id="banner-container">
            <div class="banner">Banner 1</div>
            <div class="banner">Banner 2</div>
        </div>
    </body>
 </html>

Another good idea is to place individual content in individual nodes. Magento usually does this, but when it doesn’t it makes automation harder to do. The search suggestion dropdown is a good example of what not to do.

 <div id="search_autocomplete">
    <ul>
        <li title="test">
            Test
            <span class="amount">2</span>
        </li>
    </ul>
 </div>

How do you get just the text of the search? You don’t. The way Magium deals with it is that it gets the value for the amount node and then does a trim() with the amount value to get the text. However, if the HTML had been like the following we could get the text value without any processing, which is much preferred.

  <div id="search_autocomplete">
     <ul>
         <li title="test">
             <span class="text">Test</span>
             <span class="amount">2</span>
         </li>
     </ul>
  </div>

That is much more testable. Given that we bend our code out of shape to make it unit testable it seems logical to give HTML enough structure to automate our testing.

Configuring Themes

The preferred method is to use the configurable nature of the theme classes to do most of the work. As an example, if the default home link is different for your site you would need to do something as follows.

<?php

$this->homeXpath = '//a/img[@class="logo"]';

(Project file: /configuration/Magium/Magento/Themes/Magento19/ThemeConfiguration.php)

Virtually all theme configurations, at least the minor ones, use Xpath exclusively. That is because there is no guarantee that a CSS selector will work or that there is an ID associated with the particular elements. So virtually everything is Xpath in a theme, even the ID selectors like //ul[@id="nav"].

Right now configuring a theme is drab, thankless work. But improvements are coming to make it easier.

Setting Different Themes

MagiumMagento works, out of the box, with Magento CE 1.9. But that may not be what you are using . MagiumMagento will support CE 1.8 and 1.9, and EE 1.12, 1.13, and 1.14. Magento 2 support will likely be forthcoming as it gains steam. (Note that using Magium on your existing Magento implementation could be used to help with acceptance testing of a new Magento 2 implementation when you actually do the upgrade).

If your site as a whole requires a different theme class (such as Magento 1.8 instead of the default Magento 1.9), or if you have a completely customized theme class, or just because you should, create your own abstract test case class to base your testing off of.

namespace MyTestingNamespace;

use Magium\Magento\AbstractMagentoTestCase;

class AbstractTestCase extends AbstractMagentoTestCase
{

    protected function setUp()
    {
        parent::setUp();
        $this->switchThemeConfiguration('Magium\Magento\Themes\Magento18\ThemeConfiguration');
    }

}