DEV Community: Vinícius Hoyer

Functional components in Vue.js (2.x)

Vinícius Hoyer — Fri, 30 Aug 2019 16:22:22 +0000

I republished this on my personal blog :D

So, let's start from the beginning, what are functional components? Well, those are components that are more lightweight because they don't have any data, or computed, nor lifecycle events. They can be treated as just functions that are re-executed once the parameters passed down to it changes.

For more information you can read the official docs for it, or this cool blog post by Nora Brown, or both. They also have a modified API, for reasons that I don't yet know, but now that I'm mentioning it, I got curious, so I might try checking it out afterwards.

But is it really that better? Honestly, I don't really know; I'm just trusting other people on this one. Since it doesn't have to manage reactivity it should be better, because its running less code to get the same results. But how much better? I don't know. I couldn't find an answer and I'm hoping someone will answer this question on the comments.

You know what? I'll tweet this post to the core team (aka Sarah Drasner), and we'll all hope together that we will get our answers, ok? 😂 😅

The ugly parts of this

Ok, so functional components in vue are cool and all, but there are some problems with it, right? I mean, you could very well use the render() function to do it all and it be happy with it, because with the render function you can better organize your code.

But the wall of learning this syntax when you are so used to the <template> is so high, let alone the fact that you'll be using this render function when everyone else on your project is used to the template, now we have two syntax in the project and its all your fault, you should be ashamed of yourself, you smarty pants.
— read this very fast, for the aesthetics 😎

You could also try the React way and add to the project the JSX syntax of using html inside js, configuring webpack to understand this syntax, BUUUUT

...the wall of learning this syntax when you are so used to the <template> is not so high compared to the other, but still, let alone the fact that you'll be using this render function with JSX when everyone else on your project is used to the template, now we have two syntax in the project and its all your fault, you should be ashamed of yourself, you smarty pants.
— read this very fast, for the aesthetics 😎

I know because I tried doing this (cuz I'm a smarty pants (is this slang still used? I learned this in the school 😂 (now I feel like I'm programming in lisp))) but my render function syntax didn't survived the code review.

So, we all hopefully agree that Vue is nice for the simplicity and we should stick with the template syntax because it's s i m p l e r. Now, if you have a team of smarty pants and you all like to work with template and render functions on the same project, then go ahead and be free, don't listen to me, ~~also, send me your recuiter's email~~.

That out of the way, I had some problems with functional components in Vue.js that I wanted to vent out here, and hopefully help anyone with the same problems:

how on earth do you call a method from the template? Is it even possible?
where are my props? And my $listeners and $attrs?
why vue can't find my custom component inside the functional component despite it being registered with the components option?
why the custom classes I put on the component from the outside don't get applied?

Executing functions from the template

"I received some data through props, but I want to format it nicely using a custom function. How do I do that? I'm getting an undefined is not a function error, I'll go crazy!"
— Me before figuring it out

Consider the following <script> part of a component:

<script>
export default {
  name: 'DisplayDate',
  props: {
    date: {
      type: String,
      required: true,
    },
  },
  methods: {
    format(date) {
      return new Date(date).toLocaleString()
    },
  },
}
</script>

For some reason, functional components don't have access to the vue instance, I suppose it's because there is no Vue instance to begin with, but I could be wrong. So, to access the methods we can't just:

<template functional>
  <span>{{ format(date) }}</span>
</template>

We have to take another path, just format won't do, we have to do an $options.methods.format(date). There, this works. It's ugly, but it works. Anyone has a suggestion to make this better?

<template functional>
  <span>{{ $options.methods.format(date) }}</span>
</template>

Anyway if you execute this, you will notice I just lied to you when I said it works...

Accessing props, listeners and attrs?

The reason its not working is because, again, there is no Vue instance, so when the Vue Loader transforms your template into pure JavaScript, it just can't find the date you just typed. It needs a context, so you have to declare a path for Vue to find it, like we did with the method.

<template functional>
  <span>{{ $options.methods.format(props.date) }}</span>
</template>

"And the $attrs and $listeners, I really want to make a full extensible open-closed component, so I kinda need this"
— also me

Those are available too, only in different places. The $attrs is now at data.attrs and the $listeners is at the listeners (which is an alias to data.on, but as a suggestion, I'd stick with the new listeners).

`$attrs`

For those who didn't even knew this was a thing, let me clarify. In non-functional components, $attrs is used to represent every attribute passed down to your component declared in props or not. That means, if we have the DisplayDate components called like the following:

<div>
  <DisplayDate
    :date="'6 Dec 1999'"
    aria-label="6 of December of 1999 was a long time ago, but not so much"
  />
</div>

And we have the declaration like we already defined up there (<span>{{ $options.methods.format(props.date) }}</span>), The aria-label prop will be ignored. But if we declare the DisplayDate like the following, the extra attributes passed to the DisplayDate will be applied to the span, as we indicated.

<template functional>
  <span v-bind="data.attrs">{{ $options.methods.format(props.date) }}</span>
</template>

But as of course we are in functional land; nothing is easy, and the API is different 🤷‍♂️. When we are talking about functional components, now the data.attrs only contains the attributes passed down to the component but only the one not declared on the props, in the non-functional the $attrs have the value of { date: '...', ariaLabel: '...' }, on the functional, the data.attrs have the value of { ariaLabel: '...' } and the props have { date: '...' }.

`$listeners`

Same thing with the $listeners, but for events. That means, when you try to apply @click event to a component, but you haven't declared this explicitly, it will not work, unless you use the $listeners to proxy the listeners handling to a different element or component.

<!-- this is explicitly declaration -->
<button @click="$emit('click')">Click me</button>

<!-- this is the 'proxing' declaration -->
<button v-on="$listeners">Click me</button>

<!-- this is the 'proxing' declaration for functional components -->
<button v-on="listeners">Click me</button>

There is, once more, a different between the functional and non-functional components API for this. The non-functional components deal with .native events automagically, while the functional component is not sure if there's even a root element to apply the .native events, so Vue exposes the data.nativeOn property for you to handle the .native events the you want.

Outside declared css classes on the component

Passing a class to a custom component

<MyTitle
  title="Let's go to the mall, today!"
  class="super-bold-text"
/>

Another problem you may face, is about classes. Normally in Vue (as of today), when you pass a class to a custom component of yours, without explicitly configuring anything, it will be applied to the root element of your component, differently from react that it's explicit where the class is going.

Take the example above — assuming the css class does what it says it does and the title had no text-weight defined in the css and it is a non-functional component — the title would display as a bold text.

Now if we edit the MyTitle component like the following, transforming it to a functional component, the rendered text wouldn't be bold anymore, and that may feel very frustrating, I know because I felt it that way 😅.

-<template>
+<template functional>
   <span>
-    {{ title }}
+    {{ props.title }}
   </span>
 </template>

 <script>
 export default
   props: ['title'] // disclaimer: I don't recommend the array syntax for this
 }
 </script>

