src/applications/vaos/components/layout/InPersonLayout.unit.spec.js
import React from 'react';
import { expect } from 'chai';
import moment from 'moment';
import {
createTestStore,
renderWithStoreAndRouter,
} from '../../tests/mocks/setup';
import InPersonLayout from './InPersonLayout';
describe('VAOS Component: InPersonLayout', () => {
const initialState = {
appointments: {
facilityData: {
'983': {
address: {
line: ['2360 East Pershing Boulevard'],
city: 'Cheyenne',
state: 'WY',
postalCode: '82001-5356',
},
name: 'Cheyenne VA Medical Center',
telecom: [
{
system: 'phone',
value: '307-778-7550',
},
],
},
},
},
};
describe('When appointment information is missing', () => {
it('should display view facility info when only facility id is returned', async () => {
// Arrange
const state = {
...initialState,
appointments: {
facilityData: {},
},
};
const store = createTestStore(state);
const appointment = {
location: {
vistaId: '983',
clinicId: '848',
stationId: '983',
clinicName: 'CHY PC VAR2',
},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
);
expect(screen.getByText(/Facility details not available/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).not
.to.exist;
expect(
screen.getByRole('link', {
name: /View facility information Link opens in a new tab./i,
}),
);
});
it('should display find facility info when no facility data and no facility id are available', async () => {
// Arrange
const state = {
...initialState,
appointments: {
facilityData: {},
},
};
const store = createTestStore(state);
const appointment = {
location: {},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
);
expect(screen.getByText(/Facility details not available/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).not
.to.exist;
expect(
screen.getByRole('link', {
name: /Find facility information Link opens in a new tab/i,
}),
);
});
it('should not display heading and text for empty data', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
location: {
stationId: '983',
},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
apiData: {},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(screen.queryByRole('heading', { level: 2, name: /What/i })).not.to
.exist;
expect(screen.queryByRole('heading', { level: 2, name: /Who/i })).not.to
.exist;
expect(
screen.getByText((content, element) => {
return (
element.tagName.toLowerCase() === 'span' &&
content === 'Location: Not available'
);
}),
);
expect(
screen.getByText((content, element) => {
return (
element.tagName.toLowerCase() === 'span' &&
content === 'Clinic: Not available'
);
}),
);
expect(
screen.getByText((content, element) => {
return (
element.tagName.toLowerCase() === 'span' &&
content === 'Reason: Not available'
);
}),
);
expect(
screen.getByText((content, element) => {
return (
element.tagName.toLowerCase() === 'span' &&
content === 'Other details: Not available'
);
}),
);
});
it('should display facility phone when clinic phone is missing', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
location: {
stationId: '983',
},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
apiData: {},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.container.querySelector('va-telephone[contact="307-778-7550"]'),
).to.be.ok;
});
it('should display display VA main phone when facility id is missing', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
location: {},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
apiData: {},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.container.querySelector('va-telephone[contact="800-698-2411"]'),
).to.be.ok;
});
});
describe('When viewing upcoming appointment details', () => {
it('should display in-person layout', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
reasonForAppointment: 'This is a test',
patientComments: 'Additional information:colon',
practitioners: [
{
name: {
family: 'User',
given: ['Test'],
},
},
],
location: {
stationId: '983',
clinicName: 'Clinic 1',
clinicPhysicalLocation: 'CHEYENNE',
clinicPhone: '500-500-5000',
clinicPhoneExtension: '1234',
},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
isCancellable: true,
apiData: {
serviceType: 'primaryCare',
},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', {
level: 1,
name: /In-person appointment/i,
}),
);
expect(screen.getByRole('heading', { level: 2, name: /When/i }));
expect(
screen.container.querySelector('va-button[text="Add to calendar"]'),
).to.be.ok;
expect(screen.getByRole('heading', { level: 2, name: /What/i }));
expect(screen.getByText(/Primary care/i));
expect(screen.getByRole('heading', { level: 2, name: /Who/i }));
expect(screen.getByText(/Test User/i));
expect(
screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
);
expect(screen.getByText(/Cheyenne VA Medical Center/i));
expect(screen.getByText(/2360 East Pershing Boulevard/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
.ok;
expect(screen.getByText(/Location:/i));
expect(screen.getByText(/CHEYENNE/));
expect(screen.getByText(/Clinic:/i));
expect(screen.getByText(/Clinic 1/i));
expect(screen.getByText(/Phone:/i));
expect(
screen.container.querySelector('va-telephone[contact="500-500-5000"]'),
).to.be.ok;
expect(screen.container.querySelector('va-telephone[extension="1234"]'))
.to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Prepare for your appointment/i,
}),
);
expect(
screen.getByText(
/Bring your insurance cards. And bring a list of your medications and other information to share with your provider./i,
),
);
expect(
screen.container.querySelector(
'va-link[href="https://www.va.gov/resources/what-should-i-bring-to-my-health-care-appointments/"]',
),
).to.be.ok;
expect(
screen.container.querySelector(
'va-link[text="Find a full list of things to bring to your appointment"]',
),
).to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Details you shared with your provider/i,
}),
);
expect(screen.getByText(/Reason: This is a test/i));
expect(screen.getByText(/Other details: Additional information:colon/i));
expect(screen.container.querySelector('va-button[text="Print"]'));
expect(
screen.container.querySelector('va-button[text="Cancel appointment"]'),
).to.be.ok;
});
it('should display in-person layout without cancel button', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
reasonForAppointment: 'This is a test',
patientComments: 'Additional information:colon',
location: {
stationId: '983',
clinicName: 'Clinic 1',
clinicPhysicalLocation: 'CHEYENNE',
},
videoData: {},
vaos: {
isCommunityCare: false,
isCompAndPenAppointment: false,
isCOVIDVaccine: false,
isPendingAppointment: false,
isUpcomingAppointment: true,
isCancellable: false,
apiData: {
serviceType: 'primaryCare',
},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', {
level: 1,
name: /In-person appointment/i,
}),
);
expect(screen.getByRole('heading', { level: 2, name: /When/i }));
expect(
screen.container.querySelector('va-button[text="Add to calendar"]'),
).to.be.ok;
expect(screen.getByRole('heading', { level: 2, name: /What/i }));
expect(screen.getByText(/Primary care/i));
expect(
screen.getByRole('heading', { level: 2, name: /Where to attend/i }),
);
expect(screen.getByText(/Cheyenne VA Medical Center/i));
expect(screen.getByText(/2360 East Pershing Boulevard/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
.ok;
expect(screen.getByText(/Location:/i));
expect(screen.getByText(/CHEYENNE/));
expect(screen.getByText(/Clinic:/i));
expect(screen.getByText(/Clinic 1/i));
expect(screen.getByText(/Phone:/i));
expect(
screen.container.querySelector('va-telephone[contact="307-778-7550"]'),
).to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Prepare for your appointment/i,
}),
);
expect(
screen.getByText(
/Bring your insurance cards. And bring a list of your medications and other information to share with your provider./i,
),
);
expect(
screen.container.querySelector(
'va-link[href="https://www.va.gov/resources/what-should-i-bring-to-my-health-care-appointments/"]',
),
).to.be.ok;
expect(
screen.container.querySelector(
'va-link[text="Find a full list of things to bring to your appointment"]',
),
).to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Details you shared with your provider/i,
}),
);
expect(screen.getByText(/Reason: This is a test/i));
expect(screen.getByText(/Other details: Additional information:colon/i));
expect(screen.container.querySelector('va-button[text="Print"]'));
expect(
screen.container.querySelector('va-button[text="Cancel appointment"]'),
).not.to.exist;
});
});
describe('When viewing past appointment details', () => {
it('should display in-person layout', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
reasonForAppointment: 'This is a test',
patientComments: 'Additional information:colon',
location: {
stationId: '983',
clinicName: 'Clinic 1',
clinicPhysicalLocation: 'CHEYENNE',
clinicPhone: '500-500-5000',
clinicPhoneExtension: '1234',
},
videoData: {},
vaos: {
isPastAppointment: true,
isCancellable: true,
apiData: {
localStartTime: moment()
.subtract(1, 'day')
.format('YYYY-MM-DDTHH:mm:ss'),
serviceType: 'primaryCare',
},
},
status: 'booked',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', {
level: 1,
name: /Past in-person appointment/i,
}),
);
expect(
screen.getByRole('heading', { level: 2, name: /After visit summary/i }),
);
expect(screen.getByRole('heading', { level: 2, name: /When/i }));
expect(
screen.container.querySelector('va-button[text="Add to calendar"]'),
).not.to.exist;
expect(screen.getByRole('heading', { level: 2, name: /What/i }));
expect(screen.getByText(/Primary care/i));
expect(screen.getByRole('heading', { level: 2, name: /Where/i }));
expect(screen.getByText(/2360 East Pershing Boulevard/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
.ok;
expect(screen.getByText(/Location:/i));
expect(screen.getByText(/CHEYENNE/));
expect(screen.getByText(/Clinic:/i));
expect(screen.getByText(/Clinic 1/i));
expect(screen.getByText(/Phone:/i));
expect(
screen.container.querySelector('va-telephone[contact="500-500-5000"]'),
).to.be.ok;
expect(
screen.queryByRole('heading', {
name: /Prepare for your appointment/i,
}),
).not.to.exist;
expect(
screen.getByRole('heading', {
level: 2,
name: /Details you shared with your provider/i,
}),
);
expect(screen.getByText(/Reason: This is a test/i));
expect(screen.getByText(/Other details: Additional information:colon/i));
expect(screen.container.querySelector('va-button[text="Print"]')).to.be
.ok;
expect(
screen.container.querySelector('va-button[text="Cancel appointment"]'),
).not.to.exist;
});
});
describe('When viewing canceled appointment details', () => {
it('should display in-person layout', async () => {
// Arrange
const store = createTestStore(initialState);
const appointment = {
reasonForAppointment: 'This is a test',
patientComments: 'Additional information:colon',
location: {
stationId: '983',
clinicName: 'Clinic 1',
clinicPhysicalLocation: 'CHEYENNE',
clinicPhone: '500-500-5000',
clinicPhoneExtension: '1234',
},
videoData: {},
vaos: {
isUpcomingAppointment: true,
apiData: {
localStartTime: moment().format('YYYY-MM-DDTHH:mm:ss'),
serviceType: 'primaryCare',
},
},
status: 'cancelled',
};
// Act
const screen = renderWithStoreAndRouter(
<InPersonLayout data={appointment} />,
{
store,
},
);
// Assert
expect(
screen.getByRole('heading', {
level: 1,
name: /Canceled in-person appointment/i,
}),
);
expect(
screen.getByText(
/If you want to reschedule, call us or schedule a new appointment online/i,
),
);
expect(
screen.queryByRole('heading', {
level: 2,
name: /After visit summary/i,
}),
).not.to.exist;
expect(screen.getByRole('heading', { level: 2, name: /When/i }));
expect(
screen.container.querySelector('va-button[text="Add to calendar"]'),
).not.to.exist;
expect(screen.getByRole('heading', { level: 2, name: /What/i }));
expect(screen.getByText(/Primary care/i));
expect(screen.getByRole('heading', { level: 2, name: /Where/i }));
expect(screen.getByText(/2360 East Pershing Boulevard/i));
expect(screen.container.querySelector('va-icon[icon="directions"]')).to.be
.ok;
expect(screen.getByText(/Location:/i));
expect(screen.getByText(/CHEYENNE/));
expect(screen.getByText(/Clinic:/i));
expect(screen.getByText(/Clinic 1/i));
expect(screen.getByText(/Phone:/i));
expect(
screen.container.querySelector('va-telephone[contact="500-500-5000"]'),
).to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Prepare for your appointment/i,
}),
);
expect(
screen.getByText(
/Bring your insurance cards. And bring a list of your medications and other information to share with your provider./i,
),
);
expect(
screen.container.querySelector(
'va-link[href="https://www.va.gov/resources/what-should-i-bring-to-my-health-care-appointments/"]',
),
).to.be.ok;
expect(
screen.container.querySelector(
'va-link[text="Find a full list of things to bring to your appointment"]',
),
).to.be.ok;
expect(
screen.getByRole('heading', {
level: 2,
name: /Details you shared with your provider/i,
}),
);
expect(screen.getByText(/Reason: This is a test/i));
expect(screen.getByText(/Other details: Additional information:colon/i));
expect(screen.container.querySelector('va-button[text="Print"]')).to.be
.ok;
expect(
screen.container.querySelector('va-button[text="Cancel appointment"]'),
).not.exist;
});
});
});