We have some dynamic populated tooltips on our canvas for nodes and ports, and I’d like to be able to create an automated test to check them. We have tests for nodes and ports which access the svg to check them. Would the same approach work for the tooltips, and if so, what would I be looking for to pick out the tooltip? Or is there an easier way?
Nicholas
Thanks. However, what I’m ralking about is our -end-to-end tests, where we don’t have access to the code itself, just the DOM. THat’s why we’re looking at the svg from the innerHtml rather than the model directly, when it comes to nodes and ports. Effectively tests as the user.
If you implemented the tooltip in HTML, you could look at that.
The tooltips are being implemented as part of the node and port templates, in a manner following the example at GoJS Template Maps -- Northwoods Software.
Could you please explain what you are looking at? How are you looking at the nodes and ports and links to make sure the diagram is showing what you think it should be?
We use Angular for development, and spec files using protractor or end-to-end testing. So as an example, to check a node that has a singe port the subtest is:
it('Check one port block UI functionality', async () => {
const refSinglePort = 'd="M 0,0 L 159,0 L 159,47 L 0,47 z"';
const refCategoryImage = 'style="font: 20px dlt-icons" text-anchor="start" fill="rgb(242, 243, 244)" stroke="none"';
const blockColour = 'fill="rgb(0,82,150)"';
const blockNameFontColour = 'fill="rgb(242, 243, 244)"';
await modelEditorPage.getPalette().expandPaletteSectionHeader(PALETTEHEADER.FLOWMANIPULATION);
const element1 = await modelEditorPage.getPalette().getSectionItemElement(PALETTEITEM.PULSE);
await modelEditorPage.doDragAndDrop(element1);
// Check input/output ports font and it's colour
await closeBlockParamsDialog();
const svg = await browser.executeScript(goCanvasUtils, 'getBlockNameInnerHTML(\'Pulse\')');
console.log(svg);
expect(svg.toString().indexOf(refSinglePort)).toBeGreaterThan(0);
console.log(svg.toString().indexOf(refSinglePort));
expect(svg.toString().indexOf(refCategoryImage)).toBeGreaterThan(0);
expect(svg.toString().indexOf(blockColour)).toBeGreaterThan(0);
expect(svg.toString().indexOf(blockNameFontColour)).toBeGreaterThan(0);
});
We’re basically checking that the node is being drawn and coloured correctly.
The svg output we get in this example from the console.log(svg) statement is: <path d="M 0,0 L 159,0 L 159,47 L 0,47 z" fill="rgb(0,82,150)" fill-opacity="1" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><path d="M 0,0 L 159,0 L 159,47 L 0,47 z" fill="none" stroke="rgb(23, 118, 191)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><g transform="matrix(1, 0, 0, 1, 37, 14)"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#CLIP1120)"><text x="0" y="16.575000000000003" style="font: 20px dlt-icons" text-anchor="start" fill="rgb(242, 243, 244)" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)"></text></g><text x="0" y="11.700000000000001" style="font: normal normal 400 normal 14px / 20px Roboto, Helvetica, Arial, sans-serif" text-anchor="start" fill="rgb(242, 243, 244)" stroke="none" transform="matrix(1, 0, 0, 1, 28, 2.1999999999999993)">Pulse</text></g>
I don’t know what getBlockNameInnerHTML(\'Pulse\')') is doing, but I am concerned that you are depending so much on string comparisons and on the specific way in which the diagram is rendered. Due to the need for efficiency, GoJS cannot make any particular guarantees about exactly how rendering is done – not to the Canvas nor to SVG. What matters is only the final appearance.
For example, I am concerned that you are checking for a particular string representing a color, when there are plenty of other CSS color strings that would produce exactly the same “paint” color.
Because in your app the tooltips are implemented as GoJS objects, you should be able to use the same manner. Maybe what you are looking at was generated when the tooltip was not yet visible, or after it sutomatically disappeared, or that it isn’t including anything in the “Adornment” Layer.