No, it's not nice to have a title with an span tag, this is a mere example, just focus on the vue stuff, titles should more semantic tags like `h1`, `h2` or `strong`.

And thats because... thats just because we are using functional components, and they are the way they are... 🤷‍♂️. Now, serious, to make this work you will have to add a little more code, it's nothing, really:

@@ -0,5 +0,5 @@
 <template functional>
-  <span>
+  <span :class="data.staticClass">
     {{ props.title }}
   </span>
 </template>

I'd advocate this syntax is better and it should be used in non-functional components too, but thats just a comment.

The data.staticClass represents all the classes passed down to your component (I assume only the not dynamic ones, will check it later, hopefully I will remember to edit the post). So what you can do is use this variable to merge with other classes you may be declaring:

<span
  :class="[data.staticClass, {
    'another-class': prop.someProp,
  }"
>
  {{ props.title }}
</span>

Custom component inside the functional component

So here we have a problem. One that I don't know how to solve gracefully. Custom components can't be declared inside functional components, at least not in the way you'd expect. The components property on the vue export:

<template functional>
  <MyCustomComponents1>
    I'd better be sailing
  </MyCustomComponents1>
</template>

<script>
export default {
  components: { // <- this here
    MyCustomComponents1,
  }
}
</script>

Just doesn't work. It would display the bare text "I'd better be sailing", because it cannot render an unknown component.

Despite it being declared down there, Vue just doesn't look to that property, and even worse, it doesn't even say anything, like a warning or an error: "Warning, components are not registrable on functional components" or something. The components property is useless.

Now, there are people who already raised this issue and that come up with a workaround to that problem, but I don't really like how it looks 😅, I mean, take a look at it:

<template>
  <component :is="injections.components.MyCustomComponents1">
    I'd better be sailing
  </component>
</template>

<script>
import MyCustomComponents1 from '...'

export default {
  inject: {
    components: {
      default: {
        MyCustomComponents1,
      }
    }
  }
}
</script>

There is also the option to register all the components you'll need in the global scope or to register the components you need on the parent that will host your functional component.

The latter is not a sane option because it makes the two components — the parent and the functional component — very tightly coupled, which is generally a bad idea.

Registering components in the global scope:

import Vue from 'vue'
import MyCustomComponents1 from '...'
// And so on...

Vue.component('MyCustomComponents1', MyCustomComponents1)
Vue.component('AndSoOn', AndSoOn)
//...

new Vue({
  el: '#app',
  // ...
});

This problem leads me to think functional components weren't thought out to be used with the template syntax, because the only reasonable approach to use custom components inside functional ones is to use the render function, look at that, it's elegant:

import MyCustomComponents1 from '...'
//...
render(h) {
  return h(MyCustomComponents1, {}, ['I\'d better be sailing'])
}

What is wrong with all this?

What you have to imagine when you are doing functional template, is like you are writing a function that returns a JSX syntax, and the Vue Loader is calling your template more or less like this:

render(h, { data, listeners, $options, /* the rest of the exposed variables...*/ }) {
  return (
    <template functional>
      <component
        :is="injections.components.MyCustomComponents1"
        v-bind="data.attrs"
        v-on="listeners"
        :class="data.staticClass"
      >
        {{ $options.methods.format(props.date) }}
      </component>
    </template>
  )
},

So we have access to those parameters, and nothing else. The problem with this is, when you are using a functional component with the render function syntax or with JSX, you have access to the body of the function to do destructuring, contextualization, separate things, process data, like the following.

import MyCustomComponents1 from '...'
import { format } from '...'

render(h, { data, listeners }) {
  const { date } = data.props

  // this is not proper JSX, but I hope you get the point
  return (
    <template functional>
      <MyCustomComponents1
        v-bind="data.attrs"
        v-on="listeners"
        :class="data.staticClass"
      >
        {{ format(date) }}
      </MyCustomComponents1>
    </template>
  )
},

This is a very small example, but I hope I can get the idea through. And the component markup syntax went back to being simple and easy to read, but when you are using the template syntax with vue functional component, you don't have access to this part of the function.

Future?

I really just hope that that controversial Request for Comments (EDIT: this was updated and now we are talking about this one) will live to see light and we get this better syntax that have all the benefits of performance and readability we all want.

Anyway, I hope I could help you with any problems you may be facing, I had a hard time searching for some information in there, I hope with this post you'll have less of a hard time. Thanks for reading till here, I hope you are having an awesome day, see you next time.

A11y tricky quiz

