[go: nahoru, domu]
Skip to content

Commit

Permalink
ui: ui: create unique component only for private key editing
Browse files Browse the repository at this point in the history 
Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
  • Loading branch information
@leonardojoao @otavio
leonardojoao authored and otavio committed Feb 22, 2022
1 parent 9d59e4b commit 256ab3f
Show file tree
Hide file tree
Showing 4 changed files with 369 additions and 6 deletions.
181 changes: 181 additions & 0 deletions ui/src/components/private_key/PrivateKeyFormDialogEdit.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<template>
<fragment>
<v-list-item-icon class="mr-0">
<v-icon
left
data-test="edit-icon"
v-text="'edit'"
/>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title
class="text-left"
data-test="edit-title"
v-text="'Edit'"
/>
</v-list-item-content>

<v-dialog
v-model="showDialog"
max-width="400"
@click:outside="close"
>
<v-card data-test="privateKeyFormDialog-card">
<v-card-title
class="headline primary"
data-test="text-title"
v-text="'Edit Private Key'"
/>

<ValidationObserver
ref="obs"
v-slot="{ passes }"
>
<v-card-text>
<ValidationProvider
v-slot="{ errors }"
ref="providerName"
vid="name"
name="Name"
rules="required"
>
<v-text-field
v-model="privateKey.name"
label="Name"
:error-messages="errors"
required
data-test="name-field"
/>
</ValidationProvider>

<ValidationProvider
v-slot="{ errors }"
ref="providerData"
vid="key"
name="Data"
:rules="'required|parseKey:private'"
:disabled="true"
>
<v-textarea
v-model="privateKey.data"
label="Data"
:error-messages="errors"
required
:messages="supportedKeys"
:disabled="true"
data-test="data-field"
/>
</ValidationProvider>
</v-card-text>

<v-card-actions>
<v-spacer />

<v-btn
text
data-test="cancel-btn"
@click="close"
v-text="'Cancel'"
/>

<v-btn
text
data-test="edit-btn"
@click="passes(edit)"
v-text="'Edit'"
/>
</v-card-actions>
</ValidationObserver>
</v-card>
</v-dialog>
</fragment>
</template>

<script>
import {
ValidationObserver,
ValidationProvider,
} from 'vee-validate';
export default {
name: 'PublicKeyFormDialogAdd',
components: {
ValidationProvider,
ValidationObserver,
},
props: {
keyObject: {
type: Object,
required: true,
default: Object,
},
show: {
type: Boolean,
required: true,
},
},
data() {
return {
privateKey: {
name: '',
data: '',
},
supportedKeys: 'Supports RSA, DSA, ECDSA (nistp-*) and ED25519 key types, in PEM (PKCS#1, PKCS#8) and OpenSSH formats.',
};
},
computed: {
showDialog: {
get() {
return this.show;
},
set(value) {
this.$emit('update:show', value);
},
},
},
async updated() {
await this.setLocalVariable();
},
methods: {
setLocalVariable() {
this.privateKey = { ...this.keyObject };
},
async edit() {
try {
await this.$store.dispatch('privatekeys/edit', this.privateKey);
this.$store.dispatch('snackbar/showSnackbarSuccessNotRequest', this.$success.privateKeyEditing);
this.update();
} catch (error) {
if (error.message === 'name') {
this.$refs.obs.setErrors({
name: ['The name already exists'],
});
} else {
this.$store.dispatch('snackbar/showSnackbarErrorNotRequest', this.$errors.snackbar.privateKeyEditing);
}
}
},
update() {
this.$emit('update');
this.close();
},
close() {
this.$emit('update:show', false);
this.$refs.obs.reset();
},
},
};
</script>
10 changes: 4 additions & 6 deletions ui/src/components/setting/SettingPrivateKeys.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,10 @@
<v-list-item
@click="showPrivateKeyFormDialog(getListPrivateKeys.indexOf(item))"
>
<PrivateKeyFormDialog
<PrivateKeyFormDialogEdit
:key-object="item"
:create-key="false"
action="private"
:show.sync="privateKeyFormDialogShow[getListPrivateKeys.indexOf(item)]"
data-test="privateKeyFormDialogSecond-component"
data-test="privateKeyFormDialogEdit-component"
/>
</v-list-item>

