init
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
/* tslint:disable max-line-length */
|
||||
import { vitest } from 'vitest';
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
import sinon, { type SinonStubbedInstance } from 'sinon';
|
||||
import { type RouteLocation } from 'vue-router';
|
||||
|
||||
import ChargeDetails from './charge-details.vue';
|
||||
import ChargeService from './charge.service';
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
type ChargeDetailsComponentType = InstanceType<typeof ChargeDetails>;
|
||||
|
||||
let route: Partial<RouteLocation>;
|
||||
const routerGoMock = vitest.fn();
|
||||
|
||||
vitest.mock('vue-router', () => ({
|
||||
useRoute: () => route,
|
||||
useRouter: () => ({ go: routerGoMock }),
|
||||
}));
|
||||
|
||||
const chargeSample = { id: 123 };
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let alertService: AlertService;
|
||||
|
||||
afterEach(() => {
|
||||
vitest.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('Charge Management Detail Component', () => {
|
||||
let chargeServiceStub: SinonStubbedInstance<ChargeService>;
|
||||
let mountOptions: MountingOptions<ChargeDetailsComponentType>['global'];
|
||||
|
||||
beforeEach(() => {
|
||||
route = {};
|
||||
chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
|
||||
|
||||
alertService = new AlertService({
|
||||
bvToast: {
|
||||
toast: vitest.fn(),
|
||||
} as any,
|
||||
});
|
||||
|
||||
mountOptions = {
|
||||
stubs: {
|
||||
'font-awesome-icon': true,
|
||||
'router-link': true,
|
||||
},
|
||||
provide: {
|
||||
alertService,
|
||||
chargeService: () => chargeServiceStub,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Navigate to details', () => {
|
||||
it('Should call load all on init', async () => {
|
||||
// GIVEN
|
||||
chargeServiceStub.find.resolves(chargeSample);
|
||||
route = {
|
||||
params: {
|
||||
chargeId: `${123}`,
|
||||
},
|
||||
};
|
||||
const wrapper = shallowMount(ChargeDetails, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
// WHEN
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(comp.charge).toMatchObject(chargeSample);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Previous state', () => {
|
||||
it('Should go previous state', async () => {
|
||||
chargeServiceStub.find.resolves(chargeSample);
|
||||
const wrapper = shallowMount(ChargeDetails, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
comp.previousState();
|
||||
await comp.$nextTick();
|
||||
|
||||
expect(routerGoMock).toHaveBeenCalledWith(-1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import { type Ref, defineComponent, inject, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import ChargeService from './charge.service';
|
||||
import { type ICharge } from '@/shared/model/charge.model';
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
|
||||
export default defineComponent({
|
||||
compatConfig: { MODE: 3 },
|
||||
name: 'ChargeDetails',
|
||||
setup() {
|
||||
const chargeService = inject('chargeService', () => new ChargeService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const previousState = () => router.go(-1);
|
||||
const charge: Ref<ICharge> = ref({});
|
||||
|
||||
const retrieveCharge = async chargeId => {
|
||||
try {
|
||||
const res = await chargeService().find(chargeId);
|
||||
charge.value = res;
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
if (route.params?.chargeId) {
|
||||
retrieveCharge(route.params.chargeId);
|
||||
}
|
||||
|
||||
return {
|
||||
alertService,
|
||||
charge,
|
||||
|
||||
previousState,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8">
|
||||
<div v-if="charge">
|
||||
<h2 class="jh-entity-heading" data-cy="chargeDetailsHeading"><span>Charge</span> {{ charge.id }}</h2>
|
||||
<dl class="row jh-entity-details">
|
||||
<dt>
|
||||
<span>Charge Date</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ charge.chargeDate }}</span>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>Type</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ charge.type }}</span>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>Amount</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ charge.amount }}</span>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>Event</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<div v-if="charge.event">
|
||||
<router-link :to="{ name: 'EventView', params: { eventId: charge.event.id } }">{{ charge.event.id }}</router-link>
|
||||
</div>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>Registration</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<div v-if="charge.registration">
|
||||
<router-link :to="{ name: 'RegistrationView', params: { registrationId: charge.registration.id } }">{{
|
||||
charge.registration.id
|
||||
}}</router-link>
|
||||
</div>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>User</span>
|
||||
</dt>
|
||||
<dd>
|
||||
{{ charge.user ? charge.user.login : '' }}
|
||||
</dd>
|
||||
</dl>
|
||||
<button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
|
||||
<font-awesome-icon icon="arrow-left"></font-awesome-icon> <span>Back</span>
|
||||
</button>
|
||||
<router-link v-if="charge.id" :to="{ name: 'ChargeEdit', params: { chargeId: charge.id } }" custom v-slot="{ navigate }">
|
||||
<button @click="navigate" class="btn btn-primary">
|
||||
<font-awesome-icon icon="pencil-alt"></font-awesome-icon> <span>Edit</span>
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./charge-details.component.ts"></script>
|
||||
@@ -0,0 +1,149 @@
|
||||
/* tslint:disable max-line-length */
|
||||
import { vitest } from 'vitest';
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
import sinon, { type SinonStubbedInstance } from 'sinon';
|
||||
import { type RouteLocation } from 'vue-router';
|
||||
|
||||
import ChargeUpdate from './charge-update.vue';
|
||||
import ChargeService from './charge.service';
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
import EventService from '@/entities/event/event.service';
|
||||
import RegistrationService from '@/entities/registration/registration.service';
|
||||
|
||||
import UserService from '@/entities/user/user.service';
|
||||
|
||||
type ChargeUpdateComponentType = InstanceType<typeof ChargeUpdate>;
|
||||
|
||||
let route: Partial<RouteLocation>;
|
||||
const routerGoMock = vitest.fn();
|
||||
|
||||
vitest.mock('vue-router', () => ({
|
||||
useRoute: () => route,
|
||||
useRouter: () => ({ go: routerGoMock }),
|
||||
}));
|
||||
|
||||
const chargeSample = { id: 123 };
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let mountOptions: MountingOptions<ChargeUpdateComponentType>['global'];
|
||||
let alertService: AlertService;
|
||||
|
||||
describe('Charge Management Update Component', () => {
|
||||
let comp: ChargeUpdateComponentType;
|
||||
let chargeServiceStub: SinonStubbedInstance<ChargeService>;
|
||||
|
||||
beforeEach(() => {
|
||||
route = {};
|
||||
chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
|
||||
chargeServiceStub.retrieve.onFirstCall().resolves(Promise.resolve([]));
|
||||
|
||||
alertService = new AlertService({
|
||||
bvToast: {
|
||||
toast: vitest.fn(),
|
||||
} as any,
|
||||
});
|
||||
|
||||
mountOptions = {
|
||||
stubs: {
|
||||
'font-awesome-icon': true,
|
||||
'b-input-group': true,
|
||||
'b-input-group-prepend': true,
|
||||
'b-form-datepicker': true,
|
||||
'b-form-input': true,
|
||||
},
|
||||
provide: {
|
||||
alertService,
|
||||
chargeService: () => chargeServiceStub,
|
||||
eventService: () =>
|
||||
sinon.createStubInstance<EventService>(EventService, {
|
||||
retrieve: sinon.stub().resolves({}),
|
||||
} as any),
|
||||
registrationService: () =>
|
||||
sinon.createStubInstance<RegistrationService>(RegistrationService, {
|
||||
retrieve: sinon.stub().resolves({}),
|
||||
} as any),
|
||||
|
||||
userService: () =>
|
||||
sinon.createStubInstance<UserService>(UserService, {
|
||||
retrieve: sinon.stub().resolves({}),
|
||||
} as any),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vitest.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('save', () => {
|
||||
it('Should call update service on save for existing entity', async () => {
|
||||
// GIVEN
|
||||
const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
comp.charge = chargeSample;
|
||||
chargeServiceStub.update.resolves(chargeSample);
|
||||
|
||||
// WHEN
|
||||
comp.save();
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(chargeServiceStub.update.calledWith(chargeSample)).toBeTruthy();
|
||||
expect(comp.isSaving).toEqual(false);
|
||||
});
|
||||
|
||||
it('Should call create service on save for new entity', async () => {
|
||||
// GIVEN
|
||||
const entity = {};
|
||||
chargeServiceStub.create.resolves(entity);
|
||||
const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
comp.charge = entity;
|
||||
|
||||
// WHEN
|
||||
comp.save();
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(chargeServiceStub.create.calledWith(entity)).toBeTruthy();
|
||||
expect(comp.isSaving).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Before route enter', () => {
|
||||
it('Should retrieve data', async () => {
|
||||
// GIVEN
|
||||
chargeServiceStub.find.resolves(chargeSample);
|
||||
chargeServiceStub.retrieve.resolves([chargeSample]);
|
||||
|
||||
// WHEN
|
||||
route = {
|
||||
params: {
|
||||
chargeId: `${chargeSample.id}`,
|
||||
},
|
||||
};
|
||||
const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(comp.charge).toMatchObject(chargeSample);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Previous state', () => {
|
||||
it('Should go previous state', async () => {
|
||||
chargeServiceStub.find.resolves(chargeSample);
|
||||
const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
comp.previousState();
|
||||
await comp.$nextTick();
|
||||
|
||||
expect(routerGoMock).toHaveBeenCalledWith(-1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,140 @@
|
||||
import { type Ref, computed, defineComponent, inject, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
|
||||
import ChargeService from './charge.service';
|
||||
import { useValidation } from '@/shared/composables';
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
|
||||
import EventService from '@/entities/event/event.service';
|
||||
import { type IEvent } from '@/shared/model/event.model';
|
||||
import RegistrationService from '@/entities/registration/registration.service';
|
||||
import { type IRegistration } from '@/shared/model/registration.model';
|
||||
import UserService from '@/entities/user/user.service';
|
||||
import { Charge, type ICharge } from '@/shared/model/charge.model';
|
||||
import { ChargeType } from '@/shared/model/enumerations/charge-type.model';
|
||||
|
||||
export default defineComponent({
|
||||
compatConfig: { MODE: 3 },
|
||||
name: 'ChargeUpdate',
|
||||
setup() {
|
||||
const chargeService = inject('chargeService', () => new ChargeService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const charge: Ref<ICharge> = ref(new Charge());
|
||||
|
||||
const eventService = inject('eventService', () => new EventService());
|
||||
|
||||
const events: Ref<IEvent[]> = ref([]);
|
||||
|
||||
const registrationService = inject('registrationService', () => new RegistrationService());
|
||||
|
||||
const registrations: Ref<IRegistration[]> = ref([]);
|
||||
const userService = inject('userService', () => new UserService());
|
||||
const users: Ref<Array<any>> = ref([]);
|
||||
const chargeTypeValues: Ref<string[]> = ref(Object.keys(ChargeType));
|
||||
const isSaving = ref(false);
|
||||
const currentLanguage = inject('currentLanguage', () => computed(() => navigator.language ?? 'en'), true);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const previousState = () => router.go(-1);
|
||||
|
||||
const retrieveCharge = async chargeId => {
|
||||
try {
|
||||
const res = await chargeService().find(chargeId);
|
||||
charge.value = res;
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
if (route.params?.chargeId) {
|
||||
retrieveCharge(route.params.chargeId);
|
||||
}
|
||||
|
||||
const initRelationships = () => {
|
||||
eventService()
|
||||
.retrieve()
|
||||
.then(res => {
|
||||
events.value = res.data;
|
||||
});
|
||||
registrationService()
|
||||
.retrieve()
|
||||
.then(res => {
|
||||
registrations.value = res.data;
|
||||
});
|
||||
userService()
|
||||
.retrieve()
|
||||
.then(res => {
|
||||
users.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
initRelationships();
|
||||
|
||||
const validations = useValidation();
|
||||
const validationRules = {
|
||||
chargeDate: {
|
||||
required: validations.required('This field is required.'),
|
||||
},
|
||||
type: {
|
||||
required: validations.required('This field is required.'),
|
||||
},
|
||||
amount: {
|
||||
required: validations.required('This field is required.'),
|
||||
},
|
||||
event: {},
|
||||
registration: {},
|
||||
user: {},
|
||||
};
|
||||
const v$ = useVuelidate(validationRules, charge as any);
|
||||
v$.value.$validate();
|
||||
|
||||
return {
|
||||
chargeService,
|
||||
alertService,
|
||||
charge,
|
||||
previousState,
|
||||
chargeTypeValues,
|
||||
isSaving,
|
||||
currentLanguage,
|
||||
events,
|
||||
registrations,
|
||||
users,
|
||||
v$,
|
||||
};
|
||||
},
|
||||
created(): void {},
|
||||
methods: {
|
||||
save(): void {
|
||||
this.isSaving = true;
|
||||
if (this.charge.id) {
|
||||
this.chargeService()
|
||||
.update(this.charge)
|
||||
.then(param => {
|
||||
this.isSaving = false;
|
||||
this.previousState();
|
||||
this.alertService.showInfo(`A Charge is updated with identifier ${param.id}`);
|
||||
})
|
||||
.catch(error => {
|
||||
this.isSaving = false;
|
||||
this.alertService.showHttpError(error.response);
|
||||
});
|
||||
} else {
|
||||
this.chargeService()
|
||||
.create(this.charge)
|
||||
.then(param => {
|
||||
this.isSaving = false;
|
||||
this.previousState();
|
||||
this.alertService.showSuccess(`A Charge is created with identifier ${param.id}`);
|
||||
})
|
||||
.catch(error => {
|
||||
this.isSaving = false;
|
||||
this.alertService.showHttpError(error.response);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8">
|
||||
<form name="editForm" novalidate @submit.prevent="save()">
|
||||
<h2 id="sasiedziApp.charge.home.createOrEditLabel" data-cy="ChargeCreateUpdateHeading">Create or edit a Charge</h2>
|
||||
<div>
|
||||
<div class="form-group" v-if="charge.id">
|
||||
<label for="id">ID</label>
|
||||
<input type="text" class="form-control" id="id" name="id" v-model="charge.id" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-chargeDate">Charge Date</label>
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-form-datepicker
|
||||
aria-controls="charge-chargeDate"
|
||||
v-model="v$.chargeDate.$model"
|
||||
name="chargeDate"
|
||||
class="form-control"
|
||||
:locale="currentLanguage"
|
||||
button-only
|
||||
today-button
|
||||
reset-button
|
||||
close-button
|
||||
>
|
||||
</b-form-datepicker>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="charge-chargeDate"
|
||||
data-cy="chargeDate"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="chargeDate"
|
||||
:class="{ valid: !v$.chargeDate.$invalid, invalid: v$.chargeDate.$invalid }"
|
||||
v-model="v$.chargeDate.$model"
|
||||
required
|
||||
/>
|
||||
</b-input-group>
|
||||
<div v-if="v$.chargeDate.$anyDirty && v$.chargeDate.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.chargeDate.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-type">Type</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="type"
|
||||
:class="{ valid: !v$.type.$invalid, invalid: v$.type.$invalid }"
|
||||
v-model="v$.type.$model"
|
||||
id="charge-type"
|
||||
data-cy="type"
|
||||
required
|
||||
>
|
||||
<option v-for="chargeType in chargeTypeValues" :key="chargeType" :value="chargeType">{{ chargeType }}</option>
|
||||
</select>
|
||||
<div v-if="v$.type.$anyDirty && v$.type.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.type.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-amount">Amount</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="amount"
|
||||
id="charge-amount"
|
||||
data-cy="amount"
|
||||
:class="{ valid: !v$.amount.$invalid, invalid: v$.amount.$invalid }"
|
||||
v-model.number="v$.amount.$model"
|
||||
required
|
||||
/>
|
||||
<div v-if="v$.amount.$anyDirty && v$.amount.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.amount.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-event">Event</label>
|
||||
<select class="form-control" id="charge-event" data-cy="event" name="event" v-model="charge.event">
|
||||
<option :value="null"></option>
|
||||
<option
|
||||
:value="charge.event && eventOption.id === charge.event.id ? charge.event : eventOption"
|
||||
v-for="eventOption in events"
|
||||
:key="eventOption.id"
|
||||
>
|
||||
{{ eventOption.id }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-registration">Registration</label>
|
||||
<select class="form-control" id="charge-registration" data-cy="registration" name="registration" v-model="charge.registration">
|
||||
<option :value="null"></option>
|
||||
<option
|
||||
:value="charge.registration && registrationOption.id === charge.registration.id ? charge.registration : registrationOption"
|
||||
v-for="registrationOption in registrations"
|
||||
:key="registrationOption.id"
|
||||
>
|
||||
{{ registrationOption.id }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="charge-user">User</label>
|
||||
<select class="form-control" id="charge-user" data-cy="user" name="user" v-model="charge.user">
|
||||
<option :value="null"></option>
|
||||
<option
|
||||
:value="charge.user && userOption.id === charge.user.id ? charge.user : userOption"
|
||||
v-for="userOption in users"
|
||||
:key="userOption.id"
|
||||
>
|
||||
{{ userOption.login }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" @click="previousState()">
|
||||
<font-awesome-icon icon="ban"></font-awesome-icon> <span>Cancel</span>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
id="save-entity"
|
||||
data-cy="entityCreateSaveButton"
|
||||
:disabled="v$.$invalid || isSaving"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<font-awesome-icon icon="save"></font-awesome-icon> <span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./charge-update.component.ts"></script>
|
||||
@@ -0,0 +1,100 @@
|
||||
/* tslint:disable max-line-length */
|
||||
import { vitest } from 'vitest';
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
import sinon, { type SinonStubbedInstance } from 'sinon';
|
||||
|
||||
import Charge from './charge.vue';
|
||||
import ChargeService from './charge.service';
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
type ChargeComponentType = InstanceType<typeof Charge>;
|
||||
|
||||
const bModalStub = {
|
||||
render: () => {},
|
||||
methods: {
|
||||
hide: () => {},
|
||||
show: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let alertService: AlertService;
|
||||
|
||||
describe('Charge Management Component', () => {
|
||||
let chargeServiceStub: SinonStubbedInstance<ChargeService>;
|
||||
let mountOptions: MountingOptions<ChargeComponentType>['global'];
|
||||
|
||||
beforeEach(() => {
|
||||
chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
|
||||
chargeServiceStub.retrieve.resolves({ headers: {} });
|
||||
|
||||
alertService = new AlertService({
|
||||
bvToast: {
|
||||
toast: vitest.fn(),
|
||||
} as any,
|
||||
});
|
||||
|
||||
mountOptions = {
|
||||
stubs: {
|
||||
bModal: bModalStub as any,
|
||||
'font-awesome-icon': true,
|
||||
'b-badge': true,
|
||||
'b-button': true,
|
||||
'router-link': true,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': {},
|
||||
},
|
||||
provide: {
|
||||
alertService,
|
||||
chargeService: () => chargeServiceStub,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Mount', () => {
|
||||
it('Should call load all on init', async () => {
|
||||
// GIVEN
|
||||
chargeServiceStub.retrieve.resolves({ headers: {}, data: [{ id: 123 }] });
|
||||
|
||||
// WHEN
|
||||
const wrapper = shallowMount(Charge, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(chargeServiceStub.retrieve.calledOnce).toBeTruthy();
|
||||
expect(comp.charges[0]).toEqual(expect.objectContaining({ id: 123 }));
|
||||
});
|
||||
});
|
||||
describe('Handles', () => {
|
||||
let comp: ChargeComponentType;
|
||||
|
||||
beforeEach(async () => {
|
||||
const wrapper = shallowMount(Charge, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
chargeServiceStub.retrieve.reset();
|
||||
chargeServiceStub.retrieve.resolves({ headers: {}, data: [] });
|
||||
});
|
||||
|
||||
it('Should call delete service on confirmDelete', async () => {
|
||||
// GIVEN
|
||||
chargeServiceStub.delete.resolves({});
|
||||
|
||||
// WHEN
|
||||
comp.prepareRemove({ id: 123 });
|
||||
|
||||
comp.removeCharge();
|
||||
await comp.$nextTick(); // clear components
|
||||
|
||||
// THEN
|
||||
expect(chargeServiceStub.delete.called).toBeTruthy();
|
||||
|
||||
// THEN
|
||||
await comp.$nextTick(); // handle component clear watch
|
||||
expect(chargeServiceStub.retrieve.callCount).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
|
||||
|
||||
import ChargeService from './charge.service';
|
||||
import { type ICharge } from '@/shared/model/charge.model';
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
|
||||
export default defineComponent({
|
||||
compatConfig: { MODE: 3 },
|
||||
name: 'Charge',
|
||||
setup() {
|
||||
const chargeService = inject('chargeService', () => new ChargeService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const charges: Ref<ICharge[]> = ref([]);
|
||||
|
||||
const isFetching = ref(false);
|
||||
|
||||
const clear = () => {};
|
||||
|
||||
const retrieveCharges = async () => {
|
||||
isFetching.value = true;
|
||||
try {
|
||||
const res = await chargeService().retrieve();
|
||||
charges.value = res.data;
|
||||
} catch (err) {
|
||||
alertService.showHttpError(err.response);
|
||||
} finally {
|
||||
isFetching.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncList = () => {
|
||||
retrieveCharges();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await retrieveCharges();
|
||||
});
|
||||
|
||||
const removeId: Ref<number> = ref(null);
|
||||
const removeEntity = ref<any>(null);
|
||||
const prepareRemove = (instance: ICharge) => {
|
||||
removeId.value = instance.id;
|
||||
removeEntity.value.show();
|
||||
};
|
||||
const closeDialog = () => {
|
||||
removeEntity.value.hide();
|
||||
};
|
||||
const removeCharge = async () => {
|
||||
try {
|
||||
await chargeService().delete(removeId.value);
|
||||
const message = `A Charge is deleted with identifier ${removeId.value}`;
|
||||
alertService.showInfo(message, { variant: 'danger' });
|
||||
removeId.value = null;
|
||||
retrieveCharges();
|
||||
closeDialog();
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
charges,
|
||||
handleSyncList,
|
||||
isFetching,
|
||||
retrieveCharges,
|
||||
clear,
|
||||
removeId,
|
||||
removeEntity,
|
||||
prepareRemove,
|
||||
closeDialog,
|
||||
removeCharge,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,164 @@
|
||||
/* tslint:disable max-line-length */
|
||||
import axios from 'axios';
|
||||
import sinon from 'sinon';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import ChargeService from './charge.service';
|
||||
import { DATE_FORMAT } from '@/shared/composables/date-format';
|
||||
import { Charge } from '@/shared/model/charge.model';
|
||||
|
||||
const error = {
|
||||
response: {
|
||||
status: null,
|
||||
data: {
|
||||
type: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const axiosStub = {
|
||||
get: sinon.stub(axios, 'get'),
|
||||
post: sinon.stub(axios, 'post'),
|
||||
put: sinon.stub(axios, 'put'),
|
||||
patch: sinon.stub(axios, 'patch'),
|
||||
delete: sinon.stub(axios, 'delete'),
|
||||
};
|
||||
|
||||
describe('Service Tests', () => {
|
||||
describe('Charge Service', () => {
|
||||
let service: ChargeService;
|
||||
let elemDefault;
|
||||
let currentDate: Date;
|
||||
|
||||
beforeEach(() => {
|
||||
service = new ChargeService();
|
||||
currentDate = new Date();
|
||||
elemDefault = new Charge(123, currentDate, 'CHARGE', 0);
|
||||
});
|
||||
|
||||
describe('Service methods', () => {
|
||||
it('should find an element', async () => {
|
||||
const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
|
||||
axiosStub.get.resolves({ data: returnedFromService });
|
||||
|
||||
return service.find(123).then(res => {
|
||||
expect(res).toMatchObject(elemDefault);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not find an element', async () => {
|
||||
axiosStub.get.rejects(error);
|
||||
return service
|
||||
.find(123)
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should create a Charge', async () => {
|
||||
const returnedFromService = { id: 123, chargeDate: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
|
||||
const expected = { chargeDate: currentDate, ...returnedFromService };
|
||||
|
||||
axiosStub.post.resolves({ data: returnedFromService });
|
||||
return service.create({}).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not create a Charge', async () => {
|
||||
axiosStub.post.rejects(error);
|
||||
|
||||
return service
|
||||
.create({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update a Charge', async () => {
|
||||
const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', amount: 1, ...elemDefault };
|
||||
|
||||
const expected = { chargeDate: currentDate, ...returnedFromService };
|
||||
axiosStub.put.resolves({ data: returnedFromService });
|
||||
|
||||
return service.update(expected).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not update a Charge', async () => {
|
||||
axiosStub.put.rejects(error);
|
||||
|
||||
return service
|
||||
.update({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should partial update a Charge', async () => {
|
||||
const patchObject = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', ...new Charge() };
|
||||
const returnedFromService = Object.assign(patchObject, elemDefault);
|
||||
|
||||
const expected = { chargeDate: currentDate, ...returnedFromService };
|
||||
axiosStub.patch.resolves({ data: returnedFromService });
|
||||
|
||||
return service.partialUpdate(patchObject).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not partial update a Charge', async () => {
|
||||
axiosStub.patch.rejects(error);
|
||||
|
||||
return service
|
||||
.partialUpdate({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should return a list of Charge', async () => {
|
||||
const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', amount: 1, ...elemDefault };
|
||||
const expected = { chargeDate: currentDate, ...returnedFromService };
|
||||
axiosStub.get.resolves([returnedFromService]);
|
||||
return service.retrieve().then(res => {
|
||||
expect(res).toContainEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not return a list of Charge', async () => {
|
||||
axiosStub.get.rejects(error);
|
||||
|
||||
return service
|
||||
.retrieve()
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should delete a Charge', async () => {
|
||||
axiosStub.delete.resolves({ ok: true });
|
||||
return service.delete(123).then(res => {
|
||||
expect(res.ok).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not delete a Charge', async () => {
|
||||
axiosStub.delete.rejects(error);
|
||||
|
||||
return service
|
||||
.delete(123)
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
import axios from 'axios';
|
||||
|
||||
import { type ICharge } from '@/shared/model/charge.model';
|
||||
|
||||
const baseApiUrl = 'api/charges';
|
||||
|
||||
export default class ChargeService {
|
||||
public find(id: number): Promise<ICharge> {
|
||||
return new Promise<ICharge>((resolve, reject) => {
|
||||
axios
|
||||
.get(`${baseApiUrl}/${id}`)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public retrieve(): Promise<any> {
|
||||
return new Promise<any>((resolve, reject) => {
|
||||
axios
|
||||
.get(baseApiUrl)
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public delete(id: number): Promise<any> {
|
||||
return new Promise<any>((resolve, reject) => {
|
||||
axios
|
||||
.delete(`${baseApiUrl}/${id}`)
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public create(entity: ICharge): Promise<ICharge> {
|
||||
return new Promise<ICharge>((resolve, reject) => {
|
||||
axios
|
||||
.post(`${baseApiUrl}`, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public update(entity: ICharge): Promise<ICharge> {
|
||||
return new Promise<ICharge>((resolve, reject) => {
|
||||
axios
|
||||
.put(`${baseApiUrl}/${entity.id}`, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public partialUpdate(entity: ICharge): Promise<ICharge> {
|
||||
return new Promise<ICharge>((resolve, reject) => {
|
||||
axios
|
||||
.patch(`${baseApiUrl}/${entity.id}`, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 id="page-heading" data-cy="ChargeHeading">
|
||||
<span id="charge-heading">Charges</span>
|
||||
<div class="d-flex justify-content-end">
|
||||
<button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
|
||||
<font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span>
|
||||
</button>
|
||||
<router-link :to="{ name: 'ChargeCreate' }" custom v-slot="{ navigate }">
|
||||
<button
|
||||
@click="navigate"
|
||||
id="jh-create-entity"
|
||||
data-cy="entityCreateButton"
|
||||
class="btn btn-primary jh-create-entity create-charge"
|
||||
>
|
||||
<font-awesome-icon icon="plus"></font-awesome-icon>
|
||||
<span>Create a new Charge</span>
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</h2>
|
||||
<br />
|
||||
<div class="alert alert-warning" v-if="!isFetching && charges && charges.length === 0">
|
||||
<span>No Charges found</span>
|
||||
</div>
|
||||
<div class="table-responsive" v-if="charges && charges.length > 0">
|
||||
<table class="table table-striped" aria-describedby="charges">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="row"><span>ID</span></th>
|
||||
<th scope="row"><span>Charge Date</span></th>
|
||||
<th scope="row"><span>Type</span></th>
|
||||
<th scope="row"><span>Amount</span></th>
|
||||
<th scope="row"><span>Event</span></th>
|
||||
<th scope="row"><span>Registration</span></th>
|
||||
<th scope="row"><span>User</span></th>
|
||||
<th scope="row"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="charge in charges" :key="charge.id" data-cy="entityTable">
|
||||
<td>
|
||||
<router-link :to="{ name: 'ChargeView', params: { chargeId: charge.id } }">{{ charge.id }}</router-link>
|
||||
</td>
|
||||
<td>{{ charge.chargeDate }}</td>
|
||||
<td>{{ charge.type }}</td>
|
||||
<td>{{ charge.amount }}</td>
|
||||
<td>
|
||||
<div v-if="charge.event">
|
||||
<router-link :to="{ name: 'EventView', params: { eventId: charge.event.id } }">{{ charge.event.id }}</router-link>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="charge.registration">
|
||||
<router-link :to="{ name: 'RegistrationView', params: { registrationId: charge.registration.id } }">{{
|
||||
charge.registration.id
|
||||
}}</router-link>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{{ charge.user ? charge.user.login : '' }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="btn-group">
|
||||
<router-link :to="{ name: 'ChargeView', params: { chargeId: charge.id } }" custom v-slot="{ navigate }">
|
||||
<button @click="navigate" class="btn btn-info btn-sm details" data-cy="entityDetailsButton">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
<span class="d-none d-md-inline">View</span>
|
||||
</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'ChargeEdit', params: { chargeId: charge.id } }" custom v-slot="{ navigate }">
|
||||
<button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
|
||||
<font-awesome-icon icon="pencil-alt"></font-awesome-icon>
|
||||
<span class="d-none d-md-inline">Edit</span>
|
||||
</button>
|
||||
</router-link>
|
||||
<b-button
|
||||
@click="prepareRemove(charge)"
|
||||
variant="danger"
|
||||
class="btn btn-sm"
|
||||
data-cy="entityDeleteButton"
|
||||
v-b-modal.removeEntity
|
||||
>
|
||||
<font-awesome-icon icon="times"></font-awesome-icon>
|
||||
<span class="d-none d-md-inline">Delete</span>
|
||||
</b-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<b-modal ref="removeEntity" id="removeEntity">
|
||||
<template #modal-title>
|
||||
<span id="sasiedziApp.charge.delete.question" data-cy="chargeDeleteDialogHeading">Confirm delete operation</span>
|
||||
</template>
|
||||
<div class="modal-body">
|
||||
<p id="jhi-delete-charge-heading">Are you sure you want to delete Charge {{ removeId }}?</p>
|
||||
</div>
|
||||
<template #modal-footer>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="jhi-confirm-delete-charge"
|
||||
data-cy="entityConfirmDeleteButton"
|
||||
@click="removeCharge()"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./charge.component.ts"></script>
|
||||
Reference in New Issue
Block a user