Recommended unittest javascript method in Laravel 5

Question

Is there a recommended unittest javascript way in Laravel 5? I use the jQuery framework to complete the search autocomplete task (code below). There are many blocks that I want to test, but I'm not sure how best to test everything in Laravel 5. Any help is welcome.

<script type="text/javascript">
    (function($) {
        var autocomplete_timer;
        var ajax_request;
        var autocomplete_delay = 50;
        var search_keyword = "";
        var max_result_count = 5;
        var autocomplete_results = $('#autocomplete-results');
        var autocomplete_results_list;
        var default_report_url = '{{ route('report_summary_date_range_filter') }}';
        var selected_autocomplete_item_index = 0;
        var active_li = false;
        var autocomplete_error = $('#autocomplete-error');
        var redirect_state = false; //

        $(document).ready(function () {
            autocomplete_results_list = autocomplete_results.children('ul');

            // Search Autocomplete
            $("#search").keyup(function (e) {
                search_keyword = $(this).val();

                // If there is an existing XHR, abort it.
                if (ajax_request) {
                    ajax_request.abort()
                }

                // Enable list iteration via keyboard
                if (e.keyCode == 40 || e.keyCode == 38) {
                    ajax_request.abort();
                    var results_count = autocomplete_results_list.children('li').length;
                    if (e.keyCode == 40 && selected_autocomplete_item_index < results_count && active_li != false) {
                        selected_autocomplete_item_index++;
                    } else if (e.keyCode == 38 && selected_autocomplete_item_index > 0 && active_li != false) {
                        selected_autocomplete_item_index--;
                    }

                    active_li = autocomplete_results_list.children('li:eq(' + selected_autocomplete_item_index + ')');
                    if (active_li.length > 0) {
                        active_li.addClass('active');
                        autocomplete_results_list.children('li').not(active_li).removeClass('active');
                        $('#search').val(active_li.children('.autocomplete-ticker').text());
                    }

                    e.preventDefault();
                    return false;
                }

                // Clear the timer so we don't end up with dupes.
                clearTimeout(autocomplete_timer);

                // don't trigger ajax if user pressed enter/return key
                // while a redirect is triggered
                if (e.keyCode == 13 && redirect_state == true) {
                    return false;
                }

                if (search_keyword != '') {
                    // reset the index
                    selected_autocomplete_item_index = 0;
                    active_li = false;

                    // assign timer a new timeout
                    autocomplete_timer = setTimeout(function() {
                        ajax_request = $.ajax({
                            type: 'POST',
                            url: '/ajax/company/search/' + search_keyword,
                            data: {'_token': '{{ csrf_token() }}'},
                            success: function(response) {
                                if (response.count != 0) {
                                    autocomplete_results.show();
                                    autocomplete_results_list.empty();
                                    autocomplete_error.hide();

                                    var current_results = ((response.count > max_result_count) ? max_result_count : response.count);
                                    for (var index = 0; index < current_results; index++) {
                                        autocomplete_results_list.append(
                                                '<li>' +
                                                '<span class="autocomplete-ticker">' + response.results[index].ticker + '</span>' +
                                                '<span class="autocomplete-company">' + response.results[index].name + '</span>' +
                                                '</li>'
                                        );
                                    }
                                } else {
                                    autocomplete_results_list.empty();
                                    autocomplete_results.show();
                                    autocomplete_error.show();
                                }
                            }
                        });
                    }, autocomplete_delay);
                } else {
                    autocomplete_results.hide();
                    autocomplete_results_list.empty();
                }
            }).keydown(function (e) {
                // prevent moving cursor to start of input field
                // if the user presses the up arrow key
                if (e.keyCode == 38) {
                    e.preventDefault();
                }
            });

            // handle user clicking of an autocomplete item
            autocomplete_results_list.on('click', 'li', function () {
                var ticker = $(this).children('.autocomplete-ticker').text();
                $('#search').val(ticker);
                default_report_url = default_report_url.replace('%7Bticker%7D', ticker);

                // redirect
                $(location).attr('href', default_report_url);
                redirect_state = true;
            });

            // if the user presses the return key while an autocomplete list
            // is present, select the first item on the list and trigger a redirect
            $('#searchbar form').submit(function (e) {
                if ($('#search').val() != '') {
                    if (autocomplete_results_list.has('li').length > 0) {
                        autocomplete_results_list.children('li').first().addClass('active');
                        var ticker = autocomplete_results_list.children('li').first()
                                .children('.autocomplete-ticker').text().toUpperCase();

                        if (ticker != '') {
                            default_report_url = default_report_url.replace('%7Bticker%7D', ticker);
                            // redirect
                            $(location).attr('href', default_report_url);
                            redirect_state = true;
                        }
                    }
                }

                e.preventDefault();
            });
        });

        $(document).click(function (e) {

            // Hide autocomplete results if user clicked outside the search input field
            // or the autocomplete listing
            var container = $('#searchbar');
            if (!container.is(e.target) // if the target of the click isn't the container...
                    && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                $('#autocomplete-results').hide();
                $('#autocomplete-results ul').empty();
            }
        });

    })(jQuery);
</script>

Answer 1

Choosing Laravel (or any other external framework / language / platform) is completely irrelevant. This is pure interface code. Thus, for this you need to use front-end testing tools.

, , , , . , , . ; , .

, , QUnit. unit test, jQuery jQuery. jQuery , , , , . JavaScript , .

, ( JavaScript), , . , - - . (, , JS-). . Selenium, Sahi, PhantomJS.