... ... @@ -3,26 +3,46 @@ import { GlButton, GlFormInput } from '@gitlab/ui';
import DeleteUserModal from ' ~/pages/admin/users/components/delete_user_modal.vue ' ;
import ModalStub from ' ./stubs/modal_stub ' ;
const TEST_DELETE_USER_URL = ' delete-url ' ;
const TEST_BLOCK_USER_URL = ' block-url ' ;
const TEST_CSRF = ' csrf ' ;
describe ( ' User Operation confirmation modal ' , () => {
let wrapper ;
let formSubmitSpy ;
const findButton = variant =>
wrapper
. findAll ( GlButton )
. filter ( w => w . attributes ( ' variant ' ) === variant )
. at ( 0 );
const findForm = () => wrapper . find ( ' form ' );
const findUsernameInput = () => wrapper . find ( GlFormInput );
const findPrimaryButton = () => findButton ( ' danger ' );
const findSecondaryButton = () => findButton ( ' warning ' );
const findAuthenticityToken = () => new FormData ( findForm (). element ). get ( ' authenticity_token ' );
const getUsername = () => findUsernameInput (). attributes ( ' value ' );
const getMethodParam = () => new FormData ( findForm (). element ). get ( ' _method ' );
const getFormAction = () => findForm (). attributes ( ' action ' );
const setUsername = username => {
findUsernameInput (). vm . $emit ( ' input ' , username );
};
const username = ' username ' ;
const badUsername = ' bad_username ' ;
const createComponent = ( props = {}) => {
wrapper = shallowMount ( DeleteUserModal , {
propsData : {
username ,
title : ' title ' ,
content : ' content ' ,
action : ' action ' ,
secondaryAction : ' secondaryAction ' ,
deleteUserUrl : ' delete-url ' ,
blockUserUrl : ' block-url ' ,
username : ' username ' ,
csrfToken : ' csrf ' ,
deleteUserUrl : TEST_DELETE_USER_URL ,
blockUserUrl : TEST_BLOCK_USER_URL ,
csrfToken : TEST_CSRF ,
... props ,
},
stubs : {
... ... @@ -32,6 +52,10 @@ describe('User Operation confirmation modal', () => {
});
};
beforeEach (() => {
formSubmitSpy = jest . spyOn ( HTMLFormElement . prototype , ' submit ' ). mockImplementation ();
});
afterEach (() => {
wrapper . destroy ();
wrapper = null ;
... ... @@ -42,44 +66,84 @@ describe('User Operation confirmation modal', () => {
expect ( wrapper . element ). toMatchSnapshot ();
});
it . each `
variant | prop | action
${ ' danger ' } | ${ ' deleteUserUrl ' } | ${ ' delete ' }
${ ' warning ' } | ${ ' blockUserUrl ' } | ${ ' block ' }
` ( ' closing modal with $variant button triggers $action ' , ({ variant , prop }) => {
createComponent ();
const form = wrapper . find ( ' form ' );
jest . spyOn ( form . element , ' submit ' ). mockReturnValue ();
const modalButton = findButton ( variant );
modalButton . vm . $emit ( ' click ' );
return wrapper . vm . $nextTick (). then (() => {
expect ( form . element . submit ). toHaveBeenCalled ();
expect ( form . element . action ). toContain ( wrapper . props ( prop ));
expect ( new FormData ( form . element ). get ( ' authenticity_token ' )). toEqual (
wrapper . props ( ' csrfToken ' ),
);
describe ( ' on created ' , () => {
beforeEach (() => {
createComponent ();
});
it ( ' has disabled buttons ' , () => {
expect ( findPrimaryButton (). attributes ( ' disabled ' )). toBeTruthy ();
expect ( findSecondaryButton (). attributes ( ' disabled ' )). toBeTruthy ();
});
});
it ( ' disables buttons by default ' , () => {
createComponent ();
const blockButton = findButton ( ' warning ' );
const deleteButton = findButton ( ' danger ' );
expect ( blockButton . attributes (). disabled ). toBeTruthy ();
expect ( deleteButton . attributes (). disabled ). toBeTruthy ();
describe ( ' with incorrect username ' , () => {
beforeEach (() => {
createComponent ();
setUsername ( badUsername );
return wrapper . vm . $nextTick ();
});
it ( ' shows incorrect username ' , () => {
expect ( getUsername ()). toEqual ( badUsername );
});
it ( ' has disabled buttons ' , () => {
expect ( findPrimaryButton (). attributes ( ' disabled ' )). toBeTruthy ();
expect ( findSecondaryButton (). attributes ( ' disabled ' )). toBeTruthy ();
});
});
it ( ' enables button when username is typed ' , () => {
createComponent ({
username : ' some-username ' ,
describe ( ' with correct username ' , () => {
beforeEach (() => {
createComponent ();
setUsername ( username );
return wrapper . vm . $nextTick ();
});
it ( ' shows correct username ' , () => {
expect ( getUsername ()). toEqual ( username );
});
it ( ' has enabled buttons ' , () => {
expect ( findPrimaryButton (). attributes ( ' disabled ' )). toBeFalsy ();
expect ( findSecondaryButton (). attributes ( ' disabled ' )). toBeFalsy ();
});
wrapper . find ( GlFormInput ). vm . $emit ( ' input ' , ' some-username ' );
const blockButton = findButton ( ' warning ' );
const deleteButton = findButton ( ' danger ' );
return wrapper . vm . $nextTick (). then (() => {
expect ( blockButton . attributes (). disabled ). toBeFalsy ();
expect ( deleteButton . attributes (). disabled ). toBeFalsy ();
describe ( ' when primary action is submitted ' , () => {
beforeEach (() => {
findPrimaryButton (). vm . $emit ( ' click ' );
return wrapper . vm . $nextTick ();
});
it ( ' clears the input ' , () => {
expect ( getUsername ()). toEqual ( '' );
});
it ( ' has correct form attributes and calls submit ' , () => {
expect ( getFormAction ()). toBe ( TEST_DELETE_USER_URL );
expect ( getMethodParam ()). toBe ( ' delete ' );
expect ( findAuthenticityToken ()). toBe ( TEST_CSRF );
expect ( formSubmitSpy ). toHaveBeenCalled ();
});
});
describe ( ' when secondary action is submitted ' , () => {
beforeEach (() => {
findSecondaryButton (). vm . $emit ( ' click ' );
return wrapper . vm . $nextTick ();
});
it ( ' has correct form attributes and calls submit ' , () => {
expect ( getFormAction ()). toBe ( TEST_BLOCK_USER_URL );
expect ( getMethodParam ()). toBe ( ' put ' );
expect ( findAuthenticityToken ()). toBe ( TEST_CSRF );
expect ( formSubmitSpy ). toHaveBeenCalled ();
});
});
});
});