From 20c24eb275156f2a313a7c671f0667b88b8ab1f8 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Wed, 2 Oct 2019 14:00:26 -0700 Subject: [PATCH] WIP upgrade react & react-router --- awx/ui_next/package-lock.json | 105 +- awx/ui_next/package.json | 6 +- .../LaunchButton/LaunchButton.test.jsx | 17 +- .../NotificationList.test.jsx | 4 +- .../NotificationListItem.test.jsx.snap | 42 +- .../OrganizationAccess.test.jsx | 2 +- .../OrganizationAccess.test.jsx.snap | 2294 ----------------- .../OrganizationAccessItem.test.jsx.snap | 36 +- .../JobTemplateDetail.test.jsx | 12 +- .../JobTemplateDetail.test.jsx.snap | 194 -- .../__snapshots__/enzymeHelpers.test.jsx.snap | 15 +- awx/ui_next/testUtils/enzymeHelpers.jsx | 55 +- 12 files changed, 183 insertions(+), 2599 deletions(-) delete mode 100644 awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap delete mode 100644 awx/ui_next/src/screens/Template/JobTemplateDetail/__snapshots__/JobTemplateDetail.test.jsx.snap diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json index b1c6ee520c..5ec2c0cd7c 100644 --- a/awx/ui_next/package-lock.json +++ b/awx/ui_next/package-lock.json @@ -11596,6 +11596,16 @@ "dom-walk": "^0.1.0" } }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -13346,25 +13356,13 @@ } }, "react": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", - "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", + "version": "16.10.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.10.1.tgz", + "integrity": "sha512-2bisHwMhxQ3XQz4LiJJwG3360pY965pTl/MRrZYxIBKVj4fOHoDs5aZAkYXGxDRO1Li+SyjTAilQEbOmtQJHzA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.13.6" - }, - "dependencies": { - "scheduler": { - "version": "0.13.6", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", - "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - } + "prop-types": "^15.6.2" } }, "react-codemirror2": { @@ -13373,20 +13371,20 @@ "integrity": "sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==" }, "react-dom": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", - "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", + "version": "16.10.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.10.1.tgz", + "integrity": "sha512-SmM4ZW0uug0rn95U8uqr52I7UdNf6wdGLeXDmNLfg3y5q5H9eAbdjF5ubQc3bjDyRrvdAB2IKG7X0GzSpnn5Mg==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "scheduler": "^0.16.1" }, "dependencies": { "scheduler": { - "version": "0.13.6", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", - "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.16.1.tgz", + "integrity": "sha512-MIuie7SgsqMYOdCXVFZa8SKoNorJZUWHW8dPgto7uEHn1lX3fg2Gu0TzgK8USj76uxV7vB5eRMnZs/cdEHg+cg==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -13424,30 +13422,51 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-router": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", - "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", "requires": { - "history": "^4.7.2", - "hoist-non-react-statics": "^2.5.0", - "invariant": "^2.2.4", + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.1", - "warning": "^4.0.1" + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.10.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.1.tgz", + "integrity": "sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==" + } + } + } } }, "react-router-dom": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", - "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", "requires": { - "history": "^4.7.2", - "invariant": "^2.2.4", + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", "loose-envify": "^1.3.1", - "prop-types": "^15.6.1", - "react-router": "^4.3.1", - "warning": "^4.0.1" + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" } }, "react-test-renderer": { @@ -16299,14 +16318,6 @@ "makeerror": "1.0.x" } }, - "warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "requires": { - "loose-envify": "^1.0.0" - } - }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json index 44f3e2926d..a18d850791 100644 --- a/awx/ui_next/package.json +++ b/awx/ui_next/package.json @@ -69,10 +69,10 @@ "html-entities": "^1.2.1", "js-yaml": "^3.13.1", "prop-types": "^15.6.2", - "react": "^16.8.6", + "react": "^16.10.1", "react-codemirror2": "^6.0.0", - "react-dom": "^16.8.6", - "react-router-dom": "^4.3.1", + "react-dom": "^16.10.1", + "react-router-dom": "^5.1.2", "react-virtualized": "^9.21.1", "styled-components": "^4.2.0" } diff --git a/awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx b/awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx index d8aa67783c..676758e12a 100644 --- a/awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx +++ b/awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { createMemoryHistory } from 'history'; import { mountWithContexts } from '@testUtils/enzymeHelpers'; import { sleep } from '@testUtils/testUtils'; @@ -29,10 +30,11 @@ describe('LaunchButton', () => { ); expect(wrapper).toHaveLength(1); }); - test('redirects to job after successful launch', async done => { - const history = { - push: jest.fn(), - }; + + test('should redirect to job after successful launch', async () => { + const history = createMemoryHistory({ + initialEntries: ['/jobs/9000'], + }); JobTemplatesAPI.launch.mockResolvedValue({ data: { id: 9000, @@ -51,10 +53,10 @@ describe('LaunchButton', () => { expect(JobTemplatesAPI.readLaunch).toHaveBeenCalledWith(1); await sleep(0); expect(JobTemplatesAPI.launch).toHaveBeenCalledWith(1); - expect(history.push).toHaveBeenCalledWith('/jobs/9000'); - done(); + expect(history.location.pathname).toEqual('/jobs/9000'); }); - test('displays error modal after unsuccessful launch', async done => { + + test('displays error modal after unsuccessful launch', async () => { JobTemplatesAPI.launch.mockRejectedValue( new Error({ response: { @@ -79,6 +81,5 @@ describe('LaunchButton', () => { await sleep(0); wrapper.update(); expect(wrapper.find('Modal').length).toBe(0); - done(); }); }); diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx index 08fd6f161e..3f42d47c04 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx @@ -81,7 +81,9 @@ describe('', () => { ); await sleep(0); wrapper.update(); - expect(wrapper).toMatchSnapshot(); + const dataList = wrapper.find('PaginatedDataList'); + expect(dataList).toHaveLength(1); + expect(dataList.prop('items')).toEqual(data.results); }); test('should render list fetched of items', async () => { diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap index e87fffe7ae..ee9f735fec 100644 --- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap +++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap @@ -159,9 +159,27 @@ exports[` initially renders succe }, "displayName": "Styled(Link)", "foldedComponentIds": Array [], + "propTypes": Object { + "innerRef": [Function], + "onClick": [Function], + "replace": [Function], + "target": [Function], + "to": [Function], + }, "render": [Function], "styledComponentId": "sc-bdVaJa", - "target": [Function], + "target": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Link", + "propTypes": Object { + "innerRef": [Function], + "onClick": [Function], + "replace": [Function], + "target": [Function], + "to": [Function], + }, + "render": [Function], + }, "toString": [Function], "warnTooManyClasses": [Function], "withComponent": [Function], @@ -176,23 +194,29 @@ exports[` initially renders succe > - - - Foo - - + + Foo + + + diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx index b0d0b1bb33..eb0c1b8564 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx @@ -85,7 +85,7 @@ describe('', () => { const wrapper = mountWithContexts( ); - expect(wrapper.find('OrganizationAccess')).toMatchSnapshot(); + expect(wrapper.find('PaginatedDataList')).toHaveLength(1); }); test('should fetch and display access records on mount', async done => { diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap deleted file mode 100644 index 16a90aad59..0000000000 --- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap +++ /dev/null @@ -1,2294 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` initially renders succesfully 1`] = ` - - - - - - - - - - , - ] - } - columns={ - Array [ - Object { - "isSearchable": true, - "isSortable": true, - "key": "first_name", - "name": "First Name", - }, - Object { - "isSearchable": true, - "isSortable": true, - "key": "username", - "name": "Username", - }, - Object { - "isSearchable": true, - "isSortable": true, - "key": "last_name", - "name": "Last Name", - }, - ] - } - onSearch={[Function]} - onSort={[Function]} - qsConfig={ - Object { - "dateFields": Array [ - "modified", - "created", - ], - "defaultParams": Object { - "order_by": "first_name", - "page": 1, - "page_size": 5, - }, - "integerFields": Array [ - "page", - "page_size", - ], - "namespace": "access", - } - } - sortOrder="ascending" - sortedColumnKey="first_name" - > - - , - ] - } - columns={ - Array [ - Object { - "isSearchable": true, - "isSortable": true, - "key": "first_name", - "name": "First Name", - }, - Object { - "isSearchable": true, - "isSortable": true, - "key": "username", - "name": "Username", - }, - Object { - "isSearchable": true, - "isSortable": true, - "key": "last_name", - "name": "Last Name", - }, - ] - } - fillWidth={false} - i18n={"/i18n/"} - isAllSelected={false} - isCompact={false} - onCompact={null} - onExpand={null} - onSearch={[Function]} - onSelectAll={null} - onSort={[Function]} - qsConfig={ - Object { - "dateFields": Array [ - "modified", - "created", - ], - "defaultParams": Object { - "order_by": "first_name", - "page": 1, - "page_size": 5, - }, - "integerFields": Array [ - "page", - "page_size", - ], - "namespace": "access", - } - } - showSelectAll={false} - sortOrder="ascending" - sortedColumnKey="first_name" - > - - -
- - - -
- - -
- - - -
- - - -
- -
- - Search key dropdown - - } - > -
- - - Username - , - - Last Name - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "Search__Dropdown-sc-1dwuww3-2", - "isStatic": true, - "lastClassName": "eQMakY", - "rules": Array [ - "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;::before{border-color:var(--pf-global--BorderColor--200);border-top-left-radius:3px;border-bottom-left-radius:3px;}> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", - ], - }, - "displayName": "Search__Dropdown", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "Search__Dropdown-sc-1dwuww3-2", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - isGrouped={false} - isOpen={false} - isPlain={false} - onSelect={[Function]} - onToggle={[Function]} - position="left" - toggle={ - - First Name - - } - > -
- - -
, - } - } - > - - -
, - } - } - > - - - -
- - - - -
- - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - suppressClassNameWarning={true} - > - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - suppressClassNameWarning={true} - > - - Search value text input - - } - style={ - Object { - "width": "100%", - } - } - > -
- - - - - - - - -
- - - - - - - - - -
- - - - - -
- - - - -
- - - - - -
- -
- - - - -
- -
- - - - - - - Sort By - - - - - Username - , - - Last Name - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "Sort__Dropdown-sc-21g5aw-0", - "isStatic": true, - "lastClassName": "kdSQuN", - "rules": Array [ - "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", - ], - }, - "displayName": "Sort__Dropdown", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "Sort__Dropdown-sc-21g5aw-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - isOpen={false} - onSelect={[Function]} - onToggle={[Function]} - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - First Name - - } - > - - Username - , - - Last Name - , - ] - } - isGrouped={false} - isOpen={false} - isPlain={false} - onSelect={[Function]} - onToggle={[Function]} - position="left" - style={ - Object { - "marginRight": "10px", - } - } - toggle={ - - First Name - - } - > -
- - -
, - } - } - > - - -
, - } - } - > - - - -
- - - - - - Reverse Sort Order - - } - distance={15} - enableFlip={true} - entryDelay={500} - exitDelay={500} - flipBehavior={ - Array [ - "top", - "right", - "bottom", - "left", - "top", - "right", - "bottom", - ] - } - isAppLauncher={false} - maxWidth="18.75rem" - position="top" - trigger="mouseenter focus" - zIndex={9999} - > - - -
- Reverse Sort Order -
- - - } - delay={ - Array [ - 500, - 500, - ] - } - distance={15} - flip={true} - flipBehavior={ - Array [ - "top", - "right", - "bottom", - "left", - "top", - "right", - "bottom", - ] - } - lazy={true} - maxWidth="18.75rem" - onCreate={[Function]} - performance={true} - placement="top" - popperOptions={ - Object { - "modifiers": Object { - "hide": Object { - "enabled": true, - }, - "preventOverflow": Object { - "enabled": true, - }, - }, - } - } - theme="pf-tooltip" - trigger="mouseenter focus" - zIndex={9999} - > - - - - - - - -
-
-
- Reverse Sort Order -
-
-
- - } - > -
- -
-
- Reverse Sort Order -
-
- -
- - - - - - - - - - :not(:first-child){margin-left:20px;}", - ], - }, - "displayName": "DataListToolbar__AdditionalControlsWrapper", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5", - "target": "div", - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - > -
- - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- Loading... -
- -
- - - - - - - - - - <_default - isOpen={false} - onClose={[Function]} - title="Error!" - variant="danger" - > - - } - > - - - - - -`; diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap index d83714dcbb..beb4d775df 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap +++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap @@ -273,9 +273,27 @@ exports[` initially renders succesfully 1`] = ` }, "displayName": "Styled(Link)", "foldedComponentIds": Array [], + "propTypes": Object { + "innerRef": [Function], + "onClick": [Function], + "replace": [Function], + "target": [Function], + "to": [Function], + }, "render": [Function], "styledComponentId": "sc-bdVaJa", - "target": [Function], + "target": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Link", + "propTypes": Object { + "innerRef": [Function], + "onClick": [Function], + "replace": [Function], + "target": [Function], + "to": [Function], + }, + "render": [Function], + }, "toString": [Function], "warnTooManyClasses": [Function], "withComponent": [Function], @@ -290,19 +308,25 @@ exports[` initially renders succesfully 1`] = ` > - - jane - + + jane + + diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx index 19ae913eaf..3c9a6f3e33 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx @@ -50,14 +50,7 @@ describe('', () => { jest.clearAllMocks(); }); - test('initially renders succesfully', () => { - const wrapper = mountWithContexts( - - ); - expect(wrapper).toMatchSnapshot(); - }); - - test('Can load with missing summary fields', async done => { + test('Can load with missing summary fields', async () => { const mockTemplate = { ...template }; mockTemplate.summary_fields = { user_capabilities: {} }; @@ -69,8 +62,8 @@ describe('', () => { 'Detail[label="Description"]', el => el.length === 1 ); - done(); }); + test('When component mounts API is called to get instance groups', async done => { const wrapper = mountWithContexts( @@ -89,6 +82,7 @@ describe('', () => { expect(JobTemplatesAPI.readInstanceGroups).toHaveBeenCalledTimes(1); done(); }); + test('Edit button is absent when user does not have edit privilege', async done => { const regularUser = { forks: 1, diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/__snapshots__/JobTemplateDetail.test.jsx.snap b/awx/ui_next/src/screens/Template/JobTemplateDetail/__snapshots__/JobTemplateDetail.test.jsx.snap deleted file mode 100644 index 420d631c76..0000000000 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/__snapshots__/JobTemplateDetail.test.jsx.snap +++ /dev/null @@ -1,194 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` initially renders succesfully 1`] = ` - - - - - - - - - - -
- -
- Loading... -
- -
- - - - - - - - - - -`; diff --git a/awx/ui_next/testUtils/__snapshots__/enzymeHelpers.test.jsx.snap b/awx/ui_next/testUtils/__snapshots__/enzymeHelpers.test.jsx.snap index 6e8daa0552..c23aff5a8c 100644 --- a/awx/ui_next/testUtils/__snapshots__/enzymeHelpers.test.jsx.snap +++ b/awx/ui_next/testUtils/__snapshots__/enzymeHelpers.test.jsx.snap @@ -45,14 +45,19 @@ exports[`mountWithContexts injected I18nProvider should mount and render deeply exports[`mountWithContexts injected Router should mount and render 1`] = ` `; diff --git a/awx/ui_next/testUtils/enzymeHelpers.jsx b/awx/ui_next/testUtils/enzymeHelpers.jsx index 1ba808266d..37d5ee1a5a 100644 --- a/awx/ui_next/testUtils/enzymeHelpers.jsx +++ b/awx/ui_next/testUtils/enzymeHelpers.jsx @@ -5,6 +5,7 @@ import React from 'react'; import { shape, object, string, arrayOf } from 'prop-types'; import { mount, shallow } from 'enzyme'; +import { MemoryRouter, Router } from 'react-router-dom'; import { I18nProvider } from '@lingui/react'; import { ConfigProvider } from '../src/contexts/Config'; @@ -13,13 +14,13 @@ const intlProvider = new I18nProvider( { language, catalogs: { - [language]: {} - } + [language]: {}, + }, }, {} ); const { - linguiPublisher: { i18n: originalI18n } + linguiPublisher: { i18n: originalI18n }, } = intlProvider.getChildContext(); const defaultContexts = { @@ -34,13 +35,14 @@ const defaultContexts = { ansible_version: null, custom_virtualenvs: [], version: null, - toJSON: () => '/config/' + toJSON: () => '/config/', }, router: { - history: { + history_: { push: () => {}, replace: () => {}, createHref: () => {}, + listen: () => {}, location: { hash: '', pathname: '', @@ -61,33 +63,38 @@ const defaultContexts = { isExact: false, path: '', url: '', - } + }, }, toJSON: () => '/router/', }, }; -function wrapContexts (node, context) { - const { config } = context; +function wrapContexts(node, context) { + const { config, router } = context; class Wrap extends React.Component { - render () { + render() { // eslint-disable-next-line react/no-this-in-sfc const { children, ...props } = this.props; const component = React.cloneElement(children, props); + if (router.history) { + return ( + + {component} + + ); + } return ( - {component} + {component} ); } } - return ( - {node} - ); + return {node}; } -function applyDefaultContexts (context) { +function applyDefaultContexts(context) { if (!context) { return defaultContexts; } @@ -101,16 +108,16 @@ function applyDefaultContexts (context) { return newContext; } -export function shallowWithContexts (node, options = {}) { +export function shallowWithContexts(node, options = {}) { const context = applyDefaultContexts(options.context); return shallow(wrapContexts(node, context)); } -export function mountWithContexts (node, options = {}) { +export function mountWithContexts(node, options = {}) { const context = applyDefaultContexts(options.context); const childContextTypes = { linguiPublisher: shape({ - i18n: object.isRequired + i18n: object.isRequired, }).isRequired, config: shape({ ansible_version: string, @@ -122,9 +129,9 @@ export function mountWithContexts (node, options = {}) { location: shape({}), match: shape({}), }).isRequired, - history: shape({}).isRequired, + history: shape({}), }), - ...options.childContextTypes + ...options.childContextTypes, }; return mount(wrapContexts(node, context), { context, childContextTypes }); } @@ -136,11 +143,15 @@ export function mountWithContexts (node, options = {}) { * @param[selector] - The selector of the element(s) to wait for. * @param[callback] - Callback to poll - by default this checks for a node count of 1. */ -export function waitForElement (wrapper, selector, callback = el => el.length === 1) { +export function waitForElement( + wrapper, + selector, + callback = el => el.length === 1 +) { const interval = 100; return new Promise((resolve, reject) => { let attempts = 30; - (function pollElement () { + (function pollElement() { wrapper.update(); const el = wrapper.find(selector); if (callback(el)) { @@ -151,6 +162,6 @@ export function waitForElement (wrapper, selector, callback = el => el.length == return reject(new Error(message)); } return setTimeout(pollElement, interval); - }()); + })(); }); }