test(test-translations): adds unit test

src/components/TestTranslations.vue

@@ -1,30 +1,47 @@
 <template>
   <section v-if="active">
-    <button @click="$i18n.locale = 'pt-br'">português</button>
-    <button @click="$i18n.locale = 'en-us'">inglês</button>
-    <button @click="$i18n.locale = 'es'">espanhol</button>
+    <button
+      data-test="pt-br"
+      @click="$i18n.locale = 'pt-br'"
+    >
+      português
+    </button>
+
+    <button
+      data-test="en-us"
+      @click="$i18n.locale = 'en-us'"
+    >
+      inglês
+    </button>
+
+    <button
+      data-test="es"
+      @click="$i18n.locale = 'es'"
+    >
+      espanhol
+    </button>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 
 const active = ref(false);
 const text = ref('');
 
-let timeout: undefined | number;
-
-document.addEventListener('keydown', (event) => {
+function onKeydown(event: Pick<KeyboardEvent, 'key'>) {
   text.value += event.key;
 
-  clearTimeout(timeout);
-
-  timeout = setTimeout(() => {
-    text.value = '';
-  }, 300);
-
-  if (text.value === 'i18n') {
+  if (text.value.endsWith('i18n')) {
     active.value = true;
   }
-});
+}
+
+if (import.meta.env.DEV) {
+  document.addEventListener('keydown', onKeydown);
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', onKeydown);
+  });
+}
 </script>

src/components/__tests__/TestTranslations.spec.ts

@@ -0,0 +1,95 @@
+import { setup } from '@/tests/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import TestTranslations from '../TestTranslations.vue';
+
+const $i18n = {
+  locale: '',
+};
+
+describe('TestTranslations', () => {
+  let wrapper: ReturnType<typeof setup>;
+
+  describe('when it is dev environment', () => {
+    beforeEach(() => {
+      import.meta.env.DEV = true;
+
+      wrapper = setup(TestTranslations, {
+        global: {
+          mocks: {
+            $i18n,
+          },
+        },
+      });
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('should not show anything', () => {
+      expect(wrapper.text()).toBe('');
+    });
+
+    describe("when the user types 'i18n'", () => {
+      beforeEach(() => {
+        ['i', '1', '8', 'n'].forEach((letter) =>
+          document.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: letter,
+            }),
+          ),
+        );
+      });
+
+      it('should show the languages options', () => {
+        expect(wrapper.findAll('button').length).toBeGreaterThan(0);
+      });
+
+      describe.each([
+        { language: 'pt-br' },
+        { language: 'en-us' },
+        { language: 'es' },
+      ])('when the user clicks on the $language language', ({ language }) => {
+        it(`sets i18n locale to '${language}'`, () => {
+          wrapper.find(`[data-test="${language}"]`).trigger('click');
+
+          expect($i18n.locale).toBe(language);
+        });
+      });
+    });
+  });
+
+  describe('when it is not dev environment', () => {
+    beforeEach(() => {
+      import.meta.env.DEV = false;
+
+      wrapper = setup(TestTranslations, {
+        global: {
+          mocks: {
+            $i18n,
+          },
+        },
+      });
+    });
+
+    it('should not show anything', () => {
+      expect(wrapper.text()).toBe('');
+    });
+
+    describe("when the user types 'i18n'", () => {
+      beforeEach(() => {
+        ['i', '1', '8', 'n'].forEach((letter) =>
+          document.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: letter,
+            }),
+          ),
+        );
+      });
+
+      it("still doesn't show the language options", () => {
+        expect(wrapper.text()).toBe('');
+      });
+    });
+  });
+});