Skip to content

Viewer regression tests (deprecated)

Jump to bottom
Aref Shafaei edited this page Dec 10, 2022 · 1 revision

Prerequisites

Before testing the viewer, you might need to setup on the rbk-dev server the tests environment.

It consists of doing some database updates as well as some file modifications.

You can do them manually as described below by:

  • running some SQL commands
  • removing some lines from the ImageProperties.xml files.

Alternatively, you can doing automatically by running as user root the script located at https://github.com/informatics-isi-edu/rbk-project/blob/master/config-scripts/tests/viewer_tests_setenv.sh .

Some images are not visible to anonymous users. Make sure you've logged in before running the test cases.

Testing a branch

The URLs in the document are written based on the default location of chaise (/chaise/) and openseadragon-viewer (/openseadragon-viewer/). If you're testing a branch of Chaise or openseadragon-viewer (osd-viewer) that is not already merged with master, you MUST modify the listed URLs to ensure testing the correct versions.

Based on the current implementation of Chaise and rbk/gudmap annotations, the osd-viewer iframe links are always pointing to /chaise/. So if you want to test a customized Chaise/osd-viewer location, you have to use the direct link to viewer app which can be found by clicking on the "full screen" link (or looking at the browser's Network tab.) To make the process of testing easier, wherever possible we've provided both record and viewer links.

Test Cases

Navbar

By default, Chaise will not display navbar for chaise apps that are included in an iframe. To override this behavior, hideNavbar query parameter can be used. For more information about this please refer to Chaise documentation. In the following tests, based on the existence of query parameter, make sure the navbar is properly displayed or is hidden.

Zoom and pan

The app should support zoom in and out according to the button clicks and mouse clicks: (a) Zoom in should happen on mouse right-click. (b) Zoom out should happen on shift + mouse right-click. (c) Zoom In/ Zoom out should happen on the respective toolbar buttons.

  1. dzi
  2. iiif
  3. jpg

Thumbnail

Thumbnail is a miniature of the image and it appears usually in the upper right corner.

  1. dzi:

  2. iiif

  3. jpg:

Scale bar

If the scale information is available, the app should display the scale at the lower right corner. The scale should auto-adjust to different zoom levels. If there is no scale information, the app should show no scale on the image.

The noted expected scale information is based on the completely zoomed-out image.

Here are the use cases of default and scale information from different sources:

no scale information from xml metadata file or URL parameter (no scale bar shown) :

  1. dzi: (THIS TEST NEEDS TO BE UPDATED since the scale value exists in the database)

    Before testing, check that the following files don't have the meterScaleInPixels= line:

    /var/www/html/data/Gene_Expression/2018/4c5242902012928a469ef60c03f6170b/AF555/ImageProperties.xml
/var/www/html/data/Gene_Expression/2018/4c5242902012928a469ef60c03f6170b/AF480/ImageProperties.xml
/var/www/html/data/Gene_Expression/2018/4c5242902012928a469ef60c03f6170b/DAPI/ImageProperties.xml

  2. iiif:

  3. jpg:

    Before testing, check the value of Pixels_Per_Meter:

    select "Pixels_Per_Meter" from "Gene_Expression"."Image" where "RID" = '16-2GN8';

    If it is not null (originally it is 3624000), set it to null:

    update "Gene_Expression"."Image" set "Pixels_Per_Meter" = null where "RID" = '16-2GN8';
update "Gene_Expression"."Image" set uri = '/openseadragon-viewer/mview.html? 
url=/hatrac/resources/gene_expression/2017/RBKUSC20170405EXP27/RBKUSC20170405EXP27- 
1.jpg&channelName=DAPI&aliasName=DAPI&url=/hatrac/resources/gene_expression/2017/RBKUSC20170405EXP27/RBKUSC20170405EXP27- 
2.jpg&channelName=combo&aliasName=GATA3' where "RID" = '16-2GN8';

With the PixelPerMeters as a URL parameter.

  1. dzi: (no scale metadata in xml) (the scale bar will show 50 µm) (THIS TEST NEEDS TO BE UPDATED since the scale value exists in the database so the query param value should be different)

    Before testing, check the value of Pixels_Per_Meter:

    select "Pixels_Per_Meter" from "Gene_Expression"."Image" where "RID" = '14-47ZM';

    If it is not 70238000 (originally it is 3511900), set it to 70238000:

    update "Gene_Expression"."Image" set "Pixels_Per_Meter" = 70238000 where "RID" = '14-47ZM';

  2. iiif: (the scale bar will show 200 µm)

  3. jpg (the scale bar will show 20 µm):

With PixelPerMeters metadata from the xml file generated from dzi processing (dzi only)

  1. dzi: (the scale bar will show 2 mm)

With both PixelPerMeters as a URL parameter and metadata from xml (dzi only).

This URL parameter overrides any other sources. Note: We should use a different value for the URL parameter e.g. use 100,000 instead of 1,000,000 so that the scale label on the scale is different. Need to modify the record for testing. In the ImageProperties.xml file the value is 3082824.615385 (on rbk-www it shows 1 mm), but the Pixels_Per_Meter value in the database is 35119000, so the scalebar will show 100 µm.

  1. dzi: (the scale bar will show 100 µm)

    Before testing, do the following update in the database:

    update "Gene_Expression"."Image" set "Pixels_Per_Meter" = 35119000 where "RID" = '14-47ZA';

Screenshot

The app should allow taking a screenshot of the existing zoom and pan. Once engaged, users should be prompted to download an image file. What shown on the screen is what's seen on the image.

  • The image file should contain attribution (e.g. www.gudmap.org) if exists at the lower left corner and a scale bar at the lower right corner. The attribution should locate within the actual image boundary instead of a fixed position on the canvas.
  • The image file should contain the scale information (if applicable)
  • The image file should contain the visible annotations with correct positioning (if applicable)
  • The image file should contain the channel names with correct colors (only in multi-channel images and if it's not hidden by user)

When testing for screenshots, if you are using a 2nd screen (i.e. an external monitor) you should test this feature on both your primary screen and the 2nd screen. This is to make sure that the screenshot works with screens of different pixelRatio.

Here are different test cases:

with attribution---in the middle of the image: The screenshot is fully displayed and the attribution should be at the lower left corner.

  1. dzi:

  2. iiif:

  3. jpg:

with attribution---zoom all out and move the image to occupy the upper right quarter of the canvas: the position of the attribution should be with the image (toward the center area).

  1. dzi:

  2. iiif:

  3. jpg:

without attribution: no text shown on the lower left corner. This case can not be tested from the record page as the attribution is provided by the Consortium column which has the constraint not null.

  1. dzi: https://dev.gudmap.org/chaise/viewer/#2/Gene_Expression:Image/id=14-482P?waterMark=null

  2. iiif: https://dev.gudmap.org/chaise/viewer/#2/Gene_Expression:Image/id=16-ZHTP?meterScaleInPixels=4554686&waterMark=null

  3. jpg: https://dev.gudmap.org/chaise/viewer/#2/Gene_Expression:Image/id=16-2GYG?meterScaleInPixels=4158000&waterMark=null

with scale bar---in the middle of the image: The screenshot is fully displayed and the scale should be at the lower right corner.

  1. dzi:

  2. iiif (annotations must be visible):

  3. jpg:

with scale bar---zoom all out and move the image to occupy the upper left quarter of the canvas: the position of the scale should be with the image (toward the center area).

  1. dzi:

  2. iiif:

  3. jpg:

without scale bar: no scale shown

(THIS TEST NEEDS TO BE UPDATED since the scale value exists in the database)

  1. dzi:

  2. iiif:

  3. jpg:

Channels

  • There should be a control to turn on and off different channels.
  • By default, all channels are turned on (e.g. displaying the average pixel value).
  • Users should be able to toggle on and off different channels.
  • The contrast, gamma and intensity range of the channel should update when changed.
  • In multi-channel views the channel names should be visible by default and user should be able to toggle them.

  1. dzi:

  2. iiif:

  3. jpg:

  4. When there is no channel information, a default channel should be displayed:

Annotations

  1. The annotation button should be disabled in the following cases:
    • The user doesn't have the required create ACL and the image doesn't have any annotations (find an image without any annotation and make sure you're not logged in.)

For the following test cases (image with annotations), use the following links:

Proper control from term UI (left pane) to images/links

  1. Highlight button: clicking highlight should emphasize the corresponding overlay on the image. Clicking Un-highlight should de-emphasize the corresponding overlay.
  • Under all Display = None situation, when users click the highlight button of an item, the annotation should be shown on the openseadragon-viewer and the item should be emphasized and the eye icon should not be crossed out
  1. Show/Hide button: toggle to the show mode should show the overlay on the image. Toggle to the hide mode should hide the overlay on the image.
  • Under all Display = All situation, when users click the hide button of an item, the annotation should disappear on the openseadragon-viewer and the item should remain emphasized and the eye icon should be crossed out
  1. The term ID should link to the corresponding Term record page. The title on the record page should have the same name as what's shown in the term UI. For example, clicking "ureteric trunk" should direct to this URL

Proper control from overlays to term UI (left pane)

  1. Hover over the overlay should show tooltip
  2. Clicking on the overlay should autoscroll and highlight the term UI element on the left

Searchbox behaviour

  1. Proper display of the search box. The version on staging has broken search button.

  2. Clear term: Clicking an x should clear the term in the searchbox.

  3. Typing a keyword should only show term UI that contains the keyword

Display all/none of annotations

  1. Clicking display All, show all annotation overlays. The eye icon of each item on the list should all not to be crossed out.
  2. Clicking display None, shows no overlay. The eye icon of each item on the list should all change to be crossed out.

thickness control

  1. changing the thickness control should change the thickness of the overlays in the image
  2. As the image is zoom-out (less detail), the thickness should automatically get thicker

Create annotation

  1. Clicking on the new button in the annotation panel should open the create form. Users should be able to change annotation thickness in this mode too.
  2. Submitting the form without adding the required fields should show a proper error message.
  3. Users should not be able to choose anatomies that already have an annotation on the image.
  4. The form should be displayed in "draw mode" and users should be able to switch to the other mode.
  5. In "draw mode",
    • users should be able to draw a contour using free-form line, rectangle, and circle.
    • changing the color should change the color of all the drawings in this annotation.
    • users should be able to erase a drawing.
  6. Users should be able to click on "Back" button to undo all the changes.
  7. Submitting the form should show a "loading" message. After a successful action, the form should disappear and users should be able to see the newly created annotation in the form.

Edit annotation

  1. Going to a page with svg annotations in the URL should not offer "edit" button. Use the following link to test this:

  2. Users should be able to click on "edit" on any of the annotations. The displayed edit form should be properly populated and users should be able to change annotation thickness in this mode too.

  3. Submitting the form without adding the required fields should show a proper error message.

  4. Users should not be able to choose anatomies that already have an annotation on the image.

  5. The form should be displayed in "draw mode" and users should be able to switch to the other mode.

  6. In "draw mode",

    • users should be able to draw a contour using free-form line, rectangle, and circle.
    • changing the color should change the color of all the drawings in this annotation.
    • users should be able to erase a drawing.

  7. Users should be able to click on "Back" button to undo all the changes.

  • Change the annotation color and ensure going "back" changes back to the original color.
  • Add new drawings and make sure the shapes are removed after going back.
  • Erase drawings and make sure the shapes are drawn again after going back.
  1. Submitting the form should show a "loading" message. After a successful action, the form should disappear and users should be able to see the updated annotation in the form.

delete annotation

  1. Click on the "edit" button of any annotations.
  2. "delete" button should be present at the bottom of the form and clicking on it should remove the annotation from the form.

SVG limitation handling

  1. The svg should be displayed properly even if the style tag contains white spaces:

  2. The application should handle group level styling properly, i.e., style of parent should be cascaded to the child node:

  3. The application should properly assign an ID to each node while parsing the SVG. The cases include:

    • The node has an ID
    • The node has a name
    • The nodes parent has an ID
    • None of the above

    All these cases are implemented in one file:

  4. The application should work for the below mentioned variations of the viewBox of SVG:

Multi-z support

  1. Z-plane list should not be visible for images with single z-index:

For the following test cases (multi-z image), use the following link:

  1. Opening a viewer app for a multi-z image,
  • the z-index of main image must be visible (81).
  • number of available z-plane images must be visible (164).
  • only annotations of the image with z-index=81 must be visible.
  • should display as many images as it can fit based on the browser width.
  • proper thumbnail and z-index values must be visible for each image.
  • The thumbnail related to z-index 81 must be selected.
  • Previous and next buttons must be available.

Changing main image

  1. After Clicking on any z-plane in the z-plane list,
  • The selected z-plane thumbnail should be highlighted.
  • The displayed main image and z-index should change.
  • Annotations should be updated.
  • Channel settings should remain the same.
  • To test this, modify the channel settings, and then click on another image. Settings should remain the same.

Z-plane list pagination

  1. Users should be able to click on next button to see the next page of images.

  2. Users should be able to click on previous button to see the previous page of images.

  3. When the number of z planes retrieved from the server are less than the page size, all the z planes, in this case, should be left aligned in the z-plane container (Next button in this case must be disabled.) In all other cases (i.e. the number of z planes retrieved from the server are equal to the page size) they should be center aligned.

  4. If the window size is increased, viewer app must fetch more z-planes and display them (images should be displayed with proper space between each other and from the other controls.)

  • current z plane = 1-10, current page size = 10;
  • new page size = 15 (page size increased), new fetched z planes = 11-15, => z planes shown = 1-15
  1. If the window size decreases, the z-plane container should adjust without sending any request.
  • current z-plane = 1-10, current page size = 10;
  • new page size = 5 (page size decreased), => z planes shown = 1-5

Jump to Z-index

  1. Users should not be able to write anything other than 0-9 values in the search box.

  2. Users should be able to select a z-index value and the list should be updated based on that.

  • Enter "12" in the input.
  • The input and button must become disabled. And the spinner should show up.
  • When the spinner disappears the list must be updated with the thumbnails before and after z-index 12 and z-index 12 should be selected.
  • Main image should be updated to z-index=12

The search should start after clicking enter, pressing the button, or waiting few seconds. Make sure to test all these different ways.

  1. Searching for a z-index that doesn't have enough values before or after should still highlight the correct z-index.

  2. Upon searching for an out of range z-index, an error should show up.

  • Enter "400" (or any other values bigger than 164)
  • The input and button must become disabled. And the spinner should show up.
  • When the spinner disappears an error must show up.
  • Clicking on ok should dismiss the error and show the end of the list where the z-index=163 is selected.

Update Default Z

  1. The update button should only be visible after login.

  2. Clicking on the button should update the default z index, and after update the button should become disabled.

  3. When the current index is same as the default index, the update default button should be disabled.

Z plane Slider

  1. Sliding the thumb of the slider should show a tooltip above the thumb indicating the z index represented by that position.

  2. Sliding and dropping the thumb to a new position should update the z plane list to show a new set of z indexes, centered around the slider value, and update the main image.

  3. There numbers of the left and right side of the slider, representing the min and max range of the z indexes available, and hence the range of the slider.

  4. Clicking on the previous and next button on either side of the slider, should change the z index to a previous and next value respectively, change the focus in the z plane list and change the image shown in the OSD.

  5. If we are at the first index of the z plane list, clicking the previous button should change the content of the z plane list centered around the previous z index. Similarly, if we are at the last element of the list and we click the next button, the content of the z plane list should change, to be centered around the next value.

  6. If we are the min (no values before it) or max (no values are it) z index, the previous and next button should be disabled.

Back to Home

General Guides

Dev Guides

Test Guides

Others

Clone this wiki locally