@availity/page-header 14.0.27 → 15.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/README.md +6 -0
- package/dist/index.d.ts +36 -0
- package/dist/index.js +176 -0
- package/index.js +1 -1
- package/package.json +27 -14
- package/project.json +14 -3
- package/tests/PageHeader.test.jsx +320 -0
- package/tsup.config.js +8 -0
- package/vitest.config.ts +17 -0
- package/jest.config.js +0 -7
- package/tsconfig.spec.json +0 -10
- /package/src/{PageHeader.js → PageHeader.jsx} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
# [15.0.0](https://github.com/Availity/availity-react/compare/@availity/page-header@14.0.27...@availity/page-header@15.0.0) (2026-06-12)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `@availity/spaces` updated to version `14.0.27`
|
|
10
|
+
* `@availity/training-link` updated to version `14.0.27`
|
|
11
|
+
* `@availity/app-icon` updated to version `14.0.27`
|
|
12
|
+
* `@availity/breadcrumbs` updated to version `14.0.27`
|
|
13
|
+
* `@availity/feedback` updated to version `14.0.27`
|
|
14
|
+
* `@availity/payer-logo` updated to version `14.0.27`
|
|
15
|
+
|
|
16
|
+
* feat(page-header)!: migrate to ESM exports and vitest ([9347be2](https://github.com/Availity/availity-react/commit/9347be269bf8be2b5b2ba2e881ae30f5f92cf5ce))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### BREAKING CHANGES
|
|
20
|
+
|
|
21
|
+
* Package now uses ESM exports field. CJS require() is no longer supported.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
5
25
|
## [14.0.27](https://github.com/Availity/availity-react/compare/@availity/page-header@14.0.26...@availity/page-header@14.0.27) (2026-06-09)
|
|
6
26
|
|
|
7
27
|
### Dependency Updates
|
package/README.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @availity/page-header
|
|
2
2
|
|
|
3
|
+
## ⚠️ Deprecated
|
|
4
|
+
|
|
5
|
+
This package is deprecated and no longer actively maintained. Future updates are not guaranteed. We recommend migrating to [`@availity/element`](https://availity.github.io/element).
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
3
9
|
> The standard page header for Availity Portal Applications
|
|
4
10
|
|
|
5
11
|
[](https://www.npmjs.com/package/@availity/page-header)
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
type CrumbType = {
|
|
2
|
+
name?: string;
|
|
3
|
+
url?: string;
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
interface RightContentProps extends React.HTMLAttributes<HTMLElement> {
|
|
7
|
+
payerLogo?: React.ReactNode;
|
|
8
|
+
feedback?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
appName: string;
|
|
13
|
+
spaceName?: string;
|
|
14
|
+
spaceId?: string;
|
|
15
|
+
appAbbr?: string;
|
|
16
|
+
iconColor?: string;
|
|
17
|
+
branded?: boolean;
|
|
18
|
+
payerId?: string;
|
|
19
|
+
component?: React.ReactNode;
|
|
20
|
+
feedback?: boolean;
|
|
21
|
+
feedbackProps?: any;
|
|
22
|
+
logo?: boolean;
|
|
23
|
+
linkTag?: React.ComponentType<React.HTMLAttributes<HTMLAnchorElement>> | string;
|
|
24
|
+
titleProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
25
|
+
renderRightContent?: React.FC<RightContentProps>;
|
|
26
|
+
crumbs?: CrumbType[] | React.ReactNode;
|
|
27
|
+
iconSrc?: string;
|
|
28
|
+
iconAlt?: string;
|
|
29
|
+
clientId?: string;
|
|
30
|
+
homeUrl?: string;
|
|
31
|
+
showCrumbs?: boolean;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
declare const PageHeader: React.FC<PageHeaderProps>;
|
|
35
|
+
|
|
36
|
+
export { type PageHeaderProps, type RightContentProps, PageHeader as default };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
// src/PageHeader.jsx
|
|
2
|
+
import React, { useMemo } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import classNames from "classnames";
|
|
5
|
+
import Breadcrumbs from "@availity/breadcrumbs";
|
|
6
|
+
import AppIcon from "@availity/app-icon";
|
|
7
|
+
import Feedback from "@availity/feedback";
|
|
8
|
+
import Spaces, { SpacesLogo, useSpaces, useSpacesContext } from "@availity/spaces";
|
|
9
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
var PageHeader = ({
|
|
11
|
+
payerId = null,
|
|
12
|
+
logo,
|
|
13
|
+
spaceName,
|
|
14
|
+
spaceId = null,
|
|
15
|
+
children,
|
|
16
|
+
appName,
|
|
17
|
+
appAbbr,
|
|
18
|
+
iconColor,
|
|
19
|
+
branded,
|
|
20
|
+
showCrumbs = true,
|
|
21
|
+
crumbs,
|
|
22
|
+
feedback: showFeedback,
|
|
23
|
+
feedbackProps,
|
|
24
|
+
titleProps: { className: titleClassName, ...restTitleProps } = {},
|
|
25
|
+
renderRightContent: RenderRightContent,
|
|
26
|
+
renderRightClassName = "page-header-right",
|
|
27
|
+
component,
|
|
28
|
+
tag: Tag = "div",
|
|
29
|
+
clientId,
|
|
30
|
+
iconSrc,
|
|
31
|
+
iconAlt,
|
|
32
|
+
homeUrl = "/public/apps/dashboard",
|
|
33
|
+
linkTag,
|
|
34
|
+
className,
|
|
35
|
+
...props
|
|
36
|
+
}) => {
|
|
37
|
+
const spaces = useSpaces(spaceId, payerId);
|
|
38
|
+
let firstSpaceForPayerID;
|
|
39
|
+
let firstSpaceForSpaceID;
|
|
40
|
+
if (!spaceId && payerId && spaces[0]) {
|
|
41
|
+
firstSpaceForPayerID = spaces[0];
|
|
42
|
+
} else {
|
|
43
|
+
firstSpaceForSpaceID = spaces[0];
|
|
44
|
+
firstSpaceForPayerID = spaces[1];
|
|
45
|
+
}
|
|
46
|
+
const { loading: spacesIsLoading } = useSpacesContext() || {};
|
|
47
|
+
const _space = firstSpaceForSpaceID || firstSpaceForPayerID;
|
|
48
|
+
let payerLogo = null;
|
|
49
|
+
if (payerId || logo) {
|
|
50
|
+
const logoAttrs = {
|
|
51
|
+
spaceId,
|
|
52
|
+
payerId,
|
|
53
|
+
className: "d-inline-flex",
|
|
54
|
+
skeletonProps: {
|
|
55
|
+
width: 180,
|
|
56
|
+
height: "100%"
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
payerLogo = firstSpaceForPayerID || logo && firstSpaceForSpaceID || spacesIsLoading ? /* @__PURE__ */ jsx(SpacesLogo, { ...logoAttrs }) : /* @__PURE__ */ jsx(
|
|
60
|
+
Spaces,
|
|
61
|
+
{
|
|
62
|
+
spaceIds: spaceId ? [spaceId] : void 0,
|
|
63
|
+
payerIds: payerId ? [payerId] : void 0,
|
|
64
|
+
clientId,
|
|
65
|
+
children: /* @__PURE__ */ jsx(SpacesLogo, { ...logoAttrs })
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
const _spaceName = spaceName || _space && _space.name;
|
|
70
|
+
if ((spaceId || _spaceName) && !crumbs) {
|
|
71
|
+
const url = firstSpaceForSpaceID && firstSpaceForSpaceID.link && firstSpaceForSpaceID.link.url ? firstSpaceForSpaceID.link.url : `/web/spc/spaces/#/${spaceId}`;
|
|
72
|
+
crumbs = [{ name: _spaceName, url }];
|
|
73
|
+
}
|
|
74
|
+
const feedback = useMemo(() => /* @__PURE__ */ jsx(Feedback, { appName, ...feedbackProps }), [appName, feedbackProps]);
|
|
75
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
76
|
+
/* @__PURE__ */ jsxs("div", { className: "page-header-above", children: [
|
|
77
|
+
showCrumbs ? (
|
|
78
|
+
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
79
|
+
/* @__PURE__ */ jsx(Fragment, { children: React.isValidElement(crumbs) ? crumbs : /* @__PURE__ */ jsx(Breadcrumbs, { crumbs, active: appName || children, homeUrl, linkTag }) })
|
|
80
|
+
) : null,
|
|
81
|
+
component
|
|
82
|
+
] }),
|
|
83
|
+
/* @__PURE__ */ jsxs("div", { className: classNames("page-header", className), "data-testid": "page-header", ...props, children: [
|
|
84
|
+
/* @__PURE__ */ jsxs(
|
|
85
|
+
Tag,
|
|
86
|
+
{
|
|
87
|
+
className: classNames("page-header-title", titleClassName),
|
|
88
|
+
"data-testid": "page-header-title",
|
|
89
|
+
...restTitleProps,
|
|
90
|
+
children: [
|
|
91
|
+
!payerId && appAbbr && /* @__PURE__ */ jsx(
|
|
92
|
+
AppIcon,
|
|
93
|
+
{
|
|
94
|
+
"data-testid": "page-header-app-icon",
|
|
95
|
+
color: iconColor,
|
|
96
|
+
branded,
|
|
97
|
+
title: appName,
|
|
98
|
+
src: iconSrc,
|
|
99
|
+
alt: iconAlt,
|
|
100
|
+
"aria-hidden": true,
|
|
101
|
+
children: appAbbr
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
children || /* @__PURE__ */ jsx("h1", { children: appName })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
!RenderRightContent ? /* @__PURE__ */ jsxs("div", { className: "page-header-right", children: [
|
|
109
|
+
showFeedback && feedback,
|
|
110
|
+
payerLogo
|
|
111
|
+
] }) : /* @__PURE__ */ jsx(RenderRightContent, { className: renderRightClassName, payerLogo, feedback })
|
|
112
|
+
] })
|
|
113
|
+
] });
|
|
114
|
+
};
|
|
115
|
+
PageHeader.propTypes = {
|
|
116
|
+
/** Name of the application. */
|
|
117
|
+
appName: PropTypes.string.isRequired,
|
|
118
|
+
/** The name of the class. */
|
|
119
|
+
className: PropTypes.string,
|
|
120
|
+
/** Payer Space Name of the space in which this page is under. */
|
|
121
|
+
spaceName: PropTypes.string,
|
|
122
|
+
/** Payer Space ID of the space in which this page is under. */
|
|
123
|
+
spaceId: PropTypes.string,
|
|
124
|
+
/** If provided and payerId is not provided, the app icon will appear. */
|
|
125
|
+
appAbbr: PropTypes.string,
|
|
126
|
+
/** Potential values: "black", "blue", "green", "orange", "red". Only used if the app icon should appear. Default: "black". */
|
|
127
|
+
iconColor: PropTypes.string,
|
|
128
|
+
/** Triggers the app icon's "branded" styles. Only used if the app icon should appear. */
|
|
129
|
+
branded: PropTypes.bool,
|
|
130
|
+
/** The ID of the payer the application is for. If provided, the payer logo appears and not the app icon. */
|
|
131
|
+
payerId: PropTypes.string,
|
|
132
|
+
/** Allow rendering of an optional component in the top right of the header. */
|
|
133
|
+
component: PropTypes.element,
|
|
134
|
+
/** If true, the feedback loop button appears. */
|
|
135
|
+
feedback: PropTypes.bool,
|
|
136
|
+
/** See Feedback. Props to send to <Feedback /> component */
|
|
137
|
+
feedbackProps: PropTypes.shape({ ...Feedback.propTypes }),
|
|
138
|
+
/** Additional props passed to the page-header-title. */
|
|
139
|
+
titleProps: PropTypes.object,
|
|
140
|
+
/** This value appears at the h1 of the page. Overrides the appName to allow for custom elements (such as a "beta" tag). Default: ${appName}. */
|
|
141
|
+
children: PropTypes.node,
|
|
142
|
+
/** Custom link tag for the links. Default: <a> */
|
|
143
|
+
linkTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
144
|
+
/** Flag whether or not to show the breadcrumbs. Default: true */
|
|
145
|
+
showCrumbs: PropTypes.bool,
|
|
146
|
+
/** Array of Objects containing name (String) and url (String) properties. The ancestor pages which get passed to the Breadcrumbs component. See Breadcrumbs */
|
|
147
|
+
crumbs: PropTypes.oneOfType([
|
|
148
|
+
PropTypes.arrayOf(
|
|
149
|
+
PropTypes.shape({
|
|
150
|
+
name: PropTypes.string,
|
|
151
|
+
url: PropTypes.string
|
|
152
|
+
})
|
|
153
|
+
),
|
|
154
|
+
PropTypes.node
|
|
155
|
+
]),
|
|
156
|
+
/** If true will fetch the payer logo using the spaceId or payerId. */
|
|
157
|
+
logo: PropTypes.bool,
|
|
158
|
+
/** The tag to render the page header as. Default: <h1>. */
|
|
159
|
+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
160
|
+
/** Used to customize the contents of the right side of the page header where the feedback and payer logo get rendered. Accepts the rendered payerLogo and feedback as props */
|
|
161
|
+
renderRightContent: PropTypes.func,
|
|
162
|
+
/** Renders the name of the right side of the page header */
|
|
163
|
+
renderRightClassName: PropTypes.string,
|
|
164
|
+
/** Url for the Home route. Default: public/apps/dashboard. */
|
|
165
|
+
homeUrl: PropTypes.string,
|
|
166
|
+
/** Client ID to use in Spaces to fetch the payer's logo */
|
|
167
|
+
clientId: PropTypes.string,
|
|
168
|
+
/** Image source for <AppIcon /> to be used instead of appAbbr. */
|
|
169
|
+
iconSrc: PropTypes.string,
|
|
170
|
+
/** Required if iconSrc is used. Image alt property of <AppIcon /> */
|
|
171
|
+
iconAlt: PropTypes.string
|
|
172
|
+
};
|
|
173
|
+
var PageHeader_default = PageHeader;
|
|
174
|
+
export {
|
|
175
|
+
PageHeader_default as default
|
|
176
|
+
};
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from './src/PageHeader';
|
|
1
|
+
export { default } from './src/PageHeader.jsx';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/page-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0",
|
|
4
4
|
"description": "The standard page header for Availity Portal Applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -18,34 +18,37 @@
|
|
|
18
18
|
"directory": "packages/page-header"
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
|
+
"type": "module",
|
|
21
22
|
"author": "Evan Sharp <evan.sharp@availity.com>",
|
|
22
|
-
"main": "index.js",
|
|
23
|
-
"types": "index.d.ts",
|
|
24
23
|
"scripts": {
|
|
24
|
+
"build": "tsup --clean",
|
|
25
|
+
"dev": "tsup --watch",
|
|
26
|
+
"clean": "rm -rf dist",
|
|
25
27
|
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
26
28
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
27
29
|
},
|
|
28
30
|
"dependencies": {
|
|
29
|
-
"@availity/app-icon": "
|
|
30
|
-
"@availity/breadcrumbs": "
|
|
31
|
-
"@availity/feedback": "
|
|
32
|
-
"@availity/payer-logo": "
|
|
31
|
+
"@availity/app-icon": "2.0.0",
|
|
32
|
+
"@availity/breadcrumbs": "4.0.0",
|
|
33
|
+
"@availity/feedback": "10.0.0",
|
|
34
|
+
"@availity/payer-logo": "8.0.0",
|
|
33
35
|
"classnames": "^2.5.1",
|
|
34
36
|
"prop-types": "^15.8.1"
|
|
35
37
|
},
|
|
36
38
|
"devDependencies": {
|
|
37
|
-
"@availity/api-axios": "^
|
|
38
|
-
"@availity/spaces": "
|
|
39
|
-
"@availity/training-link": "
|
|
40
|
-
"axios": "^1.
|
|
41
|
-
"formik": "^2.4.
|
|
39
|
+
"@availity/api-axios": "^13.0.2",
|
|
40
|
+
"@availity/spaces": "9.0.0",
|
|
41
|
+
"@availity/training-link": "2.0.0",
|
|
42
|
+
"axios": "^1.17.0",
|
|
43
|
+
"formik": "^2.4.9",
|
|
42
44
|
"react": "^18.3.1",
|
|
43
45
|
"react-dom": "^18.3.1",
|
|
46
|
+
"tsup": "^8.5.1",
|
|
44
47
|
"yup": "^0.32.11"
|
|
45
48
|
},
|
|
46
49
|
"peerDependencies": {
|
|
47
|
-
"@availity/api-axios": "^12.0.0",
|
|
48
|
-
"@availity/spaces": "
|
|
50
|
+
"@availity/api-axios": "^12.0.0 || ^13.0.0",
|
|
51
|
+
"@availity/spaces": "9.0.0",
|
|
49
52
|
"axios": "^1.13.2",
|
|
50
53
|
"formik": "^2.4.6",
|
|
51
54
|
"react": "^18.0.0",
|
|
@@ -54,5 +57,15 @@
|
|
|
54
57
|
},
|
|
55
58
|
"publishConfig": {
|
|
56
59
|
"access": "public"
|
|
60
|
+
},
|
|
61
|
+
"exports": {
|
|
62
|
+
".": {
|
|
63
|
+
"source": "./index.js",
|
|
64
|
+
"import": {
|
|
65
|
+
"types": "./index.d.ts",
|
|
66
|
+
"default": "./dist/index.js"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"./styles.scss": "./styles.scss"
|
|
57
70
|
}
|
|
58
71
|
}
|
package/project.json
CHANGED
|
@@ -4,10 +4,15 @@
|
|
|
4
4
|
"projectType": "library",
|
|
5
5
|
"targets": {
|
|
6
6
|
"test": {
|
|
7
|
-
"executor": "
|
|
8
|
-
"outputs": ["{workspaceRoot}/coverage/page-header"],
|
|
7
|
+
"executor": "nx:run-commands",
|
|
9
8
|
"options": {
|
|
10
|
-
"
|
|
9
|
+
"command": "vitest run --project=page-header",
|
|
10
|
+
"cwd": "."
|
|
11
|
+
},
|
|
12
|
+
"configurations": {
|
|
13
|
+
"ci": {
|
|
14
|
+
"command": "vitest run --project=page-header --coverage"
|
|
15
|
+
}
|
|
11
16
|
}
|
|
12
17
|
},
|
|
13
18
|
"version": {
|
|
@@ -34,6 +39,12 @@
|
|
|
34
39
|
"hasTypeAwareRules": true,
|
|
35
40
|
"cacheStrategy": "metadata"
|
|
36
41
|
}
|
|
42
|
+
},
|
|
43
|
+
"build": {
|
|
44
|
+
"command": "tsup",
|
|
45
|
+
"options": {
|
|
46
|
+
"cwd": "packages/page-header"
|
|
47
|
+
}
|
|
37
48
|
}
|
|
38
49
|
}
|
|
39
50
|
}
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, cleanup, waitFor } from '@testing-library/react';
|
|
3
|
+
import TrainingLink from '@availity/training-link';
|
|
4
|
+
import { avWebQLApi } from '@availity/api-axios';
|
|
5
|
+
import { NavLink } from 'reactstrap';
|
|
6
|
+
import Spaces from '@availity/spaces';
|
|
7
|
+
import PageHeader from '../index.js';
|
|
8
|
+
|
|
9
|
+
vi.mock('@availity/api-axios');
|
|
10
|
+
|
|
11
|
+
afterEach(() => {
|
|
12
|
+
vi.clearAllMocks();
|
|
13
|
+
cleanup();
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
describe('PageHeader', () => {
|
|
17
|
+
test('should render', () => {
|
|
18
|
+
const { getByTestId } = render(<PageHeader appName="Payer Space" />);
|
|
19
|
+
|
|
20
|
+
const pageHeaderTitle = getByTestId('page-header-title');
|
|
21
|
+
|
|
22
|
+
expect(pageHeaderTitle.textContent).toEqual('Payer Space');
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
test('should render app icon', () => {
|
|
26
|
+
const { getByText } = render(<PageHeader appName="Payer Space" appAbbr="PS" />);
|
|
27
|
+
|
|
28
|
+
const icon = getByText('PS');
|
|
29
|
+
expect(icon).toBeDefined();
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
test('should add custom class name', () => {
|
|
33
|
+
const { getByTestId } = render(<PageHeader appName="Payer Space" className="custom-className" />);
|
|
34
|
+
|
|
35
|
+
const pageHeader = getByTestId('page-header');
|
|
36
|
+
|
|
37
|
+
expect(pageHeader.className).toContain('custom-className');
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
test('should render app icon color', () => {
|
|
41
|
+
const { getByTestId } = render(<PageHeader appName="Payer Space" appAbbr="PS" iconColor="green" />);
|
|
42
|
+
|
|
43
|
+
const appIcon = getByTestId('page-header-app-icon');
|
|
44
|
+
|
|
45
|
+
expect(appIcon.className).toContain('icon-green');
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
test('should render app icon color branded', () => {
|
|
49
|
+
const { getByTestId } = render(<PageHeader appName="Payer Space" appAbbr="PS" iconColor="green" branded />);
|
|
50
|
+
|
|
51
|
+
const appIcon = getByTestId('page-header-app-icon');
|
|
52
|
+
|
|
53
|
+
expect(appIcon.className).toContain('icon-branded');
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
test('should render feedback', () => {
|
|
57
|
+
const { getByTestId } = render(<PageHeader appName="Payer Space" feedback />);
|
|
58
|
+
|
|
59
|
+
expect(getByTestId('face-options')).toBeDefined();
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
test('should render children', () => {
|
|
63
|
+
const { getByText } = render(<PageHeader appName="Payer Space">this is cool</PageHeader>);
|
|
64
|
+
|
|
65
|
+
const children = getByText('this is cool');
|
|
66
|
+
expect(children).toBeDefined();
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
test('should render trainingLink', () => {
|
|
70
|
+
const { getByText } = render(
|
|
71
|
+
<PageHeader
|
|
72
|
+
appName="Payer Space"
|
|
73
|
+
component={<TrainingLink name="Appeals" link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />}
|
|
74
|
+
>
|
|
75
|
+
<p>this is cool</p>
|
|
76
|
+
</PageHeader>
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
const el = getByText('Watch a demo');
|
|
80
|
+
expect(el).toBeDefined();
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
describe('spaces', () => {
|
|
84
|
+
test('should work with spaceId', async () => {
|
|
85
|
+
avWebQLApi.create.mockResolvedValue({
|
|
86
|
+
data: {
|
|
87
|
+
data: {
|
|
88
|
+
configurationPagination: {
|
|
89
|
+
pageInfo: {
|
|
90
|
+
itemCount: 1,
|
|
91
|
+
perPage: 1,
|
|
92
|
+
page: 1,
|
|
93
|
+
},
|
|
94
|
+
items: [{ id: '1', name: 'My Space' }],
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
const { getByText } = render(
|
|
100
|
+
<Spaces spaceIds={['1']} clientId="my-client-id">
|
|
101
|
+
<PageHeader appName="Payer Space" spaceId="1" />
|
|
102
|
+
</Spaces>
|
|
103
|
+
);
|
|
104
|
+
const defaultSpace = await waitFor(() => getByText('My Space'));
|
|
105
|
+
expect(defaultSpace.getAttribute('href')).toEqual('/web/spc/spaces/#/1');
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
test('should work with payerId', async () => {
|
|
109
|
+
avWebQLApi.create.mockResolvedValue({
|
|
110
|
+
data: {
|
|
111
|
+
data: {
|
|
112
|
+
configurationPagination: {
|
|
113
|
+
pageInfo: {
|
|
114
|
+
itemCount: 1,
|
|
115
|
+
perPage: 1,
|
|
116
|
+
page: 1,
|
|
117
|
+
},
|
|
118
|
+
items: [
|
|
119
|
+
{
|
|
120
|
+
id: 'payer1',
|
|
121
|
+
name: 'My Space',
|
|
122
|
+
payerIDs: ['payer1'],
|
|
123
|
+
images: {
|
|
124
|
+
logo: '/static/spaces/payer1/logo.png',
|
|
125
|
+
},
|
|
126
|
+
},
|
|
127
|
+
],
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
const { getByTestId } = render(
|
|
134
|
+
<Spaces payerIds={['payer1']} clientId="my-client-id">
|
|
135
|
+
<PageHeader appName="Payer Space" payerId="payer1" clientId="my-client-id" />
|
|
136
|
+
</Spaces>
|
|
137
|
+
);
|
|
138
|
+
|
|
139
|
+
const logo = await waitFor(() => getByTestId('space-images.logo-payer1'));
|
|
140
|
+
expect(logo).toBeDefined();
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
test('should render custom home url', () => {
|
|
145
|
+
const { getByText } = render(<PageHeader homeUrl="/go-home" appName="Payer Space" />);
|
|
146
|
+
|
|
147
|
+
const homeBtn = getByText('Home');
|
|
148
|
+
|
|
149
|
+
expect(homeBtn.getAttribute('href')).toBe('/go-home');
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
test('should accept custom title props', () => {
|
|
153
|
+
const { getByTestId } = render(
|
|
154
|
+
<PageHeader
|
|
155
|
+
appName="Payer Space"
|
|
156
|
+
titleProps={{
|
|
157
|
+
className: 'mb-0',
|
|
158
|
+
}}
|
|
159
|
+
/>
|
|
160
|
+
);
|
|
161
|
+
|
|
162
|
+
const pageHeaderTitle = getByTestId('page-header-title');
|
|
163
|
+
|
|
164
|
+
expect(pageHeaderTitle.className).toContain('mb-0');
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
test('should render custom right content', () => {
|
|
168
|
+
const { getByText } = render(
|
|
169
|
+
<PageHeader
|
|
170
|
+
appName="Payer Space"
|
|
171
|
+
renderRightContent={({ feedback, ...props }) => (
|
|
172
|
+
<div {...props}>
|
|
173
|
+
Hello World
|
|
174
|
+
{feedback}
|
|
175
|
+
</div>
|
|
176
|
+
)}
|
|
177
|
+
/>
|
|
178
|
+
);
|
|
179
|
+
|
|
180
|
+
const helloWorld = getByText('Hello World');
|
|
181
|
+
const giveFeedback = getByText('Give Feedback');
|
|
182
|
+
expect(helloWorld).toBeDefined();
|
|
183
|
+
expect(giveFeedback).toBeDefined();
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
test('should render custom link tag', () => {
|
|
187
|
+
const { getByText } = render(
|
|
188
|
+
<PageHeader
|
|
189
|
+
appName="Payer Space"
|
|
190
|
+
renderRightContent={({ feedback, ...props }) => (
|
|
191
|
+
<div {...props}>
|
|
192
|
+
Hello World
|
|
193
|
+
{feedback}
|
|
194
|
+
</div>
|
|
195
|
+
)}
|
|
196
|
+
linkTag={NavLink}
|
|
197
|
+
/>
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const homeBtn = getByText('Home');
|
|
201
|
+
|
|
202
|
+
expect(homeBtn.className).toBe('nav-link');
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
test('should render with url', async () => {
|
|
206
|
+
avWebQLApi.create.mockResolvedValue({
|
|
207
|
+
data: {
|
|
208
|
+
data: {
|
|
209
|
+
configurationPagination: {
|
|
210
|
+
pageInfo: {
|
|
211
|
+
itemCount: 1,
|
|
212
|
+
perPage: 1,
|
|
213
|
+
page: 1,
|
|
214
|
+
},
|
|
215
|
+
items: [{ id: '1', name: 'My Space', link: { url: '/custom-link' } }],
|
|
216
|
+
},
|
|
217
|
+
},
|
|
218
|
+
},
|
|
219
|
+
});
|
|
220
|
+
const { getByText } = render(
|
|
221
|
+
<Spaces spaceIds={['1']} clientId="my-client-id">
|
|
222
|
+
<PageHeader appName="Payer Space" spaceId="1" />
|
|
223
|
+
</Spaces>
|
|
224
|
+
);
|
|
225
|
+
|
|
226
|
+
const spaceBreadcrumb = await waitFor(() => getByText('My Space'));
|
|
227
|
+
|
|
228
|
+
expect(spaceBreadcrumb.tagName.toLowerCase()).toBe('a');
|
|
229
|
+
|
|
230
|
+
expect(spaceBreadcrumb.getAttribute('href')).toEqual('/custom-link');
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
test('should render custom crumbs', async () => {
|
|
234
|
+
avWebQLApi.create.mockResolvedValue({
|
|
235
|
+
data: {
|
|
236
|
+
data: {
|
|
237
|
+
configurationPagination: {
|
|
238
|
+
pageInfo: {
|
|
239
|
+
itemCount: 1,
|
|
240
|
+
perPage: 1,
|
|
241
|
+
page: 1,
|
|
242
|
+
},
|
|
243
|
+
items: [{ id: '1', name: 'My Space', link: { url: '/custom-link' } }],
|
|
244
|
+
},
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
const { getByText } = render(
|
|
250
|
+
<Spaces spaceIds={['1']} clientId="my-client-id">
|
|
251
|
+
<PageHeader appName="Payer Space" spaceId="1" crumbs={[{ name: 'Custom Crumb', url: '/my-custom-crumb' }]} />
|
|
252
|
+
</Spaces>
|
|
253
|
+
);
|
|
254
|
+
|
|
255
|
+
const spaceBreadcrumb = await waitFor(() => getByText('Custom Crumb'));
|
|
256
|
+
|
|
257
|
+
expect(spaceBreadcrumb.tagName.toLowerCase()).toBe('a');
|
|
258
|
+
|
|
259
|
+
expect(spaceBreadcrumb.getAttribute('href')).toEqual('/my-custom-crumb');
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
test('should hide crumbs', async () => {
|
|
263
|
+
avWebQLApi.create.mockResolvedValue({
|
|
264
|
+
data: {
|
|
265
|
+
data: {
|
|
266
|
+
configurationPagination: {
|
|
267
|
+
pageInfo: {
|
|
268
|
+
itemCount: 1,
|
|
269
|
+
perPage: 1,
|
|
270
|
+
page: 1,
|
|
271
|
+
},
|
|
272
|
+
items: [{ id: '1', name: 'My Space', link: { url: '/custom-link' } }],
|
|
273
|
+
},
|
|
274
|
+
},
|
|
275
|
+
},
|
|
276
|
+
});
|
|
277
|
+
|
|
278
|
+
const { queryByText } = render(
|
|
279
|
+
<Spaces spaceIds={['1']} clientId="my-client-id">
|
|
280
|
+
<PageHeader appName="Payer Space" spaceId="1" showCrumbs={false} />
|
|
281
|
+
</Spaces>
|
|
282
|
+
);
|
|
283
|
+
|
|
284
|
+
const spaceBreadcrumb = await waitFor(() => queryByText('My Space'));
|
|
285
|
+
|
|
286
|
+
expect(spaceBreadcrumb).toBeNull();
|
|
287
|
+
});
|
|
288
|
+
|
|
289
|
+
test('should hide crumbs if custom crumbs passed', async () => {
|
|
290
|
+
avWebQLApi.create.mockResolvedValue({
|
|
291
|
+
data: {
|
|
292
|
+
data: {
|
|
293
|
+
configurationPagination: {
|
|
294
|
+
pageInfo: {
|
|
295
|
+
itemCount: 1,
|
|
296
|
+
perPage: 1,
|
|
297
|
+
page: 1,
|
|
298
|
+
},
|
|
299
|
+
items: [{ id: '1', name: 'My Space', link: { url: '/custom-link' } }],
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
},
|
|
303
|
+
});
|
|
304
|
+
|
|
305
|
+
const { queryByText } = render(
|
|
306
|
+
<Spaces spaceIds={['1']} clientId="my-client-id">
|
|
307
|
+
<PageHeader
|
|
308
|
+
appName="Payer Space"
|
|
309
|
+
spaceId="1"
|
|
310
|
+
showCrumbs={false}
|
|
311
|
+
crumbs={[{ name: 'Custom Crumb', url: '/my-custom-crumb' }]}
|
|
312
|
+
/>
|
|
313
|
+
</Spaces>
|
|
314
|
+
);
|
|
315
|
+
|
|
316
|
+
const spaceBreadcrumb = await waitFor(() => queryByText('Custom Crumb'));
|
|
317
|
+
|
|
318
|
+
expect(spaceBreadcrumb).toBeNull();
|
|
319
|
+
});
|
|
320
|
+
});
|
package/tsup.config.js
ADDED
package/vitest.config.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { defineProject } from 'vitest/config';
|
|
2
|
+
|
|
3
|
+
export default defineProject({
|
|
4
|
+
test: {
|
|
5
|
+
name: 'page-header',
|
|
6
|
+
globals: true,
|
|
7
|
+
environment: 'jsdom',
|
|
8
|
+
setupFiles: ['../../vitest.setup.ts'],
|
|
9
|
+
include: ['src/**/*.test.{ts,tsx,js,jsx}', 'tests/**/*.test.{ts,tsx,js,jsx}'],
|
|
10
|
+
env: { TZ: 'UTC' },
|
|
11
|
+
server: {
|
|
12
|
+
deps: {
|
|
13
|
+
inline: [/lodash/, /@availity\/yup/],
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
});
|
package/jest.config.js
DELETED
package/tsconfig.spec.json
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "./tsconfig.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"outDir": "../../dist/out-tsc",
|
|
5
|
-
"module": "commonjs",
|
|
6
|
-
"types": ["jest", "node", "@testing-library/jest-dom"],
|
|
7
|
-
"allowJs": true
|
|
8
|
-
},
|
|
9
|
-
"include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
|
|
10
|
-
}
|
|
File without changes
|