Tag Archives: Javascript

JavaScript errors, our friends

Hello and welcome back,

today’s lesson is quite important because it is quite impossible to know if something is not correct unless someone tells us about it.

Over the last few articles we figured out that our browser is the only one who runs our code. So, he is the only one who can tell us if we have errors or not.

In order to figure out how to reach the JavaScript console in your own browser you can google:
“how to open JavaScript console xxxxx” where “xxxxx” is your browser’s name.

In order to make sure you are in the right place. As soon as you are done following the instructions write alert(“the console is working”); . If a message box pops up to you, you made it!

If not, please leave a comment bellow and I will do my best to help you out.

Tomorrow we will recap the current structure of our project and we will learn how to use jQuery.

Take care,
Gabi

Ermm…. jQuery … why, what?

Hello and welcome back,

Painting… colours… so beautiful. Art however has multiple forms. Let’s look at metalworking or carpenters. They also build beautiful things but they also build tools that help them. Let’s say that we want to build a chair and we have only a saw blade. How… we can try to cut directly but we better get ourselves a cutting table first. Nice, now we can cut way better. We should also make some kind of tool first that allows us to cut straight lines without cutting our fingers… yea, that would speed things up.

See, in order to reach our goal easier, to deliver something that looks better and is safer we have build ourselves a “framework” composed by different tools that we mix together for the end result.

That is jQuery. It is a framework for JavaScript. It does everything that JS does but much more, much easier and with less code.

What’s better, just like with the wooden pieces, we can always use either JS or jQuery in any moment as we see fit.

Like when we were building our wood cutting framework, we need to do a bit of setup and building first.

How can we make jQuery work for us?

  1. Search on the internet for “jQuery CDN” or go to http://code.jquery.com  – CDN = content delivery network. It means that some computers around the world have the file and you will get it the fastest from the closest computer to you.
  2. Select the newest version – minified if possible.
    Minified = the smallest possible from which you cannot understand anything but works perfectly.
    Uncompressed = the version that also has the code visible. It also works perfectly.
  3. Click on it
  4. In the HTML file write
    <script type=”text/javascript” language=”javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>  where the last part “http://code.jquery.com/jquery-2.1.4.min.js” is the URL you got on point number 3
  5. Save the HTML file and refresh

Now, this is how we add jQuery into our HTML. Note that we already this this with our JS and CSS files previously. As stated above, jQuery is not something super super complicated. It is just some JS code written by a team which allows us to write less and do things faster.

How to play with an element?