Vinícius Hoyer — Thu, 01 Aug 2019 18:16:46 +0000

Considering the following markup, which text will the screen reader read?

<html lang="en">
  <label for="btn">button this click</label>

  <span id="alt-btn">me button click</span>

  <button
    id="btn"
    aria-labelledby="alt-btn"
    aria-label="click this button"
  >
    click me
  </button>
</html>

"button this click"
"click me"
"click this button button"
"me button click button"

click here to see the anwser

Como escrever tests (jest) para componentes (vue) que já existem dentro da sua aplicação

Vinícius Hoyer — Wed, 24 Jul 2019 20:47:47 +0000

Disclaimers:
Além de tutorial o seguinte conteúdo é uma opnião minha e totalmente pessoal de como deixar seu código perfeitinho e bem organizado, siga por conta e risco. Ao escrever esse post eu estou assumindo que você sabe o que são testes unitários, sabe que testes são muito importantes para a saúde de uma code base, e sabe o que é o lance do Arange>Act>Assert

Para que todos estejam na mesma página durante a leitura, gostaria de exclarecer alguns termos que eu uso:

componente: componente vue/react/web-componente/etc;
elemento: elemento padrão do html, seja ele um elemento que está dentro ou fora de um elemento, ou de um documento .html.

Lendo esse post, acredito que você vai chegar à algumas conclusões sobre meus hábitos de teste, então para evitar o transtorno e tentar te ajudar a focar no que eu estou tentando dizer, eu gosto de:

rodar os "Arrange" no beforeEach do primeiro describe e nos beforeAll quando necessários;
rodar o "Acts" nos befores da vida;
agrupar todos os testes dentro de um describe "pai";
agrupar interações do usuário dentro de describes.

Ok, suponhamos que você tenha o seguinte componente:

<template>
  <div
    ref="origin"
    class="button-link-selector"
  >
    <ButtonLink
      @click="openPopover"
      class="js-label"
    >
      {{ value.label }}
    </ButtonLink>

    <div
      v-if="isOpen"
      class="button-link-selector__background js-outside"
      @click="closePopover"
    />

    <div
      v-show="isOpen"
      class="button-link-selector__popover js-popover"
      :style="{ left: `${popoverX}px`, top: `${popoverY}px` }"
    >
      <Multiselect
        :allow-empty="false"
        :internal-search="false"
        :options="options"
        :value="value"
        deselect-label=""
        label="label"
        open-direction="bottom"
        placeholder="Selecione o campus"
        select-label=""
        selected-label=""
        track-by="id"
        @close="searchChange('')"
        @select="select"
      >
        <span slot="noResult">
          <span class="button-link-selector__no-result">
            Sem resultados para a pesquisa.
          </span>
        </span>
      </Multiselect>
    </div>
  </div>
</template>

<!--
  tô omitindo o style pq jest não testa css então
  não é importante pra esse contexto
-->

<script>
// this is a utility present on npm:
// https://www.npmjs.com/package/vue-prop-validation-helper
import {
  everyItemOfArrayShouldHave,
  objectShouldHave,
} from 'vue-prop-validation-helper';

// esse é um outro componente seu qualquer
import ButtonLink from '~/components/button-link';

// esse é um componente, também presente no npm:
// https://www.npmjs.com/package/vue-multiselect
import Multiselect from 'vue-multiselect';

export default {
  name: 'ButtonLinkSelector',
  components: {
    ButtonLink,
    Multiselect,
  },
  props: {
    options: {
      required: true,
      type: Array,
      validator: everyItemOfArrayShouldHave([
        'id',
        'label',
      ]),
    },
    value: {
      required: true,
      type: Object,
      validator: objectShouldHave([
        'id',
        'label',
      ]),
    },
  },
  data: () => ({
    isOpen: false,
    popoverX: 0,
    popoverY: 0,
  }),
  beforeDestroy() {
    document.removeEventListener('scroll', this.onWindowScroll);
  },
  methods: {
    closePopover() {
      this.isOpen = false;
    },
    openPopover() {
      this.isOpen = true;

      const boundings = this.$refs.origin.getBoundingClientRect();

      this.popoverX = boundings.x - 23;
      this.popoverY = boundings.y + 20;

      document.addEventListener('scroll', this.onWindowScroll);

      this.$nextTick(() => {
        this.$el.querySelector('.multiselect__input').focus();
      });
    },
    onWindowScroll() {
      this.closePopover();

      document.removeEventListener('scroll', this.onWindowScroll);
    },
    select(value) {
      this.closePopover();

      this.$emit('select', value);
    },
  },
};
</script>

Sendo totalmente opinativo, eu sempre começo pelo snapshot quando o componente já exite:

import ButtonLinkSelector from '~/components/button-link-selector';
import { shallowMount } from '@vue/test-utils';

//para uso mais a frente no
const multiselectFocus = jest.fn();

