From 204b2522c4214b982d89759dc615c5b52943a68c Mon Sep 17 00:00:00 2001 From: invinciblejai Date: Tue, 10 Dec 2019 23:13:55 +0530 Subject: [PATCH] updates test and refactors component --- .../__tests__/topology-knative-test-data.ts | 1 + .../overview/RevisionsOverviewList.scss | 7 -- .../overview/RevisionsOverviewList.tsx | 77 +------------ .../overview/RevisionsOverviewListItem.scss | 7 ++ .../overview/RevisionsOverviewListItem.tsx | 74 ++++++++++++ .../__mocks__/overview-knative-mock.ts | 29 ----- .../__tests__/RevisionsOverviewList.spec.tsx | 87 ++++++++++++++ .../RevisionsOverviewListItem.spec.tsx | 108 ++++++++++++++++++ .../__tests__/RoutesOverviewList.spec.tsx | 49 +++----- .../__tests__/RoutesOverviewListItem.spec.tsx | 48 ++++---- 10 files changed, 320 insertions(+), 167 deletions(-) create mode 100644 frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.scss create mode 100644 frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.tsx delete mode 100644 frontend/packages/knative-plugin/src/components/overview/__mocks__/overview-knative-mock.ts create mode 100644 frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewList.spec.tsx create mode 100644 frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewListItem.spec.tsx diff --git a/frontend/packages/dev-console/src/components/topology/__tests__/topology-knative-test-data.ts b/frontend/packages/dev-console/src/components/topology/__tests__/topology-knative-test-data.ts index b2a2c70176d..beef8d47d4b 100644 --- a/frontend/packages/dev-console/src/components/topology/__tests__/topology-knative-test-data.ts +++ b/frontend/packages/dev-console/src/components/topology/__tests__/topology-knative-test-data.ts @@ -292,6 +292,7 @@ export const sampleKnativeRoutes: FirehoseResult = { spec: {}, status: { observedGeneration: 1, + traffic: [{ latestRevision: true, percent: 100, revisionName: 'overlayimage-fdqsf' }], url: 'http://overlayimage.knativeapps.apps.bpetersen-june-23.devcluster.openshift.com', }, }, diff --git a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.scss b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.scss index a23cbd58c8d..94da0f89b81 100644 --- a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.scss +++ b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.scss @@ -4,10 +4,3 @@ justify-content: space-between; align-items: center; } -.odc-revision-deployment-list { - padding: 15px 15px 0px 20px; - &__pod { - width: 25px; - cursor: default; - } -} diff --git a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.tsx b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.tsx index 136c9371345..b1fe556e106 100644 --- a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.tsx +++ b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewList.tsx @@ -1,17 +1,11 @@ import * as React from 'react'; import * as _ from 'lodash'; import { Button } from '@patternfly/react-core'; -import { PodStatus } from '@console/shared'; -import { ChartLabel } from '@patternfly/react-charts'; -import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s'; -import { - ResourceLink, - SidebarSectionHeading, - useAccessReview, -} from '@console/internal/components/utils'; -import { RevisionModel } from '@console/knative-plugin'; +import { K8sResourceKind } from '@console/internal/module/k8s'; +import { SidebarSectionHeading, useAccessReview } from '@console/internal/components/utils'; import { setTrafficDistributionModal } from '../modals'; import { ServiceModel } from '../../models'; +import RevisionsOverviewListItem from './RevisionsOverviewListItem'; import './RevisionsOverviewList.scss'; export type RevisionsOverviewListProps = { @@ -19,70 +13,6 @@ export type RevisionsOverviewListProps = { service: K8sResourceKind; }; -export type RevisionsOverviewListItemProps = { - revision: K8sResourceKind; - service: K8sResourceKind; -}; - -const RevisionsOverviewListItem: React.FC = ({ - revision, - service, -}) => { - const { - metadata: { name, namespace }, - } = revision; - const { - status: { traffic }, - } = service; - const getTraffic = (revName: string) => { - if (!traffic || !traffic.length) { - return null; - } - const trafficPercent = _.get(_.find(traffic, { revisionName: revName }), 'percent', null); - return trafficPercent ? `${trafficPercent}%` : null; - }; - const deploymentData = _.get(revision, 'resources.current.obj.metadata.ownerReferences[0]', {}); - const current = _.get(revision, 'resources.current', null); - const availableReplicas = _.get(revision, 'resources.current.obj.status.availableReplicas', '0'); - return ( -
  • -
    -
    - -
    - {getTraffic(name)} -
    - {deploymentData.name && ( -
    -
    -
    - -
    -
    -
    - } - showTooltip={false} - /> -
    -
    -
    -
    - )} -
    • - ); -}; - const RevisionsOverviewList: React.FC = ({ revisions, service }) => { const canSetTrafficDistribution = useAccessReview({ group: ServiceModel.apiGroup, @@ -90,7 +20,6 @@ const RevisionsOverviewList: React.FC = ({ revisions namespace: service.metadata.namespace, verb: 'update', }); - return ( <> diff --git a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.scss b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.scss new file mode 100644 index 00000000000..bab2b3fb951 --- /dev/null +++ b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.scss @@ -0,0 +1,7 @@ +.odc-revision-deployment-list { + padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm); + &__pod { + width: var(--pf-global--icon--FontSize--lg); + cursor: default; + } + } diff --git a/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.tsx b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.tsx new file mode 100644 index 00000000000..69af60ddf2a --- /dev/null +++ b/frontend/packages/knative-plugin/src/components/overview/RevisionsOverviewListItem.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import * as _ from 'lodash'; +import { PodStatus } from '@console/shared'; +import { ChartLabel } from '@patternfly/react-charts'; +import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s'; +import { ResourceLink } from '@console/internal/components/utils'; +import { RevisionModel } from '@console/knative-plugin'; +import './RevisionsOverviewListItem.scss'; + +export type RevisionsOverviewListItemProps = { + revision: K8sResourceKind; + service: K8sResourceKind; +}; + +const RevisionsOverviewListItem: React.FC = ({ + revision, + service, +}) => { + const { + metadata: { name, namespace }, + } = revision; + const { + status: { traffic }, + } = service; + const getTraffic = (revName: string) => { + if (!traffic || !traffic.length) { + return null; + } + const trafficPercent = _.get(_.find(traffic, { revisionName: revName }), 'percent', null); + return trafficPercent ? `${trafficPercent}%` : null; + }; + const deploymentData = _.get(revision, 'resources.current.obj.metadata.ownerReferences[0]', {}); + const current = _.get(revision, 'resources.current', null); + const availableReplicas = _.get(revision, 'resources.current.obj.status.availableReplicas', '0'); + return ( +
  • +
    +
    + +
    + {getTraffic(name)} +
    + {deploymentData.name && ( +
    +
    +
    + +
    +
    +
    + } + showTooltip={false} + /> +
    +
    +
    +
    + )} +
    • + ); +}; + +export default RevisionsOverviewListItem; diff --git a/frontend/packages/knative-plugin/src/components/overview/__mocks__/overview-knative-mock.ts b/frontend/packages/knative-plugin/src/components/overview/__mocks__/overview-knative-mock.ts deleted file mode 100644 index 21624b34478..00000000000 --- a/frontend/packages/knative-plugin/src/components/overview/__mocks__/overview-knative-mock.ts +++ /dev/null @@ -1,29 +0,0 @@ -export const mockRevisionsData = [ - { - apiVersion: 'serving.knative.dev/v1beta1', - kind: 'Revision', - metadata: { - name: 'tag-portal-v1-sh6rp', - namespace: 'jai-test', - uid: '2e4c5a8f-fa1e-4a75-b6dc-d67e4c8f8cc0', - }, - resources: {}, - }, -]; - -export const mockRoutesData = [ - { - apiVersion: 'serving.knative.dev/v1beta1', - kind: 'Route', - metadata: { - name: 'tag-portal-v1', - namespace: 'jai-test', - uid: '8f88ed7c-0243-4e57-94d8-1203853911a3', - }, - resources: {}, - status: { - traffic: [{ latestRevision: true, percent: 100, revisionName: 'tag-portal-v1-sh6rp' }], - url: 'http://tag-portal-v1.jai-test.apps.rhamilto.devcluster.openshift.com', - }, - }, -]; diff --git a/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewList.spec.tsx b/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewList.spec.tsx new file mode 100644 index 00000000000..0bced77c798 --- /dev/null +++ b/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewList.spec.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import { Button } from '@patternfly/react-core'; +import * as utils from '@console/internal/components/utils'; +import { MockKnativeResources } from '@console/dev-console/src/components/topology/__tests__/topology-knative-test-data'; +import * as modal from '../../modals'; +import RevisionsOverviewList, { RevisionsOverviewListProps } from '../RevisionsOverviewList'; +import RevisionsOverviewListItem from '../RevisionsOverviewListItem'; + +describe('RevisionsOverviewList', () => { + let wrapper: ShallowWrapper; + beforeEach(() => { + wrapper = shallow( + , + ); + }); + + it('should have title Revisions', () => { + expect(wrapper.find(utils.SidebarSectionHeading)).toHaveLength(1); + expect( + wrapper + .find(utils.SidebarSectionHeading) + .at(0) + .props().text, + ).toEqual('Revisions'); + }); + + it('should show info if no Revisions present and traffic split sshould button should be disabled', () => { + const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview'); + spyUseAccessReview.mockReturnValue(true); + wrapper = shallow( + , + ); + expect(wrapper.find('span')).toHaveLength(1); + expect(wrapper.text().includes('No Revisions found for this resource.')).toBe(true); + expect( + wrapper + .find(Button) + .at(0) + .props().isDisabled, + ).toBe(true); + }); + + it('should have button for traffic distribution and enabled', () => { + const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview'); + spyUseAccessReview.mockReturnValue(true); + expect(wrapper.find(Button)).toHaveLength(1); + expect( + wrapper + .find(Button) + .at(0) + .props().children, + ).toEqual('Set Traffic Distribution'); + expect( + wrapper + .find(Button) + .at(0) + .props().isDisabled, + ).toBe(false); + }); + + it('should call setTrafficDistributionModal on click', () => { + const spySetTrafficDistributionModal = jest.spyOn(modal, 'setTrafficDistributionModal'); + expect(wrapper.find(Button)).toHaveLength(1); + wrapper.find(Button).simulate('click'); + expect(spySetTrafficDistributionModal).toHaveBeenCalled(); + }); + + it('should not show button for traffic distribution if access is not there', () => { + const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview'); + spyUseAccessReview.mockReturnValue(false); + wrapper = shallow( + , + ); + expect(wrapper.find(Button).exists()).toBe(false); + }); + + it('should render RevisionsOverviewListItem', () => { + expect(wrapper.find(RevisionsOverviewListItem)).toHaveLength(1); + }); +}); diff --git a/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewListItem.spec.tsx b/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewListItem.spec.tsx new file mode 100644 index 00000000000..3ae3f68b9ca --- /dev/null +++ b/frontend/packages/knative-plugin/src/components/overview/__tests__/RevisionsOverviewListItem.spec.tsx @@ -0,0 +1,108 @@ +import * as React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import { PodStatus } from '@console/shared'; +import { referenceForModel } from '@console/internal/module/k8s'; +import { ResourceLink } from '@console/internal/components/utils'; +import { RevisionModel } from '@console/knative-plugin'; +import { MockKnativeResources } from '@console/dev-console/src/components/topology/__tests__/topology-knative-test-data'; +import RevisionsOverviewListItem, { + RevisionsOverviewListItemProps, +} from '../RevisionsOverviewListItem'; + +describe('RevisionsOverviewListItem', () => { + let wrapper: ShallowWrapper; + beforeEach(() => { + wrapper = shallow( + , + ); + }); + + it('should list the Revision', () => { + expect(wrapper.find('li')).toHaveLength(1); + expect( + wrapper + .find('li') + .at(0) + .props().className, + ).toEqual('list-group-item'); + }); + + it('should have ResourceLink with proper kind', () => { + expect(wrapper.find(ResourceLink)).toHaveLength(1); + expect( + wrapper + .find(ResourceLink) + .at(0) + .props().kind, + ).toEqual(referenceForModel(RevisionModel)); + }); + + it('should show traffic percent', () => { + expect(wrapper.find('span')).toHaveLength(1); + expect( + wrapper + .find('span') + .at(0) + .props().children, + ).toEqual('100%'); + }); + + it('should not show deployments if not present', () => { + expect(wrapper.find('.odc-revision-deployment-list').exists()).toBeFalsy(); + }); + + describe('RevisionsOverviewListItem: deployments', () => { + beforeEach(() => { + const resources = { + current: { + obj: { + metadata: { + ownerReferences: [ + { + apiVersion: 'apps/v1', + blockOwnerDeletion: true, + controller: true, + kind: 'Deployment', + name: 'event-greeter-v1-deployment', + uid: 'd0387ddc-51e8-437d-a100-a001be806d45', + }, + ], + }, + status: { availableReplicas: 1 }, + }, + }, + }; + const mockRevisionsDepData = { ...MockKnativeResources.revisions.data[0], resources }; + wrapper = shallow( + , + ); + }); + + it('should show ResourceLink for deployment', () => { + expect(wrapper.find('.odc-revision-deployment-list')).toHaveLength(1); + expect(wrapper.find(ResourceLink)).toHaveLength(2); + expect( + wrapper + .find(ResourceLink) + .at(1) + .props().kind, + ).toEqual('Deployment'); + }); + + it('should show pods for deployment', () => { + expect(wrapper.find(PodStatus)).toHaveLength(1); + expect( + wrapper + .find(PodStatus) + .at(0) + .props().title, + ).toEqual(1); + }); + }); +}); diff --git a/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewList.spec.tsx b/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewList.spec.tsx index 296a3860b8a..62dc0308e70 100644 --- a/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewList.spec.tsx +++ b/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewList.spec.tsx @@ -1,52 +1,33 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import * as utils from '@console/internal/components/utils'; +import { MockKnativeResources } from '@console/dev-console/src/components/topology/__tests__/topology-knative-test-data'; import RoutesOverviewList from '../RoutesOverviewList'; import RoutesOverviewListItem from '../RoutesOverviewListItem'; -import { mockRevisionsData, mockRoutesData } from '../__mocks__/overview-knative-mock'; -describe('RoutesOverviewList', () => { - it('should component exists', () => { - const wrapper = shallow(); - expect(wrapper.exists()).toBeTruthy(); - }); +type RoutesOverviewListProps = React.ComponentProps; - it('should have title Routes', () => { - const wrapper = shallow( - , +describe('RoutesOverviewList', () => { + let wrapper: ShallowWrapper; + beforeEach(() => { + wrapper = shallow( + , ); - expect(wrapper.find(utils.SidebarSectionHeading)).toHaveLength(1); - expect( - wrapper - .find(utils.SidebarSectionHeading) - .at(0) - .props().text, - ).toEqual('Routes'); }); it('should show info if no Routes present', () => { const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview'); spyUseAccessReview.mockReturnValue(true); - const wrapper = shallow(); - expect(wrapper.find('span')).toHaveLength(1); - expect( - wrapper - .find('span') - .at(0) - .props().className, - ).toEqual('text-muted'); - expect( - wrapper - .find('span') - .at(0) - .props().children, - ).toEqual('No Routes found for this resource.'); + wrapper = shallow( + , + ); + expect(wrapper.text().includes('No Routes found for this resource.')).toBeTruthy(); }); it('should render RoutesOverviewListItem', () => { - const wrapper = shallow( - , - ); expect(wrapper.find(RoutesOverviewListItem)).toHaveLength(1); }); }); diff --git a/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewListItem.spec.tsx b/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewListItem.spec.tsx index 034afcdb8db..e7257925bb5 100644 --- a/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewListItem.spec.tsx +++ b/frontend/packages/knative-plugin/src/components/overview/__tests__/RoutesOverviewListItem.spec.tsx @@ -1,23 +1,25 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import { referenceForModel } from '@console/internal/module/k8s'; import { ResourceLink, ExternalLink } from '@console/internal/components/utils'; +import { MockKnativeResources } from '@console/dev-console/src/components/topology/__tests__/topology-knative-test-data'; import { RouteModel } from '@console/knative-plugin'; import RoutesOverviewListItem from '../RoutesOverviewListItem'; -import { mockRevisionsData, mockRoutesData } from '../__mocks__/overview-knative-mock'; + +type RoutesOverviewListItemProps = React.ComponentProps; describe('RoutesOverviewListItem', () => { - it('should component exists', () => { - const wrapper = shallow( - , + let wrapper: ShallowWrapper; + beforeEach(() => { + wrapper = shallow( + , ); - expect(wrapper.exists()).toBeTruthy(); }); it('should list the Route', () => { - const wrapper = shallow( - , - ); expect(wrapper.find('li')).toHaveLength(1); expect( wrapper @@ -28,9 +30,6 @@ describe('RoutesOverviewListItem', () => { }); it('should have ResourceLink with proper kind', () => { - const wrapper = shallow( - , - ); expect(wrapper.find(ResourceLink)).toHaveLength(1); expect( wrapper @@ -41,34 +40,35 @@ describe('RoutesOverviewListItem', () => { }); it('should have route ExternalLink with proper href', () => { - const wrapper = shallow( - , - ); expect(wrapper.find(ExternalLink)).toHaveLength(1); expect( wrapper .find(ExternalLink) .at(0) .props().href, - ).toEqual('http://tag-portal-v1.jai-test.apps.rhamilto.devcluster.openshift.com'); + ).toEqual('http://overlayimage.knativeapps.apps.bpetersen-june-23.devcluster.openshift.com'); }); it('should have route of specific revision as ExternalLink with proper url', () => { const mockRouteData = { - ...mockRoutesData[0], + ...MockKnativeResources.ksroutes.data[0], status: { - ...mockRoutesData[0].status, + ...MockKnativeResources.ksroutes.data[0].status, traffic: [ { - ...mockRoutesData[0].status.traffic[0], + ...MockKnativeResources.ksroutes.data[0].status.traffic[0], tag: 'abc', - url: 'http://abc-tag-portal-v1.jai-test.apps.rhamilto.devcluster.openshift.com', + url: + 'http://abc-overlayimage.knativeapps.apps.bpetersen-june-23.devcluster.openshift.com', }, ], }, }; - const wrapper = shallow( - , + wrapper = shallow( + , ); expect(wrapper.find(ExternalLink)).toHaveLength(1); expect( @@ -76,6 +76,8 @@ describe('RoutesOverviewListItem', () => { .find(ExternalLink) .at(0) .props().href, - ).toEqual('http://abc-tag-portal-v1.jai-test.apps.rhamilto.devcluster.openshift.com'); + ).toEqual( + 'http://abc-overlayimage.knativeapps.apps.bpetersen-june-23.devcluster.openshift.com', + ); }); });