feat: #1083 component testing for usernameInput component

frontend/src/components/grantaccess/UserIdentityCard.vue

@@ -13,11 +13,13 @@ const props = defineProps<{
     <Card class="custom-card">
         <template #header>
             <Icon
+                id="checkmarkIcon"
                 icon="checkmark--filled"
                 :size="IconSize.small"
                 v-if="props.userIdentity.found"
             />
             <Icon
+                id="errorIcon"
                 class="custom-carbon-icon-error--filled"
                 icon="error--filled"
                 :size="IconSize.small"
@@ -28,21 +30,21 @@ const props = defineProps<{
         <template #content>
             <div class="col" style="margin-left: 2rem">
                 <label class="row">Username</label>
-                <span class="row">{{ props.userIdentity.userId }}</span>
+                <span class="row" id="userId">{{ props.userIdentity.userId }}</span>
             </div>
             <div class="col" v-if="props.userIdentity.found">
                 <label class="row">First Name</label>
-                <span class="row">{{ props.userIdentity.firstName }}</span>
+                <span class="row" id="firstName">{{ props.userIdentity.firstName }}</span>
             </div>
-            <div class="col" v-if="props.userIdentity.found">
-                <label class="row">Last Name</label>
+            <div class="col-2" v-if="props.userIdentity.found">
+                <label class="row" id="lastName">Last Name</label>
                 <span class="row">{{ props.userIdentity.lastName }}</span>
             </div>
             <div
                 class="col-6 d-flex"
                 v-if="!props.userIdentity.found"
             >
-                <span class="px-0 invalid"> User does not exist </span>
+                <span class="px-0 invalid" id="userNotExist"> User does not exist </span>
             </div>
         </template>
     </Card>

frontend/src/components/grantaccess/form/UserNameInput.vue

@@ -54,6 +54,7 @@ watch(
         resetVerifiedUserIdentity();
     }
 );
+
 </script>
 
 <template>
@@ -112,7 +113,11 @@ watch(
             </div>
         </Field>
 
-        <div class="col-md-5 px-0" v-if="verifiedUserIdentity">
+        <div
+            v-if="verifiedUserIdentity"
+            id="UserIdentityCard"
+            class="col-md-5 px-0"
+        >
             <UserIdentityCard
                 :userIdentity="verifiedUserIdentity"
             ></UserIdentityCard>

frontend/src/tests/ForestClientCard.spec.ts

@@ -16,6 +16,9 @@ import {
     TEST_SUCCESS_FOREST_CLIENT_NUMBER_3,
 } from './common/ForestClientData';
 import type { FamForestClient } from 'fam-app-acsctl-api';
+import { fixPrimevueCssError } from '@/tests/common/fixPrimevueCssErr';
+
+fixPrimevueCssError()
 
 const testActiveClient: FamForestClient[] = [
     {

frontend/src/tests/ForestClientInput.spec.ts

@@ -17,6 +17,9 @@ import {
 } from './common/ForestClientData';
 import { isLoading, setLoadingState } from '@/store/LoadingState';
 import type { AxiosRequestHeaders, AxiosResponse } from 'axios';
+import { fixPrimevueCssError } from '@/tests/common/fixPrimevueCssErr';
+
+fixPrimevueCssError()
 
 const forestClientsApiSearchMock = (forestClientNumber: string): AxiosResponse => {
     return {

frontend/src/tests/UserDomainSelect.spec.ts

@@ -4,6 +4,9 @@ import { UserType } from 'fam-app-acsctl-api';
 import type { VueWrapper } from '@vue/test-utils/dist/vueWrapper';
 import type { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 import UserDomainSelect from '@/components/grantaccess/form/UserDomainSelect.vue';
+import { fixPrimevueCssError } from '@/tests/common/fixPrimevueCssErr';
+
+fixPrimevueCssError()
 
 describe('UserDomainSelect', () => {
     let wrapper: VueWrapper;

frontend/src/tests/UserIdentityCard.spec.ts

@@ -0,0 +1,84 @@
+import { it, describe, beforeEach, expect} from 'vitest';
+import { mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import type { VueWrapper } from '@vue/test-utils/dist/vueWrapper';
+import type { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
+import UserIdentityCard from '@/components/grantaccess/UserIdentityCard.vue';
+import { fixPrimevueCssError } from '@/tests/common/fixPrimevueCssErr';
+
+fixPrimevueCssError()
+
+describe('UserIdentityCard', () => {
+    let wrapper: VueWrapper;
+
+    let card: DOMWrapper<HTMLElement>;
+    let cardEl: HTMLDivElement;
+    let username: DOMWrapper<HTMLElement>;
+    let usernameEl: HTMLSpanElement;
+    let firstName: DOMWrapper<HTMLElement>;
+    let firstNameEl: HTMLSpanElement;
+    let lastName: DOMWrapper<HTMLElement>;
+    let lastNameEl: HTMLSpanElement;
+    let userNotExist: DOMWrapper<HTMLElement>;
+    let userNotExistEl: HTMLSpanElement;
+    let checkmarkIcon: DOMWrapper<SVGImageElement>;
+    let errorIcon: DOMWrapper<SVGImageElement>;
+
+    const props = {
+        userIdentity: {
+            userId: 'userId',
+            found: true,
+            firstName: 'First Name',
+            lastName: 'Last Name',
+        },
+    };
+
+    const propsNotFound = {
+        userIdentity: {
+            userId: 'userId',
+            found: false,
+            firstName: null,
+            lastName: null,
+        },
+    };
+
+    beforeEach(async () => {
+        wrapper = mount(UserIdentityCard, {
+            props,
+            global: {
+                plugins: [PrimeVue],
+            },
+        });
+
+        card = wrapper.find('.custom-card');
+        cardEl = card.element as HTMLInputElement;
+        username = wrapper.find('#userId');
+        usernameEl = username.element as HTMLSpanElement;
+        firstName = wrapper.find('#firstName');
+        firstNameEl = firstName.element as HTMLSpanElement;
+        lastName = wrapper.find('#lastName');
+        lastNameEl = lastName.element as HTMLSpanElement;
+        checkmarkIcon = wrapper.find('#checkmarkIcon');
+        errorIcon = wrapper.find('#errorIcon');
+    });
+
+    it('Should show correct info on card based on props', () => {
+        //it renders
+        expect(card.element).toBeTruthy();
+
+        expect(usernameEl.textContent).toContain(props.userIdentity.userId);
+        expect(firstNameEl.textContent).toContain(props.userIdentity.firstName);
+        expect(lastNameEl.textContent).toContain(props.userIdentity.lastName);
+        expect(checkmarkIcon).toBeTruthy();
+    });
+
+    it('Should show the User does not exist when receive not found prop', async () => {
+        await wrapper.setProps(propsNotFound);
+        userNotExist = wrapper.find('#userNotExist');
+        userNotExistEl = userNotExist.element as HTMLSpanElement;
+
+        expect(usernameEl.textContent).toContain(propsNotFound.userIdentity.userId);
+        expect(userNotExistEl.textContent).toContain('User does not exist');
+        expect(errorIcon).toBeTruthy();
+    });
+});

frontend/src/tests/UsernameInput.spec.ts

@@ -0,0 +1,171 @@
+import { it, describe, beforeEach, afterEach, expect, vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import { UserType } from 'fam-app-acsctl-api';
+import { AppActlApiService } from '@/services/ApiServiceFactory';
+import UserNameInput from '@/components/grantaccess/form/UserNameInput.vue';
+import { isLoading, setLoadingState } from '@/store/LoadingState';
+import type { VueWrapper } from '@vue/test-utils/dist/vueWrapper';
+import type { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
+import type { AxiosResponse } from 'axios';
+import { fixPrimevueCssError } from '@/tests/common/fixPrimevueCssErr';
+
+fixPrimevueCssError()
+
+
+const userInputMock = (): AxiosResponse => {
+    return {
+        data: {
+            firstName: "Name",
+            found: true,
+            lastName: "LastName",
+            userId: 'userId'
+        },
+        status: 200,
+        statusText: 'Ok',
+        headers: {},
+        config: {},
+    }
+
+}
+
+describe('UserNameInput', () => {
+    let wrapper: VueWrapper;
+    let emitChange: unknown[][] | undefined;
+    let emitSetVerifyResult: unknown[][] | undefined;
+
+    let usernameInputText: DOMWrapper<HTMLElement>;
+    let usernameInputTextEl: HTMLInputElement;
+    let verifyButton: DOMWrapper<HTMLElement>;
+    let verifyButtonEl: HTMLButtonElement;
+
+    let cardUsernameEl: HTMLSpanElement;
+    let verifiedUserIdentity
+
+    const props = {
+        domain: UserType.I,
+        userId: '',
+        fieldId: 'userId',
+    }
+
+    const newProps = {
+        domain: UserType.B,
+        userId: 'newUserId',
+        fieldId: 'newFieldId',
+    };
+
+    const newValue = 'testIdir';
+
+    beforeEach(async () => {
+        wrapper = mount(UserNameInput, {
+            props,
+            global: {
+                plugins: [PrimeVue],
+            },
+        });
+
+        usernameInputText = wrapper.find('#userIdInput');
+        usernameInputTextEl = usernameInputText.element as HTMLInputElement;
+        verifyButton = wrapper.find("[data-target-btn='verifyIdir']");
+        verifyButtonEl = verifyButton.element as HTMLButtonElement;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+        wrapper.unmount();
+    });
+
+    it('Should change usernameInput value', async () => {
+        await usernameInputText.setValue(newValue);
+        expect(usernameInputTextEl.value).toBe(newValue);
+    });
+
+    it('Should receive the correct prop', async () => {
+        //default props
+        expect(wrapper.props()).toEqual(props);
+
+         await wrapper.setProps(newProps);
+         expect(wrapper.props()).toEqual(newProps);
+         expect(wrapper.props()).not.toEqual(props)
+    });
+
+    it('Should call and emit correct value' , async () => {
+        await usernameInputText.setValue(newValue);
+        emitChange = wrapper.emitted('change');
+        expect(wrapper.emitted('change')).toBeTruthy();
+        // test the given parameters when emitChange has been called
+        // i.e. emitChange = [ [ 'B' ] ]
+        expect(emitChange![0][0]).toEqual(newValue);
+
+        emitSetVerifyResult = wrapper.emitted('setVerifyResult')
+        await wrapper.setProps(newProps);
+        await verifyButton.trigger('click');
+
+        expect(wrapper.emitted('setVerifyResult')).toBeTruthy();
+        expect(emitSetVerifyResult![1][0]).toEqual(true);
+    });
+
+    it('Should enable verify btn when username is inputted', async () => {
+        // button starts as disabled
+        expect((verifyButtonEl).disabled).toBe(true)
+        expect(verifyButton.classes('p-disabled')).toBe(true);
+
+        await wrapper.setProps({userId: newProps.userId })
+
+        expect((verifyButtonEl).disabled).toBe(false)
+        expect(verifyButton.classes('p-disabled')).toBe(false);
+    });
+
+    it('Should show loading on the verify btn while we call the api' , async () => {
+        vi.spyOn(
+            AppActlApiService.idirBceidProxyApi,
+            'idirSearch',
+        ).mockImplementation(async () => {
+            setLoadingState(true);
+            return userInputMock();
+        });
+
+        await usernameInputText.setValue(newValue);
+        expect(usernameInputTextEl.value).toBe(newValue);
+
+        await wrapper.setProps({ userId: newProps.userId });
+        await verifyButton.trigger('click');
+        expect(isLoading()).toBe(true);
+        expect(verifyButtonEl.textContent).toContain('Loading');
+
+        // cleanup state variable
+        setLoadingState(false);
+        expect(isLoading()).toBe(false)
+    });
+
+    it('Should remove card and emit different value when domain changes', async () => {
+        emitSetVerifyResult = wrapper.emitted('setVerifyResult');
+        // default props
+        expect(wrapper.props()).toEqual(props);
+
+        await usernameInputText.setValue(newValue);
+        expect(usernameInputTextEl.value).toEqual(newValue);
+
+        await wrapper.setProps(userInputMock().data);
+        await verifyButton.trigger('click');
+        await flushPromises();
+
+        verifiedUserIdentity = wrapper.findComponent({ name: 'UserIdentityCard'}).vm;
+        verifiedUserIdentity = userInputMock().data
+        cardUsernameEl = wrapper.find('#userId').element as HTMLSpanElement;
+        expect(cardUsernameEl).toBeTruthy();
+        expect(cardUsernameEl.textContent).toContain('userId');
+
+        await wrapper.setProps({
+            domain: UserType.B,
+        });
+
+        expect(wrapper.emitted()).toHaveProperty('setVerifyResult');
+
+        // for BCeID should emit true
+        expect(wrapper.emitted().setVerifyResult[1][0]).toEqual(true);
+
+        //UserIdentityCard not em page anymore
+        expect(wrapper.findAll('#UserIdentityCard')).toHaveLength(0);
+    });
+})

frontend/src/tests/common/fixPrimevueCssErr.ts

@@ -0,0 +1,12 @@
+//fix "Could not parse CSS stylesheet" with the primevue styling
+//https://github.com/primefaces/primevue/issues/4512
+//https://stackoverflow.com/questions/69906136/console-error-error-could-not-parse-css-stylesheet/69958999#69958999
+export const fixPrimevueCssError = () => {
+const originalConsoleError = console.error;
+const jsDomCssError = 'Error: Could not parse CSS stylesheet';
+console.error = (...params) => {
+    if (!params.find((p) => p.toString().includes(jsDomCssError))) {
+        originalConsoleError(...params);
+    }
+};
+}