Teste Unitário: Testando input com diretiva de máscara

Olá desenvolvedor. Criando teste unitário com vue-test-utils e input com diretiva v-mask.

Matheus Odilon

2 min

Olá desenvolvedor.

Se assim como eu você estava desenvolvendo os testes para seu component vue e ficou travado ao testar um v-text-field que utiliza a diretiva v-mask, esse artigo é para você.

Essa não é uma coisa complicada de se fazer, mas não é muito fácil de encontrar matériais ou tutoriais que digam como fazer, por esse motivo decidi escrever esse pequeno artigo.

Nesse teste estamos usando a biblioteca de teste Vue Test Utils e a lib de máscara vue-the-mask.

Vamos lá...

1.

Primeira alteração que você deve fazer é mudar a sua função de criação de mount() para shallowMount(). A função shallowMount renderiza separadamente os components filho do seu component principal, assim o comportamento da diretiva será iniciado também.

Altere isto:


          
            describe('Foo', () => {
          
          
              it('testing input with mask', () => {
          
          
                const wrapper = mount(Foo)
          
          
                ....
          
          
              })
          
          
            })

Para isto:


          
            describe('Foo', () => {
          
          
              it('testing input with mask', () => {
          
          
                const wrapper = shallowMount(Foo)
          
          
                ....
          
          
              })
          
          
            })

Então nesse momento ao rodar o teste você deve receber o seguinte erro:


          
            Error: v-mask directive requires 1 input, found 0

Se isso acontecer, você está no caminho certo!

2.

Segunda alteração que você precisará fazer é trocar o seu v-text-field por um input. Isso mesmo, você não leu errado. (Eu sei que essa não é a coisa mais confortável de se fazer, mas após estilizar o seu input a alteração será invisivel).

Essa alteração resolverá o erro da diretiva:


          
            <input
          
          
              type="text"
          
          
              v-mask="'(##) #####-####'"
          
          
              id="phone"
          
          
              class="square-input pure-input"
          
          
              placeholder="(00) 00000-0000"
          
          
            />

(Uma outra opção, que eu particularmente não gosto, é manter o v-text-field e adicionar um input escondido que irá ser responsável pela diretiva. Nesse caso, o código ficaria desta forma:


          
            <v-text-field
          
          
              type="text"
          
          
              class="square-input"
          
          
              placeholder="(00) 00000-0000"
          
          
              v-model="phone"
          
          
            />
          
          
            <!-- input escondido -->
          
          
            <input
          
          
              type="text"
          
          
              v-mask="'(##) #####-####'"
          
          
              id="phone"
          
          
              v-model="phone"
          
          
              class="hide-input"
          
          
            />

Essa última opção não é a minha preferida, mas use a que preferir.)

3.

Após essas duas alterações você já conseguirá recuperar os valores mascarados para testar.


          
            test('testing input with mask', async () => {
          
          
                const wrapper = await shallowMount(Foo);
          
          
            
          
          
                wrapper.find("#phone").setValue(11922220000);
          
          
                expect(wrapper.find("#phone").element.value).toEqual('(11) 92222-0000');
          
          
              })

Agora é só rodar seu teste e ser feliz!

Espero que esse rápido artigo tenha te ajuda a resolver esse problema muito chato na hora de desenvolver os nossos testes unitários no front.

Learn

Support

More Options