From e0d8e774c6dc4931bf860873220d15026153b059 Mon Sep 17 00:00:00 2001 From: Alex Lambert <60455392+lambert-alex@users.noreply.github.com> Date: Thu, 15 Dec 2022 14:01:40 -0800 Subject: [PATCH] 14545 Upper case display for Corp Name Translation (#433) * update corp name translation to be saved to uppercase not just displayed in uppercase * align AddNameTranslation to the Create UI eqivelent * update css making name translations uppercase --- package-lock.json | 4 +- package.json | 2 +- .../NameTranslations/AddNameTranslation.vue | 7 +- .../NameTranslations/NameTranslation.vue | 2 +- tests/unit/AddNameTranslation.spec.ts | 64 ++++++++++++------- 5 files changed, 50 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 79985170f..0d9cc1098 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "business-edit-ui", - "version": "3.9.8", + "version": "3.9.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "business-edit-ui", - "version": "3.9.8", + "version": "3.9.9", "dependencies": { "@babel/compat-data": "^7.19.1", "@bcrs-shared-components/action-chip": "1.1.3", diff --git a/package.json b/package.json index f3043a011..382716160 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "business-edit-ui", - "version": "3.9.8", + "version": "3.9.9", "private": true, "appName": "Edit UI", "sbcName": "SBC Common Components", diff --git a/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue b/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue index 7d7c34438..ba8618e21 100644 --- a/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue +++ b/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue @@ -5,7 +5,7 @@ attach="#add-name-translation" /> - +
Remove Done diff --git a/src/components/common/YourCompany/NameTranslations/NameTranslation.vue b/src/components/common/YourCompany/NameTranslations/NameTranslation.vue index 93a76559a..b93b09793 100644 --- a/src/components/common/YourCompany/NameTranslations/NameTranslation.vue +++ b/src/components/common/YourCompany/NameTranslations/NameTranslation.vue @@ -19,7 +19,7 @@
{{ translation.name }} diff --git a/tests/unit/AddNameTranslation.spec.ts b/tests/unit/AddNameTranslation.spec.ts index 1d91b6755..d5531fbbb 100644 --- a/tests/unit/AddNameTranslation.spec.ts +++ b/tests/unit/AddNameTranslation.spec.ts @@ -19,7 +19,8 @@ function resetStore (): void { // Local references const addTranslationInput = '#name-translation-input' -const okBtn = '#name-translation-btn-ok' +const doneBtn = '#name-translation-btn-done' +const removeBtn = '#name-translation-btn-remove' const cancelBtn = '#name-translation-btn-cancel' describe('Add Name Translation component', () => { @@ -46,16 +47,18 @@ describe('Add Name Translation component', () => { } }) - it('displays the input field and buttons', async () => { + it('Displays the input field and buttons', async () => { const wrapper = await wrapperFactory() // Verify input field expect(wrapper.find(addTranslationInput).exists()).toBeTruthy() // Verify Action btns and their default states - expect(wrapper.find(okBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() // done button not disabled anymore, validation done by validation function - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() + + expect(wrapper.find(removeBtn).exists()).toBeFalsy() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -63,7 +66,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('enables the Done button when the input is valid', async () => { + it('Enables the Done button when the input is valid', async () => { const wrapper = await wrapperFactory() const vm: any = wrapper.vm @@ -78,8 +81,10 @@ describe('Add Name Translation component', () => { expect(wrapper.find(addTranslationInput).text()).toEqual('Mock Name Translation') // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() + + expect(wrapper.find(removeBtn).exists()).toBeFalsy() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -90,7 +95,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('enables the Done button when the input is valid - French characters', async () => { + it('Enables the Done button when the input is valid - French characters', async () => { const wrapper = await wrapperFactory() const vm: any = wrapper.vm @@ -105,8 +110,10 @@ describe('Add Name Translation component', () => { expect(wrapper.find(addTranslationInput).text()).toEqual('Nom commercial simulé') // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() + + expect(wrapper.find(removeBtn).exists()).toBeFalsy() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -114,7 +121,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('shows the validation message when the input contains an invalid character', async () => { + it('Shows the validation message when the input contains an invalid character', async () => { const wrapper = await wrapperFactory() const vm: any = wrapper.vm @@ -130,9 +137,11 @@ describe('Add Name Translation component', () => { expect(wrapper.find(addTranslationInput).text()).toEqual(invalidText) // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() // done button not disabled anymore, validation done by validation function - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() + + expect(wrapper.find(removeBtn).exists()).toBeFalsy() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -146,7 +155,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('shows the validation message when the input is too long', async () => { + it('Shows the validation message when the input is too long', async () => { const wrapper = await wrapperFactory() const vm: any = wrapper.vm @@ -162,9 +171,9 @@ describe('Add Name Translation component', () => { expect(wrapper.find(addTranslationInput).text()).toEqual(invalidText) // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() // done button not disabled anymore, validation done by validation function - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -178,7 +187,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('displays the correct name when editing a name translation', async () => { + it('Displays the correct name when editing a Name Translation', async () => { const wrapper = await wrapperFactory({ editNameTranslation: 'Mock Name Edit' }) const vm: any = wrapper.vm @@ -187,8 +196,11 @@ describe('Add Name Translation component', () => { expect(wrapper.find(addTranslationInput).element.value).toContain('Mock Name Edit') // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() + + expect(wrapper.find(removeBtn).exists()).toBeTruthy() + expect(wrapper.find(removeBtn).attributes('disabled')).toBeUndefined() // enabled expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -199,7 +211,7 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) - it('shows the validaton message when editing an invalid name translation', async () => { + it('Shows the validaton message when editing an invalid Name Translation', async () => { const wrapper = await wrapperFactory({ editNameTranslation: 'Mock Name Edit' }) const vm: any = wrapper.vm @@ -212,9 +224,9 @@ describe('Add Name Translation component', () => { await wrapper.find(addTranslationInput).trigger('change') // Verify Action btns and their states - expect(wrapper.find(okBtn).exists()).toBeTruthy() + expect(wrapper.find(doneBtn).exists()).toBeTruthy() // done button not disabled anymore, validation done by validation function - expect(wrapper.find(okBtn).attributes('disabled')).toBeUndefined() + expect(wrapper.find(doneBtn).attributes('disabled')).toBeUndefined() expect(wrapper.find(cancelBtn).exists()).toBeTruthy() expect(wrapper.find(cancelBtn).attributes('disabled')).toBeUndefined() @@ -227,4 +239,12 @@ describe('Add Name Translation component', () => { wrapper.destroy() }) + + it('Input text is capitalized', async () => { + const wrapper = await wrapperFactory() + const translationInput = wrapper.find(addTranslationInput) + await translationInput.setValue('Lower case will be capitalized') + + expect(wrapper.find(addTranslationInput).element.value).toBe('LOWER CASE WILL BE CAPITALIZED') + }) })