Nástroje pro testování vizuálů Power BI

Tento článek vám pomůže s instalací, importem a používáním testovacích nástrojů vizuálů Power BI. Tyto testovací nástroje lze použít pro testování jednotek a zahrnují napodobení a metody pro prvky, jako jsou zobrazení dat, výběry a barevné schémata.

Požadavky

Chcete-li použít tento balíček, nainstalujte:

• node.js se doporučuje použít verzi LTS.
• npm verze 3.0.0 nebo vyšší
• Balíček PowerBI-visuals-tools

Instalace

Pokud chcete nainstalovat testovací nástroje a přidat její závislost do package.json, spusťte z adresáře vizuálů Power BI následující příkaz:

npm install powerbi-visuals-utils-testutils --save

Následující příklad obsahuje popisy a příklady veřejného rozhraní API testovacích nástrojů.

VisualBuilderBase

VisualBuilder používá v testech jednotek s nejčastěji používanými metodami, build, updatea updateRenderTimeout.

Metoda build vrátí vytvořenou instanci vizuálu.

updateEnumerateObjectInstancesRenderTimeout K enumerateObjectInstances kontrole změn v kontejneru a možnostech formátování se vyžadují metody a metody.

abstract class VisualBuilderBase<T extends IVisual> {
    element: JQuery;
    viewport: IViewport;
    visualHost: IVisualHost;
    protected visual: T;
    constructor(width?: number, height?: number, guid?: string, element?: JQuery);
    protected abstract build(options: VisualConstructorOptions): T;
     nit(): void;
    destroy(): void;
    update(dataView: DataView[] | DataView): void;
    updateRenderTimeout(dataViews: DataView[] | DataView, fn: Function, timeout?: number): number;
    updateEnumerateObjectInstancesRenderTimeout(dataViews: DataView[] | DataView, options: EnumerateVisualObjectInstancesOptions, fn: (enumeration: VisualObjectInstance[]) => void, timeout?: number): number;
    updateFlushAllD3Transitions(dataViews: DataView[] | DataView): void;
    updateflushAllD3TransitionsRenderTimeout(dataViews: DataView[] | DataView, fn: Function, timeout?: number): number;
    enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[];
}

DataViewBuilder

Tento modul používá TestDataViewBuilder, poskytuje CategoricalDataViewBuilder třídy používané v createCategoricalDataViewBuilder metodě. Určuje také rozhraní a metody potřebné pro práci s napodobeným objektem DataView v testech jednotek.

• withValues přidá sloupce statických řad a withGroupedValues přidá sloupce dynamických řad.

  Nepoužívejte dynamickou i statickou řadu ve vizuálu DataViewCategorical. V dotazu DataViewCategorical můžete je použít pouze v případě, že dataViewTransform je má rozdělit do samostatných objektů DataViewCategorical.

• buildvrátí DataView s metadaty a DataViewCategorical.

  build vrátí Nedefinováno , pokud je kombinace parametrů neplatná, například zahrnutí dynamických i statických řad při sestavování vizuálu DataView.

class CategoricalDataViewBuilder implements IDataViewBuilderCategorical {
    withCategory(options: DataViewBuilderCategoryColumnOptions): IDataViewBuilderCategorical;
    withCategories(categories: DataViewCategoryColumn[]): IDataViewBuilderCategorical;
    withValues(options: DataViewBuilderValuesOptions): IDataViewBuilderCategorical;
    withGroupedValues(options: DataViewBuilderGroupedValuesOptions): IDataViewBuilderCategorical;
    build(): DataView;
}

function createCategoricalDataViewBuilder(): IDataViewBuilderCategorical;

TestDataViewBuilder

Používá se k vytváření VisualData v testech jednotek. Když jsou data umístěná v kontejnerech datových polí, Power BI vytvoří objekt DataView kategorický na základě dat. TestDataViewBuilder pomáhá simulovat vytvoření objektu DataView kategorií.

