@availity/feedback 9.1.14 → 10.0.0

package/tests/FeedbackForm.test.jsx

@@ -0,0 +1,347 @@
+import React from 'react';
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { avLogMessagesApiV2, avRegionsApi } from '@availity/api-axios';
+import { FeedbackForm } from '../index.js';
+
+vi.mock('@availity/api-axios');
+
+vi.useFakeTimers();
+
+avLogMessagesApiV2.info = vi.fn(() => Promise.resolve());
+
+avRegionsApi.getCurrentRegion = vi.fn(() =>
+  Promise.resolve({
+    data: {
+      regions: [
+        {
+          id: 'some region id',
+        },
+      ],
+    },
+  })
+);
+
+afterEach(cleanup);
+
+describe('FeedbackForm', () => {
+  beforeEach(() => {
+    // reset log messages api mock
+    avLogMessagesApiV2.info.mockClear();
+    avLogMessagesApiV2.info = vi.fn(() => Promise.resolve());
+  });
+  test('should disable submit button until smile selected', () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    const submitButton = getByText('Send Feedback');
+
+    expect(submitButton.getAttribute('disabled')).not.toBe(null);
+
+    fireEvent.click(getByText('Smiley face'));
+
+    expect(submitButton.getAttribute('disabled')).toBe(null);
+  });
+
+  test('should indicate active smiley', () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    // Get the Option with the smiley face
+    const smileyFeedbackField = getByText('Smiley face');
+
+    // Simulate the Click
+    fireEvent.click(smileyFeedbackField);
+
+    expect(smileyFeedbackField.parentElement.className).toContain('btn-primary');
+
+    expect(smileyFeedbackField.parentElement).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  test.todo('should submit with feedback text value', async () => {
+    const onFeedbackSent = vi.fn();
+
+    const { getByLabelText, getByText } = render(<FeedbackForm onFeedbackSent={onFeedbackSent} name="Payer Space" />);
+
+    // Simulate the Click
+    fireEvent.click(getByText('Smiley face'));
+
+    // Get the Input Node for the Feedback
+    const feedbackNode = getByLabelText('What do you like?');
+
+    // Simulate a user typing the value below into the field
+    fireEvent.change(feedbackNode, {
+      target: { value: 'some good text here' },
+    });
+
+    // Check if the Input Got Updated
+    expect(feedbackNode.value).toEqual('some good text here');
+
+    fireEvent.click(getByText('Send Feedback'));
+
+    await waitFor(
+      () => {
+        expect(onFeedbackSent).toHaveBeenCalledWith(
+          expect.objectContaining({
+            active: 'smile',
+            feedback: 'some good text here',
+          })
+        );
+      },
+      { timeout: 2500 }
+    );
+  });
+
+  test.todo('should submit without feedback text value when feedbackText set to false', async () => {
+    const onFeedbackSent = vi.fn();
+
+    const { getByText } = render(<FeedbackForm onFeedbackSent={onFeedbackSent} name="Payer Space" feedbackText={false}/>);
+
+    // Simulate the Click
+    fireEvent.click(getByText('Smiley face'));
+
+    fireEvent.click(getByText('Send Feedback'));
+
+    await waitFor(
+      () => {
+        expect(onFeedbackSent).toHaveBeenCalledWith(
+          expect.objectContaining({
+            active: 'smile',
+          })
+        );
+      },
+      { timeout: 2500 }
+    );
+  });
+
+  test.todo('should submit and disable button when clicked', async () => {
+    // mock log messages api to return a promise that resolves after 3 seconds
+    avLogMessagesApiV2.info = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          setTimeout(resolve, 3000);
+        })
+    );
+    const { getByLabelText, getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    // Simulate the Click
+    fireEvent.click(getByText('Smiley face'));
+
+    // Get the Input Node for the Feedback
+    const feedbackNode = getByLabelText('What do you like?');
+
+    // Simulate a user typing the value below into the field
+    fireEvent.change(feedbackNode, {
+      target: { value: 'some good text here' },
+    });
+
+    // find the submit button
+    const submitButton = getByText('Send Feedback');
+    // click the submit button twice
+    fireEvent.click(submitButton);
+    // wait for the button to be disabled
+    await waitFor(() => expect(submitButton).toBeDisabled());
+    fireEvent.click(submitButton);
+    // wait for log messages to have been called once
+    await waitFor(() => expect(avLogMessagesApiV2.info).toHaveBeenCalledTimes(1));
+
+    // wait for success message to show
+    await waitFor(() => expect(getByText('Thank you for your feedback.')).toBeInTheDocument(), { timeout: 5000 });
+  });
+
+  test.todo('should submit with feedback text value when enter is pressed', async () => {
+    const onFeedbackSent = vi.fn();
+
+    const { getByLabelText, getByText } = render(<FeedbackForm onFeedbackSent={onFeedbackSent} name="Payer Space" />);
+
+    // Simulate the Click
+    fireEvent.click(getByText('Smiley face'));
+
+    // Get the Input Node for the Feedback
+    const feedbackNode = getByLabelText('What do you like?');
+
+    // Simulate a user typing the value below into the field
+    fireEvent.change(feedbackNode, {
+      target: { value: 'some good text here' },
+    });
+
+    // Check if the Input Got Updated
+    expect(feedbackNode.value).toEqual('some good text here');
+
+    fireEvent.keyDown(getByText('Send Feedback'), {
+      key: 'Enter',
+      keyCode: 13,
+    });
+
+    await waitFor(
+      () => {
+        expect(onFeedbackSent).toHaveBeenCalledWith(
+          expect.objectContaining({
+            active: 'smile',
+            feedback: 'some good text here',
+          })
+        );
+      },
+      { timeout: 2500 }
+    );
+  });
+
+  test.todo('should submit with custom analytics', async () => {
+    const infoFn = vi.fn();
+    const onFeedbackSent = vi.fn();
+
+    const { getByLabelText, getByText } = render(
+      <FeedbackForm
+        onFeedbackSent={onFeedbackSent}
+        name="Payer Space"
+        analytics={{
+          info: infoFn,
+        }}
+      />
+    );
+
+    // Simulate the Click
+    fireEvent.click(getByText('Smiley face'));
+
+    // Get the Input Node for the Feedback
+    const feedbackNode = getByLabelText('What do you like?');
+
+    // Simulate a user typing the value below into the field
+    fireEvent.change(feedbackNode, {
+      target: { value: 'some good text here' },
+    });
+
+    // Check if the Input Got Updated
+    expect(feedbackNode.value).toEqual('some good text here');
+
+    fireEvent.click(getByText('Send Feedback'));
+
+    await waitFor(() => expect(infoFn).toHaveBeenCalledTimes(1));
+  });
+
+  test('should render custom face icons', () => {
+    const faceOptions = [
+      {
+        icon: 'happy',
+        description: 'Happy face',
+      },
+      {
+        icon: 'okay',
+        description: 'Okay face',
+      },
+      {
+        icon: 'sad',
+        description: 'Sad face',
+      },
+      {
+        icon: 'confused',
+        description: 'Confused face',
+      },
+    ];
+
+    const { getByTestId } = render(<FeedbackForm name="Payer Space" faceOptions={faceOptions} />);
+
+    const faceOptionFields = getByTestId('face-options');
+
+    expect(faceOptionFields.childElementCount).toBe(4);
+
+    for (const faceOption of faceOptions) {
+      expect(faceOptionFields.getElementsByClassName(`icon-${faceOption.icon}`)).not.toBe(null);
+    }
+  });
+
+  test('should render about options', () => {
+    const aboutOptions = [
+      {
+        value: 'this space',
+        label: 'This Payer Space',
+      },
+      {
+        value: 'that space',
+        label: 'That Payer Space',
+      },
+      {
+        value: 'portal',
+        label: 'Portal as a whole',
+      },
+      {
+        value: 'availity',
+        label: 'Availity as a whole',
+      },
+    ];
+    const { getByText } = render(<FeedbackForm name="Payer Space" aboutOptions={aboutOptions} />);
+
+    // Simulate the Click First
+    fireEvent.click(getByText('Smiley face'));
+
+    // Label text on the Select Field to know we rendered it
+    expect(getByText('This is about')).toBeDefined();
+  });
+
+  test('should render custom label when provided', async () => {
+    const { getByText } = render(
+      <FeedbackForm
+        name="Test Space"
+        aboutOptions={[
+          { label: 'Payer 1', value: 'payer1' },
+          { label: 'Payer 2', value: 'payer2' },
+          { label: 'Payer 3', value: 'payer3' },
+          { label: 'Payer 4', value: 'payer4' },
+        ]}
+        aboutLabel="Select payer..."
+      />
+    );
+
+    fireEvent.click(getByText('Meh face'));
+    expect(getByText('Select payer...')).toBeDefined();
+  });
+
+  test('should render additional comments input', () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" additionalComments />);
+
+    fireEvent.click(getByText('Smiley face'));
+
+    expect(getByText('Additional Comments... (Optional)')).toBeDefined();
+  });
+
+  test('should show support', () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" showSupport additionalComments />);
+
+    expect(getByText('Open a support ticket')).toBeDefined();
+  });
+
+  test('should render default heading as div with stylings of h5', () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    const header = getByText('Tell us what you think about Payer Space');
+
+    expect(header.parentElement).toHaveClass('h5');
+    expect(header.parentElement).toHaveAttribute('role', 'heading');
+    expect(header.parentElement).toHaveAttribute('aria-level', '2');
+    expect(header.tagName).toEqual('DIV');
+  });
+
+  test('should have smileys in a group element', () => {
+    const { getByTestId } = render(<FeedbackForm name="Payer Space" />);
+
+    const smileyGroup = getByTestId('face-options');
+
+    expect(smileyGroup).toHaveAttribute('role', 'group');
+    expect(smileyGroup).toHaveAttribute('aria-labelledby', 'feedback-form-header');
+  });
+
+  test.todo('should focus first SmileField button by default', async () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    const firstFeedbackButton = getByText('Smiley face').closest('button');
+    await waitFor(() => {
+      expect(firstFeedbackButton).toHaveFocus();
+    });
+  });
+
+  test.todo('should not focus first SmileField button if autofocus is set to false', async () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" autoFocusFeedbackButton={false} />);
+
+    const firstFeedbackButton = getByText('Smiley face').closest('button');
+    await waitFor(() => {
+      expect(firstFeedbackButton).not.toHaveFocus();
+    });
+  });
+});