Expand Down Expand Up @@ -131,7 +129,7 @@
<script>
import PrivateKeyFormDialogAdd from '@/components/private_key/PrivateKeyFormDialogAdd';
import PrivateKeyFormDialog from '@/components/public_key/KeyFormDialog';
import PrivateKeyFormDialogEdit from '@/components/private_key/PrivateKeyFormDialogEdit';
import PrivateKeyDelete from '@/components/private_key/PrivateKeyDelete';
import { parsePrivateKey } from '@/sshpk';
Expand All @@ -141,7 +139,7 @@ export default {
components: {
PrivateKeyFormDialogAdd,
PrivateKeyFormDialog,
PrivateKeyFormDialogEdit,
PrivateKeyDelete,
},
Expand Down
161 changes: 161 additions & 0 deletions ui/tests/unit/components/private_key/PrivateKeyFormDialogEdit.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import { ValidationProvider, ValidationObserver } from 'vee-validate';
import flushPromises from 'flush-promises';
import Vuetify from 'vuetify';
import PrivateKeyFormDialogEdit from '@/components/private_key/PrivateKeyFormDialogEdit';
import '@/vee-validate';

describe('PrivateKeyFormDialogEdit', () => {
const localVue = createLocalVue();
const vuetify = new Vuetify();
localVue.use(Vuex);
localVue.component('ValidationProvider', ValidationProvider);
localVue.component('ValidationObserver', ValidationObserver);

document.body.setAttribute('data-app', true);

let wrapper;

const keyObject = {
name: 'ShellHub',
data: '',
};

const privateKey = {
name: '',
data: '',
};

const tests = [
{
description: 'Dialog closed',
props: {
keyObject,
show: false,
},
data: {
privateKey,
supportedKeys: 'Supports RSA, DSA, ECDSA (nistp-*) and ED25519 key types, in PEM (PKCS#1, PKCS#8) and OpenSSH formats.',
},
template: {
'edit-icon': true,
'edit-title': true,
'privateKeyFormDialog-card': false,
},
templateText: {
'edit-title': 'Edit',
},
},
{
description: 'Dialog opened',
props: {
keyObject,
show: true,
},
data: {
privateKey,
supportedKeys: 'Supports RSA, DSA, ECDSA (nistp-*) and ED25519 key types, in PEM (PKCS#1, PKCS#8) and OpenSSH formats.',
},
template: {
'edit-icon': true,
'edit-title': true,
'privateKeyFormDialog-card': true,
'text-title': true,
'name-field': true,
'data-field': true,
'cancel-btn': true,
'edit-btn': true,
},
templateText: {
'edit-title': 'Edit',
'cancel-btn': 'Cancel',
'edit-btn': 'Edit',
},
},
];

const storeVuex = () => new Vuex.Store({
namespaced: true,
state: { },
getters: { },
actions: {
'privatekeys/set': () => {},
'snackbar/showSnackbarSuccessNotRequest': () => {},
'snackbar/showSnackbarErrorNotRequest': () => {},
},
});

tests.forEach((test) => {
describe(`${test.description}`, () => {
beforeEach(() => {
wrapper = mount(PrivateKeyFormDialogEdit, {
store: storeVuex(),
localVue,
stubs: ['fragment'],
propsData: {
keyObject: test.props.keyObject,
show: test.props.show,
},
vuetify,
});
});

///////
// Component Rendering
//////

it('Is a Vue instance', () => {
expect(wrapper).toBeTruthy();
});
it('Renders the component', () => {
expect(wrapper.html()).toMatchSnapshot();
});

///////
// Data checking
//////

it('Receive data in props', () => {
Object.keys(test.props).forEach((item) => {
expect(wrapper.vm[item]).toEqual(test.props[item]);
});
});
it('Compare data with default value', () => {
Object.keys(test.data).forEach((item) => {
expect(wrapper.vm[item]).toEqual(test.data[item]);
});
});

//////
// HTML validation
//////

it('Renders the template with data', () => {
Object.keys(test.template).forEach((item) => {
expect(wrapper.find(`[data-test="${item}"]`).exists()).toBe(test.template[item]);
});
});
it('Renders template with expected text', () => {
Object.keys(test.templateText).forEach((item) => {
expect(wrapper.find(`[data-test="${item}"]`).text()).toContain(test.templateText[item]);
});
});
if (test.props.show) {
it('Show validation messages', async () => {
//////
// In this case, the empty fields are validated.
//////

wrapper.setData({ privateKey: { name: '' } });
await flushPromises();

const validatorName = wrapper.vm.$refs.providerName;

await validatorName.validate();
expect(validatorName.errors[0]).toBe('This field is required');
});
}
});
});
});
Loading

0 comments on commit 256ab3f

Please sign in to comment.