edx-platform/xmodule/js/spec/capa/imageinput_spec.js

/**
 * "Beware of bugs in the above code; I have only proved it correct, not tried
 * it."
 *
 * ~ Donald Knuth
 */

// eslint-disable-next-line no-shadow-restricted-names
(function($, ImageInput, undefined) {
    describe('ImageInput', function() {
        var state;

        beforeEach(function() {
            var $el;

            loadFixtures('imageinput.html');
            $el = $('#imageinput_12345');

            $el.append(createTestImage('cross_12345', 300, 400, 'red'));

            state = new ImageInput('12345');
        });

        it('initialization', function() {
            // Check that object's properties are present, and that the DOM
            // elements they reference exist.
            expect(state.el).toBeDefined();
            expect(state.el).toExist();

            expect(state.crossEl).toBeDefined();
            expect(state.crossEl).toExist();

            expect(state.inputEl).toBeDefined();
            expect(state.inputEl).toExist();

            expect(state.el).toHandle('click');
        });

        it('cross becomes visible after first click', function() {
            expect(state.crossEl.css('visibility')).toBe('hidden');

            state.el.click();

            expect(state.crossEl.css('visibility')).toBe('visible');
        });

        it('coordinates are updated [offsetX is set]', function() {
            var event, posX, posY, cssLeft, cssTop;

            // Set up of 'click' event.
            event = jQuery.Event(
                'click',
                {offsetX: 35.3, offsetY: 42.7}
            );

            // Calculating the expected coordinates.
            posX = event.offsetX;
            posY = event.offsetY;

            // Triggering 'click' event.
            jQuery(state.el).trigger(event);

            // Getting actual (new) coordinates, and testing them against the
            // expected.
            cssLeft = stripPx(state.crossEl.css('left'));
            cssTop = stripPx(state.crossEl.css('top'));

            expect(cssLeft).toBeCloseTo(posX - 15, 1);
            expect(cssTop).toBeCloseTo(posY - 15, 1);
            expect(state.inputEl.val()).toBe(
                '[' + Math.round(posX) + ',' + Math.round(posY) + ']'
            );
        });

        it('coordinates are updated [offsetX is NOT set]', function() {
            var offset = state.el.offset(),
                event, posX, posY, cssLeft, cssTop;

            // Set up of 'click' event.
            event = jQuery.Event(
                'click',
                {
                    offsetX: undefined,
                    offsetY: undefined,
                    pageX: 35.3,
                    pageY: 42.7
                }
            );

            // Calculating the expected coordinates.
            posX = event.pageX - offset.left;
            posY = event.pageY - offset.top;

            // Triggering 'click' event.
            jQuery(state.el).trigger(event);

            // Getting actual (new) coordinates, and testing them against the
            // expected.
            cssLeft = stripPx(state.crossEl.css('left'));
            cssTop = stripPx(state.crossEl.css('top'));

            expect(cssLeft).toBeCloseTo(posX - 15, 1);
            expect(cssTop).toBeCloseTo(posY - 15, 1);
            expect(state.inputEl.val()).toBe(
                '[' + Math.round(posX) + ',' + Math.round(posY) + ']'
            );
        });
    });

    // Instead of storing an image, and then including it in the template via
    // the <img /> tag, we will generate one on the fly.
    //
    // Create a simple image from a canvas. The canvas is filled by a colored
    // rectangle.
    function createTestImage(id, width, height, fillStyle) {
        var canvas, ctx, img;

        canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        ctx = canvas.getContext('2d');
        ctx.fillStyle = fillStyle;
        ctx.fillRect(0, 0, width, height);

        img = document.createElement('img');
        img.src = canvas.toDataURL('image/png');
        img.id = id;

        return img;
    }

    // Strip the trailing 'px' substring from a CSS string containing the
    // `left` and `top` properties of an element's style.
    function stripPx(str) {
        return str.substring(0, str.length - 2);
    }
}).call(this, window.jQuery, window.ImageInput);