abstract class TestDataViewBuilder {
    static DataViewName: string;
    private aggregateFunction;
    static setDefaultQueryName(source: DataViewMetadataColumn): DataViewMetadataColumn;
    static getDataViewBuilderColumnIdentitySources(options: TestDataViewBuilderColumnOptions[] | TestDataViewBuilderColumnOptions): DataViewBuilderColumnIdentitySource[];
    static getValuesTable(categories?: DataViewCategoryColumn[], values?: DataViewValueColumn[]): any[][];
    static createDataViewBuilderColumnOptions(categoriesColumns: (TestDataViewBuilderCategoryColumnOptions | TestDataViewBuilderCategoryColumnOptions[])[], valuesColumns: (DataViewBuilderValuesColumnOptions | DataViewBuilderValuesColumnOptions[])[], filter?: (options: TestDataViewBuilderColumnOptions) => boolean, customizeColumns?: CustomizeColumnFn): DataViewBuilderAllColumnOptions;
    static setUpDataViewBuilderColumnOptions(options: DataViewBuilderAllColumnOptions, aggregateFunction: (array: number[]) => number): DataViewBuilderAllColumnOptions;
    static setUpDataView(dataView: DataView, options: DataViewBuilderAllColumnOptions): DataView;
    protected createCategoricalDataViewBuilder(categoriesColumns: (TestDataViewBuilderCategoryColumnOptions | TestDataViewBuilderCategoryColumnOptions[])[], valuesColumns: (DataViewBuilderValuesColumnOptions | DataViewBuilderValuesColumnOptions[])[], columnNames: string[], customizeColumns?: CustomizeColumnFn): IDataViewBuilderCategorical;
    abstract getDataView(columnNames?: string[]): DataView;
}

Následující seznam uvádí nejčastěji používaná rozhraní při vytváření testDataView:

interface TestDataViewBuilderColumnOptions extends DataViewBuilderColumnOptions {
    values: any[];
}

interface TestDataViewBuilderCategoryColumnOptions extends TestDataViewBuilderColumnOptions {
    objects?: DataViewObjects[];
    isGroup?: boolean;
}

interface DataViewBuilderColumnOptions {
    source: DataViewMetadataColumn;
}

interface DataViewBuilderSeriesData {
    values: PrimitiveValue[];
    highlights?: PrimitiveValue[];
    /** Client-computed maximum value for a column. */
    maxLocal?: any;
    /** Client-computed maximum value for a column. */
    minLocal?: any;
}

interface DataViewBuilderColumnIdentitySource {
    fields: any[];
    identities?: CustomVisualOpaqueIdentity[];
}

Napodobeniny

MockIVisualHost

Implementuje IVisualHost pro testování vizuálů Power BI bez externích závislostí, jako je architektura Power BI.

Mezi užitečné metody patří createSelectionIdBuilder, createSelectionManager, createLocalizationManagera getter vlastnosti.

import powerbi from "powerbi-visuals-api";

import VisualObjectInstancesToPersist = powerbi.VisualObjectInstancesToPersist;
import ISelectionIdBuilder = powerbi.visuals.ISelectionIdBuilder;
import ISelectionManager = powerbi.extensibility.ISelectionManager;
import IColorPalette = powerbi.extensibility.IColorPalette;
import IVisualEventService = powerbi.extensibility.IVisualEventService;
import ITooltipService = powerbi.extensibility.ITooltipService;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;

class MockIVisualHost implements IVisualHost {
      constructor(
          colorPalette?: IColorPalette,
          selectionManager?: ISelectionManager,
          tooltipServiceInstance?: ITooltipService,
          localeInstance?: MockILocale,
          allowInteractionsInstance?: MockIAllowInteractions,
          localizationManager?: powerbi.extensibility.ILocalizationManager,
          telemetryService?: powerbi.extensibility.ITelemetryService,
          authService?: powerbi.extensibility.IAuthenticationService,
          storageService?: ILocalVisualStorageService,
          eventService?: IVisualEventService);
      createSelectionIdBuilder(): ISelectionIdBuilder;
      createSelectionManager(): ISelectionManager;
      createLocalizationManager(): ILocalizationManager;
      colorPalette: IColorPalette;
      locale: string;
      telemetry: ITelemetryService;
      tooltipService: ITooltipService;
      allowInteractios: boolean;
      storageService: ILocalVisualStorageService;
      eventService: IVisualEventService;
      persistProperties(changes: VisualObjectInstancesToPersist): void;
}

• createVisualHost vytvoří a vrátí instanci IVisualHost, ve skutečnosti MockIVisualHost.

  function createVisualHost(locale?: Object, allowInteractions?: boolean, colors?: IColorInfo[], isEnabled?: boolean, displayNames?: any, token?: string): IVisualHost;
  

  Příklad:

  import { createVisualHost } from "powerbi-visuals-utils-testutils"
  
  let host: IVisualHost = createVisualHost();
  

MockIColorPalette

Implementuje IColorPalette pro testování vizuálů Power BI bez externích závislostí, jako je architektura Power BI.

