Setup test framework infrastructure

[melenaos]

I want to write some tests for the plugin functions but I haven't implemented any test environment. It needs a testing framework to work with GULP.

[bl2i4n]

I will try diving into this. What plugin functions need tests?

[melenaos]

Can we test DOM elements? If we can then there are few tests that I can think. We need a simple run of the plugin that we test the output. the input should be the data that has the following form: [ [3, 0, 0, 1, 0, 0, 5, 5, 1, 2, 5, 0], [0, 0, 0, 0, 40, 35, 40, 0, 0, 1, 2, 1, 5], [0, 10, 0, 20, 0, 30, 0, 40, 0, 50, 0, 60], [3, 10], [0, 0, 0, 0, 8, 0, 0, 8, 0, 0, 10, 0, 0, 10, 0, 10], [], [0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 0, 0, 1] ]

Then we can validate the following facts:

• If a day has only zeros and a value (e.g [0,5,5,0,0,0,5,0]) then it must have bubbles that has class='size-10' only. The plugin reads every value in the day and set the maximum size-val at the maximum value, so if every item has the same value it must set the maximum size-val to every item.
• Every day must has 24 items, it must discard every other item in the day. Create a day with 25 items and the plugin must render only 24.
• The available bubble size are from 1 to 10 (size-1..size-10) to get all these bubbles in a day we need item values from 1 to 10. Create a day with 10 items from 1 to 10 and check if all available sizes exists in the bubbles.
• The plugin is configured to run will less days and less hours, now it has 7 days and 24 hours but it can run with any combination of days and hours. This haven't been tested but it would be great if there is a test to test this.

I can describe more tests if you want

[Chima1707]

It would be nice to work on this @melenaos can I setup the test or wait for @bl2i4n to be done with it.

[melenaos]

@Chima1707 You have to wait @bl2i4n to tell us if he needs help on this

[Chima1707]

Ok, @melenaos Looking at the codebase https://github.com/melenaos/jquery-punchcard/blob/master/src/punchcard.js, there are some things I would like to explain to you that might make testing the codebase harder. If you are open to ideas i don't mind sharing them with you. Should i go on here or you prefer a one on one chat via skype?

[melenaos]

Share your recommendations here so we can get more opinions on this

[Chima1707]

I think we should follow an approach where function is standalone. so that such function can be exported and tested separately in isolation. Like calcSize https://github.com/melenaos/jquery-punchcard/blob/master/src/punchcard.js#L84, it could be written in a more functional way where it takes settings and return size array. In that way we can test it outputs with different inputs in isolation. What do you think? We can start improving on the codebase incrementally

[melenaos]

@Chima1707 This sound logical to me, i have little experience of Js projects, should we implement them in a namespace or something? Can you handle this refactoring? Export the functions into a separate entity (namespace?) and wire up the functions to the main plugin.

[bl2i4n]

@Chima1707 I don't mind collaborating with you on this refactor to ease the testing. Definitely agree that we should export some functions/methods and turn them into functions/modules that could be tested independently.

@melenaos As for testing DOM elements I did do a little research and there is a way to create a virtual DOM to test elements using the Jasmine framework.

We should start refactoring before diving into writing tests.

I'll be looking more into this tonight.

[Chima1707]

Sure will like to the the refactor, when do we start?

[melenaos]

Let's skip the DOM testing. Too much hustle for a small benefit. If we test every function we won't leaving too much untested

[melenaos]

We are ready to start, we expect a small change where the data originate but it won't affect us.

@Chima1707 Refactror all functions so they can be tested individually. How you will group these functions? Put them into a namespace its sufficient or if you have something else to propose.

@bl2i4n Setup the testing framework and when you have everything ready we can split the test cases.

[Chima1707]

Ok, will just name space them, that is enough. @melenaos Will work on this this weekend

[bl2i4n]

Planning on using jasmine framework for testing. Will finish the setup of the framework tomorrow.

