Question : Will a GUID lose it’s uniqueness when you remove the dashes (-)?

Today while I was fixing an issue at TeamMentor, I wanted to play around with the URL manipulation.

I tried to remove all the dashes (-) from the URL  GUID to see what would be the behavior. And I was able to see the same article without any side effect (by side-effect I mean that the result was the same).

I was wondering if the fact of removing the dashes from a given GUID should cause any damage to the integrity of that GUID. I did a quick search on internet and I found this thread at StackOverflow called “Is good idea to remove dash from a GUID?”

The short answer given to this question is that the integrity or uniqueness of the GUID is guaranteed even after removing the dash. Also in this thread, some of the folks state that dash are added for readability purposes. The anatomy of a GUID is described here

In fact  by reading this thread at StackOverflow, I discovered that using .Net you can generate a GUID without the dashes. I used PowerShell to give it a try.

Standardizing TeamMentor branching names

I started working on fixing some small issues at TeamMentor with the idea in mind of understanding the branching model that GitHub offers, along with the idea of getting involved with all the workflow at  TeamMentor.

So namely we review the issue list and then we create a branch to address the issue. When it comes to branches, we believe it would be great to standardize it, so all the developers can follow the same pattern. This approach will help us to be all in the same page.

Therefore if you are working in the 235 issue, we believe that we follow the Issue + Underscore + Issue number pattern :

So if you are fixing Issue 235, the name of the branch should be Issue_235.

This approach will help us to track what issue is being addressed in the branch. And it’s important that we are addressing an issue at the time. Having said that, we will have a branch per issue.

This is a small example that will help us to do things better!

How to design an application using AngularJS if you are familiar with jQuery?

I found a very interesting question at StackOverflow (which has a lot of reputation and a very good approach), so the idea here is to point this question so it can give us an idea on how to address the fact of design applications using either jQuery or AngularJS.

The question was How do I “think in AngularJS” if I have a jQuery background?

Don’t get me wrong :), the idea here is not to create a debate on what is better, no that is not the point. The main idea here is to understand the power of both frameworks and that both of them can be used depending on our needs :).

I hope it helps to guide us on the right direction.

Some jQuery selectors works on Firefox console, even though jQuery hasn’t been referenced

While we have seen the power of AngularJS (which looks very promising ), it seems like this framework is a good candidate for our future implementations. At the time of writing this article (April 29th, 2013), we are already using this framework on top of TeamMentor Tbot page.

Something took my attention while I was trying to add some browser automation test to this Tbot page. I was trying to use jQuery selectors to interact with DOM elements on a page that does not have a reference to jQuery.

The funny part of this story, is the fact that some jQuery selectors worked on Firefox Console, even when we are missing jQuery reference from the page. To give you an example, this is the jQuery selector to find  Tbot title :

$(‘.alert’)

Note that we are finding the element given the class, and as you can see here, we were able to find that element:

But we are interested on apply a jQuery selector that returns the DOM element, so our best candidate is using  jQuery .get  DOM Element Method.

Following with jQuery documentation, you can read that .get “Retrieve the DOM elements matched by the jQuery object.” and this is what we are interested on.

But since we don’t have jQuery referenced on that page, we get an error when trying to apply get method: TypeError: $(…).get is not a function

Using FireQuery Firefox addon  we confirm that our page does not have jQuery referenced:

The addon adds the latest version of jQuery to the page :

Now, the jQuery selector returns the DOM element (which can be used to convert it to a IWebElement).

So it seems like the idea behind using jQuery selectors  on a page/site that relies on jQuery is not that bad (because easily you can find DOM elements), but considering that you can have mixed frameworks (and it’s worth to reference StackOverflow question How do I “think in AngularJS” if I have a jQuery background?) then it would be better on to think about other options like CSS selectors, which appart from being a W3C recommendation, they provide a more generic approach to find DOM Elements.

Using WebDriver Actions class to interact with TeamMentor contextual menu

I was trying to add a test to verify that TeamMentor contextual menu, was displayed using mouse right-click, so you should be able to see a menu like this one :

Fortunately, WebDriver provide a class to interact with some user actions like double-click for instance. This class is named Actions. To give you an idea on what methods this class provides, I’ve auto generate the following class diagram, which gives the big picture of the Actions class definition ( and all the user actions it’s able to handle).

