What is the best way to conduct synchronous testing of animations in AngularJS version 1.3.15?

Encountering a migration issue with angular-animate.js while transitioning from version 1.2 to 1.3. Here is the animation code snippet:

'use strict';
angular.module('cookbook', ['ngAnimate'])
    .animation('.slide-down', function() {
        var NG_HIDE_CLASS = 'ng-hide';

        return {
            beforeAddClass: function(element, className, done) {
                alert('before add');
                if(className === NG_HIDE_CLASS) {
                    element.slideUp(done);
                }
            },
            removeClass: function(element, className, done) {
                if(className === NG_HIDE_CLASS) {
                    element.hide().slideDown(done);
                }
            }
        };
    });

Conducting Synchronous Testing:

'use strict';

describe('Investigating Animation Testing - ', function() {
    var scope;
    var element;
    var $animate;
    var $rootElement;

    beforeEach(module('cookbook', 'ngAnimateMock'));

    describe('Synchronous testing of animations', function() {

        var animatedShow = false;
        var animatedHide = false;

        beforeEach(module(function($animateProvider) {
            $animateProvider.register('.slide-down', function() {
                return {
                    beforeAddClass: function(element, className, done) {
                        debugger;alert(1);
                        animatedHide = true;
                        done();
                    },
                    removeClass: function(element, className, done) {
                        animatedShow = true;
                        done();
                    }
                };
            });
        }));

        beforeEach(inject(function($injector) {
            scope = $injector.get('$rootScope').$new();
            $rootElement = $injector.get('$rootElement');
        }));

        beforeEach(inject(function($compile) {
            element = angular.element('<div class="slide-down" ng-show="hint"></div>');
            $compile(element)(scope);
            scope.$digest();
            $rootElement.append(element);
        }));

        it('should animate to show', function() {
            scope.hint = true;
            scope.$digest();
            expect(animatedShow).toBeTruthy();
        });

        it('should animate to hide', function() {
            scope.hint = true;
            scope.$digest();
            scope.hint = false;
            scope.$digest();
            expect(animatedHide).toBeTruthy();
        });

    });
});

Spec Runner:

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Angular Spec Runner</title>

    <link rel="shortcut icon" type="image/png" href="../../lib/jasmine-2.0.0/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="../../lib/jasmine-2.0.0/jasmine.css">

    <script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine.js"></script>
    <script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine-html.js"></script>
    <script type="text/javascript" src="../../lib/jasmine-2.0.0/boot.js"</script>

    <script type="text/javascript" src="../../lib/angular-1.2.28_/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-route.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-ui-router.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.3.15/angular-mocks.js"></script>
    <script type="text/javascript" src="../../lib/angular-1.2.28_/angular-animate.js"></script>

    <!--DOESN'T WORK WITH 1.3.15-->
    <!--<script type="text/javascript" src="../../lib/angular-1.3.15/angular-animate.js"></script>-->


    <!-- include source files here... -->
    <script type="text/javascript" src="../src/cookbook.js"></script>
    <link rel="stylesheet" href="../src/styles.css">

    <!-- include spec files here... -->
    <script type="text/javascript" src="cookbookSpec.js"></script>

</head>

<body>
</body>

</html>

After switching to angular-animate 1.3.15, the tests began to fail. Investigating the differences between the two versions. Any help would be appreciated. Thank you.

Answer №1

When I was attempting to implement the test, I encountered some challenges:

  • I found that I could only use addClass and removeClass from $animate to add or remove the ng-hide class. Using "ng-show" directly did not work. I noticed that the method "removeClass" from the animation object was never called; instead, the methods "beforeAddClass" and "beforeRemoveClass" were executed. This led me to make some changes. Upon researching this issue, I came across a related problem discussed here: $animate.removeClass() doesn't work if addClass animation incomplete.
  • I also had to use $rootScope instead of $scope, although I was not clear on the reasons behind this decision.

After further exploration, I came across this comment on a related issue. It appears there are some bugs related to animations, and the comment suggests using different versions of angular and angular-animate due to "a few bugfixes for animate in the pipeline". Taking this advice, I tried updating to newer versions (v1.4.0-build.4010+sha.213c2a7) and saw improvements in the functionality. Now, the ng-show directive works as intended. However, I still encountered issues with scope and only observed beforeAddClass and beforeRemoveClass being called...

