Skip to content

Commit

Permalink
13959 UI authorization component (#1001)
Browse files Browse the repository at this point in the history
* Added authorization component to review, UI tweaks
* Review changes and test added for authorization
  • Loading branch information
owillborn authored Oct 24, 2022
1 parent 93988ee commit 6590641
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 13 deletions.
43 changes: 31 additions & 12 deletions ppr-ui/src/views/mhrInformation/MhrInformation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<v-col cols="9">
<v-row no-gutters id="mhr-information-header" class="pt-3 pb-3 soft-corners-top">
<v-col cols="auto">
<h1>Manufactured Home Information</h1>
<h1>{{isReviewMode ? 'Review and Confirm' : 'Manufactured Home Information'}}</h1>
<p class="mt-7">
This is the current information for this registration as of
<span class="font-weight-bold">{{ asOfDateTime }}</span>.
Expand All @@ -32,22 +32,31 @@

<!-- MHR Information Review Section -->
<template v-if="isReviewMode">
<HomeOwnersTable
class="px-7"
isMhrTransfer
isReadonlyTable
:homeOwners="reviewOwners"
:currentHomeOwners="getMhrTransferCurrentHomeOwners"
/>
<!-- TODO: Add some form of transferDetails review, either review flag in existing component or
new component. To be added in ticket 13905 -->
<section>
<HomeOwnersTable
class="px-7"
isMhrTransfer
isReadonlyTable
:homeOwners="reviewOwners"
:currentHomeOwners="getMhrTransferCurrentHomeOwners"
/>
</section>
<section id="transfer-certify-section" class="mt-10 py-4">
<CertifyInformation
:setShowErrors="validateAuthorizationError"
@certifyValid="authorizationValid = $event"
/>
</section>
</template>

<!-- MHR Information Section -->
<template v-else>
<HomeOwners isMhrTransfer class="mt-n2" />
<TransferDetails :validateTransferDetails="validateTransferDetails" />
</template>
</section>

<TransferDetails :validateTransferDetails="validateTransferDetails" />
</v-col>
<v-col class="pl-6 pt-5" cols="3">
<aside>
Expand Down Expand Up @@ -89,7 +98,7 @@ import {
submitMhrTransfer,
updateMhrDraft
} from '@/utils'
import { StickyContainer } from '@/components/common'
import { StickyContainer, CertifyInformation } from '@/components/common'
import { useHomeOwners, useMhrInformation } from '@/composables'
import { FeeSummaryTypes } from '@/composables/fees/enums'
import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
Expand All @@ -106,7 +115,8 @@ export default defineComponent({
HomeOwners,
TransferDetails,
HomeOwnersTable,
StickyContainer
StickyContainer,
CertifyInformation
},
props: {
appReady: {
Expand Down Expand Up @@ -150,6 +160,8 @@ export default defineComponent({
isReviewMode: false,
validate: false,
validateTransferDetails: false,
authorizationValid: false,
validateAuthorizationError: false,
feeType: FeeSummaryTypes.MHR_TRANSFER, // FUTURE STATE: To be dynamic, dependent on what changes have been made
isAuthenticated: computed((): boolean => {
return Boolean(sessionStorage.getItem(SessionStorageKeys.KeyCloakToken))
Expand Down Expand Up @@ -228,7 +240,13 @@ export default defineComponent({
const goToReview = async (): Promise<void> => {
localState.validate = true
localState.validateTransferDetails = true
// If already in review mode, file the transfer
if (localState.isReviewMode) {
// Check authorization checkbox
if (!localState.authorizationValid) {
localState.validateAuthorizationError = true
return
}
localState.loading = true
const apiData = await buildApiData()
const mhrTransferFiling = await submitMhrTransfer(apiData, getMhrInformation.value.mhrNumber)
Expand All @@ -238,6 +256,7 @@ export default defineComponent({
? goToDash()
: console.log(mhrTransferFiling?.error) // Handle Schema or Api errors here..
}
// Otherwise if transfer is valid, enter review mode
if (localState.isValidTransfer) {
localState.isReviewMode = true
}
Expand Down
39 changes: 38 additions & 1 deletion ppr-ui/tests/unit/MhrInformation.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { createLocalVue, mount, Wrapper } from '@vue/test-utils'

// local components
import { HomeOwners, MhrInformation } from '@/views'
import { StickyContainer } from '@/components/common'
import { ButtonsStacked, StickyContainer } from '@/components/common'
import mockRouter from './MockRouter'
import { HomeTenancyTypes, RouteNames } from '@/enums'
import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
Expand All @@ -16,6 +16,7 @@ import { mockedAddedPerson, mockedRemovedPerson, mockedOrganization, mockedPerso
import { MhrRegistrationHomeOwnerGroupIF, MhrRegistrationHomeOwnerIF } from '@/interfaces'
import { nextTick } from '@vue/composition-api'
import { TransferDetails } from '@/components/mhrTransfers'
import { CertifyInformation } from '@/components/common'

Vue.use(Vuetify)

Expand Down Expand Up @@ -250,6 +251,16 @@ describe('Mhr Information', () => {
// TRANSFER DETAILS COMPONENT TESTS

it('should render Transfer Details component', async () => {
setupCurrentHomeOwners()
wrapper.vm.$data.dataLoaded = true
await Vue.nextTick()

expect(wrapper.props().isMhrTransfer).toBe(true)
expect(wrapper.vm.$data.getMhrTransferCurrentHomeOwners.length).toBe(1)
expect(wrapper.vm.$data.getMhrTransferHomeOwners.length).toBe(1)

expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)

const mhrTransferDetailsComponent = wrapper.findComponent(MhrInformation).findComponent(TransferDetails)
expect(mhrTransferDetailsComponent.exists()).toBeTruthy()

Expand All @@ -270,4 +281,30 @@ describe('Mhr Information', () => {
// Check that Consideration displayed Declared Value on blur
expect(mhrTransferDetailsComponent.vm.$data.consideration).toBe('$123.00')
})

it('should render Authorization component on review', async () => {
setupCurrentHomeOwners()
wrapper.vm.$data.dataLoaded = true
await Vue.nextTick()

expect(wrapper.props().isMhrTransfer).toBe(true)
expect(wrapper.vm.$data.getMhrTransferCurrentHomeOwners.length).toBe(1)
expect(wrapper.vm.$data.getMhrTransferHomeOwners.length).toBe(1)
expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)

// Enter review mode
expect(wrapper.find('#btn-stacked-submit').exists()).toBe(true)
const submitButton = wrapper.find('#btn-stacked-submit')
submitButton.trigger('click')
await Vue.nextTick()

// Check if Authorization renders in review mode
expect(wrapper.findComponent(MhrInformation).findComponent(CertifyInformation).exists()).toBe(true)

// Check for component's attributes
const authorizationComponent = wrapper.findComponent(MhrInformation).findComponent(CertifyInformation)
expect(authorizationComponent.find('#certify-summary').exists()).toBeTruthy()
expect(authorizationComponent.find('#certify-information').exists()).toBeTruthy()
expect(authorizationComponent.find('#checkbox-certified').exists()).toBeTruthy()
})
})

0 comments on commit 6590641

Please sign in to comment.