Unit Test: React-Bootstrap Modal

Writing unit test always help in longer run. Now a days almost all frameworks and libraries are supporting unit testing. In React Bootstrap, there is documentation for using the unit test cases but still writing unit test cases for React-Bootstrap Modal can get confusing.

After spending hours on it finally I am able to write test cases for it. These code snippets can be used for other React-Bootstrap components as well (by changing the corresponding names).

Modal Source code:

 import React from 'react';  
 import Container from 'react-bootstrap/Container';  
 import './uv-modal.css';  

 function UVModal(props) {  

  return (  
   <Modal {...props}  
       aria-labelledby="contained-modal-title-vcenter">  

    <Modal.Header closeButton>  
     <Modal.Title id="contained-modal-title-vcenter">  
      Modal Title  
     </Modal.Title>  
    </Modal.Header>  

    <Modal.Body>  
     <Container>  
      Modal Body Contents  
     </Container>  
    </Modal.Body>  

    <Modal.Footer>  
     <Button onClick={props.onHide}>Close</Button>  
    </Modal.Footer>  
   </Modal>  
  );  
 }  
 export default UVModal;

Modal Test cases:

 import React from 'react';  
 import { mount } from 'enzyme';  
 import Modal from 'react-bootstrap/Modal';  
 import UVModal from './UVModal';  

 let modalShow = true;  
 let componentToTest = {  
  title: 'UVModal: ',  
  html: <UVModal show={modalShow}/>  
 };  

 let wrapper = mount(componentToTest.html),  
   elementToSearch;  

 it(componentToTest.title + 'renders without crashing', () => {  
  mount(componentToTest.html);  
 });
  
 it(componentToTest.title + 'renders Modal component', () => {  
  expect(wrapper.find(UVModal).length).toEqual(1);  
 });
  
 it(componentToTest.title + 'renders major html elements', () => {  
  // Test whether modal-content element has 3 html children elements.  
  expect(wrapper.find('.modal-content').length).toEqual(1);  
  expect(wrapper.find('.modal-content').children()).toHaveLength(3);  

  // Test whether modal-header element has 2 html children elements.  
  expect(wrapper.find('.modal-header').length).toEqual(1);  
  expect(wrapper.find('.modal-header').children()).toHaveLength(2);  

  // Test whether modal-body element has 1 html child element.  
  expect(wrapper.find('.modal-body').length).toEqual(1);  
  expect(wrapper.find('.modal-body').children()).toHaveLength(1);  

  // Test whether modal-footer element has 1 html child element.  
  expect(wrapper.find('.modal-footer').length).toEqual(1);  
  expect(wrapper.find('.modal-footer').children()).toHaveLength(1);  

  elementToSearch = <p>Lannisters always pay their debt</p>;  
  expect(wrapper.contains(elementToSearch)).toEqual(false);  
 });


Packages used:

 "react": "^16.9.0",  
 "react-bootstrap": "^1.0.0-beta.9",  
 "react-dom": "^16.9.0",  
 "enzyme": "^3.10.0",  
 "enzyme-adapter-react-16": "^1.14.0",
Happy Unit Testing.


Comments

Post a Comment

Popular posts from this blog

Cheat Sheet - Git

While working with Git, generally there three sources, Git Official Docs , Bitbucket Docs   or Google. Even though we refer these resources, it consumes lot of time to get what we want i.e. right syntax and example. To avoid doing this every time I have enlisted few of them as cheat sheet which can be used whenever required. Initialize git repo $ git init Set User Name and Email Id $ git config --global user.name "<user_name>" $ git config --global user.email "<user_email_id>" List Global Settings $ git config --global --list Push all changed files $ git add . $ git commit –m "<commit_message>" $ git push origin <remote_branch_name> Push a specific commit $ git push origin <commit_SHA_id>:master Stash the changes. $ git stash save "<stash_message>" Get list of stash. $ git stash list Pop last stash $ git stash pop Pop a particular stash. ( Recommended )               Use ...
Read more

Stack implementation using VanillaJS

Stack is a very popular data structure. It is present as library classes/interfaces in many object oriented language like Java, C#. In JavaScript there is no stack data structure by default but we can create one. I have written following code which can be used to utilize Stack features in JavaScript development. import UVModal from './UVModal'; var Stack = function(){   var items = [];   /**    * @description Pushes an item onto the top of this stack.    * @param {any} item - the item to be pushed onto this stack.    */   function push(item) {     items.push(item);   }   /**    * @description Removes the object at the top of this stack and returns that object    * @return {any} - The object at the top of this stack    */   function pop() {     return items.pop();...
Read more

JavaScript Best Practices

Getting things done is good but getting things done in better way is what matters most. Everyone wants to make their website/application to be faster, lighter. No one likes slow website/application. In order to make website/application we have to set some best practices standards and every teammate should follow that. I have written down few of the best practices which I recommend to be followed in any JavaScript development. Use === Instead of == Eval = Evil Don't use short-hand                      Bad Recommended if(condition) x = false; if(condition){ x = false; } Place scripts at the bottom of your page. The fastest way to build a HTML list. var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>'+arr.join('</li><li>')+'</li></ul>'; Reduce global variables and methods. Add comme...
Read more