limit-charecters.js

import { useEventListener } from '@vueuse/core';
import { computed, ref, watch } from 'vue';
import { useI18n } from '@/locales';

/** twilio message limit */
export const MAX_LENGTH = 200;

export const testingWatch = (maxLengthGeneral, form) => {
  watch(form, (val1) => {
    const gt = val1.name.length + val1.content.length >= MAX_LENGTH;

    maxLengthGeneral.value = gt ? 0 : MAX_LENGTH;
  }, { deep: true });
}

export const blockDigit = (form) => {
  let isBlock = false;

  watch(form, (val1) => {
    isBlock = val1.name.length + val1.content.length >= MAX_LENGTH;
  }, { deep: true });

  return (target) => useEventListener(target, 'beforeinput', (event) => {
    console.log(isBlock, event.cancelable)
    if (isBlock) {
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
  }, { capture: true });
}

limit-charecters.spec.js

import faker from '@faker-js/faker';
import { fireEvent, screen } from '@testing-library/vue';
import flushPromises from 'flush-promises';
import { reactive, ref } from 'vue';
import { MAX_LENGTH, testingWatch, blockDigit } from './test-watch';

describe('test watch', () => {
  it('when value total characters is equal to MAX_LENGTH', async () => {
    const titleLength = 50;
    const contentLength = 1450;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    testingWatch(maxLengthGeneral, form);

    form.name = titleText;
    form.content = contentText;

    await flushPromises();

    expect(maxLengthGeneral.value).toBe(0);
  });

  it('when title and content are empty', async () => {
    const titleLength = 50;
    const contentLength = 1450;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    testingWatch(maxLengthGeneral, form);

    form.name = titleText;
    form.content = contentText;

    form.name = '';
    form.content = '';

    await flushPromises();

    expect(maxLengthGeneral.value).toBe(MAX_LENGTH);
  });

  it('when value total characters is over MAX_LENGTH', async () => {
    const titleLength = 100;
    const contentLength = MAX_LENGTH;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    testingWatch(maxLengthGeneral, form);

    form.name = titleText;
    form.content = contentText;

    await flushPromises();

    expect(maxLengthGeneral.value).toBe(0);
  });

  it('when value total characters is under MAX_LENGTH', async () => {
    const titleLength = 100;
    const contentLength = 200;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    testingWatch(maxLengthGeneral, form);

    form.name = titleText;
    form.content = contentText;

    await flushPromises();

    expect(maxLengthGeneral.value).toBe(MAX_LENGTH);
  });
});

describe.only('blockDigit()', () => {
  const mountDOM = () => {
    const wrapper = document.createElement('div');
    wrapper.dataset.testid = 'wrapper';

    const input = document.createElement('input');
    input.dataset.testid = 'input-el1';

    const input2 = document.createElement('input');
    input2.dataset.testid = 'input-el2';

    document.body.textContent = '';

    wrapper.append(input);
    wrapper.append(input2);
    document.body.append(wrapper);
  }

  beforeEach(() => {
    mountDOM();
  });

  it.only('should not change input content', async () => {
    const spy = jest.spyOn(Event.prototype, 'preventDefault');
    const titleLength = 100;
    const contentLength = MAX_LENGTH;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    const wrapper = screen.getByTestId('wrapper');
    const input1 = screen.getByTestId('input-el1');
    const input2 = screen.getByTestId('input-el2');

    const addEvent = blockDigit(form);
    addEvent(wrapper, form);

    form.name = titleText;
    form.content = contentText;

    await fireEvent.update(input1, titleText);
    await fireEvent.update(input2, contentText);

    // const newText = faker.lorem.words(50).slice(0, 50);
    // await fireEvent.update(input2, newText);

    await flushPromises();

    console.log(contentText);
    console.log(input1.value);

    expect(input1.value.length).toEqual(100);
    expect(input2.value.length).toEqual(1400);
    // expect(input2).toHaveValue(contentText);
  });

  it('should not preventDefault input event', async () => {
    const spy = jest.spyOn(Event.prototype, 'preventDefault');
    const titleLength = 100;
    const contentLength = MAX_LENGTH - 200;
    const titleText = faker.lorem.words(titleLength).slice(0, titleLength);
    const contentText = faker.lorem.words(contentLength).slice(0, contentLength);
    const maxLengthGeneral = ref(MAX_LENGTH);
    const form = reactive({
      name: '',
      content: '',
    });

    const input1 = screen.getByTestId('input-el1');
    const input2 = screen.getByTestId('input-el2');

    const addEvent = blockDigit(form);
    addEvent(input1, form);
    addEvent(input2, form);

    form.name = titleText;
    form.content = contentText;

    await fireEvent.update(input1, titleText);
    await fireEvent.update(input2, contentText);

    await flushPromises();

    expect(spy).not.toBeCalled();
  });
});