From f6f03d204a7926a940ff7cb7bec5d6ea03829884 Mon Sep 17 00:00:00 2001 From: Shivam Gupta Date: Mon, 2 Sep 2024 19:37:58 +0530 Subject: [PATCH] Fix(catalog): Corrected Properties modal tests --- .../components/Catalog/BaseCatalog.test.tsx | 10 +- .../PropertiesModal/PropertiesModal.test.tsx | 112 +++++++++++++----- packages/ui/src/stubs/tiles.ts | 2 +- 3 files changed, 91 insertions(+), 33 deletions(-) diff --git a/packages/ui/src/components/Catalog/BaseCatalog.test.tsx b/packages/ui/src/components/Catalog/BaseCatalog.test.tsx index 8f695fe52..d55889b93 100644 --- a/packages/ui/src/components/Catalog/BaseCatalog.test.tsx +++ b/packages/ui/src/components/Catalog/BaseCatalog.test.tsx @@ -1,14 +1,14 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import { CatalogLayout } from './Catalog.models'; import { BaseCatalog } from './BaseCatalog'; -import { manyTiles } from '../../stubs'; +import { longTileList } from '../../stubs'; describe('BaseCatalog', () => { it('renders correctly with Gallery Layout', () => { const { container } = render( , @@ -21,7 +21,7 @@ describe('BaseCatalog', () => { const { container } = render( , @@ -34,7 +34,7 @@ describe('BaseCatalog', () => { render( , @@ -63,7 +63,7 @@ describe('BaseCatalog', () => { render( , diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx index 4c56af7e4..7b4ddd3ff 100644 --- a/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx +++ b/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx @@ -13,24 +13,30 @@ import { } from '../../models'; import { ITile } from '../Catalog'; import { PropertiesModal } from './PropertiesModal'; -import { CatalogContext } from '../../providers'; import { getFirstCatalogMap } from '../../stubs/test-load-catalog'; describe('PropertiesModal', () => { let componentCatalogMap: Record; - let patternCatalogMap: Record; let kameletCatalogMap: Record; + let modelCatalogMap: Record; beforeAll(async () => { const catalogsMap = await getFirstCatalogMap(catalogLibrary as CatalogLibrary); componentCatalogMap = catalogsMap.componentCatalogMap; - patternCatalogMap = catalogsMap.patternCatalogMap; + componentCatalogMap.asterisk.properties = {}; + componentCatalogMap.asterisk.headers = {}; + componentCatalogMap.asterisk.componentProperties = {}; + kameletCatalogMap = catalogsMap.kameletsCatalogMap; + kameletCatalogMap['nats-sink'].spec.definition.properties = {}; + + modelCatalogMap = catalogsMap.modelCatalogMap; + modelCatalogMap.asn1.properties = {}; CamelCatalogService.setCatalogKey(CatalogKind.Component, componentCatalogMap); - CamelCatalogService.setCatalogKey(CatalogKind.Pattern, patternCatalogMap); CamelCatalogService.setCatalogKey(CatalogKind.Kamelet, kameletCatalogMap); - CamelCatalogService.setCatalogKey(CatalogKind.Processor, catalogsMap.modelCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Processor, modelCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Pattern, catalogsMap.patternCatalogMap); CamelCatalogService.setCatalogKey(CatalogKind.Language, catalogsMap.languageCatalog); CamelCatalogService.setCatalogKey(CatalogKind.Dataformat, catalogsMap.dataformatCatalog); CamelCatalogService.setCatalogKey(CatalogKind.Loadbalancer, catalogsMap.loadbalancerCatalog); @@ -49,11 +55,7 @@ describe('PropertiesModal', () => { it('renders component properties table correctly', async () => { // modal uses React portals so baseElement needs to be used here - const { baseElement } = render( - - - , - ); + const { baseElement } = render(); // info expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Atom'); expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Poll Atom RSS feeds.'); @@ -132,6 +134,28 @@ describe('PropertiesModal', () => { }); }); + describe('Component tile with empty properties and no headers/apis', () => { + const tile: ITile = { + type: CatalogKind.Component, + name: 'asterisk', + title: 'Asterisk', + description: 'Interact with Asterisk PBX Server (VoIP).', + headerTags: ['Stable'], + tags: ['document', '4.0.0'], + }; + + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Asterisk'); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( + 'Interact with Asterisk PBX Server (VoIP).', + ); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for asterisk'); + }); + }); + describe('Processor tile', () => { const tile: ITile = { type: CatalogKind.Processor, @@ -144,11 +168,7 @@ describe('PropertiesModal', () => { it('renders property modal correctly', () => { // modal uses React portals so baseElement needs to be used here - const { baseElement } = render( - - - , - ); + const { baseElement } = render(); // info expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Api Key'); expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( @@ -170,6 +190,30 @@ describe('PropertiesModal', () => { }); }); + describe('Processor tile with empty properties', () => { + const tile: ITile = { + type: CatalogKind.Processor, + name: 'asn1', + title: 'ASN.1 File', + description: 'Encode and decode data structures using Abstract Syntax Notation One (ASN.1).', + headerTags: ['Stable'], + tags: ['document', '4.0.0'], + }; + + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( + 'ASN.1 File', + ); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( + 'Encode and decode data structures using Abstract Syntax Notation One (ASN.1).', + ); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for asn1'); + }); + }); + describe('Kamelet tile', () => { const tile: ITile = { type: CatalogKind.Kamelet, @@ -182,11 +226,7 @@ describe('PropertiesModal', () => { it('renders property modal correctly', () => { // modal uses React portals so baseElement needs to be used here - const { baseElement } = render( - - - , - ); + const { baseElement } = render(); // info expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( 'AWS DynamoDB Streams Source', @@ -221,6 +261,28 @@ describe('PropertiesModal', () => { }); }); + describe('Kamelet tile with no properties', () => { + const tile: ITile = { + type: CatalogKind.Kamelet, + name: 'nats-sink', + title: 'NATS Sink', + description: 'Send data to NATS topics.', + headerTags: ['Stable'], + tags: ['source', '4.0.0-RC1'], + }; + + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( + 'NATS Sink', + ); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Send data to NATS topics.'); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for nats-sink'); + }); + }); + describe('Unknown tile', () => { const tile: ITile = { type: 'tile-type', @@ -239,13 +301,9 @@ describe('PropertiesModal', () => { }); it('fires error for property modal', () => { - expect(() => - render( - - - , - ), - ).toThrow('Unknown CatalogKind during rendering modal: tile-type'); + expect(() => render()).toThrow( + 'Unknown CatalogKind during rendering modal: tile-type', + ); }); }); }); diff --git a/packages/ui/src/stubs/tiles.ts b/packages/ui/src/stubs/tiles.ts index 88b98c2aa..75e5a6678 100644 --- a/packages/ui/src/stubs/tiles.ts +++ b/packages/ui/src/stubs/tiles.ts @@ -100,7 +100,7 @@ export const tiles: ITile[] = [ componentCronTile, ]; -export const manyTiles: ITile[] = [ +export const longTileList: ITile[] = [ { name: 'activemq', tags: ['messaging'],