typo3-typescript-sources 13.4.20

package/backend/tests/element/immediate-action-element-test.ts

@@ -0,0 +1,81 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { ImmediateActionElement } from '@typo3/backend/element/immediate-action-element.js';
+import moduleMenuApp from '@typo3/backend/module-menu.js';
+import viewportObject from '@typo3/backend/viewport.js';
+import { expect } from '@open-wc/testing';
+import { stub } from 'sinon';
+import type { } from 'mocha';
+
+describe('@typo3/backend/element/immediate-action-element', () => {
+  let root: HTMLElement; // This will hold the actual element under test.
+
+  beforeEach((): void => {
+    root = document.createElement('div');
+    document.body.appendChild(root);
+  });
+
+  afterEach((): void => {
+    root.remove();
+    root = null;
+  });
+
+  it('dispatches action when created via constructor', async () => {
+    const refreshStub = stub(viewportObject.Topbar, 'refresh');
+
+    const element = new ImmediateActionElement;
+    element.setAttribute('action', 'TYPO3.Backend.Topbar.refresh');
+    expect(refreshStub).not.to.have.been.called;
+    root.appendChild(element);
+    await import('@typo3/backend/viewport.js');
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(refreshStub).to.have.been.called;
+
+    refreshStub.restore();
+  });
+
+  it('dispatches action when created via createElement', async () => {
+    const refreshStub = stub(viewportObject.Topbar, 'refresh');
+
+    const element = <ImmediateActionElement>document.createElement('typo3-immediate-action');
+    element.setAttribute('action', 'TYPO3.Backend.Topbar.refresh');
+    expect(refreshStub).not.to.have.been.called;
+    root.appendChild(element);
+    await import('@typo3/backend/viewport.js');
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(refreshStub).to.have.been.called;
+
+    refreshStub.restore();
+  });
+
+  it('dispatches action when created from string', async () => {
+    const refreshMenuStub = stub(moduleMenuApp.App, 'refreshMenu');
+    const element = document.createRange().createContextualFragment('<typo3-immediate-action action="TYPO3.ModuleMenu.App.refreshMenu"></typo3-immediate-action>').querySelector('typo3-immediate-action');
+    expect(refreshMenuStub).not.to.have.been.called;
+    root.appendChild(element);
+    await import('@typo3/backend/module-menu.js');
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(refreshMenuStub).to.have.been.called;
+    refreshMenuStub.restore();
+  });
+
+  it('dispatches action when created via innerHTML', async () => {
+    const refreshMenuStub = stub(moduleMenuApp.App, 'refreshMenu');
+    root.innerHTML = '<typo3-immediate-action action="TYPO3.ModuleMenu.App.refreshMenu"></typo3-immediate-action>';
+    await import('@typo3/backend/module-menu.js');
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(refreshMenuStub).to.have.been.called;
+    refreshMenuStub.restore();
+  });
+});

package/backend/tests/form-engine-validation-test.ts