MockIColorPalette poskytuje užitečné vlastnosti pro kontrolu barevného schématu nebo režimu vysokého kontrastu v testech jednotek.

import powerbi from "powerbi-visuals-api";
import IColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
import IColorInfo = powerbi.IColorInfo;

class MockIColorPalette implements IColorPalette {
    constructor(colors?: IColorInfo[]);
    getColor(key: string): IColorInfo;
    reset(): IColorPalette;
    isHighContrastMode: boolean;
    foreground: {value: string};
    foregroundLight: {value: string};
    ...
    background: {value: string};
    backgroundLight: {value: string};
    ...
    shapeStroke: {value: string};
}

• createColorPalette vytvoří a vrátí instanci IColorPalette, ve skutečnosti MockIColorPalette.

  function createColorPalette(colors?: IColorInfo[]): IColorPalette;
  

  Příklad:

  import { createColorPalette } from "powerbi-visuals-utils-testutils"
  
  let colorPalette: IColorPalette = createColorPalette();
  

MockISelectionId

Implementuje ISelectionId pro testování vizuálů Power BI bez externích závislostí, jako je architektura Power BI.

import powerbi from "powerbi-visuals-api";
import Selector = powerbi.data.Selector;
import ISelectionId = powerbi.visuals.ISelectionId;

class MockISelectionId implements ISelectionId {
    constructor(key: string);
    equals(other: ISelectionId): boolean;
    includes(other: ISelectionId, ignoreHighlight?: boolean): boolean;
    getKey(): string;
    getSelector(): Selector;
    getSelectorsByColumn(): Selector;
    hasIdentity(): boolean;
}

• createSelectionId vytvoří a vrátí instanci ISelectionId, ve skutečnosti MockISelectionId.

  function createSelectionId(key?: string): ISelectionId;
  

  Příklad:

  import { createColorPalette } from "powerbi-visuals-utils-testutils"
  
  let selectionId: ISelectionId = createSelectionId();
  

MockISelectionIdBuilder

Implementuje ISelectionIdBuilder pro testování vizuálů Power BI bez externích závislostí, jako je architektura Power BI.

import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import DataViewValueColumn = powerbi.DataViewValueColumn;
import DataViewValueColumnGroup = powerbi.DataViewValueColumnGroup;
import DataViewValueColumns = powerbi.DataViewValueColumns;
import ISelectionIdBuilder = powerbi.visuals.ISelectionIdBuilder;
import ISelectionId = powerbi.visuals.ISelectionId;

class MockISelectionIdBuilder implements ISelectionIdBuilder {
    withCategory(categoryColumn: DataViewCategoryColumn, index: number): this;
    withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this;
    withMeasure(measureId: string): this;
    createSelectionId(): ISelectionId;
    withMatrixNode(matrixNode: DataViewMatrixNode, levels: DataViewHierarchyLevel[]): this;
    withTable(table: DataViewTable, rowIndex: number): this;
}

• createSelectionIdBuilder vytvoří a vrátí instanci ISelectionIdBuilder, ve skutečnosti MockISelectionIdBuilder.

  function createSelectionIdBuilder(): ISelectionIdBuilder;
  

  Příklad:

  import { selectionIdBuilder } from "powerbi-visuals-utils-testutils";
  
  let selectionIdBuilder = createSelectionIdBuilder();
  

MockISelectionManager

Implementuje ISelectionManager pro testování vizuálů Power BI bez externích závislostí, jako je architektura Power BI.

import powerbi from "powerbi-visuals-api";
import IPromise = powerbi.IPromise;
import ISelectionId = powerbi.visuals.ISelectionId;
import ISelectionManager = powerbi.extensibility.ISelectionManager;

class MockISelectionManager implements ISelectionManager {
    select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise<ISelectionId[]>;
    hasSelection(): boolean;
    clear(): IPromise<{}>;
    getSelectionIds(): ISelectionId[];
    containsSelection(id: ISelectionId): boolean;
    showContextMenu(selectionId: ISelectionId, position: IPoint): IPromise<{}>;
    registerOnSelectCallback(callback: (ids: ISelectionId[]) => void): void;
    simutateSelection(selections: ISelectionId[]): void;
}

• createSelectionManager vytvoří a vrátí instanci ISelectionManager, ve skutečnosti MockISelectionManager.

  function createSelectionManager(): ISelectionManager
  

  Příklad:

  import { createSelectionManager } from "powerbi-visuals-utils-testutils";
  
  let selectionManager: ISelectionManager = createSelectionManager();
  

MockILocale