describe('Components > ButtonLinkSelector', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(ButtonLinkSelector, {
      // só to fornecendo aqui o que o componente acima pede:
      propsData: {
        options: [
          { id: 0, label: 'minha mãe correu do boi' },
          { id: 1, label: 'minha vó correu do vô' },
          { id: 2, label: 'meu pai corre da mãe' },
          { id: 3, label: 'meu cachorro corre de mim' },
          { id: 4, label: 'eu corro de todo mundo' },
        ],
        value: {
          id: 0,
          label: 'minha mãe correu do boi',
        },
      },
    });
  });

  it('matches snapshot', () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

Depois eu digo que o comportamento padrão dele quando é montado, considerando as props passadas para ele é mostrar o item selecionado (a.k.a.: value). No caso, estou passando aquele objeto pra ele:

{
  id: 0,
  label: 'minha mãe correu do boi',
}

então, o valor que ele deve estar mostrando é:

  it('displays selected item', () => {
    expect(wrapper.find('.js-label').text()).toBe('minha mãe correu do boi');
  });

Então eu começo a pensar nas interações que o usuário pode fazer com esse componente. Por exemplo, o usuário pode clicar na label do componente:

  describe('when user click in its label', () => {
    beforeEach(() => {
      wrapper.find('.js-label').vm.$emit('click');
    });
  });

Tá, beleza, mas quando o usuário clicar no componente, o que deve acontecer?

    it('shows popover', () => {
      expect(wrapper.find('.js-popover').element).toBeVisible();
    });

Legal, então vamos rodar os tests. Ops, deu um errinho ali, porque ele não consegue encontrar aquela classe .multiselect__input, pois ela esta dentro do multiselect.

Existem dois jeitos, que eu conheço, de resolver isso. O primeiro é, ao invés de usar um shallowMount no componente, podemos usar um mount. Isso faz com que o vue-test-utils (que é a lib que te ajuda a testar vue components) renderize o componente que você esta pedindo pra montar; e todos os seus descendentes, que também são componentes, e todos os descendentes desses também, e assim por diante. Isso faz com que seus testes sejam mais pesados e demorem mais pra rodar. Por isso essa não é minha abordagem preferida. Eu prefiro o famoso e famigerado mock:

  describe('when user click in its label', () => {
    beforeEach(() => {
      //mock multiselect
      wrapper.vm.$el.querySelector = jest.fn(() => ({ focus: multiselectFocus }));
      // p.s.: eu disse que o multiselectFocus ia voltar a aparecer, né? ta ele aí.

      wrapper.find('.js-label').vm.$emit('click');
    });
  });

Se você olhar a implementação do componente, vai ver que ele tenta procurar um elemento de classe .multiselect__input dentro do this.$el (que se refere à root do seu componente, o único nó filho da tag <template> dentro do seu arquivo *.vue).

Só que, como o multiselect não está sendo renderizado pelo vue-test-utils, é de se esperar que o querySelector não consiga achar esse elemento mesmo. Então a gente mocka o query selector.

Agora podemos testar livremente. O teste passa e não aparece nenhum warn no console. Seguindo em frente, o que deve acontecer quando o usuário clica na label do componente?

    it("focus on multiselect's input", () => {
      expect(multiselectFocus).toHaveBeenCalled();
    });

Vamos lá, a outra interação possível, agora que o popover está aberto, é que o usuário pode clicar para fora do componente:

    describe('when user clicks outside the popover', () => {
      beforeEach(() => {
        wrapper.find('.js-outside').element.click();
      });

      it('closes popover', () => {
        expect(wrapper.find('.js-popover').element).not.toBeVisible();
      });
    });

O usuário também, ao invés de fechar, pode selecionar um item através do vue-multiselect e como se espera que o <Multiselect> já esteja sendo bem testado nos arquivos de teste dele, podemos, teóricamente, confiar no que ele está fazendo. Então, quando um usuário seleciona um item dentro do multiselect, esse componente envia um evento select, e isso também pode simular isso também.

E quando o multiselect emite esse evento, o que o nosso ButtonLinkSelector deve fazer é (drum rolls) ..... enviar outro evento!!

    describe('when user selects another item through Multiselect', () => {
      beforeEach(() => {
        wrapper.find(Multiselect).vm.$emit('select', {
          id: 1,
          label: 'minha vó correu do vô',
        });
      });

      it('emits the select event once with the received payload', () => {
        // só emitiu uma vez
        expect(wrapper.emitted('select').length).toBe(1);

        // o primeiro argumento da primeira, e nesse caso, única
        // vez que esse evento foi disparado, é:
        expect(wrapper.emitted('select')[0][0]).toEqual({
          id: 1,
          label: 'minha vó correu do vô',
        });
      });
    });
  });

Outra interação que pode acontecer é: o usuário pode scrollar a página e se isso acontecer enquanto o popover estiver aberto, esse deve fechar. Mas como eu simulo um scroll dentro do jest? Você pode mockar o addEventlistener para ele expor o callback que o componente passa pra essa função, fazendo com que você consiga chamá-lo.

Mas como mockar o addEventListener dentro desse describe se evento de click, que chama o addEventListener, roda antes de chegar nesse describe (no 'when user click in its label')? Simples, você mocka o addEventListener no beforeAll, que vai rodar antes de qualquer beforeEach (até mesmo do primeiro, que monta o componente).

Outra coisa que tem que acontecer é: se o evento foi definido, o scroll listener deve ser removido, porque ele não é mais necessário. Então, o resultado final dessa interação é a seguinte:

    describe('when user scrolls page', () => {
      let userScrolledPage;

      beforeAll(() => {
        document.removeEventListener = jest.fn();

        document.addEventListener = jest.fn((_event, callback) => {
          userScrolledPage = callback;
        });
      });

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

      it('hides popover', () => {
        expect(wrapper.find('.js-popover').element).not.toBeVisible();
      });

      it('removes scroll listener', () => {
        expect(document.removeEventListener)
          .toBeCalledWith('scroll', expect.any(Function));
      });
    });

Para terminar, e o coverage ficar bonitinho, se o componente estiver com o popover aberto e o componente for destruído, o listener de scroll tem que ser removido porque ele não estaria servindo pra nada.

  describe('when component is destroyed', () => {
    beforeAll(() => {
      document.removeEventListener = jest.fn();
    });

    beforeEach(() => {
      wrapper.destroy();
    });

    it('removes scroll listener', () => {
      expect(document.removeEventListener)
        .toBeCalledWith('scroll', expect.any(Function));
    });
  });

Então, pronto. Os testes para esse componente estão concluídos num piscar de olhos. Segue o resultado final, o arquivo do jest:

