Skip to content

Commit

Permalink
add unit tests for utils and fix scss imports'
Browse files Browse the repository at this point in the history
fix imports and add comments

add unit tests for cell
  • Loading branch information
sahil143 committed Jun 23, 2020
1 parent ee54968 commit 8785b64
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 59 deletions.
54 changes: 0 additions & 54 deletions frontend/__tests__/components/catalog.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { mount, ReactWrapper } from 'enzyme';
import { Provider } from 'react-redux';

import {
CatalogTile,
FilterSidePanelCategoryItem,
VerticalTabsTab,
} from '@patternfly/react-catalog-view-extension';
Expand Down Expand Up @@ -61,59 +60,6 @@ describe(CatalogTileViewPage.displayName, () => {
expect(filterItems.at(4).props().checked).toBe(false); // filter clusterServiceClasses should be false by default
});

it('renders tiles correctly', () => {
// De-activating all filters to render all tiles
const filterItems = wrapper.find<any>(FilterSidePanelCategoryItem);
filterItems.forEach((filter) => {
filter.find('input').simulate('click', { target: { checked: false } });
});

const tiles = wrapper.find<any>(CatalogTile);

expect(tiles.exists()).toBe(true);
expect(tiles.length).toEqual(23);

const cakeSqlTileProps = tiles.at(2).props();
expect(cakeSqlTileProps.title).toEqual('CakePHP + MySQL');
expect(cakeSqlTileProps.iconImg).toEqual('test-file-stub');
expect(cakeSqlTileProps.iconClass).toBe(null);
expect(cakeSqlTileProps.vendor).toEqual('provided by Red Hat, Inc.');
expect(
cakeSqlTileProps.description.startsWith(
'An example CakePHP application with a MySQL database',
),
).toBe(true);

const amqTileProps = tiles.at(20).props();
expect(amqTileProps.title).toEqual('Red Hat JBoss A-MQ 6.3 (Ephemeral, no SSL)');
expect(amqTileProps.iconImg).toEqual('test-file-stub');
expect(amqTileProps.iconClass).toBe(null);
expect(amqTileProps.vendor).toEqual('provided by Red Hat, Inc.');
expect(
amqTileProps.description.startsWith(
"Application template for JBoss A-MQ brokers. These can be deployed as standalone or in a mesh. This template doesn't feature SSL support.",
),
).toBe(true);

const wildflyTileProps = tiles.at(22).props();
expect(wildflyTileProps.title).toEqual('WildFly');
expect(wildflyTileProps.iconImg).toEqual('test-file-stub');
expect(wildflyTileProps.iconClass).toBe(null);
expect(wildflyTileProps.vendor).toEqual('provided by Red Hat, Inc.');
expect(
wildflyTileProps.description.startsWith(
'Build and run WildFly 10.1 applications on CentOS 7. For more information about using this builder image',
),
).toBe(true);

const faIconTileProps = tiles.at(5).props();
expect(faIconTileProps.title).toEqual('FA icon example');
expect(faIconTileProps.iconImg).toBe(null);
expect(faIconTileProps.iconClass).toBe('fa fa-fill-drip');
expect(faIconTileProps.vendor).toEqual('provided by Red Hat, Inc.');
expect(faIconTileProps.description).toEqual('Example to validate icon');
});