Nastaví národní prostředí a změní ho pro vaše potřeby během procesu testování jednotek.

class MockILocale {
    constructor(locales?: Object): void; // Default locales are en-US and ru-RU 
    locale(key: string): void;// setter property
    locale(): string; // getter property
}

• createLocale vytvoří a vrátí instanci MockILocale.

  funciton createLocale(locales?: Object): MockILocale;
  

MockITooltipService

Simuluje TooltipService a volá je pro vaše potřeby během procesu testování jednotek.

class MockITooltipService implements ITooltipService {
    constructor(isEnabled: boolean = true);
    enabled(): boolean;
    show(options: TooltipShowOptions): void;
    move(options: TooltipMoveOptions): void;
    hide(options: TooltipHideOptions): void;
}

• createTooltipService vytvoří a vrátí instanci MockITooltipService.

  function createTooltipService(isEnabled?: boolean): ITooltipService;
  

MockIAllowInteractions

export class MockIAllowInteractions {
    constructor(public isEnabled?: boolean); // false by default
}

• createAllowInteractions vytvoří a vrátí instanci MockIAllowInteractions.

  function createAllowInteractions(isEnabled?: boolean): MockIAllowInteractions;
  

MockILocalizationManager

Poskytuje základní schopnosti LocalizationManageru, které jsou potřeba pro testování jednotek.

class MockILocalizationManager implements ILocalizationManager {
    constructor(displayNames: {[key: string]: string});
    getDisplayName(key: string): string; // returns default or setted displayNames for localized elements
}

• createLocalizationManager vytvoří a vrátí instanci ILocalizationManager, ve skutečnosti MockILocalizationManager.

  function createLocalizationManager(displayNames?: any): ILocalizationManager;
  

  Příklad:

  import { createLocalizationManager } from "powerbi-visuals-utils-testutils";
  let localizationManagerMock: ILocalizationManager = createLocalizationManager();
  

MockITelemetryService

Simuluje využití služby TelemetryService .

class MockITelemetryService implements ITelemetryService {
    instanceId: string;
    trace(veType: powerbi.VisualEventType, payload?: string) {
    }
}

Vytvoření MockITelemetryServicetypescript function createTelemetryService(): ITelemetryService;

MockIAuthenticationService

Simuluje práci AuthenticationService poskytnutím napodobeného tokenu Microsoft Entra.

class MockIAuthenticationService implements IAuthenticationService  {
    constructor(token: string);
    getAADToken(visualId?: string): powerbi.IPromise<string>
}

• createAuthenticationService vytvoří a vrátí instanci IAuthenticationService, ve skutečnosti MockIAuthenticationService.

  function createAuthenticationService(token?: string): IAuthenticationService;
  

MockIStorageService

Umožňuje použít ILocalVisualStorageService se stejným chováním jako LocalStorage.

class MockIStorageService implements ILocalVisualStorageService {
  get(key: string): IPromise<string>;
  set(key: string, data: string): IPromise<number>;
  remove(key: string): void;
}

• createStorageService vytvoří a vrátí instanci ILocalVisualStorageService, ve skutečnosti MockIStorageService.

  function createStorageService(): ILocalVisualStorageService;
  

MockIEventService

import powerbi from "powerbi-visuals-api";
import IVisualEventService = powerbi.extensibility.IVisualEventService;
import VisualUpdateOptions = powerbi.extensibility.VisualUpdateOptions;

class MockIEventService implements IVisualEventService {
      renderingStarted(options: VisualUpdateOptions): void;
      renderingFinished(options: VisualUpdateOptions): void;
      renderingFailed(options: VisualUpdateOptions, reason?: string): void;
}

• createEventService vytvoří a vrátí instanci IVisualEventService, ve skutečnosti MockIEventService.

  function createEventService(): IVisualEventService;
  

Nástroje

Nástroje zahrnují pomocné metody pro testování jednotek vizuálů Power BI, včetně pomocných rutin souvisejících s barvami, čísly a událostmi.

• renderTimeout vrátí časový limit.

  function renderTimeout(fn: Function, timeout: number = DefaultWaitForRender): number
  

• testDom pomáhá nastavit zařízení v testech jednotek.

  function testDom(height: number | string, width: number | string): JQuery
  

  Příklad:

  import { testDom }  from "powerbi-visuals-utils-testutils";
  describe("testDom", () => {
      it("should return an element", () => {
          let element: JQuery = testDom(500, 500);
          expect(element.get(0)).toBeDefined();
      });
  });
  

Pomocné metody související s barvou

