Testing Fullcalendar example

This page is about Testing Automation of FullCalendar jQuery plugin example.The Fullcalendar uses very rich ui. Therefore by learning this content, you can understand the technique to handle such an application with the Selenium and Junit.

Fullcalendar

In order to understand what test, please take a look at FullCalendar jQuery plugin before reading this page.

About test cases

In these test cases, we do following tests.

  • Making event in Monthly, Weekly agenda, Dayly agenda view
  • Update event
  • Dragging the event and change the start date
  • Dragging the handler of the event to change the period in the Monthly view
  • Dragging the handler of the event to change the period in the Weekly view

They are a part of the test case to make enough coverage, but by learning them, you can write testing code to check other test cases easily.

The evidense screen shot is stored at location below.

/[Project]/screenshots/calendar

screenshot of fullcalendar's test

Those screenshots a taken by Selenium program using taking screenshot technique.

Location of the source code

The source code to test this is in "org.alinous.test.html5.components.fullcalendar" package.

testing codes

In this folder,

  • Source code of test cases
  • Source code of test suite to specify the order to execute test cases
  • Test data csv files

is there.

Execute test suite

In order to specify the order of execution, it uses test suite.

Test suite

In this case, the test suite, whose name is "FullCalendarTestAll", includes 2 test classes. The source code is below.

This test case executes ones in the "FullCalendarTest1", next does ones in the "FullCalendarTest2".

The fisrt test cases make data, and the next test case use the data.

Initialize WebDriver of the Selenium and Database

In this case, it uses 2 Test classes, those are "FullCalendarTest1" and "FullCalendarTest2". The "FullCalendarTest1" is correction of test cases to make database's data which has events. And the "FullCalendarTest2" is one to use them.

Before the first test cases

In the first test class, initialize the WebDriver of the Selenium, make the download folder clear, and set up the database record into the original status.

The original database status is sotred in the "doc/data/backuporiginal.zip".

After the first test cases

After the test cases done, backup the current database status into the csv file.

This csv file is used in the next test class.

Before the second test cases

In the secand test class, it does operations below.

Making allday events

Making an allday eventsin the monthly view. At first, go to the month of the event, and click the date to add the event.

add allday event into the calendar

Then the dialog to input event information. Input the information and push "New event" button. After that, an event is added.

The csv file has several event data, so iterate this operation for same times with the csv records.

Source code of the test case

This test case loads the csv file including data of allday events, and input them by using monthly view of the Fullcalendar.

This function uses "" to input event data automatically. The source code is below.

This function does operations below.

  • Go to the month of the event
  • Click the calendar, show dialog and input data

The source code to go to the month of the event is below.

In this source code, parse the header to know when the view show, and go to next or previous month while the month is of event.

After that, click the date of the month when the event is. Then a dialog to input indormation about the event appears. Input data about the event in the dialog and push the "New event" button.

The source code is below.

Making time event on the weekly agenda view

This test case add time event into this calendar. Change the view into the Weekly agenda, and go to the week of the event, and click the date and time of it. Then dialog to add event appears.

Weekly agenda view of Fullcalendar

Input the event information and push "New event" button. The csv file has several event data, so iterate this operation for same times with the csv records.

Source code of the test case

This test case also loads time events data from csv. And register the data with "addTimeEventByWeekly()" function.

The source code of "addTimeEventByWeekly()" function is below.

This function register a time event. In order to register time event, operations below is to be done.

  • Go to the week of the event
  • Click the weekly calendar, show dialog and input data

At first, I'll show you the source code of the first operation, which is to go to the week.

This source code is to parse the weekly agenda view's html dom and check the current data. And if the week does not contain the data of the event, go to previous or next week. Continue that while the week contains the date.

Updating event information

This test case is to update registered event and check the event is updated correctly.

Source code of the test case

This test case is to click the added event and update the event information via dialog, which appears when you click the event.

The source code is below.

In this source code, get the event information from the server, update the event by "setValues()" function, and check it after updated it with the server side data.

Dragging event in the monthly view

In this test case, drag the event in the monthly view and change the start date of the event. After that, check the database is updated.

dragging event on the monthly view

Source code of the test case

This test case is to get event information loaded from csv file, show the event on the monthly view and drag it.After that check the server side data is updated correctly.

The source code is below.

The "dragEvent" function drag the event. The source code is below.

This source code uses pause between the each actions, those are clickAndHold and moveToElement. This pause is necessary to work this test automation demo correctly.

Dragging event in the weekly agenda view

In this test case, drag the event in the weekly agenda view and change the end time of the event.

Time event

The time events on the weekly agenda view has handle to drag. By dragging this with mouse, you can change the endtiome.

After that check the database is updated.

Source code of the test case

This test case is to change the end time of the event in the weekly agenda view.

In this source code, it does operations below.

  • Get registered event from serverside
  • Change view into weekly agenda view
  • Go to the week which includes the event date
  • Drag the end of the event to change the period
  • Check the event updated correctly by getting data from server side test program

The source code to change the view into the weekly agenda view is below.

In this function, just click the button to change the vew into weekly agenda. After that, goto the week including the event date. The source code is below.

This source code is a littile bit long. But what it does is just parse the header and detect the period this week has, and if this week does not contain the event date, go to previous or next week.

After go to the event's week, drag the handle to change the end time of the event at the bottom of the event widget. The source code is below.

In this source code, it does below.

  • Get handle to drag
  • Get one of the time cell and get width
  • Caluculate the pixels to drag
  • Drag the event's handle

And in order to work this dragging action correctly, it has to do pause between the each actions like clickAndHold, moveByOffset.


Go to Top