Skip to content

Update all packages + replace Enzyme with Testing Library #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 25, 2020
Merged

Update all packages + replace Enzyme with Testing Library #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3d93a3
Update all packages + replace Enzyme with Testing Library
WesCossick Nov 25, 2020
3c95744
Bump minor version
WesCossick Nov 25, 2020
d12d128
Merge branch 'master' into catch-up-to-speed
WesCossick Nov 25, 2020
32f8ec9
Refactor testing of up/down arrow keys to use `fireEvent()`
WesCossick Nov 25, 2020
55145f5
Format the code and fix ESLint complaints
WesCossick Nov 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ node_modules/
.DS_Store
yarn-debug.log*
yarn-error.log*
.eslintcache
20 changes: 10 additions & 10 deletions demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
"homepage": ".",
"dependencies": {
"@testing-library/jest-dom": "^5.0.0",
"@testing-library/react": "^10.0.0",
"@testing-library/user-event": "^10.0.0",
"@types/jest": "^25.1.0",
"@types/node": "^13.1.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"@types/jest": "^26.0.15",
"@types/node": "^14.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"prettier": "^2.0.2",
"react": "^16.12.0",
"react": "^17.0.1",
"react-accessible-dropdown-menu-hook": "link:..",
"react-dom": "^16.12.0",
"react-scripts": "3.4.1",
"typescript": "^3.8.3"
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "^4.1.2"
},
"scripts": {
"start": "react-scripts start",
Expand Down
2 changes: 1 addition & 1 deletion demo/src/app.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
import App from './app';

// Tests
it('renders', () => {
it('Renders', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
3 changes: 2 additions & 1 deletion demo/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
8,117 changes: 4,384 additions & 3,733 deletions demo/yarn.lock
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 12 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-accessible-dropdown-menu-hook",
"version": "2.1.2",
"version": "2.2.0",
"description": "A simple Hook for creating fully accessible dropdown menus in React",
"main": "dist/use-dropdown-menu.js",
"types": "dist/use-dropdown-menu.d.ts",
Expand Down Expand Up @@ -47,28 +47,27 @@
"@babel/preset-env": "^7.7.6",
"@babel/preset-react": "^7.7.4",
"@babel/preset-typescript": "^7.7.4",
"@types/enzyme": "^3.10.4",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"@types/jest": "^26.0.3",
"@types/jest-environment-puppeteer": "^4.3.1",
"@types/react": "^16.9.16",
"@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0",
"@types/react": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.8.2",
"@typescript-eslint/parser": "^4.8.2",
"babel-jest": "link:./demo/node_modules/babel-jest",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.7.2",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^4.0.0",
"jest": "link:./demo/node_modules/jest",
"jest-puppeteer": "^4.3.0",
"prettier": "^2.0.2",
"puppeteer": "^2.0.0",
"puppeteer": "^5.5.0",
"react": "link:./demo/node_modules/react",
"react-dom": "link:./demo/node_modules/react-dom",
"react-test-renderer": "^16.12.0",
"typescript": "^4.0.2"
"react-test-renderer": "^17.0.1",
"typescript": "^4.1.2"
},
"jest": {
"collectCoverage": true,
Expand All @@ -79,7 +78,7 @@
"verbose": true,
"projects": [
{
"displayName": "Enzyme",
"displayName": "Testing Library",
"setupFilesAfterEnv": [
"<rootDir>/test/setupTests.ts"
],
Expand Down
5 changes: 3 additions & 2 deletions src/use-dropdown-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface ButtonProps
}

// A custom Hook that abstracts away the listeners/controls for dropdown menus
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function useDropdownMenu(itemCount: number) {
// Use state
const [isOpen, setIsOpen] = useState<boolean>(false);
Expand All @@ -24,7 +25,7 @@ export default function useDropdownMenu(itemCount: number) {

// Initialize refs and update them when the item count changes
useEffect(() => {
itemRefs.current = [...Array(itemCount)].map(() => createRef<HTMLAnchorElement>());
itemRefs.current = [...Array<undefined>(itemCount)].map(() => createRef<HTMLAnchorElement>());
}, [itemCount]);

// Create type guard
Expand Down Expand Up @@ -187,7 +188,7 @@ export default function useDropdownMenu(itemCount: number) {
'aria-expanded': isOpen,
};

const itemProps = [...Array(itemCount)].map((ignore, index) => ({
const itemProps = [...Array<undefined>(itemCount)].map((_ignore, index) => ({
onKeyDown: itemListener,
tabIndex: -1,
role: 'menuitem',
Expand Down
20 changes: 10 additions & 10 deletions test/puppeteer/demo.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,18 @@ beforeEach(async () => {
});
});

it('has the correct page title', async () => {
it('Has the correct page title', async () => {
await expect(page.title()).resolves.toMatch('React Accessible Dropdown Menu Hook');
});

it('leaves focus on the button after clicking it', async () => {
it('Leaves focus on the button after clicking it', async () => {
await page.click('#menu-button');
await menuOpen();

expect(await currentFocusID()).toBe('menu-button');
});

it('focuses on the menu button after pressing escape', async () => {
it('Focuses on the menu button after pressing escape', async () => {
await page.focus('#menu-button');
await page.keyboard.down('Enter');
await menuOpen();
Expand All @@ -48,7 +48,7 @@ it('focuses on the menu button after pressing escape', async () => {
expect(await currentFocusID()).toBe('menu-button');
});

it('disables scroll by arrow key when menu is open', async () => {
it('Disables scroll by arrow key when menu is open', async () => {
await page.setViewport({
width: 1000,
height: 500,
Expand All @@ -63,7 +63,7 @@ it('disables scroll by arrow key when menu is open', async () => {
expect(await page.evaluate(() => window.scrollY)).toBe(currentScrollY);
});

it('does not disable scroll by arrow key when menu is closed', async () => {
it('Does not disable scroll by arrow key when menu is closed', async () => {
await page.setViewport({
width: 1000,
height: 500,
Expand All @@ -75,7 +75,7 @@ it('does not disable scroll by arrow key when menu is closed', async () => {
expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(currentScrollY);
});

it('focuses on the next item in the tab order after pressing tab', async () => {
it('Focuses on the next item in the tab order after pressing tab', async () => {
await page.focus('#menu-button');
await page.keyboard.down('Enter');
await menuOpen();
Expand All @@ -86,7 +86,7 @@ it('focuses on the next item in the tab order after pressing tab', async () => {
expect(await currentFocusID()).toBe('first-footer-link');
});

it('focuses on the previous item in the tab order after pressing shift-tab', async () => {
it('Focuses on the previous item in the tab order after pressing shift-tab', async () => {
await page.focus('#menu-button');
await page.keyboard.down('Enter');
await menuOpen();
Expand All @@ -98,7 +98,7 @@ it('focuses on the previous item in the tab order after pressing shift-tab', asy
expect(await currentFocusID()).toBe('menu-button');
});

it('closes the menu if you click outside of it', async () => {
it('Closes the menu if you click outside of it', async () => {
await page.focus('#menu-button');
await page.keyboard.down('Enter');
await menuOpen();
Expand All @@ -109,7 +109,7 @@ it('closes the menu if you click outside of it', async () => {
expect(true).toBe(true);
});

it('leaves the menu open if you click inside of it', async () => {
it('Leaves the menu open if you click inside of it', async () => {
await page.focus('#menu-button');
await page.keyboard.down('Enter');
await menuOpen();
Expand All @@ -135,7 +135,7 @@ it('leaves the menu open if you click inside of it', async () => {
expect(true).toBe(true);
});

it('reroutes enter presses on menu items as clicks', async () => {
it('Reroutes enter presses on menu items as clicks', async () => {
let alertAppeared = false;

await page.focus('#menu-button');
Expand Down
5 changes: 1 addition & 4 deletions test/setupTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
import '@testing-library/jest-dom';
2 changes: 1 addition & 1 deletion test/test-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const TestComponent: React.FC = () => {
Add Item
</button>

<span id='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
<span data-testid='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
</React.Fragment>
);
};
Expand Down
Loading