Redmine

  gem 'importmap_mocha-rails'

    if Rails.env.local?

      config.importmap_mocha_style = 'tdd'

    end

/**

 * Redmine - project management software

 * Copyright (C) 2006-  Jean-Philippe Lang

 * This code is released under the GNU General Public License.

 */

import { Application } from "@hotwired/stimulus"

import DialogController from 'controllers/dialog_controller'

import { assert } from 'chai'

const html = `

  <div data-controller="dialog" id="dialog">

    <div data-action="pointerdown->dialog#start pointerup->dialog#end pointercancel->dialog#end  pointermove->dialog#move touchstart->dialog#noop dragstart->dialog#noop" data-dialog-target="handler" id="handler">Drag Here</div>

    <div id="hide">Close</div>

  </div>

  <div id="wrapper"></div>

  <div id="modal-backdrop"></div>`

suite('dialog controller', () => {

  let container;

  let controller;

  setup(async () => {

    container = document.getElementById('container')

    const app = Application.start(container);

    await app.register('dialog', DialogController);

    container.insertAdjacentHTML('afterbegin', html)

  });

  teardown(() => {

    const clone = container.cloneNode(false);

    container.parentNode.replaceChild(clone, container);

  });

  test('connect lifecycle method', () => {

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    assert.isNotNull(controller);

    assert.isNull(controller.dragging);

    assert.isNull(controller.backdrop);

  });

  test('start dragging', async () => {

    const handler = document.getElementById('handler');

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    const event = new PointerEvent('pointerdown', { button: 0, clientX: 100, clientY: 100 });

    await handler.dispatchEvent(event);

    assert.isNotNull(controller.dragging);

    assert.isDefined(controller.dragging.dx);

    assert.isDefined(controller.dragging.dy);

    assert.isTrue(handler.classList.contains("dragging"));

  })

  test('move dialog', async () => {

    const handler = document.getElementById('handler');

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    let event = new PointerEvent('pointerdown', { button: 0, clientX: 100, clientY: 100 });

    await handler.dispatchEvent(event);

    event = new PointerEvent("pointermove", { clientX: 150, clientY: 150 });

    await handler.dispatchEvent(event);

    const pos = controller.pos;

    assert.isDefined(pos.x);

    assert.isDefined(pos.y);

    assert.notEqual(pos.x, 0);

    assert.notEqual(pos.y, 0);

  })

  test('end dragging', async () => {

    const handler = document.getElementById('handler');

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    let event = new PointerEvent('pointerdown', { button: 0, clientX: 100, clientY: 100 });

    await handler.dispatchEvent(event);

    event = new PointerEvent("pointerup");

    await handler.dispatchEvent(event);

    assert.isNull(controller.dragging);

    assert.isFalse(handler.classList.contains("dragging"));

  });

  test('show dialog', async () => {

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    controller.show({ width: "500px", backdrop: "modal-backdrop" });

    const backdrop = document.getElementById("modal-backdrop");

    assert.equal(dialog.style.display, "");

    assert.equal(dialog.style.width, "500px");

    assert.isTrue(backdrop.classList.contains("modal-backdrop-open"));

  })

  test('hide dialog', () => {

    const dialog = document.getElementById('dialog');

    controller = dialog.dialog_controller;

    controller.show({ backdrop: "modal-backdrop" });

    controller.hide();

    const backdrop = document.getElementById("modal-backdrop");

    assert.equal(dialog.style.display, 'none');

    assert.isFalse(backdrop.classList.contains('modal-backdrop-open'));

  })

})

/**

 * Redmine - project management software

 * Copyright (C) 2006-  Jean-Philippe Lang

 * This code is released under the GNU General Public License.

 */

import { Application } from "@hotwired/stimulus"

import DialogDispatcherController from 'controllers/dialog_dispatcher_controller'

import DialogController from 'controllers/dialog_controller'

import { assert } from 'chai'

const html = `<div id="dialog" data-controller="dialog" style="display:none">

                <button data-action="dialog#hide">close</button>

              </div>

              <div id="dispatcher" data-controller="dialog-dispatcher" data-dialog-dispatcher-dialog-outlet="#dialog">

                <button id="button" data-action="dialog-dispatcher#show" data-dialog-dispatcher-width-param="500px">Show Dialog</button>

              </div>

              <div id="wrapper"></div>

              <div id="modal-backdrop"></div>`;

suite('DialogDispatcherController', () => {

  let container;

  setup(async () => {

    container = document.getElementById('container')

    const app = Application.start(container);

    await app.register('dialog-dispatcher', DialogDispatcherController);

    await app.register('dialog', DialogController);

    container.insertAdjacentHTML('afterbegin', html)

  });

  teardown(() => {

    const clone = container.cloneNode(false);

    container.parentNode.replaceChild(clone, container);

  });

  test('show the dialog with the specified width', () => {

    const button = document.getElementById('button')

    button.click();

    const dialog = document.getElementById('dialog')

    assert.equal(dialog.style.width, '500px');

    assert.equal(dialog.style.display, '');

  });

  test('show the dialog when show target is connected', async () => {

    const html = `<div id="remote-dialog" data-controller="dialog" data-dialog-dispatcher-target="show" style="display:none" data-width="300px">

                <button data-action="dialog#hide">close</button>

              </div>`

    const dispatcher = document.getElementById('dispatcher')

    dispatcher.insertAdjacentHTML('afterbegin', html)

    const remotedialog = await document.getElementById('remote-dialog')

    assert.equal(remotedialog.style.width, '300px');

    assert.equal(remotedialog.style.display, '');

  });

  test('hide the dialog when hide target is Connected', async () => {

    const button = document.getElementById('button')

    button.click();

    const dialog = document.getElementById('dialog')

    const dispatcher = document.getElementById('dispatcher')

    await dispatcher.insertAdjacentHTML('afterbegin', '<template data-dialog-dispatcher-target="hide"></template>')

    assert.equal(dialog.style.display, 'none');

    const target = document.querySelector('[data-dialog-dispatcher-target=hide]')

    assert.isNull(target)

  });

});