@@ -0,0 +1,304 @@
+import FormEngineValidation from '@typo3/backend/form-engine-validation.js';
+import { expect } from '@open-wc/testing';
+
+interface FormEngineConfig {
+  [x: string]: any;
+  field: string;
+}
+
+interface FormatValueData {
+  description: string,
+  type: string,
+  value: string,
+  result: string
+}
+
+interface FormatInvalidValueData {
+  description: string,
+  type: string,
+  value: number|string,
+}
+
+interface ProcessValueData {
+  description: string,
+  command: string,
+  value: string,
+  config: FormEngineConfig,
+  result: string
+}
+
+//type Values = Array<object>|object;
+type Values = any;
+
+/**
+ * Helper function to implement DataProvider
+ * @param {Function|Array|Object} values
+ * @param {Function} func
+ */
+function using(values: (() => Values)|Values, func: (...args: unknown[]) => void): void {
+  if (values instanceof Function) {
+    values = values();
+  }
+
+  if (values instanceof Array) {
+    values.forEach(function(value) {
+      if (!(value instanceof Array)) {
+        value = [value];
+      }
+
+      func(...value);
+    });
+  } else {
+    const objectKeys = Object.keys(values);
+
+    objectKeys.forEach(function(key) {
+      if (!(values[key] instanceof Array)) {
+        values[key] = [values[key]];
+      }
+
+      values[key].push(key);
+
+      func(...values[key]);
+    });
+  }
+}
+
+describe('TYPO3/CMS/Backend/FormEngineValidationTest:', () => {
+  const formatValueDataProvider: Array<FormatValueData> = [
+    {
+      'description': 'works for type date with iso date',
+      'type': 'date',
+      'value': '2016-12-02T11:16:06Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type date with iso date with milliseconds',
+      'type': 'date',
+      'value': '2016-12-02T11:16:06.000Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type date with empty value',
+      'type': 'date',
+      'value': '',
+      'result': ''
+    },
+    {
+      'description': 'works for type datetime with iso date',
+      'type': 'datetime',
+      'value': '2016-12-02T11:16:06Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type datetime with iso date with milliseconds',
+      'type': 'datetime',
+      'value': '2016-12-02T11:16:06.000Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type datetime with empty value',
+      'type': 'datetime',
+      'value': '',
+      'result': ''
+    },
+    {
+      'description': 'works for type time with iso date',
+      'type': 'time',
+      'value': '2016-12-02T11:16:06Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type time with empty value',
+      'type': 'time',
+      'value': '',
+      'result': ''
+    },
+    {
+      'description': 'works for type timesec with iso date',
+      'type': 'timesec',
+      'value': '2016-12-02T11:16:06Z',
+      'result': '2016-12-02T11:16:06Z'
+    },
+    {
+      'description': 'works for type timesec with empty value',
+      'type': 'timesec',
+      'value': '',
+      'result': ''
+    },
+  ];
+
+  describe('tests for formatValue', () => {
+    using(formatValueDataProvider, function(testCase: FormatValueData) {
+      it(testCase.description, () => {
+        const result = FormEngineValidation.formatValue(testCase.type, testCase.value);
+        expect(result).to.equal(testCase.result);
+      });
+    });
+  });
+
+  const formatInvalidValueDataProvider: Array<FormatInvalidValueData> = [
+    {
+      'description': 'throws error with int 0',
+      'type': 'date',
+      'value': 0,
+    },
+    {
+      'description': 'throws error for type date with timestamp',
+      'type': 'date',
+      'value': 10000000,
+    },
+    {
+      'description': 'throws error with non-iso date',
+      'type': 'date',
+      'value': 'foo',
+    },
+    {
+      'description': 'throws error for type datetime with timestamp',
+      'type': 'datetime',
+      'value': 10000000,
+    },
+    {
+      'description': 'throws error for invalid value',
+      'type': 'datetime',
+      'value': 'invalid',
+    },
+    {
+      'description': 'throws error for type time with timestamp',
+      'type': 'time',
+      'value': 10000000,
+    },
+  ];
+
+  describe('tests for invalid value to formatValue', () => {
+    using(formatInvalidValueDataProvider, function(testCase: FormatInvalidValueData) {
+      it(testCase.description, () => {
+        expect(() => FormEngineValidation.formatValue(testCase.type, testCase.value)).to.throw();
+      });
+    });
+  });
+
+  const processValueDataProvider: Array<ProcessValueData> = [
+    {
+      'description': 'works for command alpha with numeric value',
+      'command': 'alpha',
+      'value': '1234',
+      'config': { 'field': 'foo' },
+      'result': ''
+    },
+    {
+      'description': 'works for command alpha with string value',
+      'command': 'alpha',
+      'value': 'abc',
+      'config': { 'field': 'foo' },
+      'result': 'abc'
+    },
+    {
+      'description': 'works for command alpha with alphanum input',
+      'command': 'alpha',
+      'value': 'abc123',
+      'config': { 'field': 'foo' },
+      'result': 'abc'
+    },
+    {
+      'description': 'works for command alpha with alphanum input',
+      'command': 'alpha',
+      'value': '123abc123',
+      'config': { 'field': 'foo' },
+      'result': 'abc'
+    },
+    {
+      'description': 'works for command integer with numeric value',
+      'command': 'integer',
+      'value': '1234',
+      'config': { 'field': 'foo' },
+      'result': '1234'
+    }
+  ];
+
+  describe('test for processValue', () => {
+    using(processValueDataProvider, function(testCase: ProcessValueData) {
+      it(testCase.description, () => {
+        const result = FormEngineValidation.processValue(testCase.command, testCase.value, testCase.config);
+        expect(result).to.equal(testCase.result);
+      });
+    });
+  });
+
+  describe('tests for parseInt', () => {
+    it('works for value 0', () => {
+      expect(FormEngineValidation.parseInt(0)).to.equal(0);
+    });
+    it('works for value 1', () => {
+      expect(FormEngineValidation.parseInt(1)).to.equal(1);
+    });
+    it('works for value -1', () => {
+      expect(FormEngineValidation.parseInt(-1)).to.equal(-1);
+    });
+    it('works for value "0"', () => {
+      expect(FormEngineValidation.parseInt('0')).to.equal(0);
+    });
+    it('works for value "1"', () => {
+      expect(FormEngineValidation.parseInt('1')).to.equal(1);
+    });
+    it('works for value "-1"', () => {
+      expect(FormEngineValidation.parseInt('-1')).to.equal(-1);
+    });
+    it('works for value 0.5', () => {
+      expect(FormEngineValidation.parseInt(0.5)).to.equal(0);
+    });
+    it('works for value "0.5"', () => {
+      expect(FormEngineValidation.parseInt('0.5')).to.equal(0);
+    });
+    it('works for value "foo"', () => {
+      expect(FormEngineValidation.parseInt('foo')).to.equal(0);
+    });
+    it('works for value true', () => {
+      expect(FormEngineValidation.parseInt(true)).to.equal(0);
+    });
+    it('works for value false', () => {
+      expect(FormEngineValidation.parseInt(false)).to.equal(0);
+    });
+    it('works for value null', () => {
+      expect(FormEngineValidation.parseInt(null)).to.equal(0);
+    });
+  });
+
+  describe('tests for parseDouble', () => {
+    it('works for value 0', () => {
+      expect(FormEngineValidation.parseDouble(0)).to.equal('0.00');
+    });
+    it('works for value 1', () => {
+      expect(FormEngineValidation.parseDouble(1)).to.equal('1.00');
+    });
+    it('works for value -1', () => {
+      expect(FormEngineValidation.parseDouble(-1)).to.equal('-1.00');
+    });
+    it('works for value "0"', () => {
+      expect(FormEngineValidation.parseDouble('0')).to.equal('0.00');
+    });
+    it('works for value "1"', () => {
+      expect(FormEngineValidation.parseDouble('1')).to.equal('1.00');
+    });
+    it('works for value "-1"', () => {
+      expect(FormEngineValidation.parseDouble('-1')).to.equal('-1.00');
+    });
+    it('works for value 0.5', () => {
+      expect(FormEngineValidation.parseDouble(0.5)).to.equal('0.50');
+    });
+    it('works for value "0.5"', () => {
+      expect(FormEngineValidation.parseDouble('0.5')).to.equal('0.50');
+    });
+    it('works for value "foo"', () => {
+      expect(FormEngineValidation.parseDouble('foo')).to.equal('0.00');
+    });
+    it('works for value true', () => {
+      expect(FormEngineValidation.parseDouble(true)).to.equal('0.00');
+    });
+    it('works for value false', () => {
+      expect(FormEngineValidation.parseDouble(false)).to.equal('0.00');
+    });
+    it('works for value null', () => {
+      expect(FormEngineValidation.parseDouble(null)).to.equal('0.00');
+    });
+  });
+});