it('categorizes catalog items', () => {
const categories = categorizeItems(
catalogItems,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.ocs-virtualized-grid {
.ocs-grid {
.ReactVirtualized__Grid__innerScrollContainer {
width: 100% !important;
max-width: 100% !important;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { CellMeasurerCache, Grid as GridComponent, GridCellProps } from 'react-virtualized';
import { IDEAL_CELL_WIDTH, IDEAL_SPACE_BW_TILES, OVERSCAN_ROW_COUNT } from './const';
import { Item, GridChildrenProps } from './types';
import './Grid.scss';

type GridProps = {
height: number;
Expand Down Expand Up @@ -33,7 +34,7 @@ const Grid: React.FC<GridProps> = ({
const cellRenderer = (data: GridCellProps) => children({ data, cache, columnCount, items });
return (
<GridComponent
className="ocs-virtualized-grid"
className="ocs-grid"
autoHeight
ref={registerChild}
height={height}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from './const';
import { getItemsAndRowCount } from './utils';
import { Params, GroupedItems, GridChildrenProps } from './types';
import './Grid.scss';

type GroupByFilterGridProps = {
height: number;
Expand Down Expand Up @@ -45,7 +46,7 @@ const GroupByFilterGrid: React.FC<GroupByFilterGridProps> = ({
);
return (
<GridComponent
className="ocs-virtualized-grid"
className="ocs-grid"
autoHeight
ref={registerChild}
height={height}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import { Item, GroupedItems, GridChildrenProps, RenderHeader, RenderCell } from
import GroupByFilterGrid from './GroupByFilterGrid';
import Grid from './Grid';
import Cell from './Cell';
import './VirtualizedGrid.scss';

type VirtualizedGridProps = {
items: Item[] | GroupedItems;
/**
* Default: window
* scroll container for the virtualized grid
*/
scrollElement?: Element;
renderCell: RenderCell;
/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import * as React from 'react';
import { shallow } from 'enzyme';
import Cell from '../Cell';
import { RenderHeader, RenderCell } from '../types';
import { GridCellProps, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import { IDEAL_SPACE_BW_TILES } from '../const';

describe('Grid-cell', () => {
let data: GridCellProps;
let renderHeader: RenderHeader;
let renderCell: RenderCell;
let cache: CellMeasurerCache;

beforeEach(() => {
data = {
key: 'unique-key',
columnIndex: 0,
rowIndex: 0,
style: {
height: 50,
width: 50,
top: 60,
left: 60,
position: 'absolute',
},
isScrolling: false,
isVisible: false,
parent: null,
};
renderHeader = jest.fn();
renderCell = jest.fn();
cache = {} as CellMeasurerCache;
});

it('should return null when item is null', () => {
const wrapper = shallow(
<Cell data={data} renderCell={renderCell} cache={cache} columnCount={1} items={[null]} />,
);
expect(wrapper.isEmptyRender()).toBeTruthy();
});

it('should render cellMeasurer when item is not null', () => {
const wrapper = shallow(
<Cell data={data} renderCell={renderCell} cache={cache} columnCount={1} items={[{}]} />,
);
expect(wrapper.find(CellMeasurer)).toHaveLength(1);
});

it('should render header and not the cell when item is string and height should not be changed', () => {
const wrapper = shallow(
<Cell
data={data}
renderCell={renderCell}
cache={cache}
columnCount={1}
items={['string']}
renderHeader={renderHeader}
/>,
);
expect(wrapper.find('div').prop('style').height).toBe(50);
expect(renderHeader).toHaveBeenCalledWith('string');
expect(renderCell).not.toHaveBeenCalled();
});

it('should render Cell and not the Header when item is neither string nor null and height should be changed', () => {
const wrapper = shallow(
<Cell
data={data}
renderCell={renderCell}
cache={cache}
columnCount={1}
items={['string']}
renderHeader={renderHeader}
/>,
);
expect(wrapper.find('div').prop('style').height).toBe(50);
expect(renderHeader).toHaveBeenCalledWith('string');
expect(renderCell).not.toHaveBeenCalled();
});

it('should render Cell and not the Header when item is neither string nor null and height should be changed', () => {
const item = { id: 1 };
const wrapper = shallow(
<Cell data={data} renderCell={renderCell} cache={cache} columnCount={1} items={[item]} />,
);
expect(wrapper.find('div').prop('style').height).toBe(50 - IDEAL_SPACE_BW_TILES);
expect(renderCell).toHaveBeenCalledWith(item);
expect(renderHeader).not.toHaveBeenCalled();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { getItemsAndRowCount } from '../utils';

describe('virtualized-grid-utils', () => {
it('should return row count, itemCount, headerRows based on itemcount and column count', () => {
const data = {
header1: [{}, {}, {}, {}, {}],
};
const result1 = getItemsAndRowCount(data, 3);
expect(result1.rowCount).toEqual(3);
expect(result1.items).toEqual(['header1', null, null, {}, {}, {}, {}, {}, null]);
expect(result1.headerRows).toEqual([0]);

const data2 = {
header1: [{}],
header2: [{}, {}],
};
const result2 = getItemsAndRowCount(data2, 2);
expect(result2.rowCount).toEqual(4);
expect(result2.items).toEqual(['header1', null, {}, null, 'header2', null, {}, {}]);
expect(result2.headerRows).toEqual([0, 2]);

const data3 = {
header1: [],
header2: [{}],
};

const result3 = getItemsAndRowCount(data3, 1);
expect(result3.rowCount).toEqual(3);
expect(result3.items).toEqual(['header1', 'header2', {}]);
expect(result3.headerRows).toEqual([0, 1]);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { GroupedItems, CellItem } from './types';
* groupedItems = {
* header: [item1, item2, item3, item4]
* }
* array of length 4 with header
* array of length 4 with header and number of columns 3
* Based on the fixed width of column and number of items in the array Grid would be:
* |header |
* |item1 item2 item3|
Expand Down

0 comments on commit 8785b64

Please sign in to comment.