diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap
index 3b0cac44bea7..db531096544b 100644
--- a/src/components/image/__snapshots__/image.test.tsx.snap
+++ b/src/components/image/__snapshots__/image.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`EuiImage props allowFullScreen 1`] = `
exports[`EuiImage props caption 1`] = `
`;
@@ -208,7 +209,7 @@ exports[`EuiImage props wrapperProps 1`] = `
class="euiImageWrapper testClass1 testClass2 emotion-euiImageWrapper-euiTestCss"
data-test-subj="test subject string"
src="/cat.jpg"
- style="border:2px solid red"
+ style="border: 2px solid red;"
>
{
shouldRenderCustomStyles(, {
childProps: ['wrapperProps'],
});
+ shouldRenderCustomStyles(, {
+ skipParentTest: true,
+ childProps: ['wrapperProps'],
+ targetSelector: '.euiImageFullScreenWrapper',
+ renderCallback: ({ getByTestSubject }) => {
+ fireEvent.click(getByTestSubject('activateFullScreenButton'));
+ },
+ });
test('is rendered', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
describe('props', () => {
describe('src vs url', () => {
test('src', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
test('url', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
it('picks src over url when both are present (and throws a typescript error)', () => {
- const component = render(
+ const { container } = render(
// @ts-expect-error - 'types of property url are incompatible'
);
- expect(component.find('img').attr('src')).toEqual('/dog.jpg');
+ expect(container.querySelector('img')?.getAttribute('src')).toEqual(
+ '/dog.jpg'
+ );
});
});
test('float', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render(
+
+ );
+ expect(container.firstChild).toMatchSnapshot();
});
test('margin', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
test('size', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
test('caption', () => {
- const component = render(
+ const { container } = render(
caption} />
);
- expect(component).toMatchSnapshot();
+ expect(container.firstChild).toMatchSnapshot();
});
test('allowFullScreen', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ const { container } = render(
+
+ );
+ expect(container.firstChild).toMatchSnapshot();
});
test('fullScreenIconColor', () => {
- const component = render(
+ const { container } = render(
);
- expect(component).toMatchSnapshot();
+ expect(container.firstChild).toMatchSnapshot();
});
test('hasShadow', () => {
- const component = render(
+ const { container } = render(
{
hasShadow
/>
);
- expect(component).toMatchSnapshot();
+ expect(container.firstChild).toMatchSnapshot();
});
test('wrapperProps', () => {
- const component = render(
+ const { container } = render(
caption}
@@ -114,15 +128,13 @@ describe('EuiImage', () => {
}}
/>
);
- expect(component).toMatchSnapshot();
+ expect(container.firstChild).toMatchSnapshot();
});
});
describe('fullscreen behaviour', () => {
- let component: ReactWrapper;
-
- beforeAll(() => {
- component = mount(
+ beforeEach(() => {
+ const { getByTestSubject } = render(
{
allowFullScreen
/>
);
- });
-
- beforeEach(() => {
- findTestSubject(component, 'activateFullScreenButton').simulate('click');
+ fireEvent.click(getByTestSubject('activateFullScreenButton'));
});
test('fullscreen image is rendered', () => {
- const overlayMask = document.querySelectorAll(
- '[data-test-subj=fullScreenOverlayMask]'
- );
- expect(overlayMask.length).toBe(1);
-
- const fullScreenImage = overlayMask[0].querySelectorAll('figure img');
- expect(fullScreenImage.length).toBe(1);
+ const overlayMask = screen.getByTestSubject('fullScreenOverlayMask');
+ const fullScreenImage = overlayMask.querySelector('figure img');
+ expect(fullScreenImage).not.toBeNull();
});
test('close using close icon', () => {
- const deactivateFullScreenBtn = document.querySelectorAll(
- '[data-test-subj=deactivateFullScreenButton]'
+ const deactivateFullScreenBtn = screen.getByTestSubject(
+ 'deactivateFullScreenButton'
);
- expect(deactivateFullScreenBtn.length).toBe(1);
-
- act(() => {
- (deactivateFullScreenBtn[0] as HTMLElement).click();
- });
+ fireEvent.click(deactivateFullScreenBtn);
- const overlayMask = document.querySelectorAll(
- '[data-test-subj=fullScreenOverlayMask]'
- );
- expect(overlayMask.length).toBe(0);
+ expect(screen.queryByTestSubject('fullScreenOverlayMask')).toBeNull();
});
test('close using ESCAPE key', () => {
- const deactivateFullScreenBtn = document.querySelector(
- '[data-test-subj=deactivateFullScreenButton]'
+ const deactivateFullScreenBtn = screen.getByTestSubject(
+ 'deactivateFullScreenButton'
);
- expect(deactivateFullScreenBtn).toBeTruthy();
// Ignores non-escape keys
- act(() => {
- const escapeKeydownEvent = new KeyboardEvent('keydown', {
- key: keys.TAB,
- bubbles: true,
- });
- deactivateFullScreenBtn!.dispatchEvent(escapeKeydownEvent);
- });
- expect(deactivateFullScreenBtn).toBeTruthy();
+ fireEvent.keyDown(deactivateFullScreenBtn, { key: keys.TAB });
// Removes full screen overlay on escape key
- act(() => {
- const escapeKeydownEvent = new KeyboardEvent('keydown', {
- key: keys.ESCAPE,
- bubbles: true,
- });
- deactivateFullScreenBtn!.dispatchEvent(escapeKeydownEvent);
- });
+ fireEvent.keyDown(deactivateFullScreenBtn, { key: keys.ESCAPE });
- const overlayMask = document.querySelector(
- '[data-test-subj=fullScreenOverlayMask]'
- );
- expect(overlayMask).toBeFalsy();
+ expect(screen.queryByTestSubject('fullScreenOverlayMask')).toBeNull();
});
// Clicking the mask to close is now handled by EuiFocusTrap
// and we can't use Enzyme to test this behavior.
// A Cypress test exists in the EuiFocusTrap suite that
// sufficiently covers this behavior
- test.skip('close using overlay mask', () => {
- let overlayMask = document.querySelectorAll(
- '[data-test-subj=fullScreenOverlayMask]'
- );
- expect(overlayMask.length).toBe(1);
-
- act(() => {
- (overlayMask[0] as HTMLElement).click();
- });
-
- overlayMask = document.querySelectorAll(
- '[data-test-subj=fullScreenOverlayMask]'
- );
- expect(overlayMask.length).toBe(0);
- });
});
});
diff --git a/src/components/image/image_fullscreen_wrapper.tsx b/src/components/image/image_fullscreen_wrapper.tsx
index dfa5a3741655..93d5e8af0399 100644
--- a/src/components/image/image_fullscreen_wrapper.tsx
+++ b/src/components/image/image_fullscreen_wrapper.tsx
@@ -40,7 +40,7 @@ export const EuiImageFullScreenWrapper: FunctionComponent<
const styles = euiImageFullscreenWrapperStyles(euiTheme);
- const cssStyles = [styles.euiImageFullscreenWrapper];
+ const cssStyles = [styles.euiImageFullscreenWrapper, wrapperProps?.css];
const classes = classNames(
'euiImageFullScreenWrapper',
@@ -78,9 +78,9 @@ export const EuiImageFullScreenWrapper: FunctionComponent<
<>