Skip to content

Commit

Permalink
setup tests for components
Browse files Browse the repository at this point in the history
  • Loading branch information
allyoucanmap committed Jan 8, 2025
1 parent ca8dcbc commit 1f1a9a0
Show file tree
Hide file tree
Showing 50 changed files with 1,448 additions and 59 deletions.
10 changes: 4 additions & 6 deletions web/client/plugins/ResourcesCatalog/ResourcesGrid.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -184,12 +184,10 @@ function ResourcesGrid({
requestResources={requestResources}
configuredItems={configuredItems}
metadata={metadata}
registry={{
getResourceStatus,
formatHref: handleFormatHref,
getResourceTypesInfo,
getResourceId
}}
getResourceStatus={getResourceStatus}
formatHref={handleFormatHref}
getResourceTypesInfo={getResourceTypesInfo}
getResourceId={getResourceId}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function DetailsHeader({

return (
<>
<div className="_sticky _corner-tl">
<div className="ms-details-header _sticky _corner-tl">
<FlexBox
centerChildrenVertically
gap="sm"
Expand Down Expand Up @@ -76,7 +76,7 @@ function DetailsHeader({
onChange={onChangeThumbnail}
/>
<div ref={titleNodeRef}></div>
<FlexBox gap="sm" classNames={['_padding-md']}>
<FlexBox className="ms-details-header-info" gap="sm" classNames={['_padding-md']}>
<FlexBox.Fill>
<Text fontSize="lg">
{!loading ? <Icon {...icon} /> : <Spinner />}{' '}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const AccordionTitle = ({
};

/**
* Accordion component
* FilterAccordion component
* @prop {string} title of the accordion
* @prop {string} titleId translation path of the title on the accordion
* @prop {string} noItemsMsgId default message when no items present
Expand All @@ -53,9 +53,7 @@ const AccordionTitle = ({
* @prop {function} loadItems function to fetch accordion items
* @prop {array} items accordion items available without the need to fetch
* @prop {string} query string
* @prop {boolean} defaultExpanded flag to expand the accordion on load by default
* @prop {boolean} expanded flag to keep accordion stay expanded and disable toggle function on the accordion (Note: Not on accordion items)
*/
*/
const FilterAccordion = ({
title,
titleId,
Expand Down Expand Up @@ -96,7 +94,7 @@ const FilterAccordion = ({
}, [isExpanded, JSON.stringify(query)]);

return (
<FlexBox column gap="sm">
<FlexBox className="ms-filter-accordion" column gap="sm">
<AccordionTitle
expanded={isExpanded}
onClick={onClick}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ import Message from '../../../components/I18N/Message';

momentLocalizer(moment);

function DateRangeFilter({
query,
function FilterDateRange({
query = {},
filterKey = 'date',
labelId = 'resourcesCatalog.dateFilter',
onChange
Expand Down Expand Up @@ -69,6 +69,6 @@ function DateRangeFilter({
);
}

DateRangeFilter.defaultProps = {};
FilterDateRange.defaultProps = {};

export default DateRangeFilter;
export default FilterDateRange;
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const FilterGroup = ({
}, [JSON.stringify(query)]);

return (
<FlexBox column gap="sm">
<FlexBox classNames={['ms-filter-group']} column gap="sm">
<Title
loading={loading}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const itemsList = (items) => (items && items.map((item, idx) => {

const MenuDropdownList = ({
id,
items,
items = [],
label,
labelId,
toggleStyle,
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/ResourcesCatalog/components/MenuItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const isValidBadgeValue = (badge) => !!badge || badge === 0;

const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, classItem = '', size, alignRight, variant, resourceName }) => {

const { formatHref, query } = menuItemsProps;
const { formatHref, query } = menuItemsProps || {};
const {
id,
type,
Expand All @@ -63,7 +63,7 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, classItem = '
square,
tooltipId,
src
} = item;
} = item || {};
const btnClassName = `btn${variant && ` btn-${variant}` || ''}${size && ` btn-${size}` || ''}${className ? ` ${className}` : ''} _border-transparent`;

const labelNode = labelId ? <Message msgId={labelId} msgParams={{ resourceName }} /> : label;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ function Permissions({
const hasFiltrablePermissions = !!permissionsEntires.filter((item) => item.permissions !== 'owner' && !item.is_superuser)?.length;

return (
<div className="_relative _padding-tb-sm">
<div className="ms-permissions _relative _padding-tb-sm">
{showGroupsPermissions ? <div className="ms-secondary-colors _padding-lr-sm">
<FlexBox component="ul" column gap="sm" classNames={['_padding-tb-sm']} >
{permissionsEntires
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function PermissionsAddEntriesPanel({
<FlexBox.Fill
flexBox
column
classNames={['_absolute', '_fill']}
classNames={['ms-permissions-add-entries-panel', '_absolute', '_fill']}
>
<FlexBox centerChildrenVertically gap="sm" classNames={['_padding-sm']}>
<InputControl
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function PermissionsRow({
) : (<Text>{valueOption?.labelId ? <Message msgId={valueOption?.labelId} /> : null}</Text>);

return (
<FlexBox centerChildrenVertically gap="sm">
<FlexBox className="ms-permissions-row" centerChildrenVertically gap="sm">
<FlexBox.Fill flexBox gap="sm">
{(!hideIcon && (type || avatar)) && <Text>
{avatar
Expand Down
21 changes: 9 additions & 12 deletions web/client/plugins/ResourcesCatalog/components/ResourceCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const ResourceCardGridBody = ({
statusItems,
options,
thumbnailUrl,
registry
getResourceId
}) => {

const headerEntry = metadata.find(entry => entry.target === 'header');
Expand Down Expand Up @@ -283,7 +283,7 @@ const ResourceCardGridBody = ({
viewerUrl={viewerUrl}
options={options}
readOnly={readOnly}
registry={registry}
getResourceId={getResourceId}
className="_absolute _margin-sm _corner-tr"
/>
)
Expand All @@ -305,7 +305,7 @@ const ResourceCardListBody = ({
options: optionsProp,
buttons,
columns,
registry
getResourceId
}) => {
const options = [
...(buttons || []),
Expand Down Expand Up @@ -345,7 +345,7 @@ const ResourceCardListBody = ({
viewerUrl={viewerUrl}
options={options}
readOnly={readOnly}
registry={registry}
getResourceId={getResourceId}
/>
)
: null}
Expand All @@ -369,19 +369,16 @@ const ResourceCard = forwardRef(({
loading,
downloading,
statusItems,
registry,
buttons = [],
component,
query,
metadata = [],
columns = []
columns = [],
getResourceTypesInfo = () => ({}),
formatHref,
getResourceId
}, ref) => {

const {
formatHref,
getResourceTypesInfo
} = registry;

const resource = data;
const {
icon,
Expand Down Expand Up @@ -416,7 +413,7 @@ const ResourceCard = forwardRef(({
options={options}
columns={columns}
thumbnailUrl={thumbnailUrl}
registry={registry}
getResourceId={getResourceId}
/> : null}
</CardComponent>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,10 @@ function ResourceCardActionButtons({
viewerUrl,
resource,
className,
registry,
getResourceId = () => '',
...props
}) {

const { getResourceId } = registry;

const containerNode = useRef();
const dropdownClassName = 'ms-card-dropdown';
const dropdownNode = containerNode?.current?.querySelector(`.${dropdownClassName}`);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,19 @@ const ResourcesContainer = (props) => {
footer,
cardLayoutStyle,
loading,
getMainMessageId,
registry,
getMainMessageId = () => '',
onSelect,
theme = 'main',
cardButtons,
cardComponent,
query,
columns,
metadata
} = props;
const {
metadata,
getResourceStatus,
formatHref,
getResourceTypesInfo,
getResourceId
} = registry;
} = props;
const messageId = getMainMessageId(props);
return (
<div
Expand Down Expand Up @@ -78,7 +77,10 @@ const ResourcesContainer = (props) => {
readOnly={isProcessing}
downloading={isDownloading}
statusItems={statusItems}
registry={registry}
getResourceStatus={getResourceStatus}
formatHref={formatHref}
getResourceTypesInfo={getResourceTypesInfo}
getResourceId={getResourceId}
onClick={onSelect}
query={query}
columns={columns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const ResourcesMenu = forwardRef(({
setCardLayoutStyle,
orderConfig,
query,
registry,
formatHref,
titleId,
theme = 'main',
menuItemsLeft = [],
Expand All @@ -136,10 +136,6 @@ const ResourcesMenu = forwardRef(({
align: orderAlign = 'right'
} = orderConfig || {};

const {
formatHref
} = registry;

const selectedSort = orderOptions.find(({ value }) => query?.sort === value);
function handleToggleCardLayoutStyle() {
setCardLayoutStyle(cardLayoutStyle === 'grid' ? 'list' : 'grid');
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

/*
* Copyright 2025, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import ReactDOM from 'react-dom';
import expect from 'expect';
import ALink from '../ALink';

describe('ALink component', () => {
beforeEach((done) => {
document.body.innerHTML = '<div id="container"></div>';
setTimeout(done);
});
afterEach((done) => {
ReactDOM.unmountComponentAtNode(document.getElementById('container'));
document.body.innerHTML = '';
setTimeout(done);
});
it('should not render with default', () => {
ReactDOM.render(<ALink />, document.getElementById('container'));
const container = document.getElementById('container');
expect(container.children.length).toBe(0);
});
it('should apply the link (a) tag if href is provided', () => {
ReactDOM.render(<ALink href="#" className="link"><span className="child"></span></ALink>, document.getElementById('container'));
const container = document.getElementById('container');
expect(container.children[0].getAttribute('class')).toBe('link');
});
it('should not apply the link (a) tag if href is not provided', () => {
ReactDOM.render(<ALink className="link"><span className="child"></span></ALink>, document.getElementById('container'));
const container = document.getElementById('container');
expect(container.children[0].getAttribute('class')).toBe('child');
});
it('should not apply the link (a) tag if href is provided and readOnly is true', () => {
ReactDOM.render(<ALink href="#" readOnly className="link"><span className="child"></span></ALink>, document.getElementById('container'));
const container = document.getElementById('container');
expect(container.children[0].getAttribute('class')).toBe('child');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@

/*
* Copyright 2025, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import ReactDOM from 'react-dom';
import expect from 'expect';
import Button from '../Button';

describe('Button component', () => {
beforeEach((done) => {
document.body.innerHTML = '<div id="container"></div>';
setTimeout(done);
});
afterEach((done) => {
ReactDOM.unmountComponentAtNode(document.getElementById('container'));
document.body.innerHTML = '';
setTimeout(done);
});
it('should render with default', () => {
ReactDOM.render(<Button><span className="child" /></Button>, document.getElementById('container'));
const button = document.querySelector('.btn');
expect(button).toBeTruthy();
expect(document.querySelector('.child')).toBeTruthy();
});
it('should apply custom classes based on props', () => {
ReactDOM.render(<Button
variant="primary"
size="md"
borderTransparent
><span className="child" /></Button>, document.getElementById('container'));
const button = document.querySelector('.btn');
expect(button).toBeTruthy();
expect(button.getAttribute('class')).toBe(' _border-transparent btn btn-md btn-primary');
});
it('should render a square button', () => {
ReactDOM.render(<Button square ><span className="child" /></Button>, document.getElementById('container'));
const button = document.querySelector('.btn');
expect(button).toBeTruthy();
expect(button.getAttribute('class')).toBe('square-button-md btn btn-default');
});
});
Loading

0 comments on commit 1f1a9a0

Please sign in to comment.