Проверка корректности установки

После установки AutoNumeric важно убедиться, что библиотека корректно подключена и готова к работе. Существует несколько уровней проверки: от простого определения доступности объекта AutoNumeric в среде до практического тестирования функционала на примере инпут-полей.

1. Проверка доступности объекта AutoNumeric

Первым шагом является проверка, доступен ли объект AutoNumeric в глобальной области видимости. В браузере это можно сделать через консоль разработчика:

if (typeof AutoNumeric !== 'undefined') {
    console.log('AutoNumeric подключен корректно');
} else {
    console.error('AutoNumeric не найден. Проверьте подключение библиотеки.');
}

Если используется модульная система (ES Modules, CommonJS), проверка заключается в успешном импорте:

import AutoNumeric from 'autonumeric';

console.log(AutoNumeric); // Должен вывести функцию-конструктор

2. Инициализация базового инпута

Для проверки работы библиотеки создается тестовое поле ввода:

<input id="test-input" type="text" />

Инициализация AutoNumeric на этом элементе выполняется следующим образом:

const testInput = new AutoNumeric('#test-input', {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2
});

После выполнения этого кода поле ввода должно автоматически форматировать вводимые числа, добавляя разделители тысяч и ограничивая количество десятичных знаков.

3. Проверка форматирования и извлечения значений

После инициализации необходимо убедиться, что AutoNumeric корректно обрабатывает вводимые данные:

testInput.set(1234567.89); // Устанавливаем значение программно

console.log(testInput.getNumericString()); // "1234567.89"
console.log(testInput.getNumber());        // 1234567.89

Ключевой момент: getNumericString() возвращает строковое представление числа без форматирования, тогда как getNumber() возвращает числовой тип JavaScript.

4. Тестирование событий ввода

Для подтверждения корректной работы событий можно подписаться на изменение значения:

document.querySelector('#test-input').addEventListener('input', function() {
    console.log('Текущее значение:', testInput.getNumber());
});

Любое изменение в поле ввода должно вызывать событие и выводить актуальное числовое значение. Это демонстрирует, что библиотека реагирует на пользовательский ввод.

5. Проверка удаления и повторной инициализации

AutoNumeric позволяет уничтожать экземпляр и повторно инициализировать его. Это важно для динамически создаваемых форм:

testInput.remove(); // Удаление AutoNumeric с элемента

const newTestInput = new AutoNumeric('#test-input', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    decimalPlaces: 3
});

После повторной инициализации поле должно корректно применять новые настройки форматирования.

6. Диагностика ошибок подключения

Наиболее частые ошибки при установке:

  • Библиотека не подключена — объект AutoNumeric не определен.
  • Несовместимость версий — при использовании старых версий браузеров или модулей могут возникать ошибки импорта.
  • Конфликт с другими скриптами — другие библиотеки могут перезаписывать обработчики событий или изменять DOM, влияя на работу AutoNumeric.

Для выявления ошибок рекомендуется использовать консоль браузера и проверять сообщения об исключениях. Включение строгого режима разработки (strict mode) помогает обнаружить потенциальные проблемы в коде.

7. Использование автоматических тестов

Для больших проектов проверку корректности установки и работы AutoNumeric можно автоматизировать с помощью тестовых фреймворков (например, Jest или Mocha):

test('AutoNumeric инициализация и форматирование', () => {
    const input = document.createElement('input');
    document.body.appendChild(input);
    const an = new AutoNumeric(input, { decimalPlaces: 2 });
    an.set(1234.56);
    expect(an.getNumericString()).toBe('1234.56');
    an.remove();
});

Это гарантирует, что библиотека не только подключена, но и работает в соответствии с заданными параметрами.

8. Резюме по этапам проверки

  1. Проверка существования объекта AutoNumeric.
  2. Инициализация тестового поля ввода.
  3. Проверка корректного форматирования и получения значения.
  4. Тестирование событий ввода.
  5. Проверка удаления и повторной инициализации.
  6. Диагностика ошибок подключения и конфликтов.
  7. Опционально — автоматизация тестов через фреймворки.

Такой пошаговый подход обеспечивает уверенность в том, что библиотека установлена правильно и готова к использованию в любом проекте.

Оглавление