Skip to content
This repository was archived by the owner on Apr 15, 2024. It is now read-only.

Commit 78aae77

Browse files
whizkydeewhizkydee
committed
Re-write react-dropd tests
1 parent 19ad532 commit 78aae77

File tree

4 files changed

+92
-58
lines changed

4 files changed

+92
-58
lines changed

‎babel.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ module.exports = {
22
env: {
33
test: {
44
presets: ['@babel/env', '@babel/react'],
5-
plugins: ['babel-plugin-dynamic-import-node'],
5+
plugins: [
6+
'babel-plugin-dynamic-import-node',
7+
'@babel/plugin-transform-runtime',
8+
],
69
},
710
},
811
presets: [

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@babel/plugin-proposal-class-properties": "^7.4.0",
2727
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
2828
"@babel/plugin-transform-classes": "^7.4.3",
29+
"@babel/plugin-transform-runtime": "^7.4.4",
2930
"@babel/preset-env": "^7.4.3",
3031
"@babel/preset-react": "^7.0.0",
3132
"babel-eslint": "^10.0.1",

‎packages/react-dropd/__tests__/index.js

+70-57
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,116 @@
11
import Dropd from '../dist/index.cjs'
22
import React, { Fragment } from 'react'
3-
import { CLASSES, wait } from '../../helpers'
3+
import { CLASSES } from '../../helpers'
44
import { render, fireEvent, cleanup } from 'react-testing-library'
55

6-
const list = ['January', 'February', 'March', 'April']
6+
const monthList = ['January', 'February', 'March', 'April', 'May', 'June']
7+
8+
const mockDropd = props => {
9+
const { container, baseElement, getByTestId } = render(
10+
<Fragment>
11+
<input type="search" data-testid="input-mock" />
12+
<Dropd list={monthList} {...props} />
13+
</Fragment>
14+
)
15+
16+
const dropdElem = container.querySelector(CLASSES.container)
17+
const [list, button, placeholder, currentItem] = [
18+
'list',
19+
'button',
20+
'placeholder',
21+
'currentItem',
22+
].map(c => dropdElem.querySelector(CLASSES[c]))
23+
24+
const inputMock = getByTestId('input-mock')
25+
const items = dropdElem.querySelectorAll(CLASSES.item)
26+
27+
return {
28+
list,
29+
items,
30+
button,
31+
container,
32+
dropdElem,
33+
inputMock,
34+
placeholder,
35+
baseElement,
36+
currentItem,
37+
}
38+
}
739

840
describe('Dropd', () => {
941
afterEach(cleanup)
1042

1143
test('should not be open on mount', () => {
12-
const { container } = render(<Dropd list={list} />)
13-
14-
expect(
15-
container.querySelector(CLASSES.list).classList.contains('open')
16-
).toBeFalsy()
44+
expect(mockDropd().list.classList.contains('open')).toBeFalsy()
1745
})
1846

1947
test('should contain the default placeholder', () => {
20-
const { container } = render(<Dropd list={list} />)
21-
22-
expect(container.querySelector(CLASSES.placeholder)).toBeTruthy()
48+
expect(mockDropd().placeholder).toBeTruthy()
2349
})
2450

2551
test('should render equal list items as the length of the list props', () => {
26-
const { container } = render(<Dropd list={list} />)
27-
28-
expect(container.querySelectorAll(CLASSES.item).length).toEqual(list.length)
52+
expect(mockDropd().items.length).toEqual(monthList.length)
2953
})
3054

3155
test('`currentItem` in state should be set to `value` prop on initial render', () => {
32-
const { container } = render(<Dropd list={list} value={list[0]} />)
33-
34-
expect(container.querySelector(CLASSES.currentItem).textContent).toEqual(
35-
list[0]
56+
expect(mockDropd({ value: monthList[0] }).currentItem.textContent).toEqual(
57+
monthList[0]
3658
)
3759
})
3860

3961
test('should be open on mount when the `defaultOpen` prop is set to true', () => {
40-
const { container } = render(<Dropd list={list} defaultOpen={true} />)
41-
42-
expect(container.querySelector(CLASSES.container).dataset.open).toBe('true')
62+
expect(mockDropd({ defaultOpen: true }).dropdElem.dataset.open).toBe('true')
4363
})
4464

4565
test('should close on click away when `closeOnBlur` prop is set to true', () => {
46-
const { container, baseElement, getByTestId } = render(
47-
<Fragment>
48-
<input type="search" data-testid="input-mock" />
49-
<Dropd placeholder="Choose" list={list} closeOnBlur={true} />
50-
</Fragment>
51-
)
52-
const dropdContainer = container.querySelector(CLASSES.container)
53-
const dropdList = dropdContainer.querySelector(CLASSES.list)
54-
55-
fireEvent.mouseDown(dropdContainer.querySelector(CLASSES.button))
56-
fireEvent.focus(getByTestId('input-mock'))
57-
wait().then(() => {
58-
expect(document.activeElement).toBe(getByTestId('input-mock'))
59-
expect(dropdList.classList.contains('open')).toBeFalsy()
60-
})
66+
const { button, baseElement, list } = mockDropd({ closeOnBlur: true })
6167

62-
fireEvent.mouseDown(dropdContainer.querySelector(CLASSES.button))
68+
fireEvent.mouseDown(button)
6369
fireEvent.mouseDown(baseElement)
64-
expect(dropdList.classList.contains('open')).toBeFalsy()
70+
expect(list.classList.contains('open')).toBeFalsy()
6571
})
6672

67-
test('should not close on click away when `closeOnBlur` prop is set to false', () => {
68-
const { container, baseElement, getByTestId } = render(
69-
<Fragment>
70-
<input type="search" data-testid="input-mock" />
71-
<Dropd placeholder="Choose" list={list} closeOnBlur={false} />
72-
</Fragment>
73-
)
74-
const dropdContainer = container.querySelector(CLASSES.container)
75-
const dropdList = dropdContainer.querySelector(CLASSES.list)
76-
77-
fireEvent.mouseDown(dropdContainer.querySelector(CLASSES.button))
78-
fireEvent.focus(getByTestId('input-mock'))
79-
wait().then(() => {
80-
expect(document.activeElement).toBe(getByTestId('input-mock'))
81-
expect(dropdList.classList.contains('open')).toBeTruthy()
73+
test('should close on input mousedown when `closeOnBlur` prop is set to true', () => {
74+
const { button, inputMock, baseElement, list } = mockDropd({
75+
closeOnBlur: true,
8276
})
8377

78+
fireEvent.mouseDown(button)
79+
fireEvent.mouseDown(inputMock)
80+
expect(document.activeElement).toBe(baseElement)
81+
expect(list.classList.contains('open')).toBeFalsy()
82+
})
83+
84+
test('should not close on click away when `closeOnBlur` prop is set to false', () => {
85+
const { button, baseElement, list } = mockDropd({ closeOnBlur: false })
86+
87+
fireEvent.mouseDown(button)
8488
fireEvent.mouseDown(baseElement)
85-
expect(dropdList.classList.contains('open')).toBeTruthy()
89+
expect(list.classList.contains('open')).toBeTruthy()
90+
})
91+
92+
test('should not close on input mousedown when `closeOnBlur` prop is set to false', () => {
93+
const { button, baseElement, list, inputMock } = mockDropd({
94+
closeOnBlur: false,
95+
})
96+
97+
fireEvent.mouseDown(button)
98+
fireEvent.mouseDown(inputMock)
99+
expect(document.activeElement).toBe(baseElement)
100+
expect(list.classList.contains('open')).toBeTruthy()
86101
})
87102

88103
test('should call the `onOpen` function when it is passed', () => {
89104
const mockFn = jest.fn()
90-
const { container } = render(<Dropd list={list} onOpen={mockFn} />)
91105

92-
fireEvent.mouseDown(container.querySelector(CLASSES.button))
106+
fireEvent.mouseDown(mockDropd({ onOpen: mockFn }).button)
93107
expect(mockFn).toHaveBeenCalledTimes(1)
94108
})
95109

96110
test('should call the `onItemChange` function when it is passed', () => {
97111
const mockFn = jest.fn()
98-
const { container } = render(<Dropd list={list} onItemChange={mockFn} />)
99112

100-
fireEvent.mouseDown(container.querySelector(CLASSES.item))
113+
fireEvent.mouseDown(mockDropd({ onItemChange: mockFn }).items[0])
101114
expect(mockFn).toHaveBeenCalledTimes(1)
102115
})
103116
})

‎yarn.lock

+17
Original file line numberDiff line numberDiff line change
@@ -552,6 +552,16 @@
552552
dependencies:
553553
"@babel/helper-plugin-utils" "^7.0.0"
554554

555+
"@babel/plugin-transform-runtime@^7.4.4":
556+
version "7.4.4"
557+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.4.tgz#a50f5d16e9c3a4ac18a1a9f9803c107c380bce08"
558+
integrity sha512-aMVojEjPszvau3NRg+TIH14ynZLvPewH4xhlCW1w6A3rkxTS1m4uwzRclYR9oS+rl/dr+kT+pzbfHuAWP/lc7Q==
559+
dependencies:
560+
"@babel/helper-module-imports" "^7.0.0"
561+
"@babel/helper-plugin-utils" "^7.0.0"
562+
resolve "^1.8.1"
563+
semver "^5.5.1"
564+
555565
"@babel/plugin-transform-shorthand-properties@^7.2.0":
556566
version "7.2.0"
557567
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
@@ -7560,6 +7570,13 @@ resolve@^1.10.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
75607570
dependencies:
75617571
path-parse "^1.0.6"
75627572

7573+
resolve@^1.8.1:
7574+
version "1.10.1"
7575+
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.1.tgz#664842ac960795bbe758221cdccda61fb64b5f18"
7576+
integrity sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==
7577+
dependencies:
7578+
path-parse "^1.0.6"
7579+
75637580
restore-cursor@^2.0.0:
75647581
version "2.0.0"
75657582
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"

0 commit comments

Comments
 (0)