Skip to content
This repository was archived by the owner on Jan 22, 2019. It is now read-only.

Commit 819c1b3

Browse files
ijsnowijsnow
committed
chore: test ServerURLForm
1 parent 4128d35 commit 819c1b3

File tree

4 files changed

+222
-243
lines changed

4 files changed

+222
-243
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
"@sourcegraph/extensions-client-common": "^10.3.1",
121121
"@sourcegraph/react-loading-spinner": "0.0.6",
122122
"@sqs/jsonc-parser": "^1.0.3",
123+
"@types/sinon": "^5.0.5",
123124
"@types/uglifyjs-webpack-plugin": "1.1.0",
124125
"bootstrap": "^4.0.0",
125126
"cypress-browser-extension-plugin": "^0.1.0",
@@ -141,6 +142,7 @@
141142
"react-router-dom": "^4.3.1",
142143
"reactstrap": "^5.0.0-beta.2",
143144
"rxjs": "^6.3.2",
145+
"sinon": "^7.1.0",
144146
"socket.io-client": "^2.1.1",
145147
"sourcegraph": "^18.0.0",
146148
"string-score": "^1.0.1",

‎src/libs/options/ServerURLForm.test.tsx

Lines changed: 113 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,158 @@
1-
import * as chai from 'chai'
1+
import { assert, expect } from 'chai'
22
import { describe, it } from 'mocha'
33
import * as React from 'react'
44
import { cleanup, fireEvent, render } from 'react-testing-library'
5+
import { EMPTY, merge, of, Subject } from 'rxjs'
6+
import { switchMap, tap } from 'rxjs/operators'
57
import { TestScheduler } from 'rxjs/testing'
8+
import * as sinon from 'sinon'
69

7-
import { EMPTY, merge, of, Subject } from 'rxjs'
8-
import { map, switchMap, switchMapTo, tap } from 'rxjs/operators'
9-
import { ServerURLForm } from './ServerURLForm'
10+
import { ServerURLForm, ServerURLFormProps } from './ServerURLForm'
11+
12+
const noop = () => {
13+
/* noop */
14+
}
1015