I'm not recommending an upgrade, especially since v1.4.0 has not been officially released. I simply wanted to highlight the existing issues and bugs in this area. Below is the code snippet (using the suggested versions v1.4.0-build.4010):

describe('animate', function() {
  //... code continuation

I also concur that this test may not accurately reflect the animation code behavior, suggesting that an e2e test might provide a more comprehensive evaluation.

For comparison, here is the code using angular and angular-animate v1.3.15, and directly using addClass and removeClass:

//...remaining code segment

I hope this information proves useful. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transferring a value from a Next.js route to a physical component

So, I encountered some issues while creating a Next.js project related to the database. To solve this problem, I connected to Vercel's hosted database. After successfully inserting and selecting data into the database using routes, I wanted to enhance ...

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

Snippet: function sampleFunction(sample:string|number|string[]) { if(typeof sample == "string") { console.log("Sample is String " + sample); } else if(typeof sample == "number") { console.log("Sample is Number " + sampl ...

Determine the location based on the preceding parameter of $routeChangeError using AngularJS

I am currently monitoring events of the type $routeChangeError within a run block in my application. $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { if (!!previous) { console.log(previous); $locati ...

Utilizing JavaScript Plugin to Fix Image Source URLs in Incorrect Directories

I'm struggling and really in need of some assistance. The issue I'm facing is with a plugin that has a JavaScript file containing an array of URLs pointing to a "texture" directory within the plugin for images. However, I keep encountering 404 e ...

Which is more efficient for rendering performance: using images, CSS gradients, or box shadows with borders?

I'm curious about improving website scroll and animation performance. Which option would be better for your mobile webapp or website: Using a repeating thin image or CSS3 gradient? or Utilizing a repeating image instead of box shadow with a borde ...

Executing a sequence of jQuery's $.when().then() functions

I am facing challenges in understanding how to properly sequence my functions, especially in relation to the $.when() method. function y() { defer = $.Deferred(); $.when(defer).then(console.log(defer.state())); } y(); <script src="https://ajax.go ...

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

Developing a new class within a function

In this section of the HTML file, I have set up a form to collect email and password information from new users in order to create a new profile: <form name="userInfo"> <fieldset> <legend>Create a new account</legend> ...

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

The Dropzone feature fails to function properly when displayed on a modal window that is being shown via

After attempting to integrate Dropzone and JavaScript into a Bootstrap Modal called through AJAX, I encountered issues. Due to the high number of records, I avoided placing the Modal in a foreach loop and instead used AJAX to call a controller method upon ...

Reset the form upon submission in AngularJS

Hey, I'm looking to reset the form values after a successful submission. How can I achieve this? <div ng-controller="employeelistController as listControl"> <div class="container form-group" ng-controller="addEmployee as addemp"> ...

The NodeJS module 'request' is producing symbols instead of expected HTML content

Currently, I am delving into the world of Nodejs and experimenting with web scraping using node.js. My tools of choice are the node modules request and cheerio. However, when I attempt to request a URL, instead of receiving the HTML body, I get strange s ...

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

Creating a replicated Dropdown menu with Jquery and inserting it into a changing Div

I currently have a dropdown list on my page with the ID of "mainDDL" and some pre-existing data. Now, I am looking to duplicate this dropdown list and add it to another specific div element. To accomplish this, I used the following code snippet: var dd ...

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin. I comprehend that to generate an index.html file within my dist directory, the following configurations ...

The incorrect value of variable V is being passed to the doSomethingWithData(v) function. This could lead to unexpected results

const Greetings = () => { const [num, setNum] = React.useState(1); React.useEffect(() => { setTimeout(async () => { await setNum(2); processData(num) }, 3000) }, []); retur ...

Automated pagination integrated with automatic refreshing of div every few seconds

I am currently working on setting up a datatable and I need it to be displayed on the monitor in such a way that it can refresh the div and automatically paginate to the next page. However, whenever the div is refreshed, the auto-pagination gets cancelle ...

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered ...

Checking the image loading functionality with Cypress

I am interested in testing Cypress to verify that an image is successfully loaded onto a page. Here is a snippet of my source code: import React from "react"; export default class Product extends React.Component { render() { return ( <div ...