From 6be6e992de3aa97bfbb18a530490ba57dd7a7262 Mon Sep 17 00:00:00 2001
From: Jade Suntoro <jadesuntoro@Jades-MacBook-Air.local>
Date: Sat, 3 Oct 2020 19:55:49 +0800
Subject: [PATCH] Add unit test for Flag view

---
 client/test/src/views/Flag.test.js | 88 ++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 client/test/src/views/Flag.test.js

diff --git a/client/test/src/views/Flag.test.js b/client/test/src/views/Flag.test.js
new file mode 100644
index 00000000..eae8db96
--- /dev/null
+++ b/client/test/src/views/Flag.test.js
@@ -0,0 +1,88 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import Flag from '../../../src/views/Flag';
+
+const localVue = createLocalVue();
+localVue.filter('titleize', str => {
+  if (typeof str !== 'string') return '';
+
+  const frags = str.split('-');
+  return frags
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+});
+localVue.use(Vuex);
+
+describe('Flag', () => {
+  let wrapper;
+  let store;
+
+  beforeAll(() => {
+    store = new Vuex.Store({
+      state: {
+        dailyData: {
+          word: {
+            language: 'german',
+          },
+          language: {
+            flag: 'twa-germany-flag',
+          },
+        },
+      },
+    });
+
+    wrapper = shallowMount(Flag, { store, localVue });
+  });
+
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it('renders i component', () => {
+    expect(wrapper.find('i').exists()).toBeTruthy();
+  });
+
+  it('displays the correct flag', () => {
+    const { flagClass } = wrapper.vm;
+    const iconComponent = wrapper.find('i');
+
+    expect(flagClass).toBe('twa twa-4x twa-germany-flag');
+    expect(iconComponent.classes()).toContain('twa-germany-flag');
+  });
+
+  it('does not render the language name component at first', () => {
+    const { showLanguage } = wrapper.vm;
+    const languageNameComponent = wrapper.find('.language-name');
+
+    expect(showLanguage).toBe(null);
+    expect(languageNameComponent.exists()).toBe(false);
+  });
+
+  it('renders the language name component after flag was hovered', async () => {
+    await wrapper.find('i').trigger('mouseover');
+
+    const { showLanguage } = wrapper.vm;
+    const languageNameComponent = wrapper.find('.language-name');
+
+    expect(showLanguage).not.toBeNull();
+    expect(languageNameComponent.exists()).toBe(true);
+  });
+
+  it("has the correct showLanguage value and classes according to flag's hover state", async () => {
+    await wrapper.find('i').trigger('mouseover');
+    expect(wrapper.vm.showLanguage).toBe(true);
+    expect(wrapper.find('.language-name').classes()).toContain('fadeInDown');
+
+    await wrapper.find('i').trigger('mouseleave');
+    expect(wrapper.vm.showLanguage).toBe(false);
+    expect(wrapper.find('.language-name').classes()).toContain('fadeOutUp');
+  });
+
+  it('displays the correct language', () => {
+    const { flagLanguage } = wrapper.vm;
+    const languageNameComponent = wrapper.find('.language-name');
+
+    expect(flagLanguage).toBe('german');
+    expect(languageNameComponent.text()).toBe('German');
+  });
+});