[#545] Toggle button to hide/show romanization added

client/src/style/app.scss

@@ -30,6 +30,19 @@ h3 {
   color: $primary-color;
 }
 
+.romanization-button {
+  color: $secondary-color;
+  text-transform: uppercase;
+  transition: all 0.8s;
+  opacity: 0.8;
+}
+
+.romanization-button:hover {
+  color: $primary-color;
+  transition: all 0.8s;
+  cursor: pointer;
+}
+
 .center-container {
   display: flex;
   flex-direction: column;

client/src/views/Word.vue

@@ -5,8 +5,15 @@
     :key="dailyData.word.word"
     v-if="!loading"
   )
+
     .daily-word-container
-      h3.mb0 {{ dailyData.word.romanization || '' }}
+      span(
+        v-show='isButtonVisible(dailyData.word.romanization)'
+        class="romanization-button" 
+        type="button" value="romanization"
+        @click="toggleRomanization"
+      ) {{ this.romanizationVal }} 
+      h3(class='mb0' v-show='isVRomanizationVisible()') {{ dailyData.word.romanization || '' }}
       .is-flex.is-justify-centered
         h1(
           v-bind:style="{ 'font-size': calculateFontSizeForDailyWord }"
@@ -51,6 +58,9 @@ export default {
       return '10vw';
     },
   },
+  data: function () {
+    return {isRomanizationVisible:true, romanizationVal:"Hide Romanization"}
+  },
   methods: {
     speak() {
       // eslint-disable-next-line
@@ -59,6 +69,24 @@ export default {
         this.dailyData.language.voice,
       );
     },
+    isVRomanizationVisible(){
+      return this.$data.isRomanizationVisible;
+    },
+    toggleRomanization(){
+      this.$data.isRomanizationVisible = !this.$data.isRomanizationVisible;
+      if (this.$data.romanizationVal == "Hide Romanization") {
+        this.$data.romanizationVal = "Show Romanization"
+      } else {
+        this.$data.romanizationVal = "Hide Romanization"
+      }
+    },
+    isButtonVisible(val) {
+      if (val) {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
 };
 </script>

client/test/src/views/Word.test.js

@@ -39,18 +39,82 @@ describe('Word', () => {
       expect(wordWrapper.exists()).toBeTruthy();
     });
 
-    it('displays romanization correctly', () => {
-      const romanizationSelector = '.daily-word-container h3';
+    describe('when romanization value exists', () => {
+      it('displays romanization correctly', () => {
+        const romanizationSelector = '.daily-word-container h3';
+
+        expect(wrapper.find(romanizationSelector).exists()).toBeTruthy();
+        expect(wrapper.find(romanizationSelector).text()).toBe('');
+
+        store.state.dailyData.word.romanization = 'romanization';
+        wrapper = shallowMount(Word, { store, localVue });
+
+        expect(wrapper.find(romanizationSelector).text()).toBe(
+          wrapper.vm.dailyData.word.romanization,
+        );
+
+        expect(wrapper.find(romanizationSelector).element.style.display).not.toBe(
+          'none'
+        );
+      });
+
+      it('displays the romanization button correctly', () => {
+        const romanizationButtonSelector = '.romanization-button';
+
+        expect(wrapper.find(romanizationButtonSelector).exists()).toBeTruthy();
+
+        expect(wrapper.find(romanizationButtonSelector).element.style.display).not.toBe(
+          'none'
+        );
+
+        expect(wrapper.find(romanizationButtonSelector).text()).toBe('Hide Romanization');
+      });
+
+      it('triggers the romanization button correctly', async () => {
+        const romanizationSelector = '.daily-word-container h3';
+        const romanizationButtonSelector = '.romanization-button';
+        const romanizationButton = wrapper.find('.romanization-button');
+
+        // Click to hide romanization
+        await romanizationButton.trigger('click');
+
+        expect(wrapper.find(romanizationButtonSelector).text()).toBe('Show Romanization');
+
+        expect(wrapper.find(romanizationSelector).element.style.display).toBe(
+          'none'
+        );
+
+        // Click to show romanization again
+        await romanizationButton.trigger('click');
+
+        expect(wrapper.find(romanizationButtonSelector).text()).toBe('Hide Romanization');
+
+        expect(wrapper.find(romanizationSelector).element.style.display).not.toBe(
+          'none'
+        );
+
+        expect(wrapper.find(romanizationSelector).text()).toBe(
+          wrapper.vm.dailyData.word.romanization,
+        );
+
+      });
 
-      expect(wrapper.find(romanizationSelector).exists()).toBeTruthy();
-      expect(wrapper.find(romanizationSelector).text()).toBe('');
+    });
 
-      store.state.dailyData.word.romanization = 'romanization';
-      wrapper = shallowMount(Word, { store, localVue });
+    describe('when romanization value does not exist', () => {  
+      it('does not display the romanization button', () => {
+        store.state.dailyData.word.romanization = null;
+        wrapper = shallowMount(Word, { store, localVue });
+
+        const romanizationButtonSelector = '.romanization-button';
+
+        expect(wrapper.find(romanizationButtonSelector).exists()).toBeTruthy();
+
+        expect(wrapper.find(romanizationButtonSelector).element.style.display).toBe(
+          'none'
+        );
+      });
 
-      expect(wrapper.find(romanizationSelector).text()).toBe(
-        wrapper.vm.dailyData.word.romanization,
-      );
     });
 
     it('displays daily word correctly', () => {