[melenaos]

Jasmine seems a good choice

[bl2i4n]

I'll be working adding the tests mentioned above this week @melenaos.

• Testing the input data
• validating the facts also mentioned above

[melenaos]

Excelent! thank you

[bl2i4n]

@melenaos Is the plugin run through the example.html file or through index.html?

Do you have some time to show me the usage of the plugin? I think it will help with writing the tests.

[melenaos]

@bl2i4n The plugin runs though both file but example.html is easier for developing since it links the src files.
The plugin data are a two dimentional array[7][24] that represent the days of the week and the time of day. You can see an example at example.html file.

The plugin logic is behind the render function.

• applyTimezone shifts the data to match the needed timezone. local or any other timezone set at settings
• calcSize creates a copy of the input data but it normalize the data from 1-10 so it can be displayed using the css classes size1-size10.
• buildHtml creates the html for displaying the punchcard.

I hope it helps otherwise please let me know to provide an extensive description of the plugin.

[bl2i4n]

Ran into an hiccup trying to create tests for the punchcard.js file. Since I used the jasmine node package there isn't a way to link the example.html or src files. I've tried export modules to the test spec but i'm running into an issue with the jQuery plugin file being an IIFE. I thought the jasmine node package would be easier for users to start writing tests but that is proving to be difficult.

Might have to resort to using the standalone jasmine files, I will try that method and report back.

If you guys have any other suggestions I an open to them.

[bl2i4n]

@melenaos I was able to add jasmine-jquery to test jquery in the example.html file but I'm running into this issue. If you could take a look or if anyone would like to assist with this issue I do not mind.

😭 definitely need some help with adding a test framework.

[melenaos]

@bl2i4n I am not sure what is the problem, can you guide me through to get a hands on with the problem?

[bl2i4n]

Essentially I am trying to use the jasmine-jquery extension to test the jquery that you have in the example.html file.

This portion:

<script>
        $(document).ready(function () {
            $('#punchcardExample').punchcard({
                data: [
                    [3, 0, 0, 1, 0, 0, 5, 5, 1, 2, 5, 0],
                    [0, 0, 0, 0, 40, 35, 40, 0, 0, 1, 2, 1, 5],
                    [0, 10, 0, 20, 0, 30, 0, 40, 0, 50, 0, 60],
                    [3, 10],
                    [0, 0, 0, 0, 8, 0, 0, 8, 0, 0, 10, 0, 0, 10, 0, 10],
                    [],
                    [0, 0, 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
                ]
            });
        });

</script>

readFixtures, setFixtures, and loadFixtures assist in testing jQuery as the above html gets loaded into the DOM. I am unable to use fixtures because I receive the error that fixtures are not defined. But the jasmine-jquery.js file is in the application directory and is included in both example.html and index.html. So I'm unsure how to use these fixtures to test the jquery above.

This is my attempt in PunchcardSpec.js to use the fixtures to test the example.html file.

describe("testing fixtures", function(){
  it("tests three crucial functions", function(){
    expect(readFixtures).toBeDefined();
    expect(setFixtures).toBeDefined();
    expect(loadFixtures).toBeDefined();
  })
})

describe("testing example.html", function(){
  var fixture;
  beforeEach(function(){
    loadFixtures('example.html');
    fixture = $('#testExample');
    fixture.testExample();
  })

  it('punchcard should be defined', function(){
    expect(fixture).toBeDefined();
  })

});

I've also asked for assistance on SO, but I have not heard a response back. https://stackoverflow.com/questions/47008264/how-do-you-use-fixtures-in-jasmine-jquery

Let me know if you have anymore questions or if I can guide you through my attempt.

[melenaos]

I cloned your repo but it seems that you have two local branches that you haven't pushed to the live. I seems to have problem getting these branches to start looking at the problem. Can you confirm that these two are both pushed to server?

[bl2i4n]

Just pushed to github. Let me know if there is anything else I can do to help.