Merge branch 'feat/no-ref/unit_test_sessioninput' into feat/ses-825/onboarding2
yougotwill
10 months ago
commit
eecf8527c7
@ -0,0 +1,27 @@
|
|||||||
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
|
import { cleanup } from '@testing-library/react';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import Sinon from 'sinon';
|
||||||
|
import { SessionInput } from '../../components/inputs';
|
||||||
|
import { TestUtils } from '../test-utils';
|
||||||
|
import { findAllByElementType, renderComponent } from './renderComponent';
|
||||||
|
|
||||||
|
// TODO[epic=SES-2418] migrate to Storybook
|
||||||
|
describe('SessionInput', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
TestUtils.stubSVGElement();
|
||||||
|
TestUtils.stubWindowLog();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
Sinon.restore();
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render an input', async () => {
|
||||||
|
const result = renderComponent(<SessionInput type="text" />);
|
||||||
|
const inputElements = findAllByElementType(result, 'input');
|
||||||
|
expect(inputElements.length, 'should have an input element').to.equal(1);
|
||||||
|
result.unmount();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,18 +1,71 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
import { AnimatePresence, MotionGlobalConfig } from 'framer-motion';
|
||||||
import { render, RenderOptions } from '@testing-library/react';
|
import { isArray, isEqual, unset } from 'lodash';
|
||||||
import { AnimatePresence } from 'framer-motion';
|
import { ElementType, ReactElement, ReactNode } from 'react';
|
||||||
import { ReactElement, ReactNode } from 'react';
|
import { ErrorBoundary } from 'react-error-boundary';
|
||||||
|
import TestRenderer from 'react-test-renderer';
|
||||||
import { SessionTheme } from '../../themes/SessionTheme';
|
import { SessionTheme } from '../../themes/SessionTheme';
|
||||||
|
|
||||||
const Providers = ({ children }: { children: ReactNode }) => {
|
const Providers = ({ children }: { children: ReactNode }) => {
|
||||||
|
MotionGlobalConfig.skipAnimations = false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SessionTheme>
|
<SessionTheme>
|
||||||
<AnimatePresence>{children}</AnimatePresence>
|
<AnimatePresence>
|
||||||
|
<ErrorBoundary
|
||||||
|
fallback={<>{`Failed to render a component!\n\t${JSON.stringify(children)}`}</>}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ErrorBoundary>
|
||||||
|
</AnimatePresence>
|
||||||
</SessionTheme>
|
</SessionTheme>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderComponent = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
|
function renderComponent(children: ReactElement): TestRenderer.ReactTestRenderer {
|
||||||
render(ui, { wrapper: Providers, ...options });
|
return TestRenderer.create(<Providers>{children}</Providers>);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getComponentTree(
|
||||||
|
result: TestRenderer.ReactTestRenderer
|
||||||
|
): Array<TestRenderer.ReactTestRendererTree> {
|
||||||
|
const trees = result.toTree();
|
||||||
|
return !trees ? [] : isArray(trees) ? trees : [trees];
|
||||||
|
}
|
||||||
|
|
||||||
|
function findByDataTestId(
|
||||||
|
renderResult: TestRenderer.ReactTestRenderer,
|
||||||
|
dataTestId: string
|
||||||
|
): TestRenderer.ReactTestInstance {
|
||||||
|
return renderResult.root.findByProps({ 'data-testid': dataTestId });
|
||||||
|
}
|
||||||
|
|
||||||
|
function findAllByElementType(
|
||||||
|
renderResult: TestRenderer.ReactTestRenderer,
|
||||||
|
elementType: ElementType
|
||||||
|
): Array<TestRenderer.ReactTestInstance> {
|
||||||
|
return renderResult.root.findAllByType(elementType);
|
||||||
|
}
|
||||||
|
|
||||||
export { renderComponent };
|
function areResultsEqual(
|
||||||
|
renderResult: TestRenderer.ReactTestRenderer,
|
||||||
|
renderResult2: TestRenderer.ReactTestRenderer,
|
||||||
|
ignoreDataTestIds?: boolean
|
||||||
|
): boolean {
|
||||||
|
if (ignoreDataTestIds) {
|
||||||
|
const obj = renderResult.toJSON();
|
||||||
|
const obj2 = renderResult2.toJSON();
|
||||||
|
unset(obj, "props['data-testid']");
|
||||||
|
unset(obj2, "props['data-testid']");
|
||||||
|
return isEqual(obj, obj2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return isEqual(renderResult.toJSON(), renderResult2.toJSON());
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
areResultsEqual,
|
||||||
|
findAllByElementType,
|
||||||
|
findByDataTestId,
|
||||||
|
getComponentTree,
|
||||||
|
renderComponent,
|
||||||
|
};
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
import { RenderResult, prettyDOM } from '@testing-library/react';
|
|
||||||
import { enableLogRedirect } from './stubbing';
|
|
||||||
|
|
||||||
const printHTMLElement = async (element: HTMLElement, name?: string) => {
|
|
||||||
if (!window.log || !enableLogRedirect) {
|
|
||||||
throw Error(
|
|
||||||
'window.log is not defined. Have you turned on enableLogRedirect / called stubWindowLog() ?'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.log.debug(`\nHTML Element${name ? ` (${name})` : ''}:\n${prettyDOM(element)}\n`);
|
|
||||||
};
|
|
||||||
const printRenderResult = async (result: RenderResult, name?: string) => {
|
|
||||||
if (!window.log || !enableLogRedirect) {
|
|
||||||
throw Error(
|
|
||||||
'window.log is not defined. Have you turned on enableLogRedirect / called stubWindowLog() ?'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return window.log.debug(
|
|
||||||
`\nRender Result${name ? ` (${name})` : ''}:\n${prettyDOM(result.baseElement)}\n`
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { printHTMLElement, printRenderResult };
|
|
||||||
Loading…
Reference in New Issue