Let’s use the same JS code as above document.querySelector(“#first_leaf”) and we will change it’s colour just to see that the code works. Let’s add .style.backgroundColor=”red” to our JS selector. Finally, the code will look like this

document.querySelector(“#first_leaf”).style.backgroundColor=”red”;

We can observe here that JavaScript uses the “.” to navigate between the available functions of each function. Note that in the last sentence the word function has been used twice. It is not a mistake. JavaScript is a language based mostly on functions. At the end of the functions there are properties and those properties accept values. Exactly in the same way as the CSS accepts values for its properties. Do you remember how we have said that HTML is mostly based on tags. Same concept, just a different language.

Since we know that jQuery will help us write less but achieve the same result we can write the above code as:

window.jQuery = window.$ = jQuery;
$(“#first_leaf”).css(“backgroundColor”,”red”);

The first line of text is the preparation required that we spoke about previously. From now on, jQuery will be represented by the “$” sign.

The second row is us sending our CSS selector to jQuery and when the results comes back asking jQuery again to change the background colour of our element to red.

Tomorrow we will learn how to see if jQuery works and where we can see the errors because it would be really difficult to create anything without knowing if it works or not. It like painting as a blind man.

Take care,
Gabi

JavaScript functions

Hello and welcome back,

Sadly today’s article will have to be a bit more technical because it is one of the key things of JavaScript. If you understand this you can literally read any JS book and start looking for a job.

One of the particularities of JS is the fact that it relies on functions. In the lesson How does JavaScript functions we have learned that the JS code is read once, from top to bottom and everything that it is read it is executed. Now… this is great and not so great in the same time.

Why not so great?

When we paint together, among the things that we should do is sell the painting. What if after I hand you the colours I go and sell the painting? That would be stupid, that would totally ruin our team work.

This is why we should not rely our JS code to do everything when it is read.

Why is great?

Let’s consider that we work on the painting, I give you the colours and then I wait long enough for you to finish. Then we sell it. This is great, this is how it should be done… but… it has happened like this by luck. If I would have waited less it would have been too soon. If I would have waited longer we would have been stuck. So, this is great but not so great.

How can we stop this from happening?

Functions.

Instead of placing all the code in the file and make it look like this:
draw the horizon line
draw a tree
paint the sky with blue
paint the bark with brow
….
sell the painting

Let’s make it somewhat like this:

function draw_sky(){
if the horizon line does not exist draw it;
paint the sky in blue;
}

function draw_tree(){
draw a tree;
paint the bark with brow;
….
}

function sell_painting(){

}

This will split our code into functions and although the functions are read by the browser when they are received they are not run until we call them. What’s even better is the fact that we can dictate the order very easily.

Between

function draw_sky();
function draw_tree();
function sell_painting();

and

function draw_tree();
function draw_sky();
function sell_painting();

it is just a line changed. What’s even better is that now we can draw 2 trees without copying everything again! Just imagine how easy it is to just call functions to do the work wherever you need them to.

function draw_tree();
function draw_tree();
function draw_sky();
function sell_painting();

But where do we actually call them?

Now that’s a great question! There are multiple answers to this question:

  1. In HTML when an action is performed, like this:
    <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
    The onclick is called an event. More events can be found here.
  2. When the page is loaded. This is more difficult to understand but easier to use. What we need is something that embraces our code and knows what to call for when the user performs events on the HTML tags used. We will call this thing “jQuery”.

Practical example:

  1. In the JS file write only the following code
    function draw_tree(){
    alert(“I don’t know how to draw a tree but I have this nice message”);
    }
  2. In the HTML file replace <div class=”red leaf” id=”second_leaf”>second leaf</div> with <div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
  3. Save both files, refresh and click on the red leaf.

Tomorrow we will learn the difference between a function and a property.

Gabi

How to point JavaScript to elements

Hello and welcome back,

This we also know, through CSS selectors. They are the ones we have learned about in “Adding colour” . What we need to do is write document.querySelector(“#first_leaf”) . This points to the first leaf. Sadly, this bit of JS code will not do much except allowing us to access the first_lead element.

If we want to select all the elements that fall under a certain selector there is document.querySelectorAll(“”).

Tomorrow we will learn about functions because we will need them in order to play with our elements.

Gabi

How does JavaScript function

Hello and welcome back,

Let’s go back to our paintings. We, together, must make a work of art because that’s how the browser and the developer are working together. The browser is very good at drawing and the developer is the one providing the instructions. See, teamwork! You are the browser, I am the developer.

So, we should paint on wood. But I am not that good, I am learning. You, the artist are good but you cannot pick your own colours.

  1. I accept all the colours that I find because I don’t know anything about them.
  2. I must read all the paint labels and pick the one that is fit for wood.
  3. Mix the paint with oil as stated on the label.
  4. Now that I have sorted the colours for wood I must look at the labels and pick the desired colour.

That’s about how the browser and JavaScript works.

  1. First the browser accepts the file because it trust us.
  2. Reads the file. This step also ensures that our file is correct and can be run (note#1)
  3. Executes all the code that does not belong to a specific function (note#2)
  4. Creates a list of actions that must be executed in order for every element that it is targeted.

Tomorrow we will learn about pointing JavaScript to our HTML elements.

Gabi

Animations

Heya!

Colouring elements is quite cool, but animating them… whooaaa, a whole new level. We can do things like the cool kids.

Before we dig in a bit deeper we should have in mind that there are 2 types of animations. One is made by CSS 3 and one by JavaScript.  Now don’t get scared or intimidated by the “3”. There is nothing different from CSS 1 and CSS 2 (which did not really exist). The 3 means that some new attributes have been added and the browsers know what to do with them.
Do you remember how in the first lesson we were saying that the browser is stupid. Well, payback time, the browser is not THAT stupid. The browser knows how to read the CSS, link it to HTML and draw everything on the screen but since different companies create

Basic difference between the two comes in terms of what the browser knows what do with that bit of code.

JavaScript animations:

  1. Are drawn much better in the same way on all the browsers
  2. Can have more advanced way of controlling the animation
  3. Slightly slower then CSS

CSS 3 animations:

  1. Can look slightly different on a browser or another
  2. Simple to use, very good for buttons or things that don’t move away
  3. Faster then JavaScript

Now that we know about the differences next time we will learn a bit about JavaScript animations.

Take care,
Gabi

Assign the same tests to the Zephyr suites after they are moved to another project

Hello,

We have received the task of copying a very big suite of tests from a project to another and maintain their test cycle assignment. For the copy and moving part is easy, there are bulk actions. For the automatic assignment we couldn’t find a quick solution, probably there was.

 

Here’s our approach:

1) On the Test Cycles page we extend a test cycle that has tests which will be moved. This is necessary in order to figure out which to move.

In the browser’s console we run this code (search for domain in the ajax call and replace with your own domain):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function($) {
    var cycleId = (function() {
            var el = $('li.expanded');
            return el.length &gt; 0 ? el.attr('id').replace("cycle-","") : false;
        })(),
        projectId = (function() {
            var el = $('#zprojectId');
            return el.length &gt; 0 ? el.attr('value') : false;
        })(),
        pageCount = (function() {
            var pageText = $('#getMoreSchedulesLbl').text(),
                count = pageText.match(/[0-9]{1,3}/g);
            return Math.ceil(count[count.length-1]/10);
        })(),
        i = 1,
        responses= [],
        offset,
        completed = 0;
    $('body').on('requestscompleted', function(){
        var len = responses.length,
            i = 0,
            summary = [],
            response;
        for(i; i &lt; len; i++) { // iterate through all received responses
            response = responses[i];
            console.log(response);
            (function(item){
                var i = 0,
                    schedules, len;
                if(typeof item != 'undefined') {
                    schedules = item.schedules,
                        len = schedules.length;
                    for(i; i &lt; len; i++) {
                        summary.push(schedules[i].summary);
                    }
                }
            })(response);
            console.log(summary);
        }
    });
    if(cycleId &amp;&amp; projectId) {
        for(i; i &lt;= pageCount; i++) {
            if(i == pageCount){
                lastPage = $('#getMoreSchedulesLbl').text().match(/[0-9]{1,3}/g);
                offset = (lastPage[lastPage.length-1] - ((i-1) * 10));
                console.log(offset);
            }else{
                offset = i * 10;
            }
            $.ajax('domain/rest/zephyr/latest/schedule?decorator=none&amp;contentOnly=true&amp;noTitle=true&amp;cycleId=' + cycleId + '&amp;action=expand&amp;offset=' + offset + "&amp;pid=" + projectId + "&amp;vid=-1&amp;sorter=ID", {
                method: "GET",
                async: false,
                complete: function(){
                    if(completed == pageCount -1) {
                        $('body').trigger('requestscompleted');
                    }
                    completed++;
                },
                success: function (response){
                    responses.push(response);
                }
            });
        }
    }
})(jQuery);

 

2) This returns an array of test names. Those names will be used as identifiers later on. Please copy them into another external document.

3) Copy or move the tests into the other project as desired

4) Open the tests search page on the new project and display as many as possible (the current functionality does not cycle through the pages)

5) Paste the following code and replace the first line with the array exported by the previous code:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var incomingTitles = ["[Event Validation] Frontend - Checkout flow", "[Event Validation] Frontend - Mobile site", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2", "test name 3", "test name 1", "test name 2"];

(function($,incomingTitles){
    var testSummary = (function(){
        var summaries = $('td.summary'),
            i=0,
            title="",
            currentItem = '',
            currentItemVal = '',
            keysHolder = new Array();
        summaries.each(function(){
            currentItem = $(this).find('a.issue-link').text();
            currentItemVal = $(this).find('a.issue-link').attr('data-issue-key');
            //console.log(currentItem);
            if(incomingTitles.indexOf(currentItem) != -1){
                keysHolder.push(currentItemVal);
            }
        });
        console.log(keysHolder);
        return keysHolder;
    })();
})(jQuery,incomingTitles)

This function will export an array of test IDs. Copy them in a document.

6) Open the “Plan Test Cycle” page and click the cogwheel to add tests

7) Paste the array of IDs returned by the second script

 

We have tried to use the filters functionality but we could not select only the tests assigned to a suite. It got even worse when the same tests were assigned to more widgets.

Thank you,

Gabi