From 18c85853e22f64c9549bbd46a3b4a1e99c254453 Mon Sep 17 00:00:00 2001 From: anjvyas Date: Wed, 21 Apr 2021 19:51:20 -0400 Subject: [PATCH 1/3] Added hide or show romanization functionality --- client/src/style/app.scss | 5 +++++ client/src/views/Word.vue | 30 +++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/client/src/style/app.scss b/client/src/style/app.scss index 6672bb44..06dbfb99 100644 --- a/client/src/style/app.scss +++ b/client/src/style/app.scss @@ -30,6 +30,11 @@ h3 { color: $primary-color; } +.romanization-button { + color: $secondary-color; + text-transform: uppercase; +} + .center-container { display: flex; flex-direction: column; diff --git a/client/src/views/Word.vue b/client/src/views/Word.vue index 67a4d32a..f60b657f 100644 --- a/client/src/views/Word.vue +++ b/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="pinyin" + @click="togglePinyin" + ) {{ this.pinyinVal }} + 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; + }, + togglePinyin(){ + this.$data.isRomanizationVisible = !this.$data.isRomanizationVisible; + if (this.$data.romanizationnVal == "Hide Romanization") { + this.$data.romanizationVal = "Show Romanization" + } else { + this.$data.romanizationVal = "Hide Romanization" + } + }, + isButtonVisible(val) { + if (val) { + return true; + } else { + return false; + } + } }, }; From 6921b94b3c9f56f4b8ded875b7505c804a828fec Mon Sep 17 00:00:00 2001 From: anjvyas Date: Sun, 25 Apr 2021 00:32:02 -0400 Subject: [PATCH 2/3] Added tests for toggle romanization functionality and hover effects for button --- client/src/style/app.scss | 8 ++++ client/src/views/Word.vue | 10 ++--- client/test/src/views/Word.test.js | 61 +++++++++++++++++++++++++----- 3 files changed, 65 insertions(+), 14 deletions(-) diff --git a/client/src/style/app.scss b/client/src/style/app.scss index 06dbfb99..023afc32 100644 --- a/client/src/style/app.scss +++ b/client/src/style/app.scss @@ -33,6 +33,14 @@ h3 { .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 { diff --git a/client/src/views/Word.vue b/client/src/views/Word.vue index f60b657f..e4345b2f 100644 --- a/client/src/views/Word.vue +++ b/client/src/views/Word.vue @@ -10,9 +10,9 @@ span( v-show='isButtonVisible(dailyData.word.romanization)' class="romanization-button" - type="button" value="pinyin" - @click="togglePinyin" - ) {{ this.pinyinVal }} + type="button" value="romanization" + @click="toggleRomanization" + ) {{ this.romanizationVal }} h3(class='mb0' v-show='isVRomanizationVisible()') {{ dailyData.word.romanization || '' }} .is-flex.is-justify-centered h1( @@ -72,9 +72,9 @@ export default { isVRomanizationVisible(){ return this.$data.isRomanizationVisible; }, - togglePinyin(){ + toggleRomanization(){ this.$data.isRomanizationVisible = !this.$data.isRomanizationVisible; - if (this.$data.romanizationnVal == "Hide Romanization") { + if (this.$data.romanizationVal == "Hide Romanization") { this.$data.romanizationVal = "Show Romanization" } else { this.$data.romanizationVal = "Hide Romanization" diff --git a/client/test/src/views/Word.test.js b/client/test/src/views/Word.test.js index 46cfc65f..6c26a428 100644 --- a/client/test/src/views/Word.test.js +++ b/client/test/src/views/Word.test.js @@ -39,18 +39,61 @@ 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 romanizationButton = wrapper.find('.romanization-button'); + + await romanizationButton.trigger('click'); + + expect(wrapper.find('.romanization-button').text()).toBe('Show 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', () => { From cead93fc0f0e2019d1c94929f5fa5a0b34c2445a Mon Sep 17 00:00:00 2001 From: anjvyas Date: Sun, 25 Apr 2021 01:08:24 -0400 Subject: [PATCH 3/3] Added test to check if clicking romanization button hides/shows text and changes value of button correctly --- client/test/src/views/Word.test.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/client/test/src/views/Word.test.js b/client/test/src/views/Word.test.js index 6c26a428..fbf526e8 100644 --- a/client/test/src/views/Word.test.js +++ b/client/test/src/views/Word.test.js @@ -71,11 +71,32 @@ describe('Word', () => { }); 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('.romanization-button').text()).toBe('Show Romanization'); + 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, + ); + }); });