From 345ee8833377d4124cb375f33625dee54877e010 Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Thu, 4 Mar 2021 01:26:41 +0300 Subject: [PATCH] add testing-library/jest-dom, fix waitfor --- frontend/app/components/auth/auth.spec.tsx | 77 +++++++++++----------- frontend/package-lock.json | 66 +++++++++++++++++++ frontend/package.json | 1 + 3 files changed, 104 insertions(+), 40 deletions(-) diff --git a/frontend/app/components/auth/auth.spec.tsx b/frontend/app/components/auth/auth.spec.tsx index 6f34b568..d8e8051d 100644 --- a/frontend/app/components/auth/auth.spec.tsx +++ b/frontend/app/components/auth/auth.spec.tsx @@ -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('', () => { it('should render auth with hidden dropdown', () => { const { container } = render(); - expect(container.querySelector('.auth-dropdown')).toBeFalsy(); + expect(container.querySelector('.auth-dropdown')).not.toBeInTheDocument(); }); it('should close dropdown by click on button', () => { const { container } = render(); - 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(); - 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(); - 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('', () => { 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('', () => { const { container } = render(); 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('', () => { const { container } = render(); 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('', () => { const { container } = render(); 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('', () => { }); 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('', () => { 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('', () => { 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()); }); }); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f0efe9e5..99fbb183 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -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", diff --git a/frontend/package.json b/frontend/package.json index f2e9dbb1..20c17021 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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",