Fixed issue/1465 partially got rid of enzyme in tests (#1489)
* got rid of enzyme in Dropdown tests
* got rid of enzyme in DynamicTextButton tests
* got rid of enzyme in Search tests
* Revert "got rid of enzyme in Search tests"
This reverts commit cd2c5b10ab.
* got rid of enzyme in Search tests
* got rid of enzyme in SQLEditor tests
* got rid of enzyme in Connect tests
* got rid of enzyme in Connect/Details tests
* got rid of enzyme in Topics\Topic tests
* got rid of ThemeProvider in render function
* fixed redundant
* used userEvent instead of fireEvent
* fixed snapshot tests
* used screen
* rise testing-library approach
* got rid of snapshot in Search component test
* changed titles of Search component test
* fixed topics details test
This commit is contained in:
Denys Malofeiev
GitHub
parent
f6daa8c69c
commit
54bd778d9c
15 changed files with 548 additions and 967 deletions
|
|
@ -1,7 +1,10 @@
|
|||
import React from 'react';
|
||||
import { create } from 'react-test-renderer';
|
||||
import { mount } from 'enzyme';
|
||||
import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers';
|
||||
import {
|
||||
containerRendersView,
|
||||
TestRouterWrapper,
|
||||
render,
|
||||
} from 'lib/testHelpers';
|
||||
import { clusterConnectConnectorPath } from 'lib/paths';
|
||||
import DetailsContainer from 'components/Connect/Details/DetailsContainer';
|
||||
import Details, { DetailsProps } from 'components/Connect/Details/Details';
|
||||
|
|
@ -79,13 +82,13 @@ describe('Details', () => {
|
|||
});
|
||||
|
||||
it('is empty when no connector', () => {
|
||||
const wrapper = mount(setupWrapper({ connector: null }));
|
||||
expect(wrapper.html()).toEqual('');
|
||||
const wrapper = render(setupWrapper({ connector: null })).baseElement;
|
||||
expect(wrapper.querySelector('div')).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('fetches connector on mount', () => {
|
||||
const fetchConnector = jest.fn();
|
||||
mount(setupWrapper({ fetchConnector }));
|
||||
render(setupWrapper({ fetchConnector }));
|
||||
expect(fetchConnector).toHaveBeenCalledTimes(1);
|
||||
expect(fetchConnector).toHaveBeenCalledWith(
|
||||
clusterName,
|
||||
|
|
@ -96,7 +99,7 @@ describe('Details', () => {
|
|||
|
||||
it('fetches tasks on mount', () => {
|
||||
const fetchTasks = jest.fn();
|
||||
mount(setupWrapper({ fetchTasks }));
|
||||
render(setupWrapper({ fetchTasks }));
|
||||
expect(fetchTasks).toHaveBeenCalledTimes(1);
|
||||
expect(fetchTasks).toHaveBeenCalledWith(
|
||||
clusterName,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,63 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import { screen } from '@testing-library/react';
|
||||
import Connect from 'components/Connect/Connect';
|
||||
import { store } from 'redux/store';
|
||||
import { Route } from 'react-router-dom';
|
||||
import {
|
||||
clusterConnectorsPath,
|
||||
clusterConnectorNewPath,
|
||||
clusterConnectConnectorPath,
|
||||
clusterConnectConnectorEditPath,
|
||||
} from 'lib/paths';
|
||||
|
||||
jest.mock('components/Connect/New/NewContainer', () => () => (
|
||||
<div>NewContainer</div>
|
||||
));
|
||||
jest.mock('components/Connect/List/ListContainer', () => () => (
|
||||
<div>ListContainer</div>
|
||||
));
|
||||
jest.mock('components/Connect/Details/DetailsContainer', () => () => (
|
||||
<div>DetailsContainer</div>
|
||||
));
|
||||
jest.mock('components/Connect/Edit/EditContainer', () => () => (
|
||||
<div>EditContainer</div>
|
||||
));
|
||||
|
||||
describe('Connect', () => {
|
||||
it('matches snapshot', () => {
|
||||
const wrapper = shallow(<Connect />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const renderComponent = (pathname: string) =>
|
||||
render(
|
||||
<Route path="/ui/clusters/:clusterName">
|
||||
<Connect />
|
||||
</Route>,
|
||||
{ pathname, store }
|
||||
);
|
||||
|
||||
it('renders ListContainer', () => {
|
||||
renderComponent(clusterConnectorsPath('my-cluster'));
|
||||
expect(screen.getByText('ListContainer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders NewContainer', () => {
|
||||
renderComponent(clusterConnectorNewPath('my-cluster'));
|
||||
expect(screen.getByText('NewContainer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders DetailsContainer', () => {
|
||||
renderComponent(
|
||||
clusterConnectConnectorPath('my-cluster', 'my-connect', 'my-connector')
|
||||
);
|
||||
expect(screen.getByText('DetailsContainer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders EditContainer', () => {
|
||||
renderComponent(
|
||||
clusterConnectConnectorEditPath(
|
||||
'my-cluster',
|
||||
'my-connect',
|
||||
'my-connector'
|
||||
)
|
||||
);
|
||||
expect(screen.getByText('EditContainer')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Connect matches snapshot 1`] = `
|
||||
<div>
|
||||
<Switch>
|
||||
<BreadcrumbRoute
|
||||
component={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.memo),
|
||||
"WrappedComponent": [Function],
|
||||
"compare": null,
|
||||
"type": [Function],
|
||||
}
|
||||
}
|
||||
exact={true}
|
||||
path="/ui/clusters/:clusterName/connectors"
|
||||
/>
|
||||
<BreadcrumbRoute
|
||||
component={[Function]}
|
||||
exact={true}
|
||||
path="/ui/clusters/:clusterName/connectors/create-new"
|
||||
/>
|
||||
<BreadcrumbRoute
|
||||
component={[Function]}
|
||||
exact={true}
|
||||
path="/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName/edit"
|
||||
/>
|
||||
<BreadcrumbRoute
|
||||
component={[Function]}
|
||||
path="/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName"
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { Route } from 'react-router';
|
||||
import { screen, waitFor, fireEvent } from '@testing-library/react';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import { clusterConsumerGroupResetOffsetsPath } from 'lib/paths';
|
||||
|
|
@ -122,9 +122,10 @@ describe('ResetOffsets', () => {
|
|||
}
|
||||
);
|
||||
await waitFor(() => {
|
||||
fireEvent.change(screen.getAllByLabelText('Partition #0')[1], {
|
||||
target: { value: '10' },
|
||||
});
|
||||
userEvent.click(screen.getAllByLabelText('Partition #0')[1]);
|
||||
});
|
||||
await waitFor(() => {
|
||||
userEvent.keyboard('10');
|
||||
});
|
||||
userEvent.click(screen.getByText('Submit'));
|
||||
await waitFor(() => resetConsumerGroupOffsetsMockCalled());
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { StaticRouter } from 'react-router-dom';
|
||||
import { screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import ClusterContext from 'components/contexts/ClusterContext';
|
||||
import Details from 'components/Topics/Topic/Details/Details';
|
||||
import { internalTopicPayload } from 'redux/reducers/topics/__test__/fixtures';
|
||||
import { Provider } from 'react-redux';
|
||||
import { store } from 'redux/store';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import { clusterTopicPath } from 'lib/paths';
|
||||
import theme from 'theme/theme';
|
||||
|
||||
describe('Details', () => {
|
||||
const mockDelete = jest.fn();
|
||||
|
|
@ -45,36 +39,30 @@ describe('Details', () => {
|
|||
|
||||
describe('when it has readonly flag', () => {
|
||||
it('does not render the Action button a Topic', () => {
|
||||
const component = mount(
|
||||
<ThemeProvider theme={theme}>
|
||||
<Provider store={store}>
|
||||
<StaticRouter>
|
||||
<ClusterContext.Provider
|
||||
value={{
|
||||
isReadOnly: true,
|
||||
hasKafkaConnectConfigured: true,
|
||||
hasSchemaRegistryConfigured: true,
|
||||
isTopicDeletionAllowed: true,
|
||||
}}
|
||||
>
|
||||
<Details
|
||||
clusterName={mockClusterName}
|
||||
topicName={internalTopicPayload.name}
|
||||
name={internalTopicPayload.name}
|
||||
isInternal={mockInternalTopicPayload}
|
||||
deleteTopic={mockDelete}
|
||||
clearTopicMessages={mockClearTopicMessages}
|
||||
isDeleted={false}
|
||||
isDeletePolicy
|
||||
/>
|
||||
</ClusterContext.Provider>
|
||||
</StaticRouter>
|
||||
</Provider>
|
||||
</ThemeProvider>
|
||||
const { baseElement } = render(
|
||||
<ClusterContext.Provider
|
||||
value={{
|
||||
isReadOnly: true,
|
||||
hasKafkaConnectConfigured: true,
|
||||
hasSchemaRegistryConfigured: true,
|
||||
isTopicDeletionAllowed: true,
|
||||
}}
|
||||
>
|
||||
<Details
|
||||
clusterName={mockClusterName}
|
||||
topicName={internalTopicPayload.name}
|
||||
name={internalTopicPayload.name}
|
||||
isInternal={mockInternalTopicPayload}
|
||||
deleteTopic={mockDelete}
|
||||
clearTopicMessages={mockClearTopicMessages}
|
||||
isDeleted={false}
|
||||
isDeletePolicy
|
||||
/>
|
||||
</ClusterContext.Provider>
|
||||
);
|
||||
|
||||
expect(component.exists('button')).toBeFalsy();
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(screen.queryByText('Produce Message')).not.toBeInTheDocument();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -87,584 +87,47 @@ exports[`Details when it has readonly flag does not render the Action button a T
|
|||
gap: 26px;
|
||||
}
|
||||
|
||||
<Component
|
||||
theme={
|
||||
Object {
|
||||
"alert": Object {
|
||||
"color": Object {
|
||||
"error": "#FAD1D1",
|
||||
"info": "#E3E6E8",
|
||||
"success": "#D6F5E0",
|
||||
"warning": "#FFEECC",
|
||||
},
|
||||
"shadow": "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
"breadcrumb": "#ABB5BA",
|
||||
"button": Object {
|
||||
"border": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#454F54",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
"fontSize": Object {
|
||||
"L": "16px",
|
||||
"M": "14px",
|
||||
"S": "14px",
|
||||
},
|
||||
"height": Object {
|
||||
"L": "40px",
|
||||
"M": "32px",
|
||||
"S": "24px",
|
||||
},
|
||||
"primary": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#1414B8",
|
||||
"hover": "#1717CF",
|
||||
"normal": "#4F4FFF",
|
||||
},
|
||||
"color": "#FFFFFF",
|
||||
"invertedColors": Object {
|
||||
"active": "#1414B8",
|
||||
"hover": "#1717CF",
|
||||
"normal": "#4F4FFF",
|
||||
},
|
||||
},
|
||||
"secondary": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#D5DADD",
|
||||
"hover": "#E3E6E8",
|
||||
"normal": "#F1F2F3",
|
||||
},
|
||||
"color": "#171A1C",
|
||||
"invertedColors": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#454F54",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
},
|
||||
},
|
||||
"circularAlert": Object {
|
||||
"color": Object {
|
||||
"error": "#E51A1A",
|
||||
"info": "#E3E6E8",
|
||||
"success": "#5CD685",
|
||||
"warning": "#FFEECC",
|
||||
},
|
||||
},
|
||||
"configList": Object {
|
||||
"color": "#ABB5BA",
|
||||
},
|
||||
"connectEditWarning": "#FFEECC",
|
||||
"consumerTopicContent": Object {
|
||||
"backgroundColor": "#F1F2F3",
|
||||
},
|
||||
"dangerZone": Object {
|
||||
"borderColor": "#E3E6E8",
|
||||
"color": "#E51A1A",
|
||||
},
|
||||
"dropdown": Object {
|
||||
"color": "#E51A1A",
|
||||
},
|
||||
"heading": Object {
|
||||
"h1": Object {
|
||||
"color": "#171A1C",
|
||||
},
|
||||
"h3": Object {
|
||||
"color": "#73848C",
|
||||
"fontSize": "14px",
|
||||
},
|
||||
},
|
||||
"icons": Object {
|
||||
"closeIcon": "#ABB5BA",
|
||||
"liveIcon": Object {
|
||||
"circleBig": "#FAD1D1",
|
||||
"circleSmall": "#E51A1A",
|
||||
},
|
||||
"messageToggleIconClosed": "#ABB5BA",
|
||||
"messageToggleIconOpened": "#171A1C",
|
||||
"verticalElipsisIcon": "#73848C",
|
||||
"warningIcon": "#FFDD57",
|
||||
},
|
||||
"input": Object {
|
||||
"backgroundColor": Object {
|
||||
"readOnly": "#F1F2F3",
|
||||
},
|
||||
"borderColor": Object {
|
||||
"disabled": "#E3E6E8",
|
||||
"focus": "#454F54",
|
||||
"hover": "#73848C",
|
||||
"normal": "#ABB5BA",
|
||||
},
|
||||
"color": Object {
|
||||
"disabled": "#ABB5BA",
|
||||
"placeholder": Object {
|
||||
"normal": "#ABB5BA",
|
||||
"readOnly": "#ABB5BA",
|
||||
},
|
||||
"readOnly": "#171A1C",
|
||||
},
|
||||
"error": "#E51A1A",
|
||||
"icon": Object {
|
||||
"color": "#454F54",
|
||||
},
|
||||
"label": Object {
|
||||
"color": "#454F54",
|
||||
},
|
||||
},
|
||||
"layout": Object {
|
||||
"minWidth": "1200px",
|
||||
"navBarHeight": "3.25rem",
|
||||
"navBarWidth": "201px",
|
||||
"overlay": Object {
|
||||
"backgroundColor": "#73848C",
|
||||
},
|
||||
"stuffBorderColor": "#E3E6E8",
|
||||
"stuffColor": "#F1F2F3",
|
||||
},
|
||||
"menu": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#E3E6E8",
|
||||
"hover": "#F1F2F3",
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
"chevronIconColor": "#73848C",
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#73848C",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
"statusIconColor": Object {
|
||||
"offline": "#E51A1A",
|
||||
"online": "#5CD685",
|
||||
},
|
||||
},
|
||||
"metrics": Object {
|
||||
"backgroundColor": "#F1F2F3",
|
||||
"filters": Object {
|
||||
"color": Object {
|
||||
"icon": "#171A1C",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
},
|
||||
"indicator": Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"lightTextColor": "#ABB5BA",
|
||||
"titleColor": "#73848C",
|
||||
"warningTextColor": "#E51A1A",
|
||||
},
|
||||
},
|
||||
"modal": Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": Object {
|
||||
"bottom": "#F1F2F3",
|
||||
"top": "#F1F2F3",
|
||||
},
|
||||
"overlay": "rgba(10, 10, 10, 0.1)",
|
||||
"shadow": "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
"pageLoader": Object {
|
||||
"borderBottomColor": "#FFFFFF",
|
||||
"borderColor": "#4F4FFF",
|
||||
},
|
||||
"pagination": Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderColor": Object {
|
||||
"active": "#454F54",
|
||||
"disabled": "#C7CED1",
|
||||
"hover": "#73848C",
|
||||
"normal": "#ABB5BA",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"disabled": "#C7CED1",
|
||||
"hover": "#171A1C",
|
||||
"normal": "#171A1C",
|
||||
},
|
||||
"currentPage": "#E3E6E8",
|
||||
},
|
||||
"panelColor": "#FFFFFF",
|
||||
"primaryTab": Object {
|
||||
"borderColor": Object {
|
||||
"active": "#4F4FFF",
|
||||
"hover": "transparent",
|
||||
"nav": "#E3E6E8",
|
||||
"normal": "transparent",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#171A1C",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
},
|
||||
"schema": Object {
|
||||
"backgroundColor": Object {
|
||||
"div": "#FFFFFF",
|
||||
"tr": "#F1F2F3",
|
||||
},
|
||||
},
|
||||
"scrollbar": Object {
|
||||
"thumbColor": Object {
|
||||
"active": "#73848C",
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
"trackColor": Object {
|
||||
"active": "#F1F2F3",
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
},
|
||||
"secondaryTab": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#E3E6E8",
|
||||
"hover": "#F1F2F3",
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#171A1C",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
},
|
||||
"select": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#E3E6E8",
|
||||
"hover": "#E3E6E8",
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
"borderColor": Object {
|
||||
"active": "#454F54",
|
||||
"disabled": "#E3E6E8",
|
||||
"hover": "#73848C",
|
||||
"normal": "#ABB5BA",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"disabled": "#ABB5BA",
|
||||
"hover": "#171A1C",
|
||||
"normal": "#171A1C",
|
||||
},
|
||||
"optionList": Object {
|
||||
"scrollbar": Object {
|
||||
"backgroundColor": "#ABB5BA",
|
||||
},
|
||||
},
|
||||
},
|
||||
"switch": Object {
|
||||
"checked": "#29A352",
|
||||
"circle": "#FFFFFF",
|
||||
"unchecked": "#ABB5BA",
|
||||
},
|
||||
"table": Object {
|
||||
"link": Object {
|
||||
"color": Object {
|
||||
"normal": "#171A1C",
|
||||
},
|
||||
},
|
||||
"td": Object {
|
||||
"color": Object {
|
||||
"normal": "#171A1C",
|
||||
},
|
||||
},
|
||||
"th": Object {
|
||||
"backgroundColor": Object {
|
||||
"normal": "#FFFFFF",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#4F4FFF",
|
||||
"hover": "#4F4FFF",
|
||||
"normal": "#73848C",
|
||||
},
|
||||
"previewColor": Object {
|
||||
"normal": "#4F4FFF",
|
||||
},
|
||||
},
|
||||
"tr": Object {
|
||||
"backgroundColor": Object {
|
||||
"hover": "#F1F2F3",
|
||||
},
|
||||
},
|
||||
},
|
||||
"tag": Object {
|
||||
"backgroundColor": Object {
|
||||
"blue": "#e3f2fd",
|
||||
"gray": "#F1F2F3",
|
||||
"green": "#D6F5E0",
|
||||
"red": "#FAD1D1",
|
||||
"white": "#E3E6E8",
|
||||
"yellow": "#FFEECC",
|
||||
},
|
||||
"color": "#171A1C",
|
||||
},
|
||||
"textArea": Object {
|
||||
"backgroundColor": Object {
|
||||
"readOnly": "#F1F2F3",
|
||||
},
|
||||
"borderColor": Object {
|
||||
"disabled": "#E3E6E8",
|
||||
"focus": "#454F54",
|
||||
"hover": "#73848C",
|
||||
"normal": "#ABB5BA",
|
||||
},
|
||||
"color": Object {
|
||||
"disabled": "#ABB5BA",
|
||||
"placeholder": Object {
|
||||
"focus": Object {
|
||||
"normal": "transparent",
|
||||
"readOnly": "#ABB5BA",
|
||||
},
|
||||
"normal": "#ABB5BA",
|
||||
},
|
||||
"readOnly": "#171A1C",
|
||||
},
|
||||
},
|
||||
"topicFormLabel": Object {
|
||||
"color": "#73848C",
|
||||
},
|
||||
"topicMetaData": Object {
|
||||
"backgroundColor": "#F1F2F3",
|
||||
"color": Object {
|
||||
"label": "#73848C",
|
||||
"meta": "#ABB5BA",
|
||||
"value": "#2F3639",
|
||||
},
|
||||
},
|
||||
"topicsList": Object {
|
||||
"backgroundColor": Object {
|
||||
"active": "#E3E6E8",
|
||||
"hover": "#F1F2F3",
|
||||
},
|
||||
"color": Object {
|
||||
"active": "#171A1C",
|
||||
"hover": "#73848C",
|
||||
"normal": "#171A1C",
|
||||
},
|
||||
},
|
||||
"viewer": Object {
|
||||
"wrapper": "#f9fafa",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<Provider
|
||||
store={
|
||||
Object {
|
||||
"@@observable": [Function],
|
||||
"dispatch": [Function],
|
||||
"getState": [Function],
|
||||
"replaceReducer": [Function],
|
||||
"subscribe": [Function],
|
||||
}
|
||||
}
|
||||
>
|
||||
<StaticRouter>
|
||||
<Router
|
||||
history={
|
||||
Object {
|
||||
"action": "POP",
|
||||
"block": [Function],
|
||||
"createHref": [Function],
|
||||
"go": [Function],
|
||||
"goBack": [Function],
|
||||
"goForward": [Function],
|
||||
"listen": [Function],
|
||||
"location": Object {
|
||||
"hash": "",
|
||||
"pathname": "/",
|
||||
"search": "",
|
||||
"state": undefined,
|
||||
},
|
||||
"push": [Function],
|
||||
"replace": [Function],
|
||||
}
|
||||
}
|
||||
staticContext={Object {}}
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="c0"
|
||||
>
|
||||
<Details
|
||||
clearTopicMessages={[MockFunction]}
|
||||
clusterName="local"
|
||||
deleteTopic={[MockFunction]}
|
||||
isDeletePolicy={true}
|
||||
isDeleted={false}
|
||||
isInternal={true}
|
||||
name="__internal.topic"
|
||||
topicName="__internal.topic"
|
||||
<h1>
|
||||
__internal.topic
|
||||
</h1>
|
||||
<div>
|
||||
<div
|
||||
class="c1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="c2"
|
||||
role="navigation"
|
||||
>
|
||||
<a
|
||||
href="/ui/clusters/local/topics/__internal.topic"
|
||||
>
|
||||
<div>
|
||||
<Styled(PageHeading)
|
||||
text="__internal.topic"
|
||||
>
|
||||
<PageHeading
|
||||
className="c0"
|
||||
text="__internal.topic"
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h1>
|
||||
__internal.topic
|
||||
</h1>
|
||||
<div>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<Route
|
||||
exact={true}
|
||||
path="/ui/clusters/:clusterName/topics/:topicName/messages"
|
||||
/>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</div>
|
||||
</PageHeading>
|
||||
</Styled(PageHeading)>
|
||||
<ConfirmationModal
|
||||
isOpen={false}
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
isOpen={false}
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
/>
|
||||
<styled.nav
|
||||
role="navigation"
|
||||
>
|
||||
<nav
|
||||
className="c2"
|
||||
role="navigation"
|
||||
>
|
||||
<NavLink
|
||||
activeClassName="is-active is-primary"
|
||||
exact={true}
|
||||
to="/ui/clusters/local/topics/__internal.topic"
|
||||
>
|
||||
<Link
|
||||
aria-current={null}
|
||||
to={
|
||||
Object {
|
||||
"hash": "",
|
||||
"pathname": "/ui/clusters/local/topics/__internal.topic",
|
||||
"search": "",
|
||||
"state": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkAnchor
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="is-active"
|
||||
exact={true}
|
||||
to="/ui/clusters/local/topics/__internal.topic/messages"
|
||||
>
|
||||
<Link
|
||||
aria-current={null}
|
||||
to={
|
||||
Object {
|
||||
"hash": "",
|
||||
"pathname": "/ui/clusters/local/topics/__internal.topic/messages",
|
||||
"search": "",
|
||||
"state": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkAnchor
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/messages"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/messages"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Messages
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="is-active"
|
||||
exact={true}
|
||||
to="/ui/clusters/local/topics/__internal.topic/consumer-groups"
|
||||
>
|
||||
<Link
|
||||
aria-current={null}
|
||||
to={
|
||||
Object {
|
||||
"hash": "",
|
||||
"pathname": "/ui/clusters/local/topics/__internal.topic/consumer-groups",
|
||||
"search": "",
|
||||
"state": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkAnchor
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Consumers
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
activeClassName="is-active"
|
||||
exact={true}
|
||||
to="/ui/clusters/local/topics/__internal.topic/settings"
|
||||
>
|
||||
<Link
|
||||
aria-current={null}
|
||||
to={
|
||||
Object {
|
||||
"hash": "",
|
||||
"pathname": "/ui/clusters/local/topics/__internal.topic/settings",
|
||||
"search": "",
|
||||
"state": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkAnchor
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/settings"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
aria-current={null}
|
||||
href="/ui/clusters/local/topics/__internal.topic/settings"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</styled.nav>
|
||||
<Switch />
|
||||
</div>
|
||||
</Details>
|
||||
</Router>
|
||||
</StaticRouter>
|
||||
</Provider>
|
||||
</Component>
|
||||
Overview
|
||||
</a>
|
||||
<a
|
||||
href="/ui/clusters/local/topics/__internal.topic/messages"
|
||||
>
|
||||
Messages
|
||||
</a>
|
||||
<a
|
||||
href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
|
||||
>
|
||||
Consumers
|
||||
</a>
|
||||
<a
|
||||
href="/ui/clusters/local/topics/__internal.topic/settings"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown';
|
||||
import DropdownItem from 'components/common/Dropdown/DropdownItem';
|
||||
import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import { screen } from '@testing-library/react';
|
||||
|
||||
const dummyLable = 'My Test Label';
|
||||
const dummyChildren = (
|
||||
|
|
@ -25,45 +27,47 @@ describe('Dropdown', () => {
|
|||
);
|
||||
|
||||
it('renders Dropdown with initial props', () => {
|
||||
const wrapper = mount(setupWrapper());
|
||||
expect(wrapper.exists('.dropdown')).toBeTruthy();
|
||||
const wrapper = render(setupWrapper()).baseElement;
|
||||
expect(wrapper.querySelector('.dropdown')).toBeTruthy();
|
||||
|
||||
expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
|
||||
expect(wrapper.exists('.dropdown.is-right')).toBeFalsy();
|
||||
expect(wrapper.exists('.dropdown.is-up')).toBeFalsy();
|
||||
expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
|
||||
expect(wrapper.querySelector('.dropdown.is-right')).toBeFalsy();
|
||||
expect(wrapper.querySelector('.dropdown.is-up')).toBeFalsy();
|
||||
|
||||
expect(wrapper.exists('.dropdown-content')).toBeTruthy();
|
||||
expect(wrapper.find('.dropdown-content').text()).toEqual('');
|
||||
expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
|
||||
expect(wrapper.querySelector('.dropdown-content')).toHaveTextContent('');
|
||||
});
|
||||
|
||||
it('renders custom children', () => {
|
||||
const wrapper = mount(setupWrapper({}, dummyChildren));
|
||||
expect(wrapper.exists('.dropdown-content')).toBeTruthy();
|
||||
expect(wrapper.find('a.dropdown-item').length).toEqual(3);
|
||||
expect(wrapper.find('.dropdown-divider').length).toEqual(1);
|
||||
const wrapper = render(setupWrapper({}, dummyChildren)).baseElement;
|
||||
expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
|
||||
expect(wrapper.querySelectorAll('.dropdown-item').length).toEqual(3);
|
||||
expect(wrapper.querySelectorAll('.dropdown-divider').length).toEqual(1);
|
||||
});
|
||||
|
||||
it('renders dropdown with a right-aligned menu', () => {
|
||||
const wrapper = mount(setupWrapper({ right: true }));
|
||||
expect(wrapper.exists('.dropdown.is-right')).toBeTruthy();
|
||||
const wrapper = render(setupWrapper({ right: true })).baseElement;
|
||||
expect(wrapper.querySelector('.dropdown.is-right')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders dropdown with a popup menu', () => {
|
||||
const wrapper = mount(setupWrapper({ up: true }));
|
||||
expect(wrapper.exists('.dropdown.is-up')).toBeTruthy();
|
||||
const wrapper = render(setupWrapper({ up: true })).baseElement;
|
||||
expect(wrapper.querySelector('.dropdown.is-up')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('handles click', () => {
|
||||
const wrapper = mount(setupWrapper());
|
||||
expect(wrapper.exists('button')).toBeTruthy();
|
||||
expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
|
||||
const wrapper = render(setupWrapper()).baseElement;
|
||||
const button = screen.getByText('My Test Label');
|
||||
|
||||
wrapper.find('button').simulate('click');
|
||||
expect(wrapper.exists('.dropdown.is-active')).toBeTruthy();
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
|
||||
|
||||
userEvent.click(button);
|
||||
expect(wrapper.querySelector('.dropdown.is-active')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('matches snapshot', () => {
|
||||
const wrapper = mount(
|
||||
const { baseElement } = render(
|
||||
setupWrapper(
|
||||
{
|
||||
right: true,
|
||||
|
|
@ -72,6 +76,6 @@ describe('Dropdown', () => {
|
|||
dummyChildren
|
||||
)
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import DropdownItem from 'components/common/Dropdown/DropdownItem';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { screen } from '@testing-library/react';
|
||||
|
||||
const onClick = jest.fn();
|
||||
|
||||
describe('DropdownItem', () => {
|
||||
it('matches snapshot', () => {
|
||||
const wrapper = mount(
|
||||
const { baseElement } = render(
|
||||
<DropdownItem onClick={jest.fn()}>Item 1</DropdownItem>
|
||||
);
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('handles Click', () => {
|
||||
const wrapper = mount(
|
||||
<DropdownItem onClick={onClick}>Item 1</DropdownItem>
|
||||
);
|
||||
wrapper.simulate('click');
|
||||
render(<DropdownItem onClick={onClick}>Item 1</DropdownItem>);
|
||||
|
||||
const dropDown = screen.getByText('Item 1');
|
||||
|
||||
userEvent.click(dropDown);
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,103 +36,59 @@ exports[`Dropdown matches snapshot 1`] = `
|
|||
color: initial;
|
||||
}
|
||||
|
||||
<Dropdown
|
||||
label="My Test Label"
|
||||
right={true}
|
||||
up={true}
|
||||
>
|
||||
<div
|
||||
className="dropdown is-right is-up"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<styled.button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="c1"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
My Test Label
|
||||
</button>
|
||||
</styled.button>
|
||||
</div>
|
||||
</styled.div>
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
className="dropdown-menu"
|
||||
id="dropdown-menu"
|
||||
role="menu"
|
||||
class="dropdown is-right is-up"
|
||||
>
|
||||
<div
|
||||
className="dropdown-content has-text-left"
|
||||
class="c0"
|
||||
>
|
||||
<DropdownItem
|
||||
onClick={[MockFunction]}
|
||||
<button
|
||||
class="c1"
|
||||
type="button"
|
||||
>
|
||||
<styled.a
|
||||
$isDanger={false}
|
||||
className="dropdown-item is-link"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<a
|
||||
className="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
onClick={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
Child 1
|
||||
</a>
|
||||
</styled.a>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
onClick={[MockFunction]}
|
||||
My Test Label
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
id="dropdown-menu"
|
||||
role="menu"
|
||||
>
|
||||
<div
|
||||
class="dropdown-content has-text-left"
|
||||
>
|
||||
<styled.a
|
||||
$isDanger={false}
|
||||
className="dropdown-item is-link"
|
||||
onClick={[Function]}
|
||||
<a
|
||||
class="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<a
|
||||
className="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
onClick={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
Child 2
|
||||
</a>
|
||||
</styled.a>
|
||||
</DropdownItem>
|
||||
<DropdownDivider>
|
||||
Child 1
|
||||
</a>
|
||||
<a
|
||||
class="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
Child 2
|
||||
</a>
|
||||
<hr
|
||||
className="dropdown-divider"
|
||||
class="dropdown-divider"
|
||||
/>
|
||||
</DropdownDivider>
|
||||
<DropdownItem
|
||||
onClick={[MockFunction]}
|
||||
>
|
||||
<styled.a
|
||||
$isDanger={false}
|
||||
className="dropdown-item is-link"
|
||||
onClick={[Function]}
|
||||
<a
|
||||
class="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<a
|
||||
className="c2 dropdown-item is-link"
|
||||
href="#end"
|
||||
onClick={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
Child 3
|
||||
</a>
|
||||
</styled.a>
|
||||
</DropdownItem>
|
||||
Child 3
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</body>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,23 +5,16 @@ exports[`DropdownItem matches snapshot 1`] = `
|
|||
color: initial;
|
||||
}
|
||||
|
||||
<DropdownItem
|
||||
onClick={[MockFunction]}
|
||||
>
|
||||
<styled.a
|
||||
$isDanger={false}
|
||||
className="dropdown-item is-link"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<body>
|
||||
<div>
|
||||
<a
|
||||
className="c0 dropdown-item is-link"
|
||||
class="c0 dropdown-item is-link"
|
||||
href="#end"
|
||||
onClick={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
Item 1
|
||||
</a>
|
||||
</styled.a>
|
||||
</DropdownItem>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,36 @@
|
|||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import DynamicTextButton from 'components/common/DynamicTextButton/DynamicTextButton';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { screen } from '@testing-library/react';
|
||||
|
||||
describe('DynamicButton', () => {
|
||||
const mockCallback = jest.fn();
|
||||
it('exectutes callback', () => {
|
||||
const component = shallow(
|
||||
render(
|
||||
<DynamicTextButton
|
||||
onClick={mockCallback}
|
||||
title="title"
|
||||
render={() => 'text'}
|
||||
/>
|
||||
);
|
||||
component.simulate('click');
|
||||
|
||||
userEvent.click(screen.getByTitle('title'));
|
||||
expect(mockCallback).toBeCalled();
|
||||
});
|
||||
|
||||
it('changes the text', () => {
|
||||
const component = mount(
|
||||
render(
|
||||
<DynamicTextButton
|
||||
onClick={mockCallback}
|
||||
title="title"
|
||||
render={(clicked) => (clicked ? 'active' : 'default')}
|
||||
/>
|
||||
);
|
||||
expect(component.text()).toEqual('default');
|
||||
component.simulate('click');
|
||||
expect(component.text()).toEqual('active');
|
||||
|
||||
const button = screen.getByTitle('title');
|
||||
expect(button).toHaveTextContent('default');
|
||||
userEvent.click(button);
|
||||
expect(button).toHaveTextContent('active');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import SQLEditor from 'components/common/SQLEditor/SQLEditor';
|
||||
import { render } from 'lib/testHelpers';
|
||||
|
||||
describe('SQLEditor component', () => {
|
||||
it('matches the snapshot', () => {
|
||||
const component = shallow(<SQLEditor value="" name="name" />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { baseElement } = render(<SQLEditor value="" name="name" />);
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('matches the snapshot with fixed height', () => {
|
||||
const component = shallow(<SQLEditor value="" name="name" isFixedHeight />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { baseElement } = render(
|
||||
<SQLEditor value="" name="name" isFixedHeight />
|
||||
);
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('matches the snapshot with fixed height with no value', () => {
|
||||
const component = shallow(<SQLEditor name="name" isFixedHeight />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { baseElement } = render(<SQLEditor name="name" isFixedHeight />);
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,126 +1,295 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SQLEditor component matches the snapshot 1`] = `
|
||||
<ReactAce
|
||||
cursorStart={1}
|
||||
editorProps={Object {}}
|
||||
enableBasicAutocompletion={false}
|
||||
enableLiveAutocompletion={false}
|
||||
enableSnippets={false}
|
||||
focus={false}
|
||||
fontSize={12}
|
||||
height="372px"
|
||||
highlightActiveLine={true}
|
||||
maxLines={null}
|
||||
minLines={null}
|
||||
mode="sql"
|
||||
name="name"
|
||||
navigateToFileEnd={true}
|
||||
onChange={null}
|
||||
onLoad={null}
|
||||
onPaste={null}
|
||||
onScroll={null}
|
||||
placeholder={null}
|
||||
readOnly={false}
|
||||
scrollMargin={
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
]
|
||||
}
|
||||
setOptions={Object {}}
|
||||
showGutter={true}
|
||||
showPrintMargin={true}
|
||||
style={Object {}}
|
||||
tabSize={2}
|
||||
theme="textmate"
|
||||
value=""
|
||||
width="100%"
|
||||
wrapEnabled={true}
|
||||
/>
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class=" ace_editor ace_hidpi ace-tm"
|
||||
id="name"
|
||||
style="width: 100%; height: 372px; font-size: 12px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
class="ace_text-input"
|
||||
spellcheck="false"
|
||||
style="opacity: 0; font-size: 1px;"
|
||||
wrap="off"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ace_gutter"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_gutter-layer ace_folding-enabled"
|
||||
style="height: 1000000px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scroller"
|
||||
style="line-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ace_content"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_print-margin-layer"
|
||||
>
|
||||
<div
|
||||
class="ace_print-margin"
|
||||
style="left: 4px; visibility: visible;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_text-layer"
|
||||
style="height: 1000000px; margin: 0px 4px;"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_cursor-layer ace_hidden-cursors"
|
||||
>
|
||||
<div
|
||||
class="ace_cursor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-v"
|
||||
style="display: none; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="width: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-h"
|
||||
style="display: none; height: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="height: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
/>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
>
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`SQLEditor component matches the snapshot with fixed height 1`] = `
|
||||
<ReactAce
|
||||
cursorStart={1}
|
||||
editorProps={Object {}}
|
||||
enableBasicAutocompletion={false}
|
||||
enableLiveAutocompletion={false}
|
||||
enableSnippets={false}
|
||||
focus={false}
|
||||
fontSize={12}
|
||||
height="16px"
|
||||
highlightActiveLine={true}
|
||||
maxLines={null}
|
||||
minLines={null}
|
||||
mode="sql"
|
||||
name="name"
|
||||
navigateToFileEnd={true}
|
||||
onChange={null}
|
||||
onLoad={null}
|
||||
onPaste={null}
|
||||
onScroll={null}
|
||||
placeholder={null}
|
||||
readOnly={false}
|
||||
scrollMargin={
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
]
|
||||
}
|
||||
setOptions={Object {}}
|
||||
showGutter={true}
|
||||
showPrintMargin={true}
|
||||
style={Object {}}
|
||||
tabSize={2}
|
||||
theme="textmate"
|
||||
value=""
|
||||
width="100%"
|
||||
wrapEnabled={true}
|
||||
/>
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class=" ace_editor ace_hidpi ace-tm"
|
||||
id="name"
|
||||
style="width: 100%; height: 16px; font-size: 12px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
class="ace_text-input"
|
||||
spellcheck="false"
|
||||
style="opacity: 0; font-size: 1px;"
|
||||
wrap="off"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ace_gutter"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_gutter-layer ace_folding-enabled"
|
||||
style="height: 1000000px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scroller"
|
||||
style="line-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ace_content"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_print-margin-layer"
|
||||
>
|
||||
<div
|
||||
class="ace_print-margin"
|
||||
style="left: 4px; visibility: visible;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_text-layer"
|
||||
style="height: 1000000px; margin: 0px 4px;"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_cursor-layer ace_hidden-cursors"
|
||||
>
|
||||
<div
|
||||
class="ace_cursor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-v"
|
||||
style="display: none; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="width: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-h"
|
||||
style="display: none; height: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="height: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
/>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
>
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`SQLEditor component matches the snapshot with fixed height with no value 1`] = `
|
||||
<ReactAce
|
||||
cursorStart={1}
|
||||
editorProps={Object {}}
|
||||
enableBasicAutocompletion={false}
|
||||
enableLiveAutocompletion={false}
|
||||
enableSnippets={false}
|
||||
focus={false}
|
||||
fontSize={12}
|
||||
height="512px"
|
||||
highlightActiveLine={true}
|
||||
maxLines={null}
|
||||
minLines={null}
|
||||
mode="sql"
|
||||
name="name"
|
||||
navigateToFileEnd={true}
|
||||
onChange={null}
|
||||
onLoad={null}
|
||||
onPaste={null}
|
||||
onScroll={null}
|
||||
placeholder={null}
|
||||
readOnly={false}
|
||||
scrollMargin={
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
]
|
||||
}
|
||||
setOptions={Object {}}
|
||||
showGutter={true}
|
||||
showPrintMargin={true}
|
||||
style={Object {}}
|
||||
tabSize={2}
|
||||
theme="textmate"
|
||||
width="100%"
|
||||
wrapEnabled={true}
|
||||
/>
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class=" ace_editor ace_hidpi ace-tm"
|
||||
id="name"
|
||||
style="width: 100%; height: 512px; font-size: 12px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
class="ace_text-input"
|
||||
spellcheck="false"
|
||||
style="opacity: 0; font-size: 1px;"
|
||||
wrap="off"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ace_gutter"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_gutter-layer ace_folding-enabled"
|
||||
style="height: 1000000px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scroller"
|
||||
style="line-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ace_content"
|
||||
>
|
||||
<div
|
||||
class="ace_layer ace_print-margin-layer"
|
||||
>
|
||||
<div
|
||||
class="ace_print-margin"
|
||||
style="left: 4px; visibility: visible;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_text-layer"
|
||||
style="height: 1000000px; margin: 0px 4px;"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_marker-layer"
|
||||
/>
|
||||
<div
|
||||
class="ace_layer ace_cursor-layer ace_hidden-cursors"
|
||||
>
|
||||
<div
|
||||
class="ace_cursor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-v"
|
||||
style="display: none; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="width: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ace_scrollbar ace_scrollbar-h"
|
||||
style="display: none; height: 20px;"
|
||||
>
|
||||
<div
|
||||
class="ace_scrollbar-inner"
|
||||
style="height: 20px;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
/>
|
||||
<div
|
||||
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
|
||||
>
|
||||
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { shallow, mount } from 'enzyme';
|
||||
import Search from 'components/common/Search/Search';
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import theme from 'theme/theme';
|
||||
import { render } from 'lib/testHelpers';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { screen } from '@testing-library/react';
|
||||
|
||||
jest.mock('use-debounce', () => ({
|
||||
useDebouncedCallback: (fn: (e: Event) => void) => fn,
|
||||
|
|
@ -11,36 +11,34 @@ jest.mock('use-debounce', () => ({
|
|||
describe('Search', () => {
|
||||
const handleSearch = jest.fn();
|
||||
it('calls handleSearch on input', () => {
|
||||
const component = mount(
|
||||
<ThemeProvider theme={theme}>
|
||||
<Search
|
||||
handleSearch={handleSearch}
|
||||
value=""
|
||||
placeholder="Search bt the Topic name"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
component.find('input').simulate('change', { target: { value: 'test' } });
|
||||
expect(handleSearch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe('when placeholder is provided', () => {
|
||||
const component = shallow(
|
||||
render(
|
||||
<Search
|
||||
handleSearch={handleSearch}
|
||||
value=""
|
||||
placeholder="Search bt the Topic name"
|
||||
/>
|
||||
);
|
||||
it('matches the snapshot', () => {
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
const input = screen.getByPlaceholderText('Search bt the Topic name');
|
||||
userEvent.click(input);
|
||||
userEvent.keyboard('value');
|
||||
expect(handleSearch).toHaveBeenCalledTimes(5);
|
||||
});
|
||||
|
||||
describe('when placeholder is not provided', () => {
|
||||
const component = shallow(<Search handleSearch={handleSearch} value="" />);
|
||||
it('matches the snapshot', () => {
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
it('when placeholder is provided', () => {
|
||||
render(
|
||||
<Search
|
||||
handleSearch={handleSearch}
|
||||
value=""
|
||||
placeholder="Search bt the Topic name"
|
||||
/>
|
||||
);
|
||||
expect(
|
||||
screen.getByPlaceholderText('Search bt the Topic name')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('when placeholder is not provided', () => {
|
||||
render(<Search handleSearch={handleSearch} value="" />);
|
||||
expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Search when placeholder is not provided matches the snapshot 1`] = `
|
||||
<Styled(Input)
|
||||
defaultValue=""
|
||||
inputSize="M"
|
||||
leftIcon="fas fa-search"
|
||||
onChange={[Function]}
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Search when placeholder is provided matches the snapshot 1`] = `
|
||||
<Styled(Input)
|
||||
defaultValue=""
|
||||
inputSize="M"
|
||||
leftIcon="fas fa-search"
|
||||
onChange={[Function]}
|
||||
placeholder="Search bt the Topic name"
|
||||
type="text"
|
||||
/>
|
||||
`;
|
||||
Loading…
Add table
Reference in a new issue