package/backend/tests/grid-editor-test.ts

@@ -0,0 +1,29 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { GridEditor } from '@typo3/backend/grid-editor.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/grid-editor-test:', () => {
+
+  describe('tests for stripMarkup', () => {
+    it('works with string which contains html markup only', () => {
+      expect(GridEditor.stripMarkup('<b>\'formula\': "x > y"</b>')).to.equal('\'formula\': "x > y"');
+    });
+    it('works with string which contains html markup and normal text', () => {
+      expect(GridEditor.stripMarkup('<b>foo</b> bar')).to.equal('foo bar');
+    });
+  });
+
+});

package/backend/tests/hashing/md5Test.ts

@@ -0,0 +1,28 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import Md5 from '@typo3/backend/hashing/md5.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/hashing/md5', () => {
+  describe('tests for hash', () => {
+    it('hashes a value as expected', () => {
+      expect(Md5.hash('Hello World')).to.equal('b10a8db164e0754105b7a99be72e3fe5');
+      expect(
+        Md5.hash('TYPO3 CMS is an Open Source Enterprise Content Management System with a large global community,'
+          + ' backed by the approximately 900 members of the TYPO3 Association.'),
+      ).to.equal('65b0beb76ada01bd7b5f44fb37da6139');
+    });
+  });
+});

package/backend/tests/icons-test.ts

@@ -0,0 +1,23 @@
+import Icons from '@typo3/backend/icons.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/icons-test', () => {
+  describe('tests for Icons object', () => {
+    it('has all sizes', () => {
+      expect(Icons.sizes.small).to.equal('small');
+      expect(Icons.sizes.default).to.equal('default');
+      expect(Icons.sizes.large).to.equal('large');
+      expect(Icons.sizes.overlay).to.equal('overlay');
+    });
+    it('has all states', () => {
+      expect(Icons.states.default).to.equal('default');
+      expect(Icons.states.disabled).to.equal('disabled');
+    });
+    it('has all markupIdentifiers', () => {
+      expect(Icons.markupIdentifiers.default).to.equal('default');
+      expect(Icons.markupIdentifiers.inline).to.equal('inline');
+    });
+  });
+});
+

package/backend/tests/notification-test.ts

