SegmentSelectorEditor_spec.js

/*!
 * Piwik - free/libre analytics platform
 * 
 * ViewDataTable screenshot tests.
 *
 * @link http://piwik.org
 * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

describe("SegmentSelectorEditorTest", function () {
    var selectorsToCapture = ".segmentEditorPanel,.segmentEditorPanel .dropdown-body,.segment-element";
    
    this.timeout(0);

    var generalParams = 'idSite=1&period=year&date=2012-08-09';
    var url = '?module=CoreHome&action=index&' + generalParams + '#?' + generalParams + '&category=General_Actions&subcategory=General_Pages';

    function selectFieldValue(page, fieldName, textToSelect)
    {
        page.execCallback(function () {
            page.webpage.evaluate(function(fieldName) {
                $(fieldName + ' input.select-dropdown').click();
            }, fieldName);
        });
        page.execCallback(function () {
            page.webpage.evaluate(function(fieldName, textToSelect) {
                $(fieldName + ' .dropdown-content.active li:contains("' + textToSelect + '"):first').click();
            }, fieldName, textToSelect);
        });
    }

    function selectDimension(page, prefixSelector, category, name)
    {
        page.click(prefixSelector + ' .metricListBlock .select-wrapper');
        page.click(prefixSelector + ' .metricListBlock .expandableList h4:contains(' + category + ')');
        page.click(prefixSelector + ' .metricListBlock .expandableList .secondLevel li:contains(' + name + ')');
    }

    it("should load correctly", function (done) {
        expect.screenshot("0_initial").to.be.captureSelector(selectorsToCapture, function (page) {
            page.load(url);
        }, done);
    });

    it("should open selector when control clicked", function (done) {
        expect.screenshot("1_selector_open").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentationContainer .title');
        }, done);
    });

    it("should open segment editor when edit link clicked for existing segment", function (done) {
        expect.screenshot("2_segment_editor_update").to.be.captureSelector(selectorsToCapture, function (page) {
            page.evaluate(function() {
                $('.segmentList .editSegment:first').click()
            }, 200);
        }, done);
    });

    it("should start editing segment name when segment name edit link clicked", function (done) {
        expect.screenshot("3_segment_editor_edit_name").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentEditorPanel .editSegmentName');
        }, done);
    });

    it("should show the egment editor's available segments dropdown", function (done) {
        expect.screenshot("6_segment_editor_droplist").to.be.captureSelector(selectorsToCapture, function (page) {
            page.mouseMove('.available_segments a.dropList');
            page.click('.available_segments a.dropList');
        }, done);
    });

    it("should change segment when another available segment clicked in segment editor's available segments dropdown", function (done) {
        expect.screenshot("6_segment_editor_different").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.ui-menu-item a:contains(Add new segment)');
        }, done);
    });

    it("should close the segment editor when the close link is clicked", function (done) {
        expect.screenshot("7_segment_editor_closed").to.be.captureSelector(selectorsToCapture, function (page) {
            page.evaluate(function () {
                $('.segmentEditorPanel .segment-footer .close').click();
            });
        }, done);
    });

    it("should open blank segment editor when create new segment link is clicked", function (done) {
        expect.screenshot("8_segment_editor_create").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentationContainer .title');
            page.click('.add_new_segment');
        }, done);
    });

    it("should update segment expression when selecting different segment", function (done) {
        expect.screenshot("dimension_drag_drop").to.be.captureSelector(selectorsToCapture, function (page) {
            selectDimension(page, '.segmentRow0', 'Actions', 'Action URL');
        }, done);
    });

    // phantomjs won't take screenshots of dropdown windows, so skip this test
    it.skip("should show suggested segment values when a segment value input is focused", function (done) {
        expect.screenshot("suggested_values").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentEditorPanel .ui-autocomplete-input');
        }, done);
    });

    it("should add an OR condition when clicking on add OR", function (done) {
        expect.screenshot("add_new_or_condition").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentEditorPanel .segment-add-or');
        }, done);
    });

    it("should add an OR condition when a segment dimension is selected in the OR placeholder section", function (done) {
        expect.screenshot("drag_or_condition").to.be.captureSelector(selectorsToCapture, function (page) {
            selectDimension(page, '.segmentRow0 .segment-row:last', 'Actions', 'Clicked URL');
        }, done);
    });

    it("should add an AND condition when clicking on add AND", function (done) {
        expect.screenshot("add_new_and_condition").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentEditorPanel .segment-add-row');
        }, done);
    });

    it("should add an AND condition when a segment dimension is dragged to the AND placeholder section", function (done) {
        expect.screenshot("drag_and_condition").to.be.captureSelector(selectorsToCapture, function (page) {
            selectDimension(page, '.segmentRow1', 'Actions', 'Clicked URL');
        }, done);
    });

    it("should save a new segment and add it to the segment list when the form is filled out and the save button is clicked", function (done) {
        expect.screenshot("saved").to.be.captureSelector(selectorsToCapture, function (page) {
            page.evaluate(function () {
                $('.metricValueBlock input').each(function (index) {
                    $(this).val('value ' + index).change();
                });
            });

            page.sendKeys('input.edit_segment_name', 'new segment');
            page.click('.segmentRow0 .segment-or'); // click somewhere else to save new name

            page.evaluate(function () {
                $('button.saveAndApply').click();
            });

            page.click('.segmentationContainer');
        }, done);
    });

    it("should show the new segment after page reload", function (done) {
        expect.screenshot("saved").to.be.captureSelector("saved_reload", selectorsToCapture, function (page) {
            page.reload();
            page.click('.segmentationContainer .title');
        }, done);
    });

    it("should correctly load the new segment's details when the new segment is edited", function (done) {
        expect.screenshot("saved_details").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentList li[data-idsegment=4] .editSegment');
        }, done);
    });

    it("should correctly should show a confirmation when changing segment definition", function (done) {
        expect.screenshot("update_confirmation").to.be.captureSelector('.modal.open', function (page) {
            page.click('.segmentEditorPanel .editSegmentName');
            page.evaluate(function () {
                $('input.edit_segment_name').val('').change();
            });
            page.sendKeys('input.edit_segment_name', 'edited segment');
            page.click('.segmentRow0 .segment-or:first'); // click somewhere else to save new name

            selectFieldValue(page, '.segmentRow0 .segment-row:first .metricMatchBlock', 'Is not');
            selectFieldValue(page, '.segmentRow0 .segment-row:last .metricMatchBlock', 'Is not');
            selectFieldValue(page, '.segmentRow1 .segment-row .metricMatchBlock', 'Is not');

            page.evaluate(function () {
                $('.metricValueBlock input').each(function (index) {
                    $(this).val('new value ' + index).change();
                });
            });

            page.evaluate(function () {
                $('button.saveAndApply').click();
            });
        }, done);
    });

    it("should correctly update the segment when saving confirmed", function (done) {
        expect.screenshot("updated").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.modal.open .modal-footer a:contains(Yes):visible');
            page.click('.segmentationContainer');
        }, done);
    });

    it("should show the updated segment after page reload", function (done) {
        expect.screenshot("updated_reload").to.be.captureSelector("updated_reload", selectorsToCapture, function (page) {
            page.reload();
            page.click('.segmentationContainer .title');
        }, done);
    });

    it("should correctly load the updated segment's details when the updated segment is edited", function (done) {
        expect.screenshot("updated_details").to.be.captureSelector(selectorsToCapture, function (page) {
            page.click('.segmentList li[data-idsegment=4] .editSegment');
        }, done);
    });

    it("should correctly show delete dialog when the delete link is clicked", function (done) {
        expect.screenshot('deleted_dialog').to.be.captureSelector('.modal.open', function (page) {
            page.evaluate(function () {
                $('.segmentEditorPanel a.delete').click();
            });
        }, done);
    });

    it("should correctly remove the segment when the delete dialog is confirmed", function (done) {
        expect.screenshot('deleted').to.be.captureSelector(selectorsToCapture + ',.modal.open', function (page) {
            page.click('.modal.open .modal-footer a:contains(Yes):visible');

            page.click('.segmentationContainer .title');
        }, done);
    });

    it("should not show the deleted segment after page reload", function (done) {
        expect.screenshot('deleted').to.be.captureSelector('deleted_reload', selectorsToCapture, function (page) {
            page.reload();
            page.click('.segmentationContainer .title');
        }, done);
    });
});