In this tutorial, let’s cover test cases for Accordion. This component is often used in support pages where FAQ’s are arranged These widgets work similar to tabs however, by default Accordion has hidden property till the mouse button is clicked on them.
In the last post, we covered the test cases for tabs, which were from the Jquery UI widget library. So if you want to learn more about the test cases of tabs before reading this post, go ahead and check it.
In order to see how the Accordion Widget works, I suggest going to Jquery UI demo page. After observing the widget you’ll realize that it shows the content that gets collapsed once we click on it. Also it has properties to hide the previously collapsed content and show only the current focused one. They can have property of either mouse click or mouse hover. I suggest takig a look at the Accordion widget to get the idea of how developers can implement the functionality.
Please take a look at the screenshot shown here. This is the accordion widget that we are going to test. If you don’t wish to test this accordion then I suggest finding a bit more complex accordion widget for your tests, so that you can get even more test cases from it.
Test cases for accordion
- Verify if the accordion opens the content of the section clicked.
- Verify if the accordion hides the content which is not clicked.
- Check if the accordion accepts the mouseclick action or mousehover.
- Check if the accordion has any auto-height property that adjusts the height of the section based on the text content inside.
- Check if the section is collapsed with mouse hover properly.
- Check if the sections are sort-able.
- Verify the width and height of the sections in the accordion.
- Verify if the expanding of the section does not break any other elements on the page.
- Verify if the expanding of the section is relevant to the mouse click or mouse hover.
- Verify if the expanding is focused and does not auto hide.
- Verify the default state of all the collapsed sections of the accordion widget.
- Check if this state of the accordion is as per the specification for the webpage.
- Check if the sections of the accordion are logically arranged as expected.
- Check if the sections toggle properly.
- Check if the behavior of the toggle is limited to the section and doesn’t interfere with the entire placing of the accordion.
- Check if the all the sections can be expanded and close back again.
- Check if the the accordion color is as per the specification.
These are some of the test cases that I can think of right now. I am sure you can come up with even more test cases. I suggest getting live example of the website and check the widget for the tests. You can also use the automated scripts to verify some of the test cases listed here. Feel free to add your own test cases here in the comments. Please do share this article to others on social media. I’d appreciate the feedback. 🙂