@@ -0,0 +1,161 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DeferredAction from '@typo3/backend/action-button/deferred-action.js';
+import ImmediateAction from '@typo3/backend/action-button/immediate-action.js';
+import Notification from '@typo3/backend/notification.js';
+import Icons from '@typo3/backend/icons.js';
+import { expect } from '@open-wc/testing';
+import { stub, useFakeTimers, type SinonStub, type SinonFakeTimers } from 'sinon';
+import type { LitElement } from 'lit';
+
+describe('@typo3/backend/notification:', () => {
+  let clock: SinonFakeTimers;
+  let getIconStub: SinonStub<Parameters<typeof Icons['getIcon']>, Promise<string>>;
+
+  beforeEach((): void => {
+    clock = useFakeTimers();
+    getIconStub = stub(Icons, 'getIcon');
+    getIconStub.returns(Promise.resolve('X'));
+  });
+
+  afterEach((): void => {
+    clock.restore();
+    getIconStub.restore();
+
+    const alertContainer = document.querySelector('#alert-container .alert-list');
+    while (alertContainer !== null && alertContainer.firstChild) {
+      alertContainer.removeChild(alertContainer.firstChild);
+    }
+  });
+
+  describe('can render notifications with dismiss after 1000ms', () => {
+    interface NotificationDataSet {
+      method: typeof Notification.notice | typeof Notification.info | typeof Notification.success | typeof Notification.warning | typeof Notification.error,
+      title: string;
+      message: string;
+      class: string;
+    }
+
+    function notificationProvider(): Array<NotificationDataSet> {
+      return [
+        {
+          method: Notification.notice,
+          title: 'Notice message',
+          message: 'This notification describes a notice',
+          class: 'alert-notice',
+        },
+        {
+          method: Notification.info,
+          title: 'Info message',
+          message: 'This notification describes an informative action',
+          class: 'alert-info',
+        },
+        {
+          method: Notification.success,
+          title: 'Success message',
+          message: 'This notification describes a successful action',
+          class: 'alert-success',
+        },
+        {
+          method: Notification.warning,
+          title: 'Warning message',
+          message: 'This notification describes a harmful action',
+          class: 'alert-warning',
+        },
+        {
+          method: Notification.error,
+          title: 'Error message',
+          message: 'This notification describes an erroneous action',
+          class: 'alert-danger',
+        },
+      ];
+    }
+
+    for (const dataSet of notificationProvider()) {
+      it('can render a notification of type ' + dataSet.class, async () => {
+        dataSet.method(dataSet.title, dataSet.message, 1);
+
+        const notificationMessage = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+        await notificationMessage.updateComplete;
+
+        const alertSelector = 'div.alert.' + dataSet.class;
+        const alertBox = document.querySelector(alertSelector);
+        expect(alertBox).not.to.be.null;
+        expect(alertBox.querySelector('.alert-title').textContent).to.equal(dataSet.title);
+        expect(alertBox.querySelector('.alert-message').textContent).to.equal(dataSet.message);
+
+        // wait for the notification to disappear for the next assertion (which tests for auto dismiss)
+        await clock.tickAsync(2000);
+
+        // Notifications are hidden via an animation which cannot be faked by Sinon.
+        // Instead, we dispatch a custom event to enforce its removal.
+        notificationMessage.dispatchEvent(new CustomEvent('typo3-notification-clear-finish'));
+        expect(document.querySelector(alertSelector)).to.be.null;
+      });
+    }
+  });
+
+  it('can render action buttons', async () => {
+    Notification.info(
+      'Info message',
+      'Some text',
+      1,
+      [
+        {
+          label: 'My action',
+          action: new ImmediateAction((promise: Promise<void>): Promise<void> => {
+            return promise;
+          }),
+        },
+        {
+          label: 'My other action',
+          action: new DeferredAction((promise: Promise<void>): Promise<void> => {
+            return promise;
+          }),
+        },
+      ],
+    );
+
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    const alertBox = document.querySelector('div.alert');
+    expect(alertBox.querySelector('.alert-actions')).not.to.be.null;
+    expect(alertBox.querySelectorAll('.alert-actions a').length).to.equal(2);
+    expect(alertBox.querySelectorAll('.alert-actions a')[0].textContent).to.equal('My action');
+    expect(alertBox.querySelectorAll('.alert-actions a')[1].textContent).to.equal('My other action');
+  });
+
+  it('immediate action is called', async () => {
+    let called = false;
+
+    Notification.info(
+      'Info message',
+      'Some text',
+      1,
+      [
+        {
+          label: 'My immediate action',
+          action: new ImmediateAction(() => {
+            called = true;
+          }),
+        },
+      ],
+    );
+
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    const alertBox = document.querySelector('div.alert');
+    (<HTMLAnchorElement>alertBox.querySelector('.alert-actions a')).click();
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    expect(called).to.be.true;
+  });
+});