Therefore if we need to perform the right-click action, you will need to use the following syntax:

 //Defining Actions
   var action = new Actions(driver);
   action.ContextClick(jsTree).Build().Perform();

Now we are able to display (via browser automation) this context menu, therefore our purpose here is to verify that two options are displayed when the context menu was displayed. Using jQuery selectors, we can now access the context menu and perform some asserts on that:

If you want to see the unit test for that, you can see Contextual_Menu_Is_Displayed_On_Right_Click

How To Configure TM Server for updating forked content

 

 

So I started with making a clone of the latest TeamMentor code from https://github.com/TeamMentor/Master.git

    

 

Renamed the directory to a more meaningful name for that server

 

 

Changed the default configuration to

1. Not require SSL, as the server we are hosting on does not have a certificate (unfortunate but hopefully temporary measure)

2. Implemented a workaround to disable random users from being able to create their own accounts. This involves enabling Eval Accounts but setting the number of Eval Days to -1. This allows the user to be created however the user cannot access the content. For this implementation all users should be created by admin.

3. Enabled auto Git commit for both User_Data and Library_Data

 

 

I followed the available documentation on how to install TM on IIS6 from docs.teammentor.net. I started TM and made sure it works as expected.

 

Then moving to github I created a user called tm-sme. I granted a pull only permissions to the tm-sme user.

 

 

 

Then I forked all the repositories currently on teammentor.net from TMContent organization to the new tm-sme user

 

 

 

Going back to our new instance of TM I added the newly forked repositories (pointing to the tm-sme user forks) in the TMSecretData.config file

 

 

I then restarted TM and the ApplicationPool and here we go: An instance of TM with Libraries forked from the TMContent repositories. As the content is updated here, it then automatically will be pushed to the forked repositories, which in turn can later be merged (upon approval of content changes) to the TMContent repositories which hold the authoritative content.

 

 

Just to validate that the push works, I changed one of the articles on the TM instance (line 23 and 24):

(note that the other changes are the update of the article to the new 3.3 format)

 

 

Using jQuery Selectors to interact with TeamMentor : A good starting point for browser automation

It’s important to take advantage of the cutting-edge technologies we are using at TeamMentor and make sure those technologies can be used to perform testing and improve the quality of the product. 

Since at TeamMentor we rely on jQuery, it’s important to understand what a jQuery selector is and why are they useful and important. As decribed in the jQuery official page: “…jQuery offers a powerful set of tools for matching a set of elements in a document.”

As an example, if you would like to locate all the  HTML heading 1 in a page, then the jQuery selector could be something like this : jQuery(“h1”).html(“Hello!”);  or just $(“h1”).html(“Hello!”);.

A complete list of jQuery selectors can be found here  , here and here.

Using jQuery Selector in TeamMentor via Firefox

Using firebug, this task is very easy, you will need to open firebug and then select the Console tab. At the bottom there should be  a console window to enter some commands:

 

 

 

Now, let’s use the following selector to put some  html on all the HTML heading 2: $(“h2”).html(“Hello TeamMentor!!”);

Look that after executing that command, all the h2 heading elements in the page constrains now the text “Hello TeamMentor!!”

From this stand point, we can use the power of jQuery selectors to locate elements in the DOM and make easy the  testing.

Best approach to find nested elements with WebDriver :When Xpath becomes your best friend

Most of the time, browser automation using WebDriver is all about finding html elements: find a button and click it to perform any action, find an user input text box and set a specific text, find a link and click that links.

But sometimes, even when sounds contradictory, your test is about don’t find an element, for instance that some actions designated to an admin user are not available for a standard user.

There is a significant behavior when you are facing scenarios with nested elements (for instance divs inside divs). It seems like there is a small issue related to nesting. Let me put an example : Given the following HTML output this are the nesting observations:

<div class = "ui-dialog-buttonpane">
    <div class = "ui-dialog-buttonset">
        <button
            role = "button"
            class = "ui-button"
            type = "button">
            <span class = "ui-button-text">No</span>
        </button>
        <button
            role = "button"
            class = "ui-button"
            type = "button">
            <span class = "ui-button-text">Yes</span>
        </button>
    </div>