• getSolidColorStructuralObject

  function getSolidColorStructuralObject(color: string): any
  

  Vrátí následující strukturu:

  { solid: { color: color } }
  

• assertColorsMatchporovnává objekty RgbColor parsované ze vstupních řetězců.

  function assertColorsMatch(actual: string, expected: string, invert: boolean = false): boolean
  

• parseColorString parsuje barvu ze vstupního řetězce a vrátí ji v zadaném rozhraní RgbColor.

  function parseColorString(color: string): RgbColor
  

Pomocné metody související s čísly

• getRandomNumbers generuje náhodné číslo pomocí minimálních a maximálních hodnot. Můžete zadat exceptionList a zadat funkci pro změnu výsledku.

  function getRandomNumber(
      min: number,
      max: number,
      exceptionList?: number[],
      changeResult: (value: any) => number = x => x): number
  

• getRandomNumbers poskytuje pole náhodných čísel vygenerovaných metodou getRandomNumber se zadanými minimálními a maximálními hodnotami.

  function getRandomNumbers(count: number, min: number = 0, max: number = 1): number[]
  

Pomocné metody související s událostmi

Následující metody jsou napsány pro simulaci událostí webové stránky v testech jednotek.

• clickElement simuluje kliknutí na zadaný prvek.

  function clickElement(element: JQuery, ctrlKey: boolean = false): void
  

• createTouchvrátí objekt Touch, který pomáhá simulovat dotykovou událost.

  function createTouch(x: number, y: number, element: JQuery, id: number = 0): Touch
  

• createTouchesList vrátí seznam simulovaných událostí dotykového ovládání .

  function createTouchesList(touches: Touch[]): TouchList
  

• createContextMenuEvent vrátí MouseEvent.

  function createContextMenuEvent(x: number, y: number): MouseEvent
  

• createMouseEvent vytvoří a vrátí MouseEvent.

  function createMouseEvent(
      mouseEventType: MouseEventType,
      eventType: ClickEventType,
      x: number,
      y: number,
      button: number = 0): MouseEvent
  

• createTouchEndEvent

  function createTouchEndEvent(touchList?: TouchList): UIEvent
  

• createTouchMoveEvent

  function createTouchMoveEvent(touchList?: TouchList): UIEvent
  

• createTouchStartEvent

  function createTouchStartEvent(touchList?: TouchList): UIEvent
  

Pomocné metody související s událostmi D3

Následující metody se používají k simulaci událostí D3 v testech jednotek.

• flushAllD3Transitions vynutí dokončení všech přechodů D3.

  function flushAllD3Transitions()
  

  Poznámka:

  Za normálních okolností se přechody s nulovým zpožděním spustí po okamžitém zpoždění (<10 ms), ale to může způsobit krátkou blikání, pokud prohlížeč stránku vykresluje dvakrát. Jakmile na konci první smyčky událostí, pak znovu okamžitě při prvním zpětném volání časovače.

  Tyto flickers jsou patrnější na IE a s velkým počtem webových zobrazení a nejsou doporučené pro iOS.

  Vyprázdněním fronty časovače na konci první smyčky událostí můžete okamžitě spustit jakékoli přechody s nulovým zpožděním a vyhnout se blikání.

K dispozici jsou také následující metody:

function d3Click(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3MouseUp(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3MouseDown(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3MouseOver(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3MouseMove(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3MouseOut(element: JQuery, x: number, y: number, eventType?: ClickEventType, button?: number): void
function d3KeyEvent(element: JQuery, typeArg: string, keyArg: string, keyCode: number): void
function d3TouchStart(element: JQuery, touchList?: TouchList): void
function d3TouchMove(element: JQuery, touchList?: TouchList): void
function d3TouchEnd(element: JQuery, touchList?: TouchList): void
function d3ContextMenu(element: JQuery, x: number, y: number): void

Pomocná rozhraní

Následující rozhraní a výčty se používají v pomocné funkci.

interface RgbColor {
    R: number;
    G: number;
    B: number;
    A?: number; 
}

enum ClickEventType {
    Default = 0,
    CtrlKey = 1,
    AltKey = 2,
    ShiftKey = 4,
    MetaKey = 8,
}

enum MouseEventType {
    click,
    mousedown,
    mouseup,
    mouseover,
    mousemove,
    mouseout,
}

Související obsah

Pokud chcete psát testy jednotek pro vizuály Power BI založené na webpacku a test jednotek pomocí karma a jasmine, přečtěte si kurz: Přidání testů jednotek pro projekty vizuálů Power BI.