import ButtonLinkSelector from '~/components/button-link-selector';
import Multiselect from 'vue-multiselect';
import { shallowMount } from '@vue/test-utils';

const multiselectFocus = jest.fn();

describe('Components > ButtonLinkSelector', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(ButtonLinkSelector, {
      propsData: {
        options: [
          { id: 0, label: 'minha mãe correu do boi' },
          { id: 1, label: 'minha vó correu do vô' },
          { id: 2, label: 'meu pai corre da mãe' },
          { id: 3, label: 'meu cachorro corre de mim' },
          { id: 4, label: 'eu corro de todo mundo' },
        ],
        value: {
          id: 0,
          label: 'minha mãe correu do boi',
        },
      },
    });
  });

  it('matches snapshot', () => {
    expect(wrapper.element).toMatchSnapshot();
  });

  it('displays selected item', () => {
    expect(wrapper.find('.js-label').text()).toBe('minha mãe correu do boi');
  });

  it('does not show popover', () => {
    expect(wrapper.find('.js-popover').element).not.toBeVisible();
  });

  describe('when user click in its label', () => {
    beforeEach(() => {
      //mock multiselect
      wrapper.vm.$el.querySelector = jest.fn(() => ({ focus: multiselectFocus }));

      wrapper.find('.js-label').vm.$emit('click');
    });

    it('shows popover', () => {
      expect(wrapper.find('.js-popover').element).toBeVisible();
    });

    it('focus on multiselect\'s input', () => {
      expect(multiselectFocus).toHaveBeenCalled();
    });

    describe('when user clicks outside the popover', () => {
      beforeEach(() => {
        wrapper.find('.js-outside').element.click();
      });

      it('closes popover', () => {
        expect(wrapper.find('.js-popover').element).not.toBeVisible();
      });
    });

    describe('when user selects another item through Multiselect', () => {
      beforeEach(() => {
        wrapper.find(Multiselect).vm.$emit('select', {
          id: 1,
          label: 'minha vó correu do vô',
        });
      });

      it('emits the select event once with the received payload', () => {
        expect(wrapper.emitted('select').length).toBe(1);

        expect(wrapper.emitted('select')[0][0]).toEqual({
          id: 1,
          label: 'minha vó correu do vô',
        });
      });
    });

    describe('when user scrolls page', () => {
      let userScrolledPage;

      beforeAll(() => {
        document.removeEventListener = jest.fn();

        document.addEventListener = jest.fn((_event, callback) => {
          userScrolledPage = callback;
        });
      });

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

      it('hides popover', () => {
        expect(wrapper.find('.js-popover').element).not.toBeVisible();
      });

      it('removes scroll listener', () => {
        expect(document.removeEventListener)
          .toBeCalledWith('scroll', expect.any(Function));
      });
    });
  });

  describe('when component is destroyed', () => {
    beforeAll(() => {
      document.removeEventListener = jest.fn();
    });

    beforeEach(() => {
      wrapper.destroy();
    });

    it('removes scroll listener', () => {
      expect(document.removeEventListener)
        .toBeCalledWith('scroll', expect.any(Function));
    });
  });
});

Isso é tudo pessoal, espero que tenha ajudado você a ter seu Pull Request aprovado por aquele seu colega chato que está te cobrando testes (eu). Qualquer coisa, comenta aí embaixo para criar uma discussão legal 😊.

Na dúvida, use um botão

Vinícius Hoyer — Thu, 18 Jul 2019 18:24:29 +0000

Tá, eu entendo você dizer que acessibilidade é difícil, é mesmo, mas eu acho que, mesmo sendo difícil, a gente tem que se atentar a isso, pois estamos fazendo com que informações não possam ser consumidas por certas pessoas; e porque você não quer que essas pessoas costumam seu conteúdo? Tu é preconceituoso, é? Eu espero que não 😅.

Então devemos sempre tentar dar o nosso máximo para deixar nossos sites o mais acessível que conseguirmos. Motivado por isso venho aqui aplicar todos os meus conhecimentos para tentar te ensinar a fazer um botão acessível!

Eu tenho esse botão aqui, como eu deixo ele acessível?

<style>
.my-button {
  outline: none;
  background: hsl(80deg, 50%, 50%);
  color: white;
  display: inline-block;
  padding: 4px 16px;
}
.my-button:hover {
  background: hsl(80deg, 50%, 30%);
}
.my-button:active {
  background: hsl(80deg, 50%, 60%);
}
</style>
<div class="my-button">
  Click me
</div>
<script>
document.querySelector(".my-button").addEventListener('click', () => alert("poke!"))
</script>

Antes de qualquer coisa, eu queria só dar o disclaimer de que o botão não é feio, você que não entende a sutil arte por traz do design dele, a arte de: escrever-o-código-chutando-números-e-só-ver-o-resultado-depois-de-terminar-de-escrever-seu-post, pode usar essa técnica, a licença dela é MIT.

Antes de tudo!

Ih, rapaz, olha, é considerada péssima prática colocar outline: none. Se você não pode evitar, converse com o responsável por não deixar você tirar o none do outline no elemento, para essa pessoa achar um substituto bom o suficiente, com um contraste legal pra você colocar no lugar 😉.

@@ -1,6 +1,5 @@
 <style>
 .my-button {
-  outline: none;
   background: hsl(80deg, 50%, 50%);
   color: white;
   display: inline-block;

Primeira coisa

O primeiro problema que eu noto é que: se o usuário estiver navegando no seu site exclusivamente com o teclado — seja por paralisia, braço quebrado ou porque ele tá segurando um sanduíche com a outra mão — esse usuário não vai conseguir apertar esse botão, porque ele não é focável. Tenta você selecionar esse botão só com Tab.

Para resolver esse problema, você pode definir explicitamente no HTML que o .my-button é focável com: tabindex="0". O tal do tabindex, com valor 0, serve pra dizer pro browser que esse elemento pode sim ser focado, independentemente de qual tag que você está usando.

@@ -11,6 +11,6 @@
   background: hsl(80deg, 50%, 60%);
 }
 </style>