package/tests/SupportForm.test.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import { avOrganizationsApi, avWebQLApi } from '@availity/api-axios';
+import nativeForm from '@availity/native-form';
+import SupportForm from '../src/SupportForm';
+
+vi.mock('@availity/api-axios');
+vi.mock('@availity/native-form');
+
+afterEach(cleanup);
+
+const selectItem = async (container, getByText, name) => {
+  const select = container.querySelector('.av__control');
+  fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 });
+
+  const selectOption = await waitFor(() => getByText(name));
+
+  expect(selectOption).toBeDefined();
+
+  fireEvent.click(selectOption);
+
+  expect(container.querySelector('.av__option--is-selected')).toBeDefined();
+  expect(select.querySelector('.av__placeholder')).toBe(null);
+};
+
+describe('SupportForm', () => {
+  test('it ssos', async () => {
+    const setSupportIsActive = vi.fn();
+    const setBlocking = vi.fn();
+    const { container, getByText, getByTestId } = render(
+      <SupportForm setSupportIsActive={setSupportIsActive} setBlocking={setBlocking} />
+    );
+
+    avOrganizationsApi.postGet.mockResolvedValue({
+      data: {
+        organizations: [
+          {
+            id: 'org1',
+            customerId: 'cid1',
+            name: 'Org 1',
+          },
+          {
+            id: 'org2',
+            customerId: 'cid2',
+            name: 'Org 2',
+          },
+          {
+            id: 'org3',
+            customerId: 'cid3',
+            name: 'Org 3',
+          },
+          {
+            id: 'org4',
+            customerId: 'cid4',
+            name: 'Org 4',
+          },
+          {
+            id: 'org5',
+            customerId: 'cid5',
+            name: 'Org 5',
+          },
+        ],
+      },
+    });
+
+    avOrganizationsApi.getOrganizations.mockResolvedValue({
+      data: {
+        totalCount: 5,
+        count: 5,
+        offset: 0,
+        limit: 50,
+        organizations: [
+          {
+            id: 'org1',
+            customerId: 'cid1',
+            name: 'Org 1',
+          },
+          {
+            id: 'org2',
+            customerId: 'cid2',
+            name: 'Org 2',
+          },
+          {
+            id: 'org3',
+            customerId: 'cid3',
+            name: 'Org 3',
+          },
+          {
+            id: 'org4',
+            customerId: 'cid4',
+            name: 'Org 4',
+          },
+          {
+            id: 'org5',
+            customerId: 'cid5',
+            name: 'Org 5',
+          },
+        ],
+      },
+    });
+
+    avWebQLApi.create.mockResolvedValue({
+      data: {
+        data: {
+          salesforceUser: {
+            id: 'sf1',
+            accountId: 'acct1',
+            newCommunity: 'newComm',
+          },
+        },
+      },
+    });
+
+    await selectItem(container, getByText, 'Org 1');
+
+    await fireEvent.click(getByTestId('submit-btn'));
+
+    await waitFor(() => expect(avOrganizationsApi.getOrganizations).toHaveBeenCalledTimes(1));
+    expect(avWebQLApi.create).toHaveBeenCalledTimes(1);
+    expect(nativeForm).toHaveBeenCalledTimes(1);
+
+    expect(nativeForm.mock.calls[0][0]).toBe('BJx3fqX3BH');
+    expect(nativeForm.mock.calls[0][1].orgGenKey).toBe('cid1');
+    expect(nativeForm.mock.calls[0][1].organizationName).toBe('Org 1');
+    expect(nativeForm.mock.calls[0][1].partyId).toBe('org1');
+    expect(nativeForm.mock.calls[0][1].payerId).toBe('AVAILITY');
+    expect(nativeForm.mock.calls[0][1].X_Client_ID).toBe('5430d59f-c5cc-4be7-be5a-34472ec30fe9');
+    expect(nativeForm.mock.calls[0][1].X_XSRF_TOKEN).toBeDefined();
+    expect(nativeForm.mock.calls[0][2].action).toBe('/ms/api/availity/internal/spc/magneto/sso/v1/saml/E-t_s_JQ0P');
+    expect(nativeForm.mock.calls[0][2].target).toBe('_blank');
+  });
+
+  test('should render default heading as div with stylings of h5', () => {
+    const { getByText } = render(<SupportForm />);
+
+    const header = getByText('Open Support Ticket');
+
+    expect(header.parentElement).toHaveClass('h5');
+    expect(header.parentElement).toHaveAttribute('role', 'heading');
+    expect(header.parentElement).toHaveAttribute('aria-level', '2');
+    expect(header.tagName).toEqual('DIV');
+  });
+});

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineProject } from 'vitest/config';
+
+export default defineProject({
+  test: {
+    name: 'feedback',
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['../../vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx,js,jsx}', 'tests/**/*.test.{ts,tsx,js,jsx}'],
+    env: { TZ: 'UTC' },
+    server: {
+      deps: {
+        inline: [/lodash/, /@availity\/yup/],
+      },
+    },
+  },
+});

package/jest.config.js

@@ -1,7 +0,0 @@
-const global = require('../../jest/global-config');
-
-module.exports = {
-  ...global,
-  displayName: 'feedback',
-  coverageDirectory: '../../coverage/feedback',
-};

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
-    "allowJs": true
-  },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}