Skip to content

Commit

Permalink
Fix(catalog): Corrected Properties modal tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivamG640
shivamG640 committed Sep 2, 2024
1 parent 6201a5e commit f6f03d2
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 33 deletions.
10 changes: 5 additions & 5 deletions packages/ui/src/components/Catalog/BaseCatalog.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
<BaseCatalog
className="catalog__base"
tiles={manyTiles}
tiles={longTileList}
catalogLayout={CatalogLayout.Gallery}
onTagClick={jest.fn()}
/>,
Expand All @@ -21,7 +21,7 @@ describe('BaseCatalog', () => {
const { container } = render(
<BaseCatalog
className="catalog__base"
tiles={manyTiles}
tiles={longTileList}
catalogLayout={CatalogLayout.List}
onTagClick={jest.fn()}
/>,
Expand All @@ -34,7 +34,7 @@ describe('BaseCatalog', () => {
render(
<BaseCatalog
className="catalog__base"
tiles={manyTiles}
tiles={longTileList}
catalogLayout={CatalogLayout.List}
onTagClick={jest.fn()}
/>,
Expand Down Expand Up @@ -63,7 +63,7 @@ describe('BaseCatalog', () => {
render(
<BaseCatalog
className="catalog__base"
tiles={manyTiles}
tiles={longTileList}
catalogLayout={CatalogLayout.List}
onTagClick={jest.fn()}
/>,
Expand Down
112 changes: 85 additions & 27 deletions packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, ICamelComponentDefinition>;
let patternCatalogMap: Record<string, ICamelProcessorDefinition>;
let kameletCatalogMap: Record<string, IKameletDefinition>;
let modelCatalogMap: Record<string, ICamelProcessorDefinition>;

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);
Expand All @@ -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(
<CatalogContext.Provider value={CamelCatalogService}>
<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />
</CatalogContext.Provider>,
);
const { baseElement } = render(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// 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.');
Expand Down Expand Up @@ -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(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// 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,
Expand All @@ -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(
<CatalogContext.Provider value={CamelCatalogService}>
<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />
</CatalogContext.Provider>,
);
const { baseElement } = render(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// info
expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Api Key');
expect(screen.getByTestId('properties-modal-description')).toHaveTextContent(
Expand All @@ -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(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// 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,
Expand All @@ -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(
<CatalogContext.Provider value={CamelCatalogService}>
<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />
</CatalogContext.Provider>,
);
const { baseElement } = render(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// info
expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent(
'AWS DynamoDB Streams Source',
Expand Down Expand Up @@ -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(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />);
// 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',
Expand All @@ -239,13 +301,9 @@ describe('PropertiesModal', () => {
});

it('fires error for property modal', () => {
expect(() =>
render(
<CatalogContext.Provider value={CamelCatalogService}>
<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />
</CatalogContext.Provider>,
),
).toThrow('Unknown CatalogKind during rendering modal: tile-type');
expect(() => render(<PropertiesModal tile={tile} isModalOpen={true} onClose={jest.fn()} />)).toThrow(
'Unknown CatalogKind during rendering modal: tile-type',
);
});
});
});
2 changes: 1 addition & 1 deletion packages/ui/src/stubs/tiles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const tiles: ITile[] = [
componentCronTile,
];

export const manyTiles: ITile[] = [
export const longTileList: ITile[] = [
{
name: 'activemq',
tags: ['messaging'],
Expand Down

0 comments on commit f6f03d2

Please sign in to comment.