mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
remove user table
This commit is contained in:
Moriz Wahl
parent
ea6bab0823
commit
c6a469e08f
@ -1,343 +0,0 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import UserTable from './UserTable.vue'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
const apolloQueryMock = jest.fn()
|
||||
apolloQueryMock.mockResolvedValue()
|
||||
|
||||
describe('UserTable', () => {
|
||||
let wrapper
|
||||
|
||||
const defaultItemsUser = [
|
||||
{
|
||||
userId: 1,
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
email: 'bibi@bloxberg.de',
|
||||
creation: [200, 400, 600],
|
||||
emailChecked: true,
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
firstName: 'Benjamin',
|
||||
lastName: 'Blümchen',
|
||||
email: 'benjamin@bluemchen.de',
|
||||
creation: [1000, 1000, 1000],
|
||||
emailChecked: true,
|
||||
},
|
||||
{
|
||||
userId: 3,
|
||||
firstName: 'Peter',
|
||||
lastName: 'Lustig',
|
||||
email: 'peter@lustig.de',
|
||||
creation: [0, 0, 0],
|
||||
emailChecked: true,
|
||||
},
|
||||
{
|
||||
userId: 4,
|
||||
firstName: 'New',
|
||||
lastName: 'User',
|
||||
email: 'new@user.ch',
|
||||
creation: [1000, 1000, 1000],
|
||||
emailChecked: false,
|
||||
},
|
||||
]
|
||||
|
||||
const confirmationItemsUser = [
|
||||
{
|
||||
email: 'bibi@bloxberg.de',
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
amount: 10,
|
||||
memo: 'Test 1',
|
||||
date: '11-09-2001',
|
||||
moderator: 1,
|
||||
},
|
||||
{
|
||||
email: 'bibi@bloxberg.de',
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
amount: 10,
|
||||
memo: 'Test 2',
|
||||
date: '21-09-2001',
|
||||
moderator: 1,
|
||||
},
|
||||
{
|
||||
email: 'bibi@bloxberg.de',
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
amount: 10,
|
||||
memo: 'Test 3',
|
||||
date: '30-09-2001',
|
||||
moderator: 1,
|
||||
},
|
||||
]
|
||||
|
||||
const propsDataPageUserSearch = {
|
||||
type: 'PageUserSearch',
|
||||
itemsUser: defaultItemsUser,
|
||||
fieldsTable: [
|
||||
'email',
|
||||
'firstName',
|
||||
'lastName',
|
||||
'creation',
|
||||
'show_details',
|
||||
'confirm_mail',
|
||||
'transactions_list',
|
||||
],
|
||||
}
|
||||
|
||||
const propsDataUserListSearch = {
|
||||
type: 'UserListSearch',
|
||||
itemsUser: defaultItemsUser,
|
||||
fieldsTable: ['bookmark', 'email', 'firstName', 'lastName', 'creation'],
|
||||
creation: [1000, 1000, 1000],
|
||||
}
|
||||
|
||||
const propsDataUserListMassCreation = {
|
||||
type: 'UserListMassCreation',
|
||||
itemsUser: defaultItemsUser,
|
||||
fieldsTable: ['email', 'firstName', 'lastName', 'creation', 'bookmark'],
|
||||
creation: [1000, 1000, 1000],
|
||||
}
|
||||
|
||||
const propsDataPageCreationConfirm = {
|
||||
type: 'PageCreationConfirm',
|
||||
itemsUser: confirmationItemsUser,
|
||||
fieldsTable: [
|
||||
'bookmark',
|
||||
'email',
|
||||
'firstName',
|
||||
'lastName',
|
||||
'amount',
|
||||
'memo',
|
||||
'date',
|
||||
'moderator',
|
||||
'edit_creation',
|
||||
'confirm',
|
||||
],
|
||||
}
|
||||
|
||||
const mocks = {
|
||||
$t: jest.fn((t) => t),
|
||||
$d: jest.fn((d) => String(d)),
|
||||
$apollo: {
|
||||
query: apolloQueryMock,
|
||||
},
|
||||
$store: {
|
||||
commit: jest.fn(),
|
||||
},
|
||||
}
|
||||
|
||||
const Wrapper = (propsData) => {
|
||||
return mount(UserTable, { localVue, propsData, mocks })
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
describe('type PageUserSearch', () => {
|
||||
beforeEach(async () => {
|
||||
wrapper = Wrapper(propsDataPageUserSearch)
|
||||
})
|
||||
|
||||
it('has a DIV element with the class.component-user-table', () => {
|
||||
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has a DIV element with the id overlay that is not displayed', () => {
|
||||
expect(wrapper.find('#overlay').exists()).toBeTruthy()
|
||||
expect(wrapper.find('#overlay').attributes('style')).toBe('display: none;')
|
||||
})
|
||||
|
||||
describe('table', () => {
|
||||
it('has a table', () => {
|
||||
expect(wrapper.find('table').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
describe('header definition', () => {
|
||||
it('has 4 column', () => {
|
||||
expect(wrapper.findAll('th').length).toBe(7)
|
||||
})
|
||||
|
||||
it('has Email as first column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="1"] div').text()).toBe('Email')
|
||||
})
|
||||
|
||||
it('has First Name as second column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="2"] div').text()).toBe('First Name')
|
||||
})
|
||||
|
||||
it('has Last Name as third column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="3"] div').text()).toBe('Last Name')
|
||||
})
|
||||
|
||||
it('has Creation as fourth column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="4"] div').text()).toBe('Creation')
|
||||
})
|
||||
|
||||
it('has Creation as fifth column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="5"] div').text()).toBe('Show Details')
|
||||
})
|
||||
|
||||
it('has Creation as sixth column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="6"] div').text()).toBe('Confirm Mail')
|
||||
})
|
||||
|
||||
it('has Creation as seventh column', () => {
|
||||
expect(wrapper.find('th[aria-colindex="7"] div').text()).toBe('Transactions List')
|
||||
})
|
||||
})
|
||||
|
||||
describe('content', () => {
|
||||
it('has 4 rows', () => {
|
||||
expect(wrapper.findAll('tbody tr')).toHaveLength(4)
|
||||
})
|
||||
|
||||
it('has 7 columns', () => {
|
||||
expect(wrapper.findAll('tr:nth-child(1) > td')).toHaveLength(7)
|
||||
})
|
||||
|
||||
it('find button on fifth column', () => {
|
||||
expect(
|
||||
wrapper.findAll('tr:nth-child(1) > td').at(5).find('button').isVisible(),
|
||||
).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('row toggling', () => {
|
||||
describe('user with email not activated', () => {
|
||||
it('has no details button', () => {
|
||||
expect(
|
||||
wrapper.findAll('tbody > tr').at(3).findAll('td').at(4).find('button').exists(),
|
||||
).toBeFalsy()
|
||||
})
|
||||
|
||||
it('has a red confirmed button with envelope item', () => {
|
||||
const row = wrapper.findAll('tbody > tr').at(3)
|
||||
expect(row.findAll('td').at(5).find('button').exists()).toBeTruthy()
|
||||
expect(row.findAll('td').at(5).find('button').classes('btn-danger')).toBeTruthy()
|
||||
expect(row.findAll('td').at(5).find('svg').classes('bi-envelope')).toBeTruthy()
|
||||
})
|
||||
|
||||
describe('click on envelope', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(3)
|
||||
.findAll('td')
|
||||
.at(5)
|
||||
.find('button')
|
||||
.trigger('click')
|
||||
})
|
||||
|
||||
it('opens the details', async () => {
|
||||
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
|
||||
expect(wrapper.findAll('tbody > tr').at(5).find('input').element.value).toBe(
|
||||
'new@user.ch',
|
||||
)
|
||||
expect(wrapper.findAll('tbody > tr').at(5).text()).toContain(
|
||||
'unregister_mail.text_false',
|
||||
)
|
||||
// HACK: for some reason we need to close the row details after this test
|
||||
await wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(3)
|
||||
.findAll('td')
|
||||
.at(5)
|
||||
.find('button')
|
||||
.trigger('click')
|
||||
})
|
||||
|
||||
describe('click on envelope again', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(3)
|
||||
.findAll('td')
|
||||
.at(5)
|
||||
.find('button')
|
||||
.trigger('click')
|
||||
})
|
||||
|
||||
it('closes the details', () => {
|
||||
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
|
||||
})
|
||||
})
|
||||
|
||||
describe('click on close details', () => {
|
||||
beforeEach(async () => {
|
||||
await wrapper.findAll('tbody > tr').at(5).findAll('button').at(1).trigger('click')
|
||||
})
|
||||
|
||||
it('closes the details', () => {
|
||||
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('different details', () => {
|
||||
it.skip('shows the creation formular for second user', async () => {
|
||||
await wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(1)
|
||||
.findAll('td')
|
||||
.at(4)
|
||||
.find('button')
|
||||
.trigger('click')
|
||||
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
|
||||
expect(
|
||||
wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(3)
|
||||
.find('div.component-creation-formular')
|
||||
.exists(),
|
||||
).toBeTruthy()
|
||||
})
|
||||
|
||||
it.skip('shows the transactions for third user', async () => {
|
||||
await wrapper
|
||||
.findAll('tbody > tr')
|
||||
.at(4)
|
||||
.findAll('td')
|
||||
.at(6)
|
||||
.find('button')
|
||||
.trigger('click')
|
||||
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('type UserListSearch', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper(propsDataUserListSearch)
|
||||
})
|
||||
|
||||
it('has a DIV element with the class.component-user-table', () => {
|
||||
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('type UserListMassCreation', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper(propsDataUserListMassCreation)
|
||||
})
|
||||
|
||||
it('has a DIV element with the class.component-user-table', () => {
|
||||
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('type PageCreationConfirm', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper(propsDataPageCreationConfirm)
|
||||
})
|
||||
|
||||
it('has a DIV element with the class.component-user-table', () => {
|
||||
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -1,316 +0,0 @@
|
||||
<template>
|
||||
<div class="component-user-table">
|
||||
<div v-show="overlay" id="overlay" class="">
|
||||
<b-jumbotron class="bg-light p-4">
|
||||
<template #header>{{ overlayText.header }}</template>
|
||||
|
||||
<template #lead>
|
||||
{{ overlayText.text1 }}
|
||||
</template>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<p>
|
||||
{{ overlayText.text2 }}
|
||||
</p>
|
||||
|
||||
<b-button size="md" variant="danger" class="m-3" @click="overlayCancel">
|
||||
{{ overlayText.button_cancel }}
|
||||
</b-button>
|
||||
<b-button
|
||||
size="md"
|
||||
variant="success"
|
||||
class="m-3 text-right"
|
||||
@click="overlayOK(overlayBookmarkType, overlayItem)"
|
||||
>
|
||||
{{ overlayText.button_ok }}
|
||||
</b-button>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
<b-table-lite :items="itemsUser" :fields="fieldsTable" caption-top striped hover stacked="md">
|
||||
<template #cell(creation)="data">
|
||||
<div v-html="data.value"></div>
|
||||
</template>
|
||||
|
||||
<template #cell(edit_creation)="row">
|
||||
<b-button variant="info" size="md" @click="rowToogleDetails(row, 0)" class="mr-2">
|
||||
<b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #cell(show_details)="row">
|
||||
<b-button
|
||||
variant="info"
|
||||
size="md"
|
||||
v-if="row.item.emailChecked"
|
||||
@click="rowToogleDetails(row, 0)"
|
||||
class="mr-2"
|
||||
>
|
||||
<b-icon :icon="row.detailsShowing ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #cell(confirm_mail)="row">
|
||||
<b-button
|
||||
:variant="row.item.emailChecked ? 'success' : 'danger'"
|
||||
size="md"
|
||||
@click="rowToogleDetails(row, 1)"
|
||||
class="mr-2"
|
||||
>
|
||||
<b-icon
|
||||
:icon="row.item.emailChecked ? 'envelope-open' : 'envelope'"
|
||||
aria-label="Help"
|
||||
></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #cell(has_elopage)="row">
|
||||
<b-icon
|
||||
:variant="row.item.hasElopage ? 'success' : 'danger'"
|
||||
:icon="row.item.hasElopage ? 'check-circle' : 'x-circle'"
|
||||
></b-icon>
|
||||
</template>
|
||||
|
||||
<template #cell(transactions_list)="row">
|
||||
<b-button variant="warning" size="md" @click="rowToogleDetails(row, 2)" class="mr-2">
|
||||
<b-icon icon="list"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #row-details="row">
|
||||
<row-details
|
||||
v-if="type !== 'UserListSearch' && type !== 'UserListMassCreation'"
|
||||
:row="row"
|
||||
:type="type"
|
||||
:slotName="slotName"
|
||||
:index="slotIndex"
|
||||
@row-toogle-details="rowToogleDetails"
|
||||
>
|
||||
<template #show-creation>
|
||||
<div>
|
||||
<creation-formular
|
||||
v-if="type === 'PageUserSearch'"
|
||||
type="singleCreation"
|
||||
:pagetype="type"
|
||||
:creation="row.item.creation"
|
||||
:item="row.item"
|
||||
:creationUserData="creationUserData"
|
||||
@update-creation-data="updateCreationData"
|
||||
@update-user-data="updateUserData"
|
||||
/>
|
||||
<edit-creation-formular
|
||||
v-else
|
||||
type="singleCreation"
|
||||
:pagetype="type"
|
||||
:creation="row.item.creation"
|
||||
:item="row.item"
|
||||
:row="row"
|
||||
:creationUserData="creationUserData"
|
||||
@update-creation-data="updateCreationData"
|
||||
@update-user-data="updateUserData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #show-register-mail>
|
||||
<confirm-register-mail-formular
|
||||
:checked="row.item.emailChecked"
|
||||
:email="row.item.email"
|
||||
:dateLastSend="$d(new Date(), 'long')"
|
||||
/>
|
||||
</template>
|
||||
<template #show-transaction-list>
|
||||
<creation-transaction-list-formular :userId="row.item.userId" />
|
||||
</template>
|
||||
</row-details>
|
||||
</template>
|
||||
<template #cell(bookmark)="row">
|
||||
<div v-if="type === 'UserListSearch'">
|
||||
<b-button
|
||||
v-if="row.item.emailChecked"
|
||||
variant="warning"
|
||||
size="md"
|
||||
@click="bookmarkPush(row.item)"
|
||||
class="mr-2"
|
||||
>
|
||||
<b-icon icon="plus" variant="success"></b-icon>
|
||||
</b-button>
|
||||
<div v-else>{{ $t('e_mail') }}!</div>
|
||||
</div>
|
||||
<b-button
|
||||
variant="danger"
|
||||
v-show="type === 'UserListMassCreation' || type === 'PageCreationConfirm'"
|
||||
size="md"
|
||||
@click="bookmarkRemove(row.item)"
|
||||
class="mr-2"
|
||||
>
|
||||
<b-icon icon="x" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #cell(confirm)="row">
|
||||
<b-button
|
||||
variant="success"
|
||||
v-show="type === 'PageCreationConfirm'"
|
||||
size="md"
|
||||
@click="overlayShow('confirm', row.item)"
|
||||
class="mr-2"
|
||||
>
|
||||
<b-icon icon="check" scale="2" variant=""></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-table-lite>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CreationFormular from '../components/CreationFormular.vue'
|
||||
import EditCreationFormular from '../components/EditCreationFormular.vue'
|
||||
import ConfirmRegisterMailFormular from '../components/ConfirmRegisterMailFormular.vue'
|
||||
import CreationTransactionListFormular from '../components/CreationTransactionListFormular.vue'
|
||||
import RowDetails from '../components/RowDetails.vue'
|
||||
|
||||
const slotNames = ['show-creation', 'show-register-mail', 'show-transaction-list']
|
||||
|
||||
export default {
|
||||
name: 'UserTable',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
itemsUser: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
fieldsTable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CreationFormular,
|
||||
EditCreationFormular,
|
||||
ConfirmRegisterMailFormular,
|
||||
CreationTransactionListFormular,
|
||||
RowDetails,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCreationFormular: null,
|
||||
showConfirmRegisterMailFormular: null,
|
||||
showCreationTransactionListFormular: null,
|
||||
creationUserData: {},
|
||||
overlay: false,
|
||||
overlayBookmarkType: '',
|
||||
overlayItem: [],
|
||||
overlayText: [
|
||||
{
|
||||
header: '-',
|
||||
text1: '--',
|
||||
text2: '---',
|
||||
button_ok: 'OK',
|
||||
button_cancel: 'Cancel',
|
||||
},
|
||||
],
|
||||
slotIndex: 0,
|
||||
openRow: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowToogleDetails(row, index) {
|
||||
if (this.openRow) {
|
||||
if (this.openRow.index === row.index) {
|
||||
if (index === this.slotIndex) {
|
||||
row.toggleDetails()
|
||||
this.openRow = null
|
||||
} else {
|
||||
this.slotIndex = index
|
||||
}
|
||||
} else {
|
||||
this.openRow.toggleDetails()
|
||||
row.toggleDetails()
|
||||
this.slotIndex = index
|
||||
this.openRow = row
|
||||
if (this.type === 'PageCreationConfirm') {
|
||||
this.creationUserData = row.item
|
||||
}
|
||||
}
|
||||
} else {
|
||||
row.toggleDetails()
|
||||
this.slotIndex = index
|
||||
this.openRow = row
|
||||
if (this.type === 'PageCreationConfirm') {
|
||||
this.creationUserData = row.item
|
||||
}
|
||||
}
|
||||
},
|
||||
overlayShow(bookmarkType, item) {
|
||||
this.overlay = true
|
||||
this.overlayBookmarkType = bookmarkType
|
||||
this.overlayItem = item
|
||||
|
||||
if (bookmarkType === 'confirm') {
|
||||
this.overlayText.header = this.$t('overlay.confirm.title')
|
||||
this.overlayText.text1 = this.$t('overlay.confirm.text')
|
||||
this.overlayText.text2 = this.$t('overlay.confirm.question')
|
||||
this.overlayText.button_ok = this.$t('overlay.confirm.yes')
|
||||
this.overlayText.button_cancel = this.$t('overlay.confirm.no')
|
||||
}
|
||||
},
|
||||
overlayOK(bookmarkType, item) {
|
||||
if (bookmarkType === 'confirm') {
|
||||
this.$emit('confirm-creation', item)
|
||||
}
|
||||
this.overlay = false
|
||||
},
|
||||
overlayCancel() {
|
||||
this.overlay = false
|
||||
},
|
||||
bookmarkPush(item) {
|
||||
this.$emit('push-item', item)
|
||||
},
|
||||
bookmarkRemove(item) {
|
||||
if (this.type === 'UserListMassCreation') {
|
||||
this.$emit('remove-item', item)
|
||||
}
|
||||
|
||||
if (this.type === 'PageCreationConfirm') {
|
||||
this.$emit('remove-creation', item)
|
||||
}
|
||||
},
|
||||
updateCreationData(data) {
|
||||
this.creationUserData.amount = data.amount
|
||||
this.creationUserData.date = data.date
|
||||
this.creationUserData.memo = data.memo
|
||||
this.creationUserData.moderator = data.moderator
|
||||
|
||||
data.row.toggleDetails()
|
||||
},
|
||||
updateUserData(rowItem, newCreation) {
|
||||
rowItem.creation = newCreation
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
slotName() {
|
||||
return slotNames[this.slotIndex]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-left: 5%;
|
||||
background-color: rgba(12, 11, 11, 0.781);
|
||||
z-index: 1000000;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user