Generate question bank domain model from JDL
This commit is contained in:
jieun committed
1 parent
1d97cc4e31
commit
1d74d8f04b
160 files changed
+26900
-2
No files matched your search
@@ -0,0 +1,91 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { type RouteLocation } from 'vue-router';
|
||||
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
import SubjectDetails from './subject-details.vue';
|
||||
|
||||
type SubjectDetailsComponentType = InstanceType<typeof SubjectDetails>;
|
||||
|
||||
let route: Partial<RouteLocation>;
|
||||
const routerGoMock = vi.fn();
|
||||
|
||||
vi.mock('vue-router', () => ({
|
||||
useRoute: () => route,
|
||||
useRouter: () => ({ go: routerGoMock }),
|
||||
}));
|
||||
|
||||
const subjectSample = { id: 123 };
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let alertService: AlertService;
|
||||
|
||||
afterEach(() => {
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('Subject Management Detail Component', () => {
|
||||
let subjectServiceStub: any;
|
||||
let mountOptions: MountingOptions<SubjectDetailsComponentType>['global'];
|
||||
|
||||
beforeEach(() => {
|
||||
route = {};
|
||||
subjectServiceStub = {
|
||||
find: vi.fn(),
|
||||
};
|
||||
|
||||
alertService = new AlertService({
|
||||
i18n: { t: vi.fn() } as any,
|
||||
toast: {
|
||||
create: vi.fn(),
|
||||
} as any,
|
||||
});
|
||||
|
||||
mountOptions = {
|
||||
stubs: {
|
||||
'font-awesome-icon': true,
|
||||
'router-link': true,
|
||||
},
|
||||
provide: {
|
||||
alertService,
|
||||
subjectService: () => subjectServiceStub,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Navigate to details', () => {
|
||||
it('Should call load all on init', async () => {
|
||||
// GIVEN
|
||||
subjectServiceStub.find.mockResolvedValue(subjectSample);
|
||||
route = {
|
||||
params: {
|
||||
subjectId: `${123}`,
|
||||
},
|
||||
};
|
||||
const wrapper = shallowMount(SubjectDetails, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
// WHEN
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(comp.subject).toMatchObject(subjectSample);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Previous state', () => {
|
||||
it('Should go previous state', async () => {
|
||||
subjectServiceStub.find.mockResolvedValue(subjectSample);
|
||||
const wrapper = shallowMount(SubjectDetails, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
comp.previousState();
|
||||
await comp.$nextTick();
|
||||
|
||||
expect(routerGoMock).toHaveBeenCalledWith(-1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { type Ref, defineComponent, inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
import { type ISubject } from '@/shared/model/subject.model';
|
||||
|
||||
import SubjectService from './subject.service';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SubjectDetails',
|
||||
setup() {
|
||||
const subjectService = inject('subjectService', () => new SubjectService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const previousState = () => router.go(-1);
|
||||
const subject: Ref<ISubject> = ref({});
|
||||
|
||||
const retrieveSubject = async subjectId => {
|
||||
try {
|
||||
const res = await subjectService().find(subjectId);
|
||||
subject.value = res;
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
if (route.params?.subjectId) {
|
||||
retrieveSubject(route.params.subjectId);
|
||||
}
|
||||
|
||||
return {
|
||||
subject,
|
||||
|
||||
previousState,
|
||||
t$: useI18n().t,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="col-8">
|
||||
<div v-if="subject">
|
||||
<h2 class="jh-entity-heading" data-cy="subjectDetailsHeading">
|
||||
<span>{{ t$('questionBankApp.subject.detail.title') }}</span> {{ subject.id }}
|
||||
</h2>
|
||||
<dl class="row-md jh-entity-details">
|
||||
<dt>
|
||||
<span>{{ t$('questionBankApp.subject.name') }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ subject.name }}</span>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>{{ t$('questionBankApp.subject.description') }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ subject.description }}</span>
|
||||
</dd>
|
||||
<dt>
|
||||
<span>{{ t$('questionBankApp.subject.active') }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ subject.active }}</span>
|
||||
</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>{{ t$('entity.action.back') }}</span>
|
||||
</button>
|
||||
<router-link v-if="subject.id" :to="{ name: 'SubjectEdit', params: { subjectId: subject.id } }" custom v-slot="{ navigate }">
|
||||
<button @click="navigate" class="btn btn-primary">
|
||||
<font-awesome-icon icon="pencil-alt"></font-awesome-icon> <span>{{ t$('entity.action.edit') }}</span>
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./subject-details.component.ts"></script>
|
||||
@@ -0,0 +1,136 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { type RouteLocation } from 'vue-router';
|
||||
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
import SubjectUpdate from './subject-update.vue';
|
||||
|
||||
type SubjectUpdateComponentType = InstanceType<typeof SubjectUpdate>;
|
||||
|
||||
let route: Partial<RouteLocation>;
|
||||
const routerGoMock = vi.fn();
|
||||
|
||||
vi.mock('vue-router', () => ({
|
||||
useRoute: () => route,
|
||||
useRouter: () => ({ go: routerGoMock }),
|
||||
}));
|
||||
|
||||
const subjectSample = { id: 123 };
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let mountOptions: MountingOptions<SubjectUpdateComponentType>['global'];
|
||||
let alertService: AlertService;
|
||||
|
||||
describe('Subject Management Update Component', () => {
|
||||
let comp: SubjectUpdateComponentType;
|
||||
let subjectServiceStub: any;
|
||||
|
||||
beforeEach(() => {
|
||||
route = {};
|
||||
subjectServiceStub = {
|
||||
retrieve: vi.fn(),
|
||||
find: vi.fn(),
|
||||
update: vi.fn(),
|
||||
create: vi.fn(),
|
||||
};
|
||||
subjectServiceStub.retrieve.mockResolvedValueOnce([]);
|
||||
|
||||
alertService = new AlertService({
|
||||
i18n: { t: vi.fn() } as any,
|
||||
toast: {
|
||||
create: vi.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,
|
||||
subjectService: () => subjectServiceStub,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('save', () => {
|
||||
it('Should call update service on save for existing entity', async () => {
|
||||
// GIVEN
|
||||
const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
comp.subject = subjectSample;
|
||||
subjectServiceStub.update.mockResolvedValue(subjectSample);
|
||||
|
||||
// WHEN
|
||||
comp.save();
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.update).toHaveBeenCalledWith(subjectSample);
|
||||
expect(comp.isSaving).toEqual(false);
|
||||
});
|
||||
|
||||
it('Should call create service on save for new entity', async () => {
|
||||
// GIVEN
|
||||
const entity = {};
|
||||
subjectServiceStub.create.mockResolvedValue(entity);
|
||||
const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
comp.subject = entity;
|
||||
|
||||
// WHEN
|
||||
comp.save();
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.create).toHaveBeenCalledWith(entity);
|
||||
expect(comp.isSaving).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Before route enter', () => {
|
||||
it('Should retrieve data', async () => {
|
||||
// GIVEN
|
||||
subjectServiceStub.find.mockResolvedValue(subjectSample);
|
||||
subjectServiceStub.retrieve.mockResolvedValue([subjectSample]);
|
||||
|
||||
// WHEN
|
||||
route = {
|
||||
params: {
|
||||
subjectId: `${subjectSample.id}`,
|
||||
},
|
||||
};
|
||||
const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(comp.subject).toMatchObject(subjectSample);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Previous state', () => {
|
||||
it('Should go previous state', async () => {
|
||||
subjectServiceStub.find.mockResolvedValue(subjectSample);
|
||||
const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
comp.previousState();
|
||||
await comp.$nextTick();
|
||||
|
||||
expect(routerGoMock).toHaveBeenCalledWith(-1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,101 @@
|
||||
import { type Ref, computed, defineComponent, inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
import { useValidation } from '@/shared/composables';
|
||||
import { type ISubject, Subject } from '@/shared/model/subject.model';
|
||||
|
||||
import SubjectService from './subject.service';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SubjectUpdate',
|
||||
setup() {
|
||||
const subjectService = inject('subjectService', () => new SubjectService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const subject: Ref<ISubject> = ref(new Subject());
|
||||
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 retrieveSubject = async subjectId => {
|
||||
try {
|
||||
const res = await subjectService().find(subjectId);
|
||||
subject.value = res;
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
if (route.params?.subjectId) {
|
||||
retrieveSubject(route.params.subjectId);
|
||||
}
|
||||
|
||||
const { t: t$ } = useI18n();
|
||||
const validations = useValidation();
|
||||
const validationRules = {
|
||||
name: {
|
||||
required: validations.required(t$('entity.validation.required').toString()),
|
||||
minLength: validations.minLength(t$('entity.validation.minlength', { min: 2 }).toString(), 2),
|
||||
maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 100 }).toString(), 100),
|
||||
},
|
||||
description: {
|
||||
maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 1000 }).toString(), 1000),
|
||||
},
|
||||
active: {
|
||||
required: validations.required(t$('entity.validation.required').toString()),
|
||||
},
|
||||
};
|
||||
const v$ = useVuelidate(validationRules, subject as any);
|
||||
v$.value.$validate();
|
||||
|
||||
return {
|
||||
subjectService,
|
||||
alertService,
|
||||
subject,
|
||||
previousState,
|
||||
isSaving,
|
||||
currentLanguage,
|
||||
v$,
|
||||
t$,
|
||||
};
|
||||
},
|
||||
created(): void {},
|
||||
methods: {
|
||||
save(): void {
|
||||
this.isSaving = true;
|
||||
if (this.subject.id) {
|
||||
this.subjectService()
|
||||
.update(this.subject)
|
||||
.then(param => {
|
||||
this.isSaving = false;
|
||||
this.previousState();
|
||||
this.alertService.showInfo(this.t$('questionBankApp.subject.updated', { param: param.id }));
|
||||
})
|
||||
.catch(error => {
|
||||
this.isSaving = false;
|
||||
this.alertService.showHttpError(error.response);
|
||||
});
|
||||
} else {
|
||||
this.subjectService()
|
||||
.create(this.subject)
|
||||
.then(param => {
|
||||
this.isSaving = false;
|
||||
this.previousState();
|
||||
this.alertService.showSuccess(this.t$('questionBankApp.subject.created', { param: param.id }).toString());
|
||||
})
|
||||
.catch(error => {
|
||||
this.isSaving = false;
|
||||
this.alertService.showHttpError(error.response);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="col-8">
|
||||
<form name="editForm" novalidate @submit.prevent="save()">
|
||||
<h2 id="questionBankApp.subject.home.createOrEditLabel" data-cy="SubjectCreateUpdateHeading">
|
||||
{{ t$('questionBankApp.subject.home.createOrEditLabel') }}
|
||||
</h2>
|
||||
<div>
|
||||
<div class="mb-3" v-if="subject.id">
|
||||
<label for="id">{{ t$('global.field.id') }}</label>
|
||||
<input type="text" class="form-control" id="id" name="id" v-model="subject.id" readonly />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-control-label" for="subject-name">{{ t$('questionBankApp.subject.name') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="name"
|
||||
id="subject-name"
|
||||
data-cy="name"
|
||||
:class="{ valid: !v$.name.$invalid, invalid: v$.name.$invalid }"
|
||||
v-model="v$.name.$model"
|
||||
required
|
||||
/>
|
||||
<div v-if="v$.name.$anyDirty && v$.name.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.name.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-control-label" for="subject-description">{{ t$('questionBankApp.subject.description') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="description"
|
||||
id="subject-description"
|
||||
data-cy="description"
|
||||
:class="{ valid: !v$.description.$invalid, invalid: v$.description.$invalid }"
|
||||
v-model="v$.description.$model"
|
||||
/>
|
||||
<div v-if="v$.description.$anyDirty && v$.description.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.description.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
name="active"
|
||||
id="subject-active"
|
||||
data-cy="active"
|
||||
:class="{ valid: !v$.active.$invalid, invalid: v$.active.$invalid }"
|
||||
v-model="v$.active.$model"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="subject-active">{{ t$('questionBankApp.subject.active') }}</label>
|
||||
<div v-if="v$.active.$anyDirty && v$.active.$invalid">
|
||||
<small class="form-text text-danger" v-for="error of v$.active.$errors" :key="error.$uid">{{ error.$message }}</small>
|
||||
</div>
|
||||
</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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./subject-update.component.ts"></script>
|
||||
@@ -0,0 +1,167 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { type MountingOptions, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import AlertService from '@/shared/alert/alert.service';
|
||||
|
||||
import Subject from './subject.vue';
|
||||
|
||||
type SubjectComponentType = InstanceType<typeof Subject>;
|
||||
|
||||
const bModalStub = {
|
||||
render: () => {},
|
||||
methods: {
|
||||
hide: () => {},
|
||||
show: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
describe('Component Tests', () => {
|
||||
let alertService: AlertService;
|
||||
|
||||
describe('Subject Management Component', () => {
|
||||
let subjectServiceStub: any;
|
||||
let mountOptions: MountingOptions<SubjectComponentType>['global'];
|
||||
|
||||
beforeEach(() => {
|
||||
subjectServiceStub = {
|
||||
retrieve: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
};
|
||||
subjectServiceStub.retrieve.mockResolvedValue({ headers: {} });
|
||||
|
||||
alertService = new AlertService({
|
||||
i18n: { t: vi.fn() } as any,
|
||||
toast: {
|
||||
create: vi.fn(),
|
||||
} as any,
|
||||
});
|
||||
|
||||
mountOptions = {
|
||||
stubs: {
|
||||
jhiItemCount: true,
|
||||
bPagination: true,
|
||||
bModal: bModalStub as any,
|
||||
'font-awesome-icon': true,
|
||||
'b-badge': true,
|
||||
'jhi-sort-indicator': true,
|
||||
'b-button': true,
|
||||
'router-link': true,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': {},
|
||||
},
|
||||
provide: {
|
||||
alertService,
|
||||
subjectService: () => subjectServiceStub,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Mount', () => {
|
||||
it('Should call load all on init', async () => {
|
||||
// GIVEN
|
||||
subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
|
||||
|
||||
// WHEN
|
||||
const wrapper = shallowMount(Subject, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.retrieve).toHaveBeenCalledOnce();
|
||||
expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
|
||||
});
|
||||
|
||||
it('should calculate the sort attribute for an id', async () => {
|
||||
// WHEN
|
||||
const wrapper = shallowMount(Subject, { global: mountOptions });
|
||||
const comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
|
||||
sort: ['id,asc'],
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('Handles', () => {
|
||||
let comp: SubjectComponentType;
|
||||
|
||||
beforeEach(async () => {
|
||||
const wrapper = shallowMount(Subject, { global: mountOptions });
|
||||
comp = wrapper.vm;
|
||||
await comp.$nextTick();
|
||||
subjectServiceStub.retrieve.mockReset();
|
||||
subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
|
||||
});
|
||||
|
||||
it('should load a page', async () => {
|
||||
// GIVEN
|
||||
subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
|
||||
|
||||
// WHEN
|
||||
comp.page = 2;
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.retrieve).toHaveBeenCalled();
|
||||
expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
|
||||
});
|
||||
|
||||
it('should not load a page if the page is the same as the previous page', () => {
|
||||
// WHEN
|
||||
comp.page = 1;
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.retrieve).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should re-initialize the page', async () => {
|
||||
// GIVEN
|
||||
comp.page = 2;
|
||||
await comp.$nextTick();
|
||||
subjectServiceStub.retrieve.mockReset();
|
||||
subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
|
||||
|
||||
// WHEN
|
||||
comp.clear();
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(comp.page).toEqual(1);
|
||||
expect(subjectServiceStub.retrieve).toHaveBeenCalledTimes(1);
|
||||
expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
|
||||
});
|
||||
|
||||
it('should calculate the sort attribute for a non-id attribute', async () => {
|
||||
// WHEN
|
||||
comp.propOrder = 'name';
|
||||
await comp.$nextTick();
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
|
||||
sort: ['name,asc', 'id'],
|
||||
});
|
||||
});
|
||||
|
||||
it('Should call delete service on confirmDelete', async () => {
|
||||
// GIVEN
|
||||
subjectServiceStub.delete.mockResolvedValue({});
|
||||
|
||||
// WHEN
|
||||
comp.prepareRemove({ id: 123 });
|
||||
|
||||
comp.removeSubject();
|
||||
await comp.$nextTick(); // clear components
|
||||
|
||||
// THEN
|
||||
expect(subjectServiceStub.delete).toHaveBeenCalled();
|
||||
|
||||
// THEN
|
||||
await comp.$nextTick(); // handle component clear watch
|
||||
expect(subjectServiceStub.retrieve).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAlertService } from '@/shared/alert/alert.service';
|
||||
import { type ISubject } from '@/shared/model/subject.model';
|
||||
|
||||
import SubjectService from './subject.service';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Subject',
|
||||
setup() {
|
||||
const { t: t$ } = useI18n();
|
||||
const subjectService = inject('subjectService', () => new SubjectService());
|
||||
const alertService = inject('alertService', () => useAlertService(), true);
|
||||
|
||||
const itemsPerPage = ref(20);
|
||||
const queryCount: Ref<number> = ref(null);
|
||||
const page: Ref<number> = ref(1);
|
||||
const propOrder = ref('id');
|
||||
const reverse = ref(false);
|
||||
const totalItems = ref(0);
|
||||
|
||||
const subjects: Ref<ISubject[]> = ref([]);
|
||||
|
||||
const isFetching = ref(false);
|
||||
|
||||
const clear = () => {
|
||||
page.value = 1;
|
||||
};
|
||||
|
||||
const sort = (): Array<any> => {
|
||||
const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
|
||||
if (propOrder.value !== 'id') {
|
||||
result.push('id');
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const retrieveSubjects = async () => {
|
||||
isFetching.value = true;
|
||||
try {
|
||||
const paginationQuery = {
|
||||
page: page.value - 1,
|
||||
size: itemsPerPage.value,
|
||||
sort: sort(),
|
||||
};
|
||||
const res = await subjectService().retrieve(paginationQuery);
|
||||
totalItems.value = Number(res.headers['x-total-count']);
|
||||
queryCount.value = totalItems.value;
|
||||
subjects.value = res.data;
|
||||
} catch (err) {
|
||||
alertService.showHttpError(err.response);
|
||||
} finally {
|
||||
isFetching.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncList = () => {
|
||||
retrieveSubjects();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await retrieveSubjects();
|
||||
});
|
||||
|
||||
const removeId: Ref<number> = ref(null);
|
||||
const removeEntity = ref<any>(null);
|
||||
const prepareRemove = (instance: ISubject) => {
|
||||
removeId.value = instance.id;
|
||||
removeEntity.value.show();
|
||||
};
|
||||
const closeDialog = () => {
|
||||
removeEntity.value.hide();
|
||||
};
|
||||
const removeSubject = async () => {
|
||||
try {
|
||||
await subjectService().delete(removeId.value);
|
||||
const message = t$('questionBankApp.subject.deleted', { param: removeId.value }).toString();
|
||||
alertService.showInfo(message, { variant: 'danger' });
|
||||
removeId.value = null;
|
||||
retrieveSubjects();
|
||||
closeDialog();
|
||||
} catch (error) {
|
||||
alertService.showHttpError(error.response);
|
||||
}
|
||||
};
|
||||
|
||||
const changeOrder = (newOrder: string) => {
|
||||
if (propOrder.value === newOrder) {
|
||||
reverse.value = !reverse.value;
|
||||
} else {
|
||||
reverse.value = false;
|
||||
}
|
||||
propOrder.value = newOrder;
|
||||
};
|
||||
|
||||
// Whenever order changes, reset the pagination
|
||||
watch([propOrder, reverse], async () => {
|
||||
if (page.value === 1) {
|
||||
// first page, retrieve new data
|
||||
await retrieveSubjects();
|
||||
} else {
|
||||
// reset the pagination
|
||||
clear();
|
||||
}
|
||||
});
|
||||
|
||||
// Whenever page changes, switch to the new page.
|
||||
watch(page, async () => {
|
||||
await retrieveSubjects();
|
||||
});
|
||||
|
||||
return {
|
||||
subjects,
|
||||
handleSyncList,
|
||||
isFetching,
|
||||
retrieveSubjects,
|
||||
clear,
|
||||
removeId,
|
||||
removeEntity,
|
||||
prepareRemove,
|
||||
closeDialog,
|
||||
removeSubject,
|
||||
itemsPerPage,
|
||||
queryCount,
|
||||
page,
|
||||
propOrder,
|
||||
reverse,
|
||||
totalItems,
|
||||
changeOrder,
|
||||
t$,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import { Subject } from '@/shared/model/subject.model';
|
||||
|
||||
import SubjectService from './subject.service';
|
||||
|
||||
const error = {
|
||||
response: {
|
||||
status: null,
|
||||
data: {
|
||||
type: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const axiosStub = {
|
||||
get: vi.spyOn(axios, 'get'),
|
||||
post: vi.spyOn(axios, 'post'),
|
||||
put: vi.spyOn(axios, 'put'),
|
||||
patch: vi.spyOn(axios, 'patch'),
|
||||
delete: vi.spyOn(axios, 'delete'),
|
||||
};
|
||||
|
||||
describe('Service Tests', () => {
|
||||
describe('Subject Service', () => {
|
||||
let service: SubjectService;
|
||||
let elemDefault;
|
||||
|
||||
beforeEach(() => {
|
||||
service = new SubjectService();
|
||||
elemDefault = new Subject(123, 'AAAAAAA', 'AAAAAAA', false);
|
||||
});
|
||||
|
||||
describe('Service methods', () => {
|
||||
it('should find an element', async () => {
|
||||
const returnedFromService = { ...elemDefault };
|
||||
axiosStub.get.mockResolvedValue({ data: returnedFromService });
|
||||
|
||||
return service.find(123).then(res => {
|
||||
expect(res).toMatchObject(elemDefault);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not find an element', async () => {
|
||||
axiosStub.get.mockRejectedValue(error);
|
||||
return service
|
||||
.find(123)
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should create a Subject', async () => {
|
||||
const returnedFromService = { id: 123, ...elemDefault };
|
||||
const expected = { ...returnedFromService };
|
||||
|
||||
axiosStub.post.mockResolvedValue({ data: returnedFromService });
|
||||
return service.create({}).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not create a Subject', async () => {
|
||||
axiosStub.post.mockRejectedValue(error);
|
||||
|
||||
return service
|
||||
.create({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update a Subject', async () => {
|
||||
const returnedFromService = { name: 'BBBBBB', description: 'BBBBBB', active: true, ...elemDefault };
|
||||
|
||||
const expected = { ...returnedFromService };
|
||||
axiosStub.put.mockResolvedValue({ data: returnedFromService });
|
||||
|
||||
return service.update(expected).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not update a Subject', async () => {
|
||||
axiosStub.put.mockRejectedValue(error);
|
||||
|
||||
return service
|
||||
.update({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should partial update a Subject', async () => {
|
||||
const patchObject = { name: 'BBBBBB', ...new Subject() };
|
||||
const returnedFromService = Object.assign(patchObject, elemDefault);
|
||||
|
||||
const expected = { ...returnedFromService };
|
||||
axiosStub.patch.mockResolvedValue({ data: returnedFromService });
|
||||
|
||||
return service.partialUpdate(patchObject).then(res => {
|
||||
expect(res).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not partial update a Subject', async () => {
|
||||
axiosStub.patch.mockRejectedValue(error);
|
||||
|
||||
return service
|
||||
.partialUpdate({})
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should return a list of Subject', async () => {
|
||||
const returnedFromService = { name: 'BBBBBB', description: 'BBBBBB', active: true, ...elemDefault };
|
||||
const expected = { ...returnedFromService };
|
||||
axiosStub.get.mockResolvedValue([returnedFromService]);
|
||||
return service.retrieve({ sort: {}, page: 0, size: 10 }).then(res => {
|
||||
expect(res).toContainEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not return a list of Subject', async () => {
|
||||
axiosStub.get.mockRejectedValue(error);
|
||||
|
||||
return service
|
||||
.retrieve()
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should delete a Subject', async () => {
|
||||
axiosStub.delete.mockResolvedValue({ ok: true });
|
||||
return service.delete(123).then(res => {
|
||||
expect(res.ok).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not delete a Subject', async () => {
|
||||
axiosStub.delete.mockRejectedValue(error);
|
||||
|
||||
return service
|
||||
.delete(123)
|
||||
.then()
|
||||
.catch(err => {
|
||||
expect(err).toMatchObject(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import axios from 'axios';
|
||||
|
||||
import { type ISubject } from '@/shared/model/subject.model';
|
||||
import buildPaginationQueryOpts from '@/shared/sort/sorts';
|
||||
|
||||
const baseApiUrl = 'api/subjects';
|
||||
|
||||
export default class SubjectService {
|
||||
find(id: number): Promise<ISubject> {
|
||||
return new Promise<ISubject>((resolve, reject) => {
|
||||
axios
|
||||
.get(`${baseApiUrl}/${id}`)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
retrieve(paginationQuery?: any): Promise<any> {
|
||||
return new Promise<any>((resolve, reject) => {
|
||||
axios
|
||||
.get(`${baseApiUrl}?${buildPaginationQueryOpts(paginationQuery)}`)
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
delete(id: number): Promise<any> {
|
||||
return new Promise<any>((resolve, reject) => {
|
||||
axios
|
||||
.delete(`${baseApiUrl}/${id}`)
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
create(entity: ISubject): Promise<ISubject> {
|
||||
return new Promise<ISubject>((resolve, reject) => {
|
||||
axios
|
||||
.post(baseApiUrl, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
update(entity: ISubject): Promise<ISubject> {
|
||||
return new Promise<ISubject>((resolve, reject) => {
|
||||
axios
|
||||
.put(`${baseApiUrl}/${entity.id}`, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
partialUpdate(entity: ISubject): Promise<ISubject> {
|
||||
return new Promise<ISubject>((resolve, reject) => {
|
||||
axios
|
||||
.patch(`${baseApiUrl}/${entity.id}`, entity)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 id="page-heading" data-cy="SubjectHeading">
|
||||
<span id="subject">{{ t$('questionBankApp.subject.home.title') }}</span>
|
||||
<div class="d-flex justify-content-end">
|
||||
<button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
|
||||
<font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
|
||||
<span>{{ t$('questionBankApp.subject.home.refreshListLabel') }}</span>
|
||||
</button>
|
||||
<router-link :to="{ name: 'SubjectCreate' }" custom v-slot="{ navigate }">
|
||||
<button
|
||||
@click="navigate"
|
||||
id="jh-create-entity"
|
||||
data-cy="entityCreateButton"
|
||||
class="btn btn-primary jh-create-entity create-subject"
|
||||
>
|
||||
<font-awesome-icon icon="plus"></font-awesome-icon>
|
||||
<span>{{ t$('questionBankApp.subject.home.createLabel') }}</span>
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</h2>
|
||||
<br />
|
||||
<div class="alert alert-warning" v-if="!isFetching && subjects?.length === 0">
|
||||
<span>{{ t$('questionBankApp.subject.home.notFound') }}</span>
|
||||
</div>
|
||||
<div class="table-responsive" v-if="subjects?.length > 0">
|
||||
<table class="table table-striped" aria-describedby="subjects">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" @click="changeOrder('id')">
|
||||
<span>{{ t$('global.field.id') }}</span>
|
||||
<jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
|
||||
</th>
|
||||
<th scope="col" @click="changeOrder('name')">
|
||||
<span>{{ t$('questionBankApp.subject.name') }}</span>
|
||||
<jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'name'"></jhi-sort-indicator>
|
||||
</th>
|
||||
<th scope="col" @click="changeOrder('description')">
|
||||
<span>{{ t$('questionBankApp.subject.description') }}</span>
|
||||
<jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'description'"></jhi-sort-indicator>
|
||||
</th>
|
||||
<th scope="col" @click="changeOrder('active')">
|
||||
<span>{{ t$('questionBankApp.subject.active') }}</span>
|
||||
<jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'active'"></jhi-sort-indicator>
|
||||
</th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="subject in subjects" :key="subject.id" data-cy="entityTable">
|
||||
<td>
|
||||
<router-link :to="{ name: 'SubjectView', params: { subjectId: subject.id } }">{{ subject.id }}</router-link>
|
||||
</td>
|
||||
<td>{{ subject.name }}</td>
|
||||
<td>{{ subject.description }}</td>
|
||||
<td>{{ subject.active }}</td>
|
||||
<td class="text-end">
|
||||
<div class="btn-group">
|
||||
<router-link :to="{ name: 'SubjectView', params: { subjectId: subject.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">{{ t$('entity.action.view') }}</span>
|
||||
</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'SubjectEdit', params: { subjectId: subject.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">{{ t$('entity.action.edit') }}</span>
|
||||
</button>
|
||||
</router-link>
|
||||
<b-button @click="prepareRemove(subject)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
|
||||
<font-awesome-icon icon="times"></font-awesome-icon>
|
||||
<span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
|
||||
</b-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<b-modal ref="removeEntity" id="removeEntity">
|
||||
<template #title>
|
||||
<span id="questionBankApp.subject.delete.question" data-cy="subjectDeleteDialogHeading">{{ t$('entity.delete.title') }}</span>
|
||||
</template>
|
||||
<div class="modal-body">
|
||||
<p id="jhi-delete-subject-heading">{{ t$('questionBankApp.subject.delete.question', { id: removeId }) }}</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="jhi-confirm-delete-subject"
|
||||
data-cy="entityConfirmDeleteButton"
|
||||
@click="removeSubject"
|
||||
>
|
||||
{{ t$('entity.action.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</b-modal>
|
||||
<div v-show="subjects?.length > 0">
|
||||
<div class="d-flex justify-content-center">
|
||||
<jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./subject.component.ts"></script>
|
||||
Reference in new issue
Block a user