-<div class="my-button">
+<div class="my-button" tabindex="0">
   Click me
 </div>

Segunda coisa

Quando o leitor de tela estiver lendo esse elemento (agora que ele é focável), ele vai ler algo como "Click me, generic container", as vezes só "Click me". O porquê disso é que o elemento por traz desse botão é uma div, a técnica que da para a gente usar para contornar esse problema pode ser a seguinte:

@@ -11,6 +11,6 @@
   background: hsl(80deg, 50%, 60%);
 }
 </style>
-<div class="my-button" tabindex="0">
+<div class="my-button" tabindex="0" role="button">
   Click me
 </div>

Agora com o atributo role o leitor de tela consegue saber que essa div, na verdade, está cumprindo papel de botão e então vai ler: "Click me, button".

Terceira coisa

Quando você coloca um onClick handler na div, esse vai ser disparado quando um usuário clicar nele, mas se o usuário não estiver usando um mouse, ele vai esperar que a ação desse botão — que foi focado usando Tab — seja disparado usando uma das seguintes teclas:

Enter
Espaço

São expectativas que tem que ser cumpridas, caso contrario, o sistema pode se tornar impossível de ser utilizado. Então para corrigir isso a gente vai ter que disparar a ação desse botão no keydown dele:

@@ -17,5 +17,13 @@
   Click me
 </div>
 <script>
-document.querySelector(".my-button").addEventListener(() => alert("poke!"))
+const myButtonAction = () => alert("poke!")
+const myButton = document.querySelector(".my-button")
+
+myButton.addEventListener('click', myButtonAction)
+myButton.addEventListener('keydown', (event) => {
+  if (["Enter", " ", "Spacebar" /*ie11*/].includes(event.key)) {
+    event.preventDefault() // para evitar que a página seja scrollada (spacebar)
+    myButtonAction()
+  }
+})
 </script>

Tem uma página da WAI-ARIA, que lista todos os comportamentos que um dado elemento, seja ele um button, checkbox, slider, list, toolbars, e etc; devem cumprir para ir de encontro com a expectativa de um dado usuário, a WCAG 1.1 authoring practices, é um documento de 1999 que foi revisado diversas vezes, e acredito que continua, a WAI-ARIA já lançou um WCAG 2.0 e um WCAG 2.1, mas eles não necessariamente são melhores que o 1.1, pessoalmente eu acho que o 1.1 é melhor organizado.

Pra quem olha esses documentos com cara de especificação e tem um troço, existe esse outro site que é o WebAIM: WCAG 2 Checklist, que transforma o WCAG em algo mais amigável, apresentando seus critérios em forma de checklist.

Mesmo assim, na minha humilde opinião, o lugar mais fácil, estruturado, e completo, para se achar essas informações é o MDN, que acabei de descobrir que da exatamente o mesmo exemplo que eu to dando agora! Cara, MDN é incrível.

No final a gente fica com isso:

<style>
.my-button {
  background: hsl(80deg, 50%, 50%);
  color: white;
  display: inline;
  padding: 4px 16px;
}
.my-button:hover {
  background: hsl(80deg, 50%, 30%);
}
.my-button:active {
  background: hsl(80deg, 50%, 60%);
}
</style>
<div class="my-button" tabindex="0" role="button">
  Click me
</div>
<script>
const myButtonAction = () => alert("poke!")
const myButton = document.querySelector(".my-button")

myButton.addEventListener('click', myButtonAction)
myButton.addEventListener('keydown', (event) => {
  if (["Enter", " ", "Spacebar" /*ie11*/].includes(event.key)) {
    event.preventDefault() // para evitar que a página seja scrollada (spacebar)
    myButtonAction()
  }
})
</script>

Tá, mas isso parece muito complicado!

E é mesmo! Mas sabe outro jeito de fazer um botão acessível com tudo o que foi citado acima? Assim:

<style>
.my-button {
  background: hsl(80deg, 50%, 50%);
  border: none;
  color: white;
  padding: 4px 16px;
}
.my-button:hover {
  background: hsl(80deg, 50%, 30%);
}
.my-button:active {
  background: hsl(80deg, 50%, 60%);
}
</style>
<button class="my-button">
  Click me
</button>
<script>
document.querySelector(".my-button").addEventListener('click', () => alert("poke!"))
</script>

Tem tudo o que o botão de div lá em cima tem, só que você não precisa fazer nada de mais, hehe. E o diff final fica assim:

@@ -1,21 +1,20 @@
 <style>
 .my-button {
-  outline: none;
   background: hsl(80deg, 50%, 50%);
+  border: none;
   color: white;
-  display: inline-block;
   padding: 4px 16px;
 }
 .my-button:hover {
   background: hsl(80deg, 50%, 30%);
 }
 .my-button:active {
   background: hsl(80deg, 50%, 60%);
 }
 </style>
-<div class="my-button">
+<button class="my-button">
   Click me
-</div>
+</button>
 <script>
 document.querySelector(".my-button").addEventListener('click', () => alert("poke!"))
 </script>

Mas e se eu usar um `<a>`?

Se a tag não tiver um atributo href ele é considerado, praticamente, uma div, então todo o trabalho que deu pra transformar uma <div> num botão, vai ser o mesmo para fazer com uma tag <a>.

Como publicar seu projeto Xamarin.iOS na AppStore