1116
describe('ServerURLForm', () => {
1217
after(cleanup)
1318

14-
it('the onChange prop handler gets fired', () => {
15-
const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
19+
it('fires the onChange prop handler', () => {
20+
const onChange = sinon.spy()
21+
const onSubmit = sinon.spy()
22+
23+
const { container } = render(
24+
<ServerURLForm
25+
value={'https://sourcegraph.com'}
26+
status={'connected'}
27+
onChange={onChange}
28+
onSubmit={onSubmit}
29+
/>
30+
)
31+
32+
const urlInput = container.querySelector('input')!
33+
34+
fireEvent.change(urlInput, { target: { value: 'https://different.com' } })
35+
36+
assert.isTrue(onChange.calledOnce)
37+
assert.isTrue(onChange.calledWith('https://different.com'))
38+
39+
assert.isTrue(onSubmit.notCalled)
40+
})
41+
42+
it('updates the input value when the url changes', () => {
43+
const props: ServerURLFormProps = {
44+
value: 'https://sourcegraph.com',
45+
status: 'connected',
46+
onChange: noop,
47+
onSubmit: noop,
48+
}
49+
50+
const { container, rerender } = render(<ServerURLForm {...props} />)
51+
52+
const urlInput = container.querySelector('input')!
53+
54+
rerender(<ServerURLForm {...props} value={'https://different.com'} />)
55+
56+
const newValue = urlInput.value
57+
58+
expect(newValue).to.equal('https://different.com')
59+
})
60+
61+
it('fires the onSubmit prop handler when the form is submitted', () => {
62+
const onSubmit = sinon.spy()
63+
64+
const { container } = render(
65+
<ServerURLForm value={'https://sourcegraph.com'} status={'connected'} onChange={noop} onSubmit={onSubmit} />
66+
)
67+
68+
const form = container.querySelector('form')!
69+
70+
fireEvent.submit(form)
71+
72+
assert.isTrue(onSubmit.calledOnce)
73+
})
74+
75+
it('fires the onSubmit prop handler after 5s on inactivity after a change', () => {
76+
const scheduler = new TestScheduler((a, b) => assert.deepEqual(a, b))
1677

1778
scheduler.run(({ cold, expectObservable }) => {
79+
const submits = new Subject<void>()
80+
const nextSubmit = () => submits.next()
81+
82+
const { container } = render(
83+
<ServerURLForm
84+
value={'https://sourcegraph.com'}
85+
status={'connected'}
86+
onChange={noop}
87+
onSubmit={nextSubmit}
88+
/>
89+
)
90+
91+
const form = container.querySelector('input')!
92+
1893
const urls: { [key: string]: string } = {
1994
a: 'https://different.com',
2095
}
2196

22-
const urlChanges = cold('a', urls).pipe(
23-
map(url => {
24-
const changes = new Subject<string>()
25-
const nextChange = (value: string) => changes.next(value)
26-
27-
const submits = new Subject<void>()
28-
const nextSubmit = () => submits.next()
29-
30-
const { container } = render(
31-
<ServerURLForm
32-
value={'https://sourcegraph.com'}
33-
status={'connected'}
34-
onChange={nextChange}
35-
onSubmit={nextSubmit}
36-
/>
37-
)
38-
39-
const urlInput = container.querySelector('input')!
40-
41-
return { changes, submits, url, urlInput }
42-
}),
43-
switchMap(({ changes, url, urlInput }) => {
97+
const submitObs = cold('a', urls).pipe(
98+
switchMap(url => {
4499
const emit = of(undefined).pipe(
45100
tap(() => {
46-
fireEvent.change(urlInput, { target: { value: url } })
101+
fireEvent.change(form, { target: { value: url } })
47102
}),
48103
switchMap(() => EMPTY)
49104
)
50105

51-
return merge(changes, emit)
106+
return merge(submits, emit)
52107
})
53108
)
54109

55-
const values: { [key: string]: string } = {
56-
a: 'https://different.com',
57-
}
58-
59-
expectObservable(urlChanges).toBe('a', values)
110+
expectObservable(submitObs).toBe('5s a', { a: undefined })
60111
})
61112
})
62113

63-
it('captures the form submit event', () => {
64-
const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
114+
it("doesn't submit after 5 seconds if the form was submitted manually", () => {
115+
const scheduler = new TestScheduler((a, b) => assert.deepEqual(a, b))
65116

66117
scheduler.run(({ cold, expectObservable }) => {
67-
const urls: { [key: string]: string } = {
68-
a: 'https://different.com',
118+
const changes = new Subject<string>()
119+
const nextChange = () => changes.next()
120+
121+
const submits = new Subject<void>()
122+
const nextSubmit = () => submits.next()
123+
124+
const props: ServerURLFormProps = {
125+
value: 'https://sourcegraph.com',
126+
status: 'connected',
127+
onChange: nextChange,
128+
onSubmit: nextSubmit,
69129
}
70130

71-
const urlChanges = cold('a', urls).pipe(
72-
map(url => {
73-
const changes = new Subject<string>()
74-
const nextChange = (value: string) => changes.next(value)
75-
76-
const submits = new Subject<void>()
77-
const nextSubmit = () => submits.next()
78-
79-
const { container } = render(
80-
<ServerURLForm
81-
value={'https://sourcegraph.com'}
82-
status={'connected'}
83-
onChange={nextChange}
84-
onSubmit={nextSubmit}
85-
/>
86-
)
131+
const { container } = render(<ServerURLForm {...props} />)
132+
const form = container.querySelector('input')!
87133

88-
const urlInput = container.querySelector('input')!
134+
changes.subscribe(url => {
135+
fireEvent.submit(form)
136+
})
89137

90-
return { changes, submits, url, urlInput }
91-
}),
92-
switchMap(({ changes, url, urlInput }) => {
138+
const urls: { [key: string]: string } = {
139+
a: 'https://different.com',
140+
}
141+
142+
const submitObs = cold('a', urls).pipe(
143+
switchMap(url => {
93144
const emit = of(undefined).pipe(
94145
tap(() => {
95-
fireEvent.change(urlInput, { target: { value: url } })
146+
fireEvent.change(form, { target: { value: url } })
96147
}),
97148
switchMap(() => EMPTY)
98149
)
99150

100-
return merge(changes, emit)
151+
return merge(submits, emit)
101152
})
102153
)
103154

104-
const values: { [key: string]: string } = {
105-
a: 'https://different.com',
106-
}
107-
108-
expectObservable(urlChanges).toBe('a', values)
155+
expectObservable(submitObs).toBe('a', { a: undefined })
109156
})
110157
})
111-
112-
// it('submits after 5 seconds of inactivity after a change', () => {
113-
// const scheduler = new TestScheduler((a, b) => chai.assert.deepEqual(a, b))
114-
115-
// scheduler.run(({ cold, expectObservable }) => {
116-
// const urls: { [key: string]: string } = {
117-
// a: 'https://different.com',
118-
// }
119-
120-
// const inject = (nextChange: (value: string) => void, nextSubmit: () => void) => {
121-
// const { container, rerender } = render(
122-
// <ServerURLForm
123-
// value={'https://sourcegraph.com'}
124-
// status={'connected'}
125-
// onChange={nextChange}
126-
// onSubmit={nextSubmit}
127-
// />
128-
// )
129-
130-
// const rr = (value: string) =>
131-
// rerender(
132-
// <ServerURLForm value={value} status={'connected'} onChange={nextChange} onSubmit={nextSubmit} />
133-
// )
134-
135-
// return { rerender: rr, input: container.querySelector('input')! }
136-
// }
137-
138-
// const submits = cold('a', urls).pipe(
139-
// map(url => {
140-
// const changes = new Subject<string>()
141-
// const nextChange = (value: string) => changes.next(value)
142-
143-
// const submits = new Subject<void>()
144-
// const nextSubmit = () => submits.next()
145-
146-
// const { input, rerender } = inject(nextChange, nextSubmit)
147-
148-
// return { changes, submits, url, input, rerender }
149-
// }),
150-
// switchMap(({ changes, submits, url, input, rerender }) => {
151-
// // const emit = of(undefined).pipe(
152-
// // tap(() => {
153-
// // fireEvent.change(input, { target: { value: url } })
154-
// // }),
155-
// // switchMap(() => EMPTY)
156-
// // )
157-
158-
// const rerenders = changes.pipe(
159-
// tap(value => {
160-
// rerender(value)
161-
// }),
162-
// switchMapTo(EMPTY)
163-
// )
164-
165-
// return merge(submits, rerenders)
166-
// })
167-
// )
168-
169-
// expectObservable(submits).toBe('5s a')
170-
// })
171-
// })
172158
})

0 commit comments

Comments
 (0)