</div>

If you want to access Yes/No buttons, you first need to find the div identified by the class ui-dialog-buttonpane, then using that IWebElement, you need to find the other div with a class ui-dialog-buttonset. Coding this search, it should be something like :

//Finding modal dialog
var modalDialog = driver.FindElement(By.ClassName("ui-dialog-buttonpane"));

//finding the div that holds the buttons, but finding it within modal dialog
var buttonsDiv = modalDialog.FindElement(By.ClassName("ui-dialog-buttonset"));
//Now you can easily find the buttons within the button
Assert.IsTrue(buttonsDiv.FindElements(By.TagName("button")).count() == 2);

But this way becomes exponentially complex depending with the nesting levels, if you have 5 level nesting, you will need to follow this approach, because the WebDriver won’t find the element from the first level.

XPath becomes your best friend.

Even when there might be some hit to the performance, see Webdriver Xpath Performance, when the XPath expression becomes too long, it helps a lot to find nested elements. Following with our example to find the Yes/No buttons and using Firebug’s FirePah, see First steps with FirePath : What a useful tool , this tool helps me to get the Xpath expression to be used with WebDriver :

And if you are looking for the Xpath expression that returns the two buttons, then just edit the expression to something like this:

Note how the two buttons become  selected.

One more time it’s easy to see how important is to use tools to make things easy 🙂

Beginning Development on Team Mentor

Code Clueless

Installed Git, cloned the Master source code repository and loaded some XML data with help from Kofi Sarfo.

I’m really liking the rawness of the app. For example, when editing a user, there’s a JSON representation of the user data at the bottom of the screen.

View original post

Creating the Distribution ZIP files for new version of TM

Take the master branch of TM from TeamMentor/Master (thanks Dinis for merging the 3.3 branch into master)

Start TM to have it create the Library_Data directory structure

Remove the following from Library_Data\XmlDatabase\User_Data\TMSecretData.config

<SMTP_Server>smtp.sendgrid.net</SMTP_Server>
<SMTP_UserName>TeamMentor</SMTP_UserName>

Then I created the following \Library_Data\XmlDatabase\User_Data\TMconfig.config

<?xml version=”1.0″?>
<TMConfig>
<TMSecurity>
<Show_ContentToAnonymousUsers>true</Show_ContentToAnonymousUsers>
<SSL_RedirectHttpToHttps>false</SSL_RedirectHttpToHttps>
<EvalAccounts_Enabled>false</EvalAccounts_Enabled>
</TMSecurity>
<Git>
<AutoCommit_UserData>true</AutoCommit_UserData>
<AutoCommit_LibraryData>true</AutoCommit_LibraryData>
</Git>
</TMConfig>

And added the libraries to \Library_Data\XmlDatabase\User_Data\TMSecretData.config (x-ed out the sensitive stuff here)

<Libraries_Git_Repositories>
<string>x/Lib_.NET_3.5.git</string>
<string>x/Lib_.NET_4.0.git</string>
<string>x/Lib_CWE.git</string>
<string>x/Lib_Java.git</string>
<string>x/Lib_Android.git</string>
<string>x/Lib_iOS.git</string>
<string>x/Lib_CPP.git</string>
<string>x/Lib_PHP.git</string>
<string>x/Lib_PCI_DSS_Compliance.git</string>
</Libraries_Git_Repositories>

Restarted TM and then reloaded server cache

Then went to each library directory and removed their remotes

Then finally removed the Library configuration from Library_Data\XmlDatabase\User_Data\TMSecretData.config

<Libraries_Git_Repositories />

And started TM

And voila:

Finally I stopped TM. Removed the cache file and zipped up the directory

For OWASP content, I cleared out the TM_Libraries directory

Then added the OWASP repository to \Library_Data\XmlDatabase\User_Data\TMSecretData.config

<Libraries_Git_Repositories>
<string>x/Lib_OWASP.git</string>
</Libraries_Git_Repositories>

Started TM

Then stopped TM, removed the OWASP repository from the Library_Data\XmlDatabase\User_Data\TMSecretData.config

And removed the remotes:

Then finally removed the cache and zipped up the directory