diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 4767a7739..c06ae5c43 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,6 +1,6 @@ trigger: branches: - include: [ develop, release/* ] + include: [develop, release/*] paths: exclude: - deployment/* @@ -8,7 +8,7 @@ trigger: - "*" pr: branches: - include: [ '*' ] + include: ["*"] paths: exclude: - deployment/* @@ -35,144 +35,157 @@ variables: stages: # PR's - ${{ if eq(variables['Build.Reason'], 'PullRequest') }}: - - stage: TestPr - displayName: Run Unit Tests For PullRequest - jobs: - - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps - parameters: - nodeContainer: node - npmLocation: $(Build.SourcesDirectory) - testResultsFile: junit.xml - summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml + - stage: TestPr + displayName: Run Unit Tests For PullRequest + jobs: + - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps + parameters: + nodeContainer: node + npmLocation: $(Build.SourcesDirectory) + testResultsFile: junit.xml + summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml + - # Dev Build/Deploy - ${{ else }}: - - stage: Dev - condition: eq(variables['Build.SourceBranch'], variables['dev-branch'] ) - variables: - - group: FixMyGlassDev - jobs: - - deployment: devBuildDeployment - displayName: Build and Deploy FMG - Dev - environment: digitalCloud-dev - container: node - workspace: - clean: all - strategy: - runOnce: - deploy: - steps: - - checkout: self - clean: true - - template: templates/digital/step-build-vue.yml@AzureDevOps - parameters: - buildOutputDir: dist - environment: Dev - - template: templates/digital/step-deploy-vue.yml@AzureDevOps - parameters: - artifactName: vueDistDev - awsProfile: $(devDeploymentProfile) - outputPath: /fmg/ - deployBuckets: - safelite-dev-fmg-us-east-1: - clearFolder: true - deployFolder: '' - region: us-east-1 - appDeployVariables: - __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) - __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) - __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) - __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) - indexDeployVariables: - __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) - __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) - cfDistributionId: $(cfDistributionId) + # Dev Build/Deploy + - stage: Dev + condition: eq(variables['Build.SourceBranch'], variables['dev-branch'] ) + variables: + - group: FixMyGlassDev + jobs: + - deployment: devBuildDeployment + displayName: Build and Deploy FMG - Dev + environment: digitalCloud-dev + container: node + workspace: + clean: all + strategy: + runOnce: + deploy: + steps: + - checkout: self + clean: true + - template: templates/digital/step-build-vue.yml@AzureDevOps + parameters: + buildOutputDir: dist + environment: Dev + - template: templates/digital/step-deploy-vue.yml@AzureDevOps + parameters: + artifactName: vueDistDev + awsProfile: $(devDeploymentProfile) + outputPath: /fmg/ + deployBuckets: + safelite-dev-fmg-us-east-1: + clearFolder: true + deployFolder: "" + region: us-east-1 + safelite-dev-fmg-us-east-2: + clearFolder: true + deployFolder: "" + region: us-east-2 + appDeployVariables: + __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) + __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) + __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) + __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) + indexDeployVariables: + __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) + __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) + cfDistributionId: $(cfDistributionId) - # QA Build/Deploy - - stage: Qa - condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] ) - variables: - - group: FixMyGlassQa - jobs: - - deployment: qaBuildDeployment - displayName: Build and Deploy FMG - QA - environment: NoApproval-All - container: node - workspace: - clean: all - strategy: - runOnce: - deploy: - steps: - - checkout: self - clean: true - - template: templates/digital/step-build-vue.yml@AzureDevOps - parameters: - buildOutputDir: dist - environment: Qa - - template: templates/digital/step-deploy-vue.yml@AzureDevOps - parameters: - artifactName: vueDistQa - awsProfile: $(qaDeploymentProfile) - outputPath: /fmg/ - deployBuckets: - safelite-qa-fmg-us-east-1: - clearFolder: true - deployFolder: '' - region: us-east-1 - appDeployVariables: - __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) - __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) - __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) - __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) - indexDeployVariables: - __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) - __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) - cfDistributionId: $(cfDistributionId) + # QA Build/Deploy + - stage: Qa + condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] ) + variables: + - group: FixMyGlassQa + jobs: + - deployment: qaBuildDeployment + displayName: Build and Deploy FMG - QA + environment: NoApproval-All + container: node + workspace: + clean: all + strategy: + runOnce: + deploy: + steps: + - checkout: self + clean: true + - template: templates/digital/step-build-vue.yml@AzureDevOps + parameters: + buildOutputDir: dist + environment: Qa + - template: templates/digital/step-deploy-vue.yml@AzureDevOps + parameters: + artifactName: vueDistQa + awsProfile: $(qaDeploymentProfile) + outputPath: /fmg/ + deployBuckets: + safelite-qa-fmg-us-east-1: + clearFolder: true + deployFolder: "" + region: us-east-1 + safelite-qa-fmg-us-east-2: + clearFolder: true + deployFolder: "" + region: us-east-2 + appDeployVariables: + __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) + __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) + __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) + __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) + indexDeployVariables: + __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) + __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) + cfDistributionId: $(cfDistributionId) - # Prod Build/Deploy - - stage: Prod - condition: succeeded('Qa') - variables: - - group: FixMyGlassProd - jobs: - - deployment: prodBuildDeployment - displayName: Build and Deploy FMG - Prod - environment: digitalCloud-prod - container: node - workspace: - clean: all - strategy: - runOnce: - deploy: - steps: - - checkout: self - clean: true - - template: templates/digital/step-build-vue.yml@AzureDevOps - parameters: - buildOutputDir: dist - environment: Prod - - template: templates/digital/step-deploy-vue.yml@AzureDevOps - parameters: - artifactName: vueDistProd - awsProfile: $(prodDeploymentProfile) - outputPath: /fmg/ - deployBuckets: - safelite-prod-fmg-us-east-1: - clearFolder: true - deployFolder: '' - region: us-east-1 - appDeployVariables: - __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) - __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) - __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) - __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) - indexDeployVariables: - __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) - __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) - cfDistributionId: $(cfDistributionId) - - template: templates/digital/auto-tag.yml@AzureDevOps - parameters: - dependsOn: prodBuildDeployment - userName: SafeliteAzureDevops - userEmail: githubazuredevops@safelite.com \ No newline at end of file + # Prod Build/Deploy + - stage: Prod + condition: succeeded('Qa') + variables: + - group: FixMyGlassProd + jobs: + - deployment: prodBuildDeployment + displayName: Build and Deploy FMG - Prod + environment: digitalCloud-prod + container: node + workspace: + clean: all + strategy: + runOnce: + deploy: + steps: + - checkout: self + clean: true + - template: templates/digital/step-build-vue.yml@AzureDevOps + parameters: + buildOutputDir: dist + environment: Prod + - template: templates/digital/step-deploy-vue.yml@AzureDevOps + parameters: + artifactName: vueDistProd + awsProfile: $(prodDeploymentProfile) + outputPath: /fmg/ + deployBuckets: + safelite-prod-fmg-us-east-1: + clearFolder: true + deployFolder: "" + region: us-east-1 + safelite-prod-fmg-us-east-2: + clearFolder: true + deployFolder: "" + region: us-east-2 + appDeployVariables: + __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) + __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) + __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) + __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) + indexDeployVariables: + __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) + __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) + cfDistributionId: $(cfDistributionId) + - template: templates/digital/auto-tag.yml@AzureDevOps + parameters: + dependsOn: prodBuildDeployment + userName: SafeliteAzureDevops + userEmail: githubazuredevops@safelite.com diff --git a/jest.config.js b/jest.config.js index ded486df9..80b382c5a 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,7 +28,7 @@ module.exports = { testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - statements: 85, + statements: 83, // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index a70ef12bc..006cbcf2c 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -71,51 +71,6 @@ describe("buttonQuestion.vue", () => { }); }); -// testing a computed property -describe("buttonQuestion.vue", () => { - it("getColLength should return '12' if prop isWide is set to true", () => { - // Act - const localThis = { isWide: true }; - - expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12"); - }); -}); - -describe("buttonQuestion.vue", () => { - it("getColLength should return '' if prop isWide is set to false", () => { - // Act - const localThis = { - isWide: false, - answers: ["a", "b"], - groupName: "group-name", - }; - - expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should return answer.Text if prop useTextForValue is true", async () => { - // Act - const localThis = { useTextForValue: true }; - const answer = { Name: "testName", Text: "testText" }; - - // Assert - expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testText"); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should return answer.Name if prop useTextForValue is false and there's not buttonLabel and answer.Name exists", async () => { - // Act - const localThis = { useTextForValue: false }; - const answer = { Name: "testName", Text: "testText" }; - - // Assert - expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testName"); - }); -}); - describe("buttonQuestion.vue", () => { describe("selectedValues", () => { test("is radio => should emit captured value", async () => { @@ -161,6 +116,1006 @@ describe("buttonQuestion.vue", () => { ]); }); }); + + describe("buttonsInfo", () => { + describe("buttonLabel", () => { + test("answers have buttonLabel properties => buttonsInfo buttonsLabel properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonLabel: "Label 1", + }, + { + buttonLabel: "Label 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabel).toEqual("Label 1"); + expect(buttonsInfo[1].buttonLabel).toEqual("Label 2"); + }); + + test("answers have Text properties, no buttonLabel properties => buttonsInfo buttonsLabel properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + Text: "Label 1", + }, + { + Text: "Label 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabel).toEqual("Label 1"); + expect(buttonsInfo[1].buttonLabel).toEqual("Label 2"); + }); + + test("answers have buttonLabel and Text properties => buttonsInfo buttonsLabel properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonLabel: "buttonLabel 1", + Text: "Text 1", + }, + { + buttonLabel: "buttonLabel 2", + Text: "Text 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabel).toEqual("buttonLabel 1"); + expect(buttonsInfo[1].buttonLabel).toEqual("buttonLabel 2"); + }); + + test("answers is an array of strings => buttonLabel is answer values", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabel).toEqual("answer 1"); + expect(buttonsInfo[1].buttonLabel).toEqual("answer 2"); + }); + }); + + describe("altText", () => { + test("answers have altText properties => buttonsInfo altText properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + altText: "altText 1", + }, + { + altText: "altText 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].altText).toEqual("altText 1"); + expect(buttonsInfo[1].altText).toEqual("altText 2"); + }); + + test("answers have Name properties, no buttonLabel properties => buttonsInfo altText properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + Name: "Name 1", + }, + { + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].altText).toEqual("Name 1"); + expect(buttonsInfo[1].altText).toEqual("Name 2"); + }); + + test("answers have altText and Name properties => buttonsInfo altText properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + altText: "altText 1", + Name: "Name 1", + }, + { + altText: "altText 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].altText).toEqual("altText 1"); + expect(buttonsInfo[1].altText).toEqual("altText 2"); + }); + + test("answers is an array of strings => altText is answer values", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].altText).toEqual("answer 1"); + expect(buttonsInfo[1].altText).toEqual("answer 2"); + }); + }); + + describe("buttonLabelSubCopy", () => { + test("answers have buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonLabelSubCopy: "buttonLabelSubCopy 1", + }, + { + buttonLabelSubCopy: "buttonLabelSubCopy 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabelSubCopy).toEqual("buttonLabelSubCopy 1"); + expect(buttonsInfo[1].buttonLabelSubCopy).toEqual("buttonLabelSubCopy 2"); + }); + + test("answers have SubText properties, no buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + SubText: "SubText 1", + }, + { + SubText: "SubText 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabelSubCopy).toEqual("SubText 1"); + expect(buttonsInfo[1].buttonLabelSubCopy).toEqual("SubText 2"); + }); + + test("answers have buttonLabelSubCopy and SubText properties => buttonsInfo buttonLabelSubCopy properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonLabelSubCopy: "buttonLabelSubCopy 1", + SubText: "buttonLabelSubCopy 1", + }, + { + buttonLabelSubCopy: "buttonLabelSubCopy 2", + SubText: "buttonLabelSubCopy 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabelSubCopy).toEqual("buttonLabelSubCopy 1"); + expect(buttonsInfo[1].buttonLabelSubCopy).toEqual("buttonLabelSubCopy 2"); + }); + + test("answers is an array of strings => there are no buttonLabelSubCopy properties", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonLabelSubCopy).toBe(undefined); + expect(buttonsInfo[1].buttonLabelSubCopy).toBe(undefined); + }); + }); + + describe("buttonImage", () => { + test("answers have buttonImage properties => buttonsInfo buttonImage properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonImage: "buttonImage 1", + }, + { + buttonImage: "buttonImage 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImage).toEqual("buttonImage 1"); + expect(buttonsInfo[1].buttonImage).toEqual("buttonImage 2"); + }); + + test("answers have AnswerImageUrl properties, no buttonImage properties => buttonsInfo buttonImage properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + AnswerImageUrl: "AnswerImageUrl 1", + }, + { + AnswerImageUrl: "AnswerImageUrl 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImage).toEqual("AnswerImageUrl 1"); + expect(buttonsInfo[1].buttonImage).toEqual("AnswerImageUrl 2"); + }); + + test("answers have buttonImage and AnswerImageUrl properties => buttonsInfo buttonImage properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonImage: "buttonImage 1", + AnswerImageUrl: "AnswerImageUrl 1", + }, + { + buttonImage: "buttonImage 2", + AnswerImageUrl: "AnswerImageUrl 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImage).toEqual("buttonImage 1"); + expect(buttonsInfo[1].buttonImage).toEqual("buttonImage 2"); + }); + + test("answers is an array of strings => there are no buttonImage properties", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImage).toBe(undefined); + expect(buttonsInfo[1].buttonImage).toBe(undefined); + }); + }); + + describe("buttonImageId", () => { + test("answers have buttonImageId properties => buttonsInfo buttonImageId properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonImageId: "buttonImageId 1", + }, + { + buttonImageId: "buttonImageId 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImageId).toEqual("buttonImageId 1"); + expect(buttonsInfo[1].buttonImageId).toEqual("buttonImageId 2"); + }); + + test("answers have ImageId properties, no buttonImageId properties => buttonsInfo buttonImage properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + ImageId: "ImageId 1", + }, + { + ImageId: "ImageId 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImageId).toEqual("ImageId 1"); + expect(buttonsInfo[1].buttonImageId).toEqual("ImageId 2"); + }); + + test("answers have buttonImageId and ImageId properties => buttonsInfo buttonImageId properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: [ + { + buttonImageId: "buttonImageId 1", + ImageId: "ImageId 1", + }, + { + buttonImageId: "buttonImageId 2", + ImageId: "ImageId 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImageId).toEqual("buttonImageId 1"); + expect(buttonsInfo[1].buttonImageId).toEqual("buttonImageId 2"); + }); + + test("answers is an array of strings => there are no buttonImageId properties", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].buttonImageId).toBe(undefined); + expect(buttonsInfo[1].buttonImageId).toBe(undefined); + }); + }); + + describe("groupName", () => { + const answers = [[["answer 1", "answer 2"]], [[{ value: 1 }, { value: 2 }]]]; + test.each(answers)( + "answers have groupName properties with spaces => buttonsInfo groupName properties are correct", + (answerGroup) => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: answerGroup, + groupName: "this is my group name", + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].groupName).toEqual("this-is-my-group-name"); + expect(buttonsInfo[1].groupName).toEqual("this-is-my-group-name"); + } + ); + + test.each(answers)( + "answers have groupName properties with no spaces => buttonsInfo groupName properties are correct", + (answerGroup) => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + answers: answerGroup, + groupName: "this-is-my-group-name", + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].groupName).toEqual("this-is-my-group-name"); + expect(buttonsInfo[1].groupName).toEqual("this-is-my-group-name"); + } + ); + }); + + describe("value", () => { + describe("useTextForValue is true", () => { + test("answers have value properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + value: "value 1", + }, + { + value: "value 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have Text properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + Text: "Text 1", + }, + { + Text: "Text 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("Text 1"); + expect(buttonsInfo[1].value).toEqual("Text 2"); + }); + + test("answers have Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + Name: "Name 1", + }, + { + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("Name 1"); + expect(buttonsInfo[1].value).toEqual("Name 2"); + }); + + test("answers have value and Text properties, no Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + value: "value 1", + Text: "Text 1", + }, + { + value: "value 2", + Text: "Text 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have value and Name properties, no Text properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + value: "value 1", + Name: "Name 1", + }, + { + value: "value 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have Text and Name properties, no value properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + Text: "Text 1", + Name: "Name 1", + }, + { + Text: "Text 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("Text 1"); + expect(buttonsInfo[1].value).toEqual("Text 2"); + }); + + test("answers have value, Text, and Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: [ + { + value: "value 1", + Text: "Text 1", + Name: "Name 1", + }, + { + value: "value 2", + Text: "Text 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers is an array of strings => buttonInfo value property values are values from array", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: true, + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("answer 1"); + expect(buttonsInfo[1].value).toEqual("answer 2"); + }); + }); + + describe("useTextForValue is false", () => { + test("answers have value properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + value: "value 1", + }, + { + value: "value 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have Text properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + Text: "Text 1", + }, + { + Text: "Text 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toBe(null); + expect(buttonsInfo[1].value).toBe(null); + }); + + test("answers have Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + Name: "Name 1", + }, + { + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("Name 1"); + expect(buttonsInfo[1].value).toEqual("Name 2"); + }); + + test("answers have value and Text properties, no Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + value: "value 1", + Text: "Text 1", + }, + { + value: "value 2", + Text: "Text 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have value and Name properties, no Text properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + value: "value 1", + Name: "Name 1", + }, + { + value: "value 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers have Text and Name properties, no value properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + Text: "Text 1", + Name: "Name 1", + }, + { + Text: "Text 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("Name 1"); + expect(buttonsInfo[1].value).toEqual("Name 2"); + }); + + test("answers have value, Text, and Name properties => buttonsInfo value properties are correct", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: [ + { + value: "value 1", + Text: "Text 1", + Name: "Name 1", + }, + { + value: "value 2", + Text: "Text 2", + Name: "Name 2", + }, + ], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("value 1"); + expect(buttonsInfo[1].value).toEqual("value 2"); + }); + + test("answers is an array of strings => buttonInfo value property values are values from array", () => { + // Arrange + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ + propsData: { + useTextForValue: false, + answers: ["answer 1", "answer 2"], + }, + }) + ); + + // Act + const buttonsInfo = wrapper.vm.buttonsInfo; + + // Assert + expect(buttonsInfo[0].value).toEqual("answer 1"); + expect(buttonsInfo[1].value).toEqual("answer 2"); + }); + }); + }); + }); }); function setupMocks(mountOptionsMockData = {}) { diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 720aed61b..8081814d0 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -2,13 +2,9 @@ @@ -183,13 +176,6 @@ export default { return classes; }, - getColLength() { - if (this.isWide) { - return "12"; - } else { - return ""; - } - }, buttonsInfo() { return (Array.isArray(this.answers) ? this.answers : [])?.map( (answer) => ({ @@ -204,13 +190,11 @@ export default { buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, buttonImageId: answer.buttonImageId ?? answer.ImageId, groupName: this.formatString(this.groupName), - value: - answer.value ?? - (this.useTextForValue - ? answer.Text - : answer.Name ?? answer), - }) - ); + value: + answer.value ?? + (this.useTextForValue && answer.Text ? answer.Text : answer.Name) ?? + (typeof answer !== "object" ? answer : null), + })); }, selectedValues: { get() { @@ -218,30 +202,12 @@ export default { }, set(selectedAnswers) { this.$emit("update:modelValue", selectedAnswers); - } - } + }, + }, }, methods: { formatString(str) { - return str?.replace(" ", "-"); - }, - getValue(answer) { - if (this.useTextForValue) { - return answer.Text; - } - return answer.Name ? answer.Name : answer; - }, - getAnswerString(answer, prop = "Name") { - switch (typeof answer) { - case "string": - case "number": - case "boolean": - return this.formatString(answer.toString()); - default: - return answer[prop] - ? this.formatString(answer[prop]) - : this.formatString(answer.toString()); - } + return str?.replaceAll(" ", "-"); }, setLastValuePushedToGa(lastValuePushedToGa) { this.lastValuePushedToGa = lastValuePushedToGa; diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue index 4dd99fbc5..04f99f0df 100644 --- a/src/common-components/modal/modal.vue +++ b/src/common-components/modal/modal.vue @@ -3,14 +3,17 @@