UI testing is divided into two part. First expect and action, expect mean to look for the described output, if the desired expectations are not met then the ui testing is failed for the block in which expect is called. action refers to the interactions that user needs to do on the 3Dmol ui to reach the desired expectations. Inability of performing the described action means the ui testing has failed for the block in which action is called.
expect : The following ui must be present at the top of the viewer on call of viewer.ui.initiateUI() where viewer is created by using 3Dmol.createViewer function call.
action : click on submit button (green circular button with tick icon)
expect : Follwing change must be observed
action Change select to pdb and enter text 6zzmin the input text area and press enter or submit button.
expect Follwoing change in the title bar must be observed and UI must load a line figure of the whole model
action : repeat the action mentioned above but change input fields as per the following table
expect images in the third column must be expected
| Drop down list value | Text input value | Desired Output |
|---|---|---|
| mmtf | 4hhb |  |
| cid | 2244 |  |
action : Click on the button with molecule as a symbol
expect : Title bar hidden
action : Click on the button with molecule as a symbol
expect : Title bar shown
action : Load molecule 6zzm using model toolbar as shown in Test 1
expect : Molecule loaded and line structure is shown in the viewport
action : Click on button with hand
expect : Plus button below it will be shown
action : Click on plus button
expect : New selection card will be added
action : Click on plus button
expect : Warning to complete the form should be shown
action : Click on plus button
expect : New selection card will be added
action : Check Select All atom
expect : All other option becomes invisible
action : Click on submit button
expect : A new selection similar to follwoing image will be created with different id
action : Click on plus btton
expect : New selection card will be created
action : Check elem option
expect : Input field wll be visible
action : Enter NotAtom as input
action : click submit button
expect : Error No atom selected
action : Enter C as input and press submit
expect : New selection created with id
action : Click on plus button
expect : New selection card will be created
action : Check resi and input range separated by comma 431-500,550-600
action : Click on submit
expect : New Card will be created
action : Click on plus button
expect : New selection card will be created
action : Check hetflag and click submit
expect : New Card will be created
action : Click on plus button
expect : New selection card will be created
action : Check hetflag, Check elem and enter C in the input field and click submit
expect : New Card will be created
action : Click on plus button
expect : New selection card will be created
action : Check chain and enter A in the input field and click submit
expect : New Card will be created
action : Click on plus button
expect : New selection card will be created
action : Check chain and enter B in the input field and click submit
expect : New Card will be created
action : Click on plus atom in the selection card generated from Test 3.2
action : Check line and press submit
expect : Viewport has all the atoms drawn as line structure
action : Click on plus atom in the selection card generated from Test 3.5
action : Check cross
action : Check colorscheme and select ssPyMol from the dropdown list
expect : Viewport has hetero atom drawn as cross structure
action : Click on plus atom in the selection card generated from Test 3.7
action : Check stick
action : Check colorscheme and select orangeCarbonfrom the dropdown list
action : Check singleBonds
expect : Viewport has chain A atom drawn as stick structure
action : Click on plus atom in the selection card generated from Test 3.6
action : Check sphere
action : Check color and select any color with red shade from the color menu
action : Check radius and enter 0.4 and press submit
expect : Viewport has hetero carbon atom drawn as red sphere structure
action : Click on plus atom in the selection card generated from Test 3.7
action : Check cartoon
action : Check color and check spectrum
expect : Viewport has chain A atom drawn as cartoon with spectrum colors.
action : Click on plus atom in the selection card generated from Test 3.8
action : Check cartoon
action : Check color and select any color of your choice
expect : Viewport has chain B atom drawn as cartoon with selected color
action : Click on surface button
expect : plus button shown
action : Click on plus button
expect : Surface card created
action : Click on plus button
expect : Warning shown to complete the first card
action : Click submit button
expect : VDW type surface added for all the atom and surface card with id created
action : Click on the - symbol on the surface to remove this surface
expect : Surface created will be removed
action : Click on plus button
expect : Surface card created
action : Select opacity to some other value than 1
action : Click submit button
expect : VDW type surface added for all the atom and surface card with id created
action : click on plus button
expect : Surface card created
action : Select opacity to around 0.6
action : Check color and set color to some shade of light blue
action : Select self in surface atoms
action : Select id created by Test 3.5 in show atom
action : Click submit option
expect : VDW surface will be created around hetero carbon atoms
action : Click on spheres created by test 4.4 and add atom labels by clicking submit button
expect : Error message in the context menu
action : Click outside to hide the context menu
action : Click on any atom which can be clicked on the screen
expect : Context menu opened
action : select property x, y, z and click submit button
expect : Label added at the atom location with x, y, z shown in the atom label
action : Click on atom with the label
expect : Context menu opened with remove atom label option
action : Click on Remove Label option
expect : Context menu hidden and label removed from the atom
action : Right click on any place in the viewport
expect : Context Menu shows up
action : Click Add Label
action : Input Label Text: Hetero Atom
action : Set Label Style : Purple
action : Set selection generated by Test 3.6
action : Click submit button
expect : A label added at the centroid of the atoms selected by selection of Test 3.6
action : click on the button with pencil in the style card
expect : parameters for the style are shown
action : Change the style value of any of the previously created style and click submit
expect : The changes will be reflected in the view port
action : Change the selection value of any of the previously created selection and click submit in the similar way
expect : The changes will be reflected in the view port in the styles drawn using that selection (no change on the previously generated surfaces)
action : Click on the eye button show on any of the selection
expect : Objects drawn through that selection will be hidden
action : Click on the eye button shown on the selection
expect : Selection shown again
action : Repeat the same for any style in the selection
expect : Similar behaviour as shown above expect the ui should now only toggle a particular style
action : Click on - button in the style card
expect : Style card and drawing will be removed
action : Click - button on the selection card
expect : Selection card will be removed
action : Click the pencil icon on the surface card
expect : Parameters of the surface are shown
action : Change the surface parameters to some other acceptable parameters and click submit
except : New surface generated determined by the changed specification
action : Click on - button on the cards on the display
expect : On clicking - card the figures generated by that card will be removed
-
When the window is resized its overflow is updated but if the size of the window goes below 400 px then overflow padding that is coded in the lib does not work. For mobile devices the UI needs a redesign but works fine on the bigger screen
-
The tests for data uri loading are saved in 3dmol-ui.html but are commented out, to use those tests uncomment the divs and compare the images for those divs