Skip to content

Commit

Permalink
Merge 201e758 into 4a5883c
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexKarajohn
AlexKarajohn committed Sep 14, 2022
2 parents 4a5883c + 201e758 commit b88c8b0
Show file tree
Hide file tree
Showing 9 changed files with 903 additions and 1,640 deletions.
2,125 changes: 667 additions & 1,458 deletions package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,20 @@
"@semantic-release/git": "^9.0.0",
"@semantic-release/github": "^7.2.3",
"@semantic-release/npm": "^7.1.3",
"@testing-library/dom": "^8.0.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@types/jest": "^26.0.24",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"@testing-library/dom": "^8.17.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.0.2",
"@types/react": "^18.0.20",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^4.28.2",
"@typescript-eslint/parser": "^4.28.2",
"coveralls": "^3.1.0",
"eslint": "^7.30.0",
"jest": "^27.0.5",
"prettier": "^2.3.2",
"react": "17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"semantic-release": "^17.4.4",
"ts-jest": "^27.0.3",
"ts-loader": "^9.2.3",
Expand Down
138 changes: 76 additions & 62 deletions src/provider/ReCaptchaProvider.test/reMount.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getByTestId, render, RenderResult } from '@testing-library/react';
import { act, getByTestId, render, RenderResult } from '@testing-library/react';
import * as React from 'react';
import { ReCaptchaProvider } from 'src/provider/ReCaptchaProvider';
import { withContext } from 'src/provider/withContext';
Expand Down Expand Up @@ -35,12 +35,14 @@ describe('ReCaptchaProvider', (): void => {
});

describe('unmount and invoke onload handler', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
rr.unmount();
// emulate the onload call by the google api
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
await act(async () => {
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
});
});

it('onload handler is undefined', (): void => {
Expand All @@ -49,22 +51,24 @@ describe('ReCaptchaProvider', (): void => {
});

describe('second mount with optional props', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// new render to trigger a new mount with all optional props
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
await act(async () => {
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
});
node = getByTestId(rr.container, 'dummy-test-id');
});

Expand All @@ -87,48 +91,53 @@ describe('ReCaptchaProvider', (): void => {
});

describe('first mount with required props', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
clearDOM();
// reset state
delete window?.GoogleReCaptcha_onload;
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// render our dummy component in a two level nested node
// under the provider, to test the context passing down
rr = render(
<ReCaptchaProvider>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
await act(async () => {
rr = render(
<ReCaptchaProvider>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
});
});

it('onload handler is defined', (): void => {
expect(window.GoogleReCaptcha_onload).toBeInstanceOf(Function);
});

describe('second mount with optional props and post onload invocation', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// new render to trigger a new mount with all optional props
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
// emulate the onload call by the google api
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
await act(async () => {
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);

// emulate the onload call by the google api
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
});
node = getByTestId(rr.container, 'dummy-test-id');
});

Expand All @@ -151,7 +160,7 @@ describe('ReCaptchaProvider', (): void => {
});

describe('first mount with required props and onload invocation', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
// make sure everything is clear for this scope
clearDOM();
// reset state: investigate how to uncomment this with TS v4+
Expand All @@ -160,41 +169,46 @@ describe('ReCaptchaProvider', (): void => {
DummyComponentWithContext = withContext(DummyComponent);
// render our dummy component in a two level nested node
// under the provider, to test the context passing down

rr = render(
<ReCaptchaProvider>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
// emulate the onload call by the google api
// const { googleReCaptcha_onload } = window;
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
await act(async () => {
// emulate the onload call by the google api
// const { googleReCaptcha_onload } = window;
if (typeof window.GoogleReCaptcha_onload === 'function') {
window.GoogleReCaptcha_onload();
}
});
});

it('onload handler is not defined', (): void => {
expect(window.GoogleReCaptcha_onload).toBeUndefined();
});

describe('second mount with optional props', (): void => {
beforeAll((): void => {
beforeEach(async (): Promise<void> => {
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// new render to trigger a new mount with all optional props
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
await act(async () => {
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
});
node = getByTestId(rr.container, 'dummy-test-id');
});

Expand Down
40 changes: 22 additions & 18 deletions src/provider/ReCaptchaProvider.test/withOptionalProps.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getByTestId, render, RenderResult } from '@testing-library/react';
import { getByTestId, render, RenderResult, act } from '@testing-library/react';
import * as React from 'react';
import { ReCaptchaProvider } from 'src/provider/ReCaptchaProvider';
import { withContext } from 'src/provider/withContext';
Expand All @@ -13,25 +13,27 @@ describe('ReCaptchaProvider', (): void => {
let DummyComponentWithContext: React.ComponentType<IProps>;

describe('with optional props', (): void => {
beforeEach((): void => {
beforeEach(async (): Promise<void> => {
// make sure we clean DOM from script/style tags
clearDOM();
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// render our dummy component in a two level nested node
// under the provider, to test the context passing down
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
await act(async () => {
rr = render(
<ReCaptchaProvider
siteKeyV2={EProps.siteKeyV2}
siteKeyV3={EProps.siteKeyV3}
langCode={EProps.langCode}
hideV3Badge={true}
>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
});
node = getByTestId(rr.container, 'dummy-test-id');
});

Expand Down Expand Up @@ -105,10 +107,12 @@ describe('ReCaptchaProvider', (): void => {
});

describe('window.GoogleReCaptcha_onload callback', (): void => {
beforeEach((): void => {
if (window.GoogleReCaptcha_onload) {
window.GoogleReCaptcha_onload();
}
beforeEach(async (): Promise<void> => {
await act(async () => {
if (window.GoogleReCaptcha_onload) {
window.GoogleReCaptcha_onload();
}
});
});

it('the loaded prop changes to true', (): void => {
Expand Down
30 changes: 17 additions & 13 deletions src/provider/ReCaptchaProvider.test/withRequiredProps.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getByTestId, render, RenderResult } from '@testing-library/react';
import { act, getByTestId, render, RenderResult } from '@testing-library/react';
import * as React from 'react';
import { ReCaptchaProvider } from 'src/provider/ReCaptchaProvider';
import { withContext } from 'src/provider/withContext';
Expand All @@ -12,20 +12,22 @@ describe('ReCaptchaProvider', (): void => {
let DummyComponentWithContext: React.ComponentType<IProps>;

describe('with required props', (): void => {
beforeEach((): void => {
beforeEach(async (): Promise<void> => {
// make sure we clean DOM from script/style tags
clearDOM();
// wrap our dummy component with the context and get its props
DummyComponentWithContext = withContext(DummyComponent);
// render our dummy component in a two level nested node
// under the provider, to test the context passing down
rr = render(
<ReCaptchaProvider>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
await act(async () => {
rr = render(
<ReCaptchaProvider>
<div>
<DummyComponentWithContext dummy="dummy-prop" otherDummy={55} />
</div>
</ReCaptchaProvider>
);
});
node = getByTestId(rr.container, 'dummy-test-id');
});

Expand Down Expand Up @@ -95,10 +97,12 @@ describe('ReCaptchaProvider', (): void => {
});

describe('window.GoogleReCaptcha_onload callback', (): void => {
beforeEach((): void => {
if (window.GoogleReCaptcha_onload) {
window.GoogleReCaptcha_onload();
}
beforeEach(async (): Promise<void> => {
await act(async () => {
if (window.GoogleReCaptcha_onload) {
window.GoogleReCaptcha_onload();
}
});
});

it('the loaded prop changes to true', (): void => {
Expand Down

0 comments on commit b88c8b0

Please sign in to comment.