Vinícius Hoyer — Fri, 17 May 2019 16:56:59 +0000

Tá, vamo lá. Primeiramente, gostaria de dizer que eu achei esse processo é bem mais complicado do precisava ser, mas quem sou eu, né? Outra coisa que eu achei muito complicado foi achar informações sobre como fazer isso, então eu to aqui e vou reportar meu processo de como eu consegui fazer isso.

Disclaimer: Eu tô escrevendo esse post enquanto faço o processo e é só minha segunda vez fazendo isso sendo que não lembro como fiz da primeira vez, então não tenho certeza de que todos os passos aqui descritos são realmente necessários, mas espero que funcione para você. Ah, e também é a terceira vez na vida que ponho a mão num mac, então perdoa o analfabetismo nessa questão 😜.

Esse post foi pensado por e para alguem que pouco uso um mac na vida, então você que já é iniciado nessa arte, favor ter piedade, tente dar umas risadas.

Ferramentas: softwares e hardwares e versões e datas e etc…

Então, eu estou usando as seguintes ferramentas: um mac High Sierra versão 10.13.6; um iPhone (não sei qual o modelo, mas acho que não é relevante, você só vai precisar de um). Sobre as versões do software tente usar as mais recentes. Tenha em mente que esse processo funcionou para mim na data de 10 de Agosto de 2018.

Tu vais precisar ter uma conta da Apple que participa no programa de desenvolvedores. Vale lembrar que isso tem um custo

Primeira coisa é instalar o XCode no mac. Depois tu vai ter de aceitar a licença do xcode no terminal (espero que tu saiba tua senha):

sudo xcodebuild -license

Também vai precisar de um Visual Studio for mac instalado. Depois é sucesso. Acho.

Depois de tudo instalado

Você vai precisar clonar o projeto em seu mac (sabe né? git clone and stuff), isso é, se ele já não estiver por aí. Com ele clonado, abra-o com o Visual Studio for Mac (VS apartir de agora).

Com ele aberto, boom, primeiro erro (pelo menos comigo). Mesmo selecionando para buildar o projeto de iOS, o VS está reclamando que eu não tenho o pacote do Android instalado; ok, instala-do. Mande buildar. Aparentemente o VS não baixa as dependencias NuGet sozinho por padrão, então clique com o botão direito na solução e procure por algo como “Restaurar Pacotes NuGet”.

Ok Great, o debug abre no simulador. Agora a gente precisa fazer ele rodar no dispositivo físico, porque se não rodar nele, o app não vai para a AppStore (até porque você precisa fazer a build do pacote pelo iPhone).

Para que o mac consiga instalar o teu app no teu iPhone, tu vai precisar de algumas coisas.

Um certificado com extensão .p12;
um perfil de provisionamento (tradução livre de provisioning profile);
um App Bundle ID.

Acho que é isso, vamo começar:

Production Certificate .p12

Para esse passo, abra a caixa de pesquisa do mac (a lupa no canto superior direito) e digite “Acesso às Chaves”, o primeiro resultado deve ser o aplicativo, duh, “Acesso às Chaves”. Com ele aberto clique na barra superior em “Acesso às Chaves > Assistente de Certificado > Solicitar um certificado de uma autoridade de certificação…”.

Digite o email ao qual o certificado deve ser atrelado. Selecione “Salva no disco” e em “Continuar”. Selecione onde no computador o arquivo de Solicitação de assinatura de certificado (tradução livre de Certificate Signing Request ou, apartir de agora, CSR) será salvo.

Abra o site https://developer.apple.com e depois clicar em account (para fazer o login). A conta que você vai utilizar precisa ser assinante daquele programa de desenvolvedores da Apple.

Logado vai procurar o “Certificates, Identifiers & Profiles” e clicar nele. Depois selecionar iOS, tvOS, watchOS e na categoria “Certificates”. Nessa tela você vai adicionar um novo certificado. Quando o site te perguntar qual o tipo de certicado que você precisa, tu vai escolher “App Store and AdHoc”, porque, afinal, tu estás tentando publicar o app na AppStore.

Aí “next”, “next”, e quando ele pedir para fazer o upload do arquivo CSR, tu escolhe aquele que você criou agora mais cedo. Aí “generate” e “download” e “Done”.

Com o arquivo .cer (que é o certificado) tu vai dar um double-click nesse arquivo para instala-lo na utiliade de chaves. O nome dele vai ser parecido com “iPhone Distribution: ()” (como eu disse, estou longe de ser um especialista nesse assunto).

Para poder fazer o debug num dispositivo físico (iPhone), repita o processo, porem ao invés de selecionar “App Store and AdHoc”, selecione “iOS App Development”. Para o debug não vai ser necessário um arquivo .p12

Com o certificado instalado, a unica coisa que falta é exportar o certificado como um arquivo .p12 (aquilo que a gente tá precisando). Clicando com o botão direito no certificado e depois em exportar selecione o formato de arquivo para o .p12 e salva e é sucesso.

Nesse passo eu tive um problema em que essa opção estava bloqueada, aí eu tava procurando sobre como resolver esse problema por mais ou menos 1 hora, e quando eu fui tentar de novo ele funcionou… então fica a dica.

App Bundle ID

Antes de qualquer outra coisa, tu vai precisar entrar (de novo) no https://developer.apple.com e depois, na categoria de identifiers, em “App IDs”. Lá tu vai colocar um App ID Description com o nome do app. Aí vem a parte do App ID Suffix, nessa parte voce lê bem e escolha a opção que melhor te comporta.

Vai clicando em “Next” até ter de clicar em “Register”, quando tu chegar nessa parte, tu vai saber que terminou de criar o ID. Depois de criar isso aí, tu vais ter de ir lá na no iTunes Connect aí logar com a mesma conta, entrar em “Meus aplicativos” e depois no botão de criar um novo aplicativo, nessa parte tu preenche os dados relativos à publicação e na área ID do pacote selecionar o ID que você acabou de criar no “App IDs”.

