CPTMS Test Cases

Test Configuration

Save the attached test files into webapps folders:

highways_startup_test.json into data_layers

highway_status_test.json into webapps

In cptms.html, change these constants to reflect the names of the test files:

kVDSstatusFile

kMapStartupFile

Application Startup

In a terminal window with webapps as the current directory, start the web server with the command: python -m CGIHTTPServer 8080

Open a web browser to localhost:8080/cptms.html

A google map should appear in "night mode" with center near intersection of Irvine Center Drive and Culver Drive.

• Zoom in and out buttons in the bottom right corner.
• Recenter button in center right margin.
• VDS, CMS, CCTV, and HAR buttons (top to bottom) in lower left corner.
• Search box in upper left corner (contains the text "Search Box" on a black background.)
• Thirteen colored dots along highway 55 between Dyer Rd and I-5. There are 5 white, 5 green, 2 red, and 1 yellow, assigned as specified in the test files. The startup file specifies all dots are white. The highway_status_test.json file indicates eight dots change to the specified colors.
• Colored dots overlap in this priority: Red, yellow, green, white.

Map Controls

Zoom in and out buttons cause the map to become larger or smaller.

Zoom and pan once. Click the recenter button to return to original zoom level and map center point.

In the Search Box, type "Jeff". A drop down box should display several options starting with "Jeff." Choose Jeffrey Road, Irvine, CA USA. A red marker icon appears on Jeffrey Road. Zoom in to verify. Click on the maker to make it go away.

In the Search Box, type "Jeff" and hit enter. Multiple markers appear. Click recenter to recenter and clear the markers from the map.

Click each of the map layer buttons in the lower left corner. The button icon should change to "depressed" appearance when on. The corresponding icons appear on the map.

VDS Layer

The VDS layer button is "depressed" when the application opens.

• Thirteen colored dots along highway 55 between Dyer Rd and I-5. There are 5 white, 5 green, 2 red, and 1 yellow, assigned as specified in the test files. The startup file specifies all dots are white. The highway_status_test.json file indicates eight dots change to the specified colors.
• Colored dots overlap in this priority: Red, yellow, green, white.
• Rollover a dot to see its location and cross street.
• Zoom in several times, keeping the 55 icons centered.  Notice that the position of the dots is automatically adjusted to match the zoom level so that the icons appear side-by-side instead of overlapping. Utlimately the dots appear in the center of the roadway, their actual location.  If you click the zoom buttons several times quickly the effect may be more noticeable.

CMS Layer

Click on the CMS layer button. Most of the cms icons will be yellow as they are inactive. Rollover an icon to view its cms id and location.

Zoom in on the yellow cms icon near Dyer Rd. Click the icon to view the CMS Edit Dialog.

CMS Edit Dialog contains:

• CMS ID and Location field (readonly)
• Close button [X] in upper right corner.
• Phase 1 and Phase 2 input fields, vertically aligned.
• Current display (six lines).
• The "Current" display should be in Scoreboard font.
• Send, Clear, and Close buttons.
• Mouseover the [X] turns the color from gray to black.
• Click the [X] or Close button closes the dialog.

There are six input fields. In these fields enter "slow", "traffic", "ahead","please","use","caution" and click "Send>>". The text will appear in Scoreboard font with each line centered in the text area. Delete "please" from the input field and click "Send>>" and it will disappear from the "Current" display. Close the dialog and observe the cms icon has become blue.

Click on the icon again and see the current message display and blank input fields. Pan the map behind the dialog until the cms icon is visible. Watch the color if this icon as you click "Clear>>"; it should become yellow immediately. Clicking in the "current" display has no effect.

The limit on an input field is 16 characters. Type "12354678901234567" in an input field. The 7 will not appear. Click "Send>>" and all 16 digits will appear.

The tab key can be used to advance from one input field to the next.

Open a second browser window to the same page. Open the CMS Edit dialog for the same CMS id. The same "current" message will appear. Click "Clear>>" in the second dialog. The icon turns yellow. Wait ten seconds and the icon will turn yellow on the first screen. Type "happy days" in the phase 1 input in the second dialog and click "Send>>" Close the dialog in the first window. Wait ten seconds and the icon will turn blue. Reopen the dialog to see "happy days" in the current display. Click "Clear>>" and close the dialog.

CCTV Layer

Click on the CCTV layer button. Most of the cctv icons will be white because the test vds layer has few items. There will be 3 blue cctv icons along 55 where the colored VDS dots are present. Rollover an icon to view its camera id and location.

Click on the cctv icon for camera 20 at McFadden?. An info window appears with the caption containing the camera id and location. The image should be for the "fast" traffic.

Clicking on another cctv icon should NOT create multile infowindows. Click on the "x" to close the infowindow.

Camera 21 should show "fast" traffic because it is closer to the green dot than the red one.

Camera 22 should show "slow" traffic because it is near the yellow dot.

Temporarily rename the file for camera 20. Clicking on that icon should display a "unavailable" image. Rest the file to its original name. Click on the icon to see the traffic image.

HAR Layer

(Not implemented yet).

Other Features

Cickable regions for CMS and CCTV icons should be constrained to a narrow rectangle closely cropped to the icon.