Merge branch 'feat/no-ref/unit_test_sessioninput' into feat/ses-825/onboarding2
yougotwill
9 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 { render, RenderOptions } from '@testing-library/react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { ReactElement, ReactNode } from 'react';
|
||||
import { AnimatePresence, MotionGlobalConfig } from 'framer-motion';
|
||||
import { isArray, isEqual, unset } from 'lodash';
|
||||
import { ElementType, ReactElement, ReactNode } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { SessionTheme } from '../../themes/SessionTheme';
|
||||
|
||||
const Providers = ({ children }: { children: ReactNode }) => {
|
||||
MotionGlobalConfig.skipAnimations = false;
|
||||
|
||||
return (
|
||||
<SessionTheme>
|
||||
<AnimatePresence>{children}</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
<ErrorBoundary
|
||||
fallback={<>{`Failed to render a component!\n\t${JSON.stringify(children)}`}</>}
|
||||
>
|
||||
{children}
|
||||
</ErrorBoundary>
|
||||
</AnimatePresence>
|
||||
</SessionTheme>
|
||||
);
|
||||
};
|
||||
|
||||
const renderComponent = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
|
||||
render(ui, { wrapper: Providers, ...options });
|
||||
function renderComponent(children: ReactElement): TestRenderer.ReactTestRenderer {
|
||||
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