mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add testing-library/jest-dom, fix waitfor

Browse Source
This commit is contained in:
Pavel Mineev
2021-03-04 12:02:46 -06:00
committed by Umputun
parent 4bea9f1d37
commit 345ee88333
3 changed files with 104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/auth/auth.spec.tsx
+37 -40
View File
@@ -1,7 +1,7 @@
import '@testing-library/jest-dom';
import { h } from 'preact';
import { fireEvent, render, waitFor } from '@testing-library/preact';
import { sleep } from 'utils/sleep';
import { Provider, User } from 'common/types';
import { StaticStore } from 'common/static-store';
@@ -27,46 +27,43 @@ describe('<Auth/>', () => {
it('should render auth with hidden dropdown', () => {
const { container } = render(<Auth />);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
});
it('should close dropdown by click on button', () => {
const { container } = render(<Auth />);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
});
it('should close dropdown by click outside of it', () => {
const { container } = render(<Auth />);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
fireEvent.click(document);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
});
it('should close dropdown by message from parent', async () => {
const { container } = render(<Auth />);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument();
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
window.postMessage('{"clickOutside": true}', '*');
// TODO: Find out how to wait for postMessage recive without `sleep`
await sleep(10);
expect(container.querySelector('.auth-dropdown')).toBeFalsy();
await waitFor(() => expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument());
});
});
@@ -85,10 +82,10 @@ describe('<Auth/>', () => {
expect(container.querySelector('.auth-dropdown')).toBeNull();
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelectorAll('.oauth-button')).toHaveLength(providers.length);
expect(container.querySelector('[name="username"]')).toBeFalsy();
expect(container.querySelector('.auth-submit')).toBeFalsy();
expect(container.querySelector('[name="username"]')).not.toBeInTheDocument();
expect(container.querySelector('.auth-submit')).not.toBeInTheDocument();
});
it('should render email provider', () => {
@@ -97,11 +94,11 @@ describe('<Auth/>', () => {
const { container } = render(<Auth />);
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('.auth-form-title')?.innerHTML).toContain('email');
expect(container.querySelector('[name="username"]')).toBeTruthy();
expect(container.querySelector('[name="email"]')).toBeTruthy();
expect(container.querySelector('.auth-submit')).toBeTruthy();
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('[name="email"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
});
it('should render anonymous provider', () => {
@@ -110,10 +107,10 @@ describe('<Auth/>', () => {
const { container } = render(<Auth />);
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('.auth-form-title')?.innerHTML).toContain('anonymous');
expect(container.querySelector('[name="username"]')).toBeTruthy();
expect(container.querySelector('.auth-submit')).toBeTruthy();
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
});
it('should render tabs with two form providers', () => {
@@ -122,16 +119,16 @@ describe('<Auth/>', () => {
const { container } = render(<Auth />);
fireEvent.click(container.querySelector('.auth-button')!);
expect(container.querySelector('.auth-dropdown')).toBeTruthy();
expect(container.querySelector('[for="form-provider-anonymous"]')).toBeTruthy();
expect(container.querySelector('[for="form-provider-email"]')).toBeTruthy();
expect(container.querySelector('[name="username"]')).toBeTruthy();
expect(container.querySelector('.auth-submit')).toBeTruthy();
expect(container.querySelector('.auth-dropdown')).toBeInTheDocument();
expect(container.querySelector('[for="form-provider-anonymous"]')).toBeInTheDocument();
expect(container.querySelector('[for="form-provider-email"]')).toBeInTheDocument();
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
fireEvent.click(container.querySelector('[for="form-provider-email"]')!);
expect(container.querySelector('[name="username"]')).toBeTruthy();
expect(container.querySelector('[name="email"]')).toBeTruthy();
expect(container.querySelector('.auth-submit')).toBeTruthy();
expect(container.querySelector('[name="username"]')).toBeInTheDocument();
expect(container.querySelector('[name="email"]')).toBeInTheDocument();
expect(container.querySelector('.auth-submit')).toBeInTheDocument();
});
it('should send email and then verify forms', async () => {
@@ -149,12 +146,12 @@ describe('<Auth/>', () => {
});
fireEvent.click(container.querySelector('.auth-submit')!);
expect(container.querySelector('.spinner')).toBeTruthy();
expect(container.querySelector('.spinner')).toBeInTheDocument();
await waitFor(() => expect(api.emailSignin).toBeCalled());
expect(container.querySelector('.auth-back-button')).toBeTruthy();
expect(container.querySelector('.auth-close-button')).toBeTruthy();
expect(container.querySelector('[name="token"]')).toBeTruthy();
expect(container.querySelector('.auth-back-button')).toBeInTheDocument();
expect(container.querySelector('.auth-close-button')).toBeInTheDocument();
expect(container.querySelector('[name="token"]')).toBeInTheDocument();
fireEvent.change(container.querySelector('[name="token"]')!, {
target: { value: 'token' },
@@ -180,9 +177,9 @@ describe('<Auth/>', () => {
fireEvent.click(container.querySelector('.auth-submit')!);
await waitFor(() => expect(api.emailSignin).toBeCalled());
expect(container.querySelector('.auth-back-button')).toBeTruthy();
expect(container.querySelector('.auth-close-button')).toBeTruthy();
expect(container.querySelector('[name="token"]')).toBeTruthy();
expect(container.querySelector('.auth-back-button')).toBeInTheDocument();
expect(container.querySelector('.auth-close-button')).toBeInTheDocument();
expect(container.querySelector('[name="token"]')).toBeInTheDocument();
fireEvent.change(container.querySelector('[name="token"]')!, {
target: { value: 'token' },
@@ -202,7 +199,7 @@ describe('<Auth/>', () => {
fireEvent.click(container.querySelector('.auth-button')!);
fireEvent.change(container.querySelector('[name="username"]')!, { target: { value: 'username' } });
fireEvent.click(container.querySelector('.auth-submit')!);
expect(container.querySelector('.spinner')).toBeTruthy();
expect(container.querySelector('.spinner')).toBeInTheDocument();
await waitFor(() => expect(api.anonymousSignin).toBeCalled());
});
});
frontend/package-lock.json
Generated
+66
View File
@@ -1814,6 +1814,34 @@
"pretty-format": "^26.6.2"
}
},
"@testing-library/jest-dom": {
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz",
"integrity": "sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
"aria-query": "^4.2.2",
"chalk": "^3.0.0",
"css": "^3.0.0",
"css.escape": "^1.5.1",
"lodash": "^4.17.15",
"redent": "^3.0.0"
},
"dependencies": {
"chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
}
}
},
"@testing-library/preact": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@testing-library/preact/-/preact-2.0.1.tgz",
@@ -2147,6 +2175,15 @@
"integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
"dev": true
},
"@types/testing-library__jest-dom": {
"version": "5.9.5",
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
"dev": true,
"requires": {
"@types/jest": "*"
}
},
"@types/uglify-js": {
"version": "3.11.1",
"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.1.tgz",
@@ -4211,6 +4248,29 @@
"which": "^2.0.1"
}
},
"css": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
"dev": true,
"requires": {
"inherits": "^2.0.4",
"source-map": "^0.6.1",
"source-map-resolve": "^0.6.0"
},
"dependencies": {
"source-map-resolve": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
"dev": true,
"requires": {
"atob": "^2.1.2",
"decode-uri-component": "^0.2.0"
}
}
}
},
"css-blank-pseudo": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -4514,6 +4574,12 @@
"integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
"dev": true
},
"css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
"dev": true
},
"cssdb": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
frontend/package.json
+1
View File
@@ -49,6 +49,7 @@
"@prefresh/babel-plugin": "^0.4.0",
"@prefresh/webpack": "^3.0.1",
"@size-limit/file": "^4.9.2",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/preact": "^2.0.1",
"@types/classnames": "^2.2.11",
"@types/enzyme": "^3.10.8",