{imageRenderer()}
@@ -94,6 +95,7 @@ class ImageItem extends React.Component {
{
galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
driver.mount(GalleryView, galleryViewProps);
expect(driver.find.hook('item-container').length).to.equal(1);
- expect(driver.find.selector('GalleryDebugMessage').length).to.equal(1);
+ // expect(driver.find.hook('gallery-debug-message').length).to.equal(1);
});
it('init empty gallery', () => {
@@ -56,29 +56,44 @@ describe('Gallery View', () => {
it('toggle to infiniteScroll mode when load more button is clicked', () => {
const spy = sinon.spy(GalleryView.prototype, 'showMoreItems');
+ const toggleLoadMoreItemsSpy = sinon.spy();
galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
Object.assign(galleryViewProps, {
displayShowMore: true,
container: { ...galleryViewProps.container, height: 1000 },
+ actions: {
+ ...galleryViewProps.actions,
+ toggleLoadMoreItems: toggleLoadMoreItemsSpy
+ }
});
driver.mount(GalleryView, galleryViewProps);
- const stub = sinon.stub(driver.get.props().actions, 'toggleLoadMoreItems');
expect(driver.find.hook('show-more').length).to.equal(1);
- driver.find.hook('show-more').simulate('click');
+ driver.trigger.click(driver.find.hook('show-more')[0])
expect(spy.called).to.be.true;
- expect(stub.called).to.be.true;
+ expect(toggleLoadMoreItemsSpy.called).to.be.true;
spy.restore();
- stub.restore();
+ toggleLoadMoreItemsSpy.restore();
});
});
- describe(' Arrow Keys handler tests ', () => {
- it('handle up arrow', () => {
- galleryViewProps = driver.props.galleryView(initialGalleryViewProps);
+ describe.only(' Arrow Keys handler tests ', () => {
+ it.only('handle up arrow', () => {
+ const findNeighborItemSpy = sinon.stub().returns(3);
+ galleryViewProps = driver.props.galleryView(
+ Object.assign(
+ initialGalleryViewProps,
+ {
+ ...initialGalleryViewProps,
+ galleryStructure: {
+ ...initialGalleryViewProps.galleryStructure,
+ findNeighborItem: findNeighborItemSpy,
+ }
+ }
+ ));
driver.mount(GalleryView, galleryViewProps);
const stub_document = sinon.stub(document.activeElement, 'getAttribute').returns(7);
const stub_utils = sinon.stub(utils, 'setStateAndLog');
- const stub_findNeighborItem = sinon.stub(driver.get.props().galleryStructure, 'findNeighborItem').returns(3);
+ // const stub_findNeighborItem = sinon.stub(driver.get.props().galleryStructure, 'findNeighborItem').returns(3);
const result = driver.get.instance().handleKeys({
keyCode: 38,
charCode: null,
@@ -86,10 +101,9 @@ describe('Gallery View', () => {
stopPropagation() {},
});
expect(stub_document.called).to.be.true;
- expect(stub_findNeighborItem.calledWith(7, 'up')).to.be.true;
+ expect(findNeighborItemSpy.calledWith(7, 'up')).to.be.true;
expect(result).to.be.false;
stub_document.restore();
- stub_findNeighborItem.restore();
stub_utils.restore();
});
diff --git a/packages/gallery/tests/components/group/groupView.spec.js b/packages/gallery/tests/components/group/groupView.spec.js
index 23c56c465d..4c52362e56 100644
--- a/packages/gallery/tests/components/group/groupView.spec.js
+++ b/packages/gallery/tests/components/group/groupView.spec.js
@@ -15,7 +15,7 @@ describe('Group View ', () => {
});
});
it('should init', () => {
- galleryDriver.shallow(GroupView, groupViewProps);
+ galleryDriver.mount(GroupView, groupViewProps);
expect(galleryDriver.find.hook('group-view').length).to.equal(1);
});
it('should create item container from dtos', () => {
diff --git a/packages/gallery/tests/drivers/reactDriver.js b/packages/gallery/tests/drivers/reactDriver.js
index b27e76a9db..fdb7a2252a 100644
--- a/packages/gallery/tests/drivers/reactDriver.js
+++ b/packages/gallery/tests/drivers/reactDriver.js
@@ -1,15 +1,12 @@
import { Layouter, GalleryItem, ItemsHelper } from 'pro-layouts';
import { window, addOldOptions, defaultOptions } from 'pro-gallery-lib';
import { testImages } from './mocks/images-mock.js';
-import { mount, shallow, configure } from 'enzyme';
+import { render, act } from '@testing-library/react';
import { GalleryContainer } from '../../src/components/gallery/proGallery/galleryContainer'; //import GalleryContainer before the connect (without redux)
import React from 'react';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
import ProGallery from '../../src/components/gallery';
import _ from 'lodash';
-configure({ adapter: new Adapter() });
-
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
@@ -108,14 +105,18 @@ class galleryDriver {
...addOldOptions(props.galleryConfig.options),
...props.galleryConfig.options,
});
- this.wrapper = mount(
);
+ const { container, unmount } = render(
);
+ this.wrapper = container;
+ this.unmountWrapper = unmount;
return this;
};
res.galleryContainer = (props) => {
const defaultProps = this.props.galleryContainer();
props = Object.assign(defaultProps, props || {});
props.options = { ...addOldOptions(props.options), ...props.options };
- this.wrapper = mount(
);
+ const { container, unmount } = render(
);
+ this.wrapper = container;
+ this.unmountWrapper = unmount;
return this;
};
res.proGallery = (props) => {
@@ -123,21 +124,25 @@ class galleryDriver {
div.setAttribute('id', 'testing-container');
document.body.appendChild(div);
props.options = { ...addOldOptions(props.options), ...props.options };
- this.wrapper = mount(
, {
- attachTo: document.getElementById('testing-container'),
- });
+ // this.wrapper = render(
, {
+ // attachTo: document.getElementById('testing-container'),
+ // });
+ const { container, unmount } = render(
);
+ this.wrapper = container;
+ this.unmountWrapper = unmount;
};
return res;
}
get trigger() {
return {
scroll: () => document.dispatchEvent(new CustomEvent('scroll')),
+ click: (wrapper) => act(() => wrapper.click())
};
}
get detach() {
return {
proGallery: () => {
- this.wrapper.detach();
+ this.unmountWrapper();
const div = document.getElementById('testing-container');
if (div) {
document.body.removeChild(div);
@@ -168,20 +173,24 @@ class galleryDriver {
get find() {
return {
hook: (str) => {
- return this.wrapper.find({ 'data-hook': str });
+ // return queryHelpers.queryAllByAttribute.bind(null, )
+ return this.wrapper.querySelectorAll(`[data-hook="${str}"]`);
},
tag: (str) => {
- return this.wrapper.find(`${str}`);
+ return this.wrapper.querySelectorAll(`${str}`);
},
id: (str) => {
- return this.wrapper.find(`#${str}`);
+ return this.wrapper.querySelectorAll(`#${str}`);
},
class: (str) => {
- return this.wrapper.find(`.${str}`);
+ return this.wrapper.querySelectorAll(`.${str}`);
},
selector: (str) => {
- return this.wrapper.find(str);
+ return this.wrapper.querySelectorAll(str);
},
+ // getByTestId: (str) => {
+ // return this.wrapper.getByTestId(str);
+ // }
};
}
@@ -200,7 +209,7 @@ class galleryDriver {
async update(ms = 0) {
await sleep(ms);
- this.wrapper.update();
+ // this.wrapper.update();
}
get props() {