Provisioning Profile

Para conseguir suas duas provisioning profiles — uma para debug e uma para release — tu vai ter que voltar na developer.apple.com. Na navegação da página, procure por “Provisioning Profiles” e clique em “All”, Adicione uma nova selecionando a opção que melhor se encaixa nas suas necessidades (para mim foram iOS App Development, para desenvolvimento, e App Store para distribuição) e continue.

Aqui recomendo ler bem o que a apple tem a dizer sobre os App IDs e as provisioning profiles (dentro dessa página mesmo). Basicamente, se você precisa de notificações, do game center ou de In-App Purchase, voce PRECISA especificar uma provisioning profile para cada app que for usar essas funções, se não você pode usar o wild card (*), pessoalmente, recomendo você criar uma provisioning profile para cada App, para não ter dor de cabeça. Só clicar em continue.

Nesse passo você vai selecionar o certificado que você criou mais cedo. Provavelmente você só vai ter uma, a não ser que você tenha criado várias por engano 😜 c̶o̶m̶o̶ ̶e̶u̶ ̶f̶i̶z̶ . NEXT!

Nesse passo, só colocar um nome para essa profile, and be done with it. Eu recomendo colocar um nome que identifique a profile ao ler, exemplo: release_APPBUNDLEID, aí a parte do app bundleid tu substituie pelo teu, a não ser que seja wild card, nesse caso da pra usar um nome mais genérico, tipo debug_generic. Seja criativo, mantenha a leitura.

Seguindo para o próximo passo, baixe a profile, e clique em concluir, não esqueça de clicar em concluir. Repete o processo tanto para a profile de desenvolvimento quanto para a de distribuição.

Com as duas profiles criadas e baixadas, instale-as clicando duas vezes sobre cada uma. It should be enought.

Pronto, agora você pode começar a programar 💻😓. Programar? Não era só subir o app para a App Store? Bom… sim… a questão é: se tu vens programando esse app usando o windows e testando somente num dispositivo android, provavelmente — principalmente se é o seu primeiro app — vão existir vários erros no projeto. Se estiver com sorte, serão somente erros visuais.

Quando o App estiver prontinho

Quando você estiver feliz com o resultado ou cansado de trabalhar naquela pilha de código que tu escreveu e já ta dizendo “é, acho que ta bom”, acho que tá na hora de fazer o upload desse seu app 😆.

Não se esqueça de preencher todos os espaços para imagem dentro do info.plist. Isso inclúi o arquivo .xcassets que é vinculado dentro do info.plsit. É, isso da um trabalho.

Abra o arquivo info.plist e selecione em “Assinando” o esquema “Provisionamento Manual” (eu tô usando o VS em pt-br, se o seu estiver em english, eu confio em você para inferir quais botões eles se referem kk sorry). Com isso selecionado, abra o “Bundle Signing Options…”.

Na tela que abriu, selecione a Identidade de Assinatura, abrir o dropdown vai te dar uma ideia sobre o que é isso, ou no mínimo da onde ele está vindo, mas acredito que é referente ao certificado que tu criou lá em cima. Seleciona, logo abaixo, o perfil de provisionamento que tu isntalou mais cedo (acho que nesse ponto você quer selecionar o de release). E terminar com o “Ok” ali em baixo, all ready to go.

E bom, se nada funcionou, você pode tentar selecionar “Provisionamento Automático” e tentar novamente ou nas configurações de bundle siging options o perfil de provisionamento automático. Vai experimentando até dar certo, até você não achar nenhum tutorial que te acomode na internet e resolver que você vai fazer um. Espero que você faça um melhor que o meu.

Com isso pronto e tudo tinindo, você vai clicar em “Compilar > Arquivo Morto para publicação”. Isso vai preparar um snapshot do teu projeto e abrir uma tab com a lsitagem de todos os snapshots com a ultima selecionada.

Daí tu clica em “Assinar e Distribuir…”, Vai no next next next, até ele te perguntar on salvar o arquivo (lembra de onde você salvou, você vai precisar dele daqui a pouco) aí tu salva, e clica em “Abrir carregador de aplicativo”.

Se não me engano aqui ele vai pedir pra tu logar com tua conta do iTunesConnect, aí você entra 😉.

Double-click em “Deliver your app” escolhe o arquivo que você acabou de salvar. “Next”, tu espera ele fazer as coisas que ele faz, e depois clica em “next” e em seguida em “Done” e Done. Agora teu app está sendo processado pela AppStore e você vai poder gerenciar ele pela tua conta do iTunes Connect.

Se der algum erro nessa fase, voce vai la, procura na internet e tenta concertar, sorry nao poder ajudar aqui 😢. Se não der problema, entra lá no iTunes Connect que ainda pode dar erro por lá, porem se der erro lá ele te envia um email explicando o que estava errado e uma possível solução.

É, acho que é isso, sobre as configurações dentro do iTunes Connect não achei difícil entender muito o que esta acontecendo lá, mas pode ser só eu. Vou deixar os seguintes toques: Na tab “Atividades” sub-tab “Todas as compilações” você consegue ver qual o estado dos pacotes que você ta tentando sobir; O TestFlight é a mesma coisa que lançar o app em beta na qual só alguns usuários podem baixar. E eu tenho quase certeza de que você vai precisar de pelo menos uma screenshot do teu app por modelos suportado, ou seja, se tu estiver suportando tanto iPad quanto iPhone e iPhoneX, vai precisar de pelo menos três screenshots.

Best regards, boa sorte nessa empreitada. Until next time.