build OAuth mgmt page with React
This commit is contained in:
Pig Fang
parent
de64694002
commit
93f64b034f
14
resources/assets/src/components/ButtonEdit.tsx
Normal file
14
resources/assets/src/components/ButtonEdit.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react'
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
onClick: React.MouseEventHandler<HTMLAnchorElement>
|
||||
}
|
||||
|
||||
const ButtonEdit: React.FC<Props> = props => (
|
||||
<a href="#" title={props.title} className="ml-2" onClick={props.onClick}>
|
||||
<i className="fas fa-edit"></i>
|
||||
</a>
|
||||
)
|
||||
|
||||
export default ButtonEdit
|
||||
|
|
@ -36,7 +36,7 @@ export default [
|
|||
},
|
||||
{
|
||||
path: 'user/oauth/manage',
|
||||
component: () => import('../views/user/OAuth.vue'),
|
||||
react: () => import('../views/user/OAuth'),
|
||||
el: '.content > .container-fluid',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,207 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<button
|
||||
type="primary"
|
||||
class="btn-create-app btn btn-primary"
|
||||
data-toggle="modal"
|
||||
data-target="#modal-create"
|
||||
>
|
||||
{{ $t('user.oauth.create') }}
|
||||
</button>
|
||||
<vue-good-table
|
||||
:rows="clients"
|
||||
:columns="columns"
|
||||
:search-options="tableOptions.search"
|
||||
:pagination-options="tableOptions.pagination"
|
||||
style-class="vgt-table striped"
|
||||
>
|
||||
<template #table-row="props">
|
||||
<span v-if="props.column.field === 'name'">
|
||||
{{ props.formattedRow[props.column.field] }}
|
||||
<a
|
||||
:title="$t('user.oauth.modifyName')"
|
||||
href="#"
|
||||
data-test="name"
|
||||
@click="modifyName(props.row)"
|
||||
>
|
||||
<i class="fas fa-edit btn-edit" />
|
||||
</a>
|
||||
</span>
|
||||
<span v-else-if="props.column.field === 'redirect'">
|
||||
{{ props.formattedRow[props.column.field] }}
|
||||
<a
|
||||
:title="$t('user.oauth.modifyUrl')"
|
||||
href="#"
|
||||
data-test="callback"
|
||||
@click="modifyCallback(props.row)"
|
||||
>
|
||||
<i class="fas fa-edit btn-edit" />
|
||||
</a>
|
||||
</span>
|
||||
<span v-else-if="props.column.field === 'operations'">
|
||||
<button class="btn btn-danger" data-test="remove" @click="remove(props.row)">
|
||||
{{ $t('report.delete') }}
|
||||
</button>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ props.formattedRow[props.column.field] }}
|
||||
</span>
|
||||
</template>
|
||||
</vue-good-table>
|
||||
|
||||
<modal id="modal-create" :title="$t('user.oauth.create')" @confirm="create">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td v-t="'user.oauth.name'" class="key" />
|
||||
<td class="value">
|
||||
<input v-model="name" class="form-control" type="text">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td v-t="'user.oauth.redirect'" class="key" />
|
||||
<td class="value">
|
||||
<input v-model="callback" class="form-control" type="text">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueGoodTable } from 'vue-good-table'
|
||||
import 'vue-good-table/dist/vue-good-table.min.css'
|
||||
import Modal from '../../components/Modal.vue'
|
||||
import tableOptions from '../../components/mixins/tableOptions'
|
||||
import emitMounted from '../../components/mixins/emitMounted'
|
||||
import { walkFetch, init } from '../../scripts/net'
|
||||
import { showModal, toast } from '../../scripts/notify'
|
||||
|
||||
export default {
|
||||
name: 'OAuthApps',
|
||||
components: {
|
||||
Modal,
|
||||
VueGoodTable,
|
||||
},
|
||||
mixins: [
|
||||
emitMounted,
|
||||
tableOptions,
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
callback: '',
|
||||
clients: [],
|
||||
columns: [
|
||||
{
|
||||
field: 'id', label: this.$t('user.oauth.id'), type: 'number',
|
||||
},
|
||||
{ field: 'name', label: this.$t('user.oauth.name') },
|
||||
{
|
||||
field: 'secret',
|
||||
label: this.$t('user.oauth.secret'),
|
||||
sortable: false,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
{
|
||||
field: 'redirect',
|
||||
label: this.$t('user.oauth.redirect'),
|
||||
sortable: false,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
{
|
||||
field: 'operations',
|
||||
label: this.$t('admin.operationsTitle'),
|
||||
sortable: false,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
this.clients = await this.$http.get('/oauth/clients')
|
||||
},
|
||||
async create() {
|
||||
const client = await this.$http.post('/oauth/clients', {
|
||||
name: this.name,
|
||||
redirect: this.callback,
|
||||
})
|
||||
if (client.id) {
|
||||
this.clients.unshift(client)
|
||||
} else {
|
||||
toast.error(client.message)
|
||||
}
|
||||
},
|
||||
async modifyName(client) {
|
||||
let name
|
||||
try {
|
||||
({ value: name } = await showModal({
|
||||
mode: 'prompt',
|
||||
title: this.$t('user.oauth.name'),
|
||||
input: client.name,
|
||||
}))
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await this.modify(client, { name })
|
||||
},
|
||||
async modifyCallback(client) {
|
||||
let redirect
|
||||
try {
|
||||
({ value: redirect } = await showModal({
|
||||
mode: 'prompt',
|
||||
title: this.$t('user.oauth.redirect'),
|
||||
input: client.redirect,
|
||||
}))
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await this.modify(client, { redirect })
|
||||
},
|
||||
async modify(client, modified) {
|
||||
const request = new Request(
|
||||
`/oauth/clients/${client.id}`,
|
||||
Object.assign({}, init, {
|
||||
body: JSON.stringify(Object.assign({ name: client.name, redirect: client.redirect }, modified)),
|
||||
method: 'PUT',
|
||||
}),
|
||||
)
|
||||
request.headers.set('Content-Type', 'application/json')
|
||||
const result = await walkFetch(request)
|
||||
if (result.id) {
|
||||
Object.assign(client, modified)
|
||||
} else {
|
||||
toast.error(result.message)
|
||||
}
|
||||
},
|
||||
async remove(client) {
|
||||
try {
|
||||
await showModal({
|
||||
text: this.$t('user.oauth.confirmRemove'),
|
||||
okButtonType: 'danger',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
const request = new Request(
|
||||
`/oauth/clients/${client.id}`,
|
||||
Object.assign({}, init, { method: 'DELETE' }),
|
||||
)
|
||||
await walkFetch(request)
|
||||
this.$delete(this.clients, this.clients.findIndex(({ id }) => id === client.id))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.btn-create-app
|
||||
margin-bottom 5px
|
||||
margin-right 10px
|
||||
</style>
|
||||
70
resources/assets/src/views/user/OAuth/ModalCreate.tsx
Normal file
70
resources/assets/src/views/user/OAuth/ModalCreate.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React, { useState } from 'react'
|
||||
import Modal from '../../../components/Modal'
|
||||
import { trans } from '../../../scripts/i18n'
|
||||
|
||||
interface Props {
|
||||
onCreate(name: string, redirect: string): Promise<void>
|
||||
}
|
||||
|
||||
const ModalCreate: React.FC<Props> = props => {
|
||||
const [name, setName] = useState('')
|
||||
const [url, setUrl] = useState('')
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(event.target.value)
|
||||
}
|
||||
|
||||
const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUrl(event.target.value)
|
||||
}
|
||||
|
||||
const handleComplete = () => {
|
||||
props.onCreate(name, url)
|
||||
}
|
||||
|
||||
const handleDismiss = () => {
|
||||
setName('')
|
||||
setUrl('')
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
id="modal-create"
|
||||
onConfirm={handleComplete}
|
||||
onDismiss={handleDismiss}
|
||||
>
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="key">{trans('user.oauth.name')}</td>
|
||||
<td className="value">
|
||||
<input
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
className="form-control"
|
||||
placeholder={trans('user.oauth.name')}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="key">{trans('user.oauth.redirect')}</td>
|
||||
<td className="value">
|
||||
<input
|
||||
value={url}
|
||||
onChange={handleUrlChange}
|
||||
className="form-control"
|
||||
placeholder={trans('user.oauth.redirect')}
|
||||
type="url"
|
||||
required
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalCreate
|
||||
43
resources/assets/src/views/user/OAuth/Row.tsx
Normal file
43
resources/assets/src/views/user/OAuth/Row.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react'
|
||||
import { trans } from '../../../scripts/i18n'
|
||||
import ButtonEdit from '../../../components/ButtonEdit'
|
||||
import { App } from './types'
|
||||
|
||||
interface Props {
|
||||
app: App
|
||||
onEditName: React.MouseEventHandler<HTMLAnchorElement>
|
||||
onEditRedirect: React.MouseEventHandler<HTMLAnchorElement>
|
||||
onDelete: React.MouseEventHandler<HTMLButtonElement>
|
||||
}
|
||||
|
||||
const Row: React.FC<Props> = props => {
|
||||
const { app } = props
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>{app.id}</td>
|
||||
<td>
|
||||
<span>{app.name}</span>
|
||||
<ButtonEdit
|
||||
title={trans('user.oauth.modifyName')}
|
||||
onClick={props.onEditName}
|
||||
/>
|
||||
</td>
|
||||
<td>{app.secret}</td>
|
||||
<td>
|
||||
<span>{app.redirect}</span>
|
||||
<ButtonEdit
|
||||
title={trans('user.oauth.modifyUrl')}
|
||||
onClick={props.onEditRedirect}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<button className="btn btn-danger" onClick={props.onDelete}>
|
||||
{trans('report.delete')}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
export default Row
|
||||
155
resources/assets/src/views/user/OAuth/index.tsx
Normal file
155
resources/assets/src/views/user/OAuth/index.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { hot } from 'react-hot-loader/root'
|
||||
import { trans } from '../../../scripts/i18n'
|
||||
import * as fetch from '../../../scripts/net'
|
||||
import { showModal, toast } from '../../../scripts/notify'
|
||||
import Loading from '../../../components/Loading'
|
||||
import Row from './Row'
|
||||
import ModalCreate from './ModalCreate'
|
||||
import { App } from './types'
|
||||
|
||||
type Exception = {
|
||||
message: string
|
||||
}
|
||||
|
||||
const OAuth: React.FC = () => {
|
||||
const [apps, setApps] = useState<App[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const getApps = async () => {
|
||||
setIsLoading(true)
|
||||
const allApps = await fetch.get<App[]>('/oauth/clients')
|
||||
setApps(allApps)
|
||||
setIsLoading(false)
|
||||
}
|
||||
getApps()
|
||||
}, [])
|
||||
|
||||
const handleAdd = async (name: string, redirect: string) => {
|
||||
const result = await fetch.post<App | Exception>('/oauth/clients', {
|
||||
name,
|
||||
redirect,
|
||||
})
|
||||
if ('id' in result) {
|
||||
setApps(apps => [...apps, result])
|
||||
} else {
|
||||
toast.error(result.message)
|
||||
}
|
||||
}
|
||||
|
||||
const editName = async (app: App, index: number) => {
|
||||
let name: string
|
||||
try {
|
||||
;({ value: name } = await showModal({
|
||||
mode: 'prompt',
|
||||
title: trans('user.oauth.name'),
|
||||
input: app.name,
|
||||
}))
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
const result = await fetch.put<App | Exception>(
|
||||
`/oauth/clients/${app.id}`,
|
||||
{ ...app, name },
|
||||
)
|
||||
if ('id' in result) {
|
||||
setApps(apps => {
|
||||
apps[index].name = name
|
||||
return apps.slice()
|
||||
})
|
||||
} else {
|
||||
toast.error(result.message)
|
||||
}
|
||||
}
|
||||
|
||||
const editRedirect = async (app: App, index: number) => {
|
||||
let redirect: string
|
||||
try {
|
||||
;({ value: redirect } = await showModal({
|
||||
mode: 'prompt',
|
||||
title: trans('user.oauth.redirect'),
|
||||
input: app.redirect,
|
||||
}))
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
const result = await fetch.put<App | Exception>(
|
||||
`/oauth/clients/${app.id}`,
|
||||
{ ...app, redirect },
|
||||
)
|
||||
if ('id' in result) {
|
||||
setApps(apps => {
|
||||
apps[index].redirect = redirect
|
||||
return apps.slice()
|
||||
})
|
||||
} else {
|
||||
toast.error(result.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (app: App) => {
|
||||
try {
|
||||
await showModal({
|
||||
text: trans('user.oauth.confirmRemove'),
|
||||
okButtonType: 'danger',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
await fetch.del(`/oauth/clients/${app.id}`)
|
||||
setApps(apps => apps.filter(a => a.id !== app.id))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
data-toggle="modal"
|
||||
data-target="#modal-create"
|
||||
>
|
||||
{trans('user.oauth.create')}
|
||||
</button>
|
||||
<div className="card mt-2">
|
||||
<div className="card-body p-0">
|
||||
<table className="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{trans('user.oauth.id')}</th>
|
||||
<th>{trans('user.oauth.name')}</th>
|
||||
<th>{trans('user.oauth.secret')}</th>
|
||||
<th>{trans('user.oauth.redirect')}</th>
|
||||
<th>{trans('admin.operationsTitle')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{apps.length === 0 ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan={5}>
|
||||
{isLoading ? <Loading /> : 'Nothing here.'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
apps.map((app, i) => (
|
||||
<Row
|
||||
key={app.id}
|
||||
app={app}
|
||||
onEditName={() => editName(app, i)}
|
||||
onEditRedirect={() => editRedirect(app, i)}
|
||||
onDelete={() => handleDelete(app)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<ModalCreate onCreate={handleAdd} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default hot(OAuth)
|
||||
6
resources/assets/src/views/user/OAuth/types.ts
Normal file
6
resources/assets/src/views/user/OAuth/types.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type App = {
|
||||
id: number
|
||||
name: string
|
||||
secret: string
|
||||
redirect: string
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { flushPromises } from '../../utils'
|
||||
import { walkFetch } from '@/scripts/net'
|
||||
import { showModal, toast } from '@/scripts/notify'
|
||||
import Modal from '@/components/Modal.vue'
|
||||
import OAuth from '@/views/user/OAuth.vue'
|
||||
|
||||
jest.mock('@/scripts/notify')
|
||||
|
||||
jest.mock('@/scripts/net', () => ({
|
||||
walkFetch: jest.fn(),
|
||||
init: {},
|
||||
}))
|
||||
|
||||
test('basic render', async () => {
|
||||
Vue.prototype.$http.get.mockResolvedValue([
|
||||
{ id: 1 },
|
||||
])
|
||||
const wrapper = mount(OAuth)
|
||||
await flushPromises()
|
||||
expect(wrapper.findAll('[data-test=remove]')).toHaveLength(1)
|
||||
})
|
||||
|
||||
test('create app', async () => {
|
||||
Vue.prototype.$http.get.mockResolvedValue([])
|
||||
Vue.prototype.$http.post
|
||||
.mockResolvedValueOnce({ message: 'fail' })
|
||||
.mockResolvedValueOnce({ id: 1, name: 'name' })
|
||||
const wrapper = mount(OAuth)
|
||||
await flushPromises()
|
||||
|
||||
const modal = wrapper.find(Modal)
|
||||
const inputs = wrapper.findAll('.value')
|
||||
inputs.at(0).find('input')
|
||||
.setValue('name')
|
||||
inputs.at(1).find('input')
|
||||
.setValue('https://example.com/')
|
||||
|
||||
modal.vm.$emit('confirm')
|
||||
await flushPromises()
|
||||
expect(Vue.prototype.$http.post).toBeCalledWith(
|
||||
'/oauth/clients',
|
||||
{ name: 'name', redirect: 'https://example.com/' },
|
||||
)
|
||||
expect(toast.error).toBeCalledWith('fail')
|
||||
|
||||
modal.vm.$emit('confirm')
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('name')
|
||||
})
|
||||
|
||||
test('modify name', async () => {
|
||||
Vue.prototype.$http.get.mockResolvedValue([
|
||||
{ id: 1, name: 'old' },
|
||||
])
|
||||
walkFetch
|
||||
.mockResolvedValueOnce({ message: 'fail' })
|
||||
.mockResolvedValueOnce({ id: 1, name: 'new-name' })
|
||||
showModal
|
||||
.mockRejectedValueOnce(null)
|
||||
.mockResolvedValue({ value: 'new-name' })
|
||||
const wrapper = mount(OAuth)
|
||||
await flushPromises()
|
||||
const button = wrapper.find('[data-test=name]')
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(walkFetch).not.toBeCalled()
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(walkFetch).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
url: '/oauth/clients/1',
|
||||
body: JSON.stringify({ name: 'new-name' }),
|
||||
method: 'PUT',
|
||||
}),
|
||||
)
|
||||
expect(toast.error).toBeCalledWith('fail')
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('new-name')
|
||||
})
|
||||
|
||||
test('modify redirect', async () => {
|
||||
Vue.prototype.$http.get.mockResolvedValue([
|
||||
{ id: 1, redirect: 'https://example.com/' },
|
||||
])
|
||||
walkFetch
|
||||
.mockResolvedValueOnce({ message: 'fail' })
|
||||
.mockResolvedValueOnce({ id: 1, redirect: 'https://example.net/' })
|
||||
showModal
|
||||
.mockRejectedValueOnce(null)
|
||||
.mockResolvedValue({ value: 'https://example.net/' })
|
||||
const wrapper = mount(OAuth)
|
||||
await flushPromises()
|
||||
const button = wrapper.find('[data-test=callback]')
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(walkFetch).not.toBeCalled()
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(walkFetch).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
url: '/oauth/clients/1',
|
||||
body: JSON.stringify({ redirect: 'https://example.net/' }),
|
||||
method: 'PUT',
|
||||
}),
|
||||
)
|
||||
expect(toast.error).toBeCalledWith('fail')
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('https://example.net/')
|
||||
})
|
||||
|
||||
test('remove app', async () => {
|
||||
Vue.prototype.$http.get.mockResolvedValue([
|
||||
{ id: 1, name: 'name' },
|
||||
])
|
||||
showModal
|
||||
.mockRejectedValueOnce(null)
|
||||
.mockResolvedValue({ value: '' })
|
||||
|
||||
const wrapper = mount(OAuth)
|
||||
await flushPromises()
|
||||
const button = wrapper.find('[data-test=remove]')
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(walkFetch).not.toBeCalled()
|
||||
|
||||
button.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('No data')
|
||||
})
|
||||
238
resources/assets/tests/views/user/OAuth.test.tsx
Normal file
238
resources/assets/tests/views/user/OAuth.test.tsx
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
import React from 'react'
|
||||
import { render, fireEvent, wait } from '@testing-library/react'
|
||||
import * as fetch from '@/scripts/net'
|
||||
import { trans } from '@/scripts/i18n'
|
||||
import { toast, showModal } from '@/scripts/notify'
|
||||
import OAuth from '@/views/user/OAuth'
|
||||
import { App } from '@/views/user/OAuth/types'
|
||||
|
||||
jest.mock('@/scripts/net')
|
||||
jest.mock('@/scripts/notify')
|
||||
|
||||
const example: App = {
|
||||
id: 1,
|
||||
name: 'My App',
|
||||
redirect: 'http://url.test/',
|
||||
secret: 'abc',
|
||||
}
|
||||
|
||||
test('loading data', () => {
|
||||
fetch.get.mockResolvedValue([])
|
||||
const { queryByTitle } = render(<OAuth />)
|
||||
expect(queryByTitle('Loading...')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
describe('create app', () => {
|
||||
beforeEach(() => {
|
||||
fetch.get.mockResolvedValue([])
|
||||
})
|
||||
|
||||
it('succeeded', async () => {
|
||||
fetch.post.mockResolvedValue(example)
|
||||
const { getByPlaceholderText, getByText, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByText(trans('user.oauth.create')))
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.name')), {
|
||||
target: { value: 'My App' },
|
||||
})
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.redirect')), {
|
||||
target: { value: 'http://url.test/' },
|
||||
})
|
||||
fireEvent.click(getByText(trans('general.confirm')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.post).toBeCalledWith('/oauth/clients', {
|
||||
name: 'My App',
|
||||
redirect: 'http://url.test/',
|
||||
})
|
||||
expect(queryByText(example.id.toString())).toBeInTheDocument()
|
||||
expect(queryByText(example.name)).toBeInTheDocument()
|
||||
expect(queryByText(example.redirect)).toBeInTheDocument()
|
||||
expect(queryByText(example.secret)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('failed', async () => {
|
||||
fetch.post.mockResolvedValue({ message: 'exception' })
|
||||
const { getByPlaceholderText, getByText, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByText(trans('user.oauth.create')))
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.name')), {
|
||||
target: { value: 'My App' },
|
||||
})
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.redirect')), {
|
||||
target: { value: 'http://url.test/' },
|
||||
})
|
||||
fireEvent.click(getByText(trans('general.confirm')))
|
||||
|
||||
await wait()
|
||||
expect(fetch.post).toBeCalledWith('/oauth/clients', {
|
||||
name: 'My App',
|
||||
redirect: 'http://url.test/',
|
||||
})
|
||||
expect(toast.error).toBeCalledWith('exception')
|
||||
expect(queryByText(example.name)).not.toBeInTheDocument()
|
||||
expect(queryByText(example.redirect)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('cancel dialog', async () => {
|
||||
const { getByPlaceholderText, getByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByText(trans('user.oauth.create')))
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.name')), {
|
||||
target: { value: 'My App' },
|
||||
})
|
||||
fireEvent.input(getByPlaceholderText(trans('user.oauth.redirect')), {
|
||||
target: { value: 'http://url.test/' },
|
||||
})
|
||||
fireEvent.click(getByText(trans('general.cancel')))
|
||||
|
||||
await wait()
|
||||
expect(fetch.post).not.toBeCalled()
|
||||
|
||||
fireEvent.click(getByText(trans('user.oauth.create')))
|
||||
expect(getByPlaceholderText(trans('user.oauth.name'))).toHaveValue('')
|
||||
expect(getByPlaceholderText(trans('user.oauth.redirect'))).toHaveValue('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('edit app', () => {
|
||||
beforeEach(() => {
|
||||
fetch.get.mockResolvedValue([example])
|
||||
})
|
||||
|
||||
describe('edit name', () => {
|
||||
it('succeeded', async () => {
|
||||
fetch.put.mockResolvedValue({ ...example, name: 'new name' })
|
||||
showModal.mockResolvedValue({ value: 'new name' })
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyName')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).toBeCalledWith(`/oauth/clients/${example.id}`, {
|
||||
...example,
|
||||
name: 'new name',
|
||||
})
|
||||
expect(queryByText('new name')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('failed', async () => {
|
||||
fetch.put.mockResolvedValue({ message: 'exception' })
|
||||
showModal.mockResolvedValue({ value: 'new name' })
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyName')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).toBeCalledWith(`/oauth/clients/${example.id}`, {
|
||||
...example,
|
||||
name: 'new name',
|
||||
})
|
||||
expect(queryByText(example.name)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('cancel dialog', async () => {
|
||||
showModal.mockRejectedValue(null)
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyName')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).not.toBeCalled()
|
||||
expect(queryByText(example.name)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('edit redirect url', () => {
|
||||
it('succeeded', async () => {
|
||||
fetch.put.mockResolvedValue({ ...example, redirect: 'http://new.test/' })
|
||||
showModal.mockResolvedValue({ value: 'http://new.test/' })
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyUrl')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).toBeCalledWith(`/oauth/clients/${example.id}`, {
|
||||
...example,
|
||||
redirect: 'http://new.test/',
|
||||
})
|
||||
expect(queryByText('http://new.test/')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('failed', async () => {
|
||||
fetch.put.mockResolvedValue({ message: 'exception' })
|
||||
showModal.mockResolvedValue({ value: 'http://new.test/' })
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyUrl')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).toBeCalledWith(`/oauth/clients/${example.id}`, {
|
||||
...example,
|
||||
redirect: 'http://new.test/',
|
||||
})
|
||||
expect(toast.error).toBeCalledWith('exception')
|
||||
expect(queryByText(example.redirect)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('cancel dialog', async () => {
|
||||
showModal.mockRejectedValue(null)
|
||||
|
||||
const { getByTitle, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByTitle(trans('user.oauth.modifyUrl')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.put).not.toBeCalled()
|
||||
expect(queryByText(example.redirect)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('delete app', () => {
|
||||
beforeEach(() => {
|
||||
fetch.get.mockResolvedValue([example])
|
||||
})
|
||||
|
||||
it('succeeded', async () => {
|
||||
showModal.mockResolvedValue({ value: '' })
|
||||
|
||||
const { getByText, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByText(trans('report.delete')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.del).toBeCalledWith(`/oauth/clients/${example.id}`)
|
||||
expect(queryByText(example.name)).not.toBeInTheDocument()
|
||||
expect(queryByText(example.redirect)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('cancel dialog', async () => {
|
||||
showModal.mockRejectedValue(null)
|
||||
|
||||
const { getByText, queryByText } = render(<OAuth />)
|
||||
await wait()
|
||||
|
||||
fireEvent.click(getByText(trans('report.delete')))
|
||||
await wait()
|
||||
|
||||
expect(fetch.post).not.toBeCalled()
|
||||
expect(queryByText(example.name)).toBeInTheDocument()
|
||||
expect(queryByText(example.redirect)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user