Utilità di test degli oggetti visivi di Power BI

Questo articolo illustra come installare, importare e usare le utilità di test degli oggetti visivi di Power BI. Queste utilità di test possono essere usate per unit test e includono mocks e metodi per gli elementi, ad esempio viste dati, selezioni e schemi di colore.

Prerequisiti

Per usare questo pacchetto, installare:

Installazione

Per installare le utilità di test e aggiungerne la dipendenza al package.json, eseguire il comando seguente dalla directory degli oggetti visivi di Power BI:

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

Di seguito vengono fornite descrizioni ed esempi sull'API pubblica dell'utilità di test.

VisualBuilderBase

Usato da VisualBuilder negli unit test con i metodi usati più di frequente, build, updatee updateRenderTimeout.

Il build metodo restituisce un'istanza creata dell'oggetto visivo.

I enumerateObjectInstances metodi e updateEnumerateObjectInstancesRenderTimeout sono necessari per controllare le modifiche nel bucket e nelle opzioni di formattazione.

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[];
}

Nota

Per altri esempi, vedere Scrittura di unit test di VisualBuilderBase e uno scenario VisualBuilderBase di utilizzo reale.

DataViewBuilder

Usato da TestDataViewBuilder, questo modulo fornisce una classe CategoricalDataViewBuilder usata nel createCategoricalDataViewBuilder metodo . Specifica anche interfacce e metodi necessari per l'uso di DataView fittizi negli unit test.

  • withValues aggiunge colonne serie statiche e withGroupedValues aggiunge colonne serie dinamiche.

    Non applicare serie dinamiche e serie statiche in un oggetto visivo DataViewCategorical. È possibile usarli solo nella query DataViewCategorical , in cui DataViewTransform è previsto suddividerli in oggetti Visual DataViewCategorical separati.

  • buildrestituisce DataView con metadati e DataViewCategorical.

    build restituisce Undefined se la combinazione di parametri non è valida, ad esempio includendo serie dinamiche e statiche durante la compilazione dell'oggetto visivo 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

Usato per la creazione di VisualData negli unit test. Quando i dati vengono inseriti in bucket di campi dati, Power BI genera un oggetto DataView categorico basato sui dati. TestDataViewBuilder consente di simulare la creazione di DataView categorica.

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;
}

Di seguito sono elencate le interfacce usate più di frequente durante la creazione di un oggetto 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[];
}

Nota

Per altri esempi, vedere Scrittura di unit test TestDataViewBuilder e uno scenario TestDataViewBuilder di utilizzo reale.

Simulazioni

MockIVisualHost

Implementa IVisualHost per testare gli oggetti visivi di Power BI senza dipendenze esterne, ad esempio il framework di Power BI.

I metodi utili includono createSelectionIdBuilderle proprietà , createSelectionManagercreateLocalizationManager, e getter.

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 crea e restituisce un'istanza di IVisualHost, in realtà MockIVisualHost.

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

    Esempio:

    import { createVisualHost } from "powerbi-visuals-utils-testutils"

let host: IVisualHost = createVisualHost();

Importante

MockIVisualHost è un'implementazione fittizia di IVisualHost e deve essere usata solo con unit test.

MockIColorPalette

Implementa IColorPalette per testare gli oggetti visivi di Power BI senza dipendenze esterne, ad esempio il framework di Power BI.

MockIColorPalette fornisce proprietà utili per controllare lo schema dei colori o la modalità a contrasto elevato negli unit test.

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 crea e restituisce un'istanza di IColorPalette, in realtà MockIColorPalette.

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

    Esempio:

    import { createColorPalette } from "powerbi-visuals-utils-testutils"

let colorPalette: IColorPalette = createColorPalette();

Importante

MockIColorPalette è un'implementazione fittizia di IColorPalette e deve essere usata solo con unit test.

MockISelectionId

Implementa ISelectionId per testare gli oggetti visivi di Power BI senza dipendenze esterne, ad esempio il framework di 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 crea e restituisce un'istanza di ISelectionId, in realtà MockISelectionId.

    function createSelectionId(key?: string): ISelectionId;

    Esempio:

    import { createColorPalette } from "powerbi-visuals-utils-testutils"

let selectionId: ISelectionId = createSelectionId();

Nota

MockISelectionId è un'implementazione fittizia di ISelectionId e deve essere usata solo con unit test.

MockISelectionIdBuilder

Implementa ISelectionIdBuilder per testare gli oggetti visivi di Power BI senza dipendenze esterne, ad esempio il framework di 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 crea e restituisce un'istanza di ISelectionIdBuilder, in realtà MockISelectionIdBuilder.

    function createSelectionIdBuilder(): ISelectionIdBuilder;

    Esempio:

    import { selectionIdBuilder } from "powerbi-visuals-utils-testutils";

let selectionIdBuilder = createSelectionIdBuilder();

Nota

MockISelectionIdBuilder è un'implementazione fittizia di ISelectionIdBuilder e deve essere usata solo con unit test.

MockISelectionManager

Implementa ISelectionManager per testare gli oggetti visivi di Power BI senza dipendenze esterne, ad esempio il framework di 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 crea e restituisce un'istanza di ISelectionManager, in realtà MockISelectionManager.

    function createSelectionManager(): ISelectionManager

    Esempio:

    import { createSelectionManager } from "powerbi-visuals-utils-testutils";

let selectionManager: ISelectionManager = createSelectionManager();

Nota

MockISelectionManager è un'implementazione fittizia di ISelectionManager e deve essere usata solo con unit test.

MockILocale

Imposta le impostazioni locali e le modifica per le esigenze durante un processo di unit test.

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 crea e restituisce un'istanza di MockILocale. 
    funciton createLocale(locales?: Object): MockILocale;

MockITooltipService

TooltipService Simula e lo chiama per le esigenze durante un processo di unit test.

class MockITooltipService implements ITooltipService {
    constructor(isEnabled: boolean = true);
    enabled(): boolean;
    show(options: TooltipShowOptions): void;
    move(options: TooltipMoveOptions): void;
    hide(options: TooltipHideOptions): void;
}
  • createTooltipService crea e restituisce un'istanza di MockITooltipService. 
    function createTooltipService(isEnabled?: boolean): ITooltipService;

MockIAllowInteractions

export class MockIAllowInteractions {
    constructor(public isEnabled?: boolean); // false by default
}
  • createAllowInteractions crea e restituisce un'istanza di MockIAllowInteractions. 
    function createAllowInteractions(isEnabled?: boolean): MockIAllowInteractions;

MockILocalizationManager

Offre funzionalità di base di LocalizationManager, necessarie per gli unit test.

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

  • createLocalizationManager crea e restituisce un'istanza di ILocalizationManager, in realtà MockILocalizationManager.

    function createLocalizationManager(displayNames?: any): ILocalizationManager;

    Esempio:

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

MockITelemetryService

Simula l'utilizzo di TelemetryService .

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

Creazione di MockITelemetryServicetypescript function createTelemetryService(): ITelemetryService;

MockIAuthenticationService

Simula il lavoro di AuthenticationService fornendo un token Microsoft Entra fittizio.

class MockIAuthenticationService implements IAuthenticationService  {
    constructor(token: string);
    getAADToken(visualId?: string): powerbi.IPromise<string>
}
  • createAuthenticationService crea e restituisce un'istanza di IAuthenticationService, in realtà MockIAuthenticationService. 
    function createAuthenticationService(token?: string): IAuthenticationService;

MockIStorageService

Consente di usare ILocalVisualStorageService con lo stesso comportamento di LocalStorage.

class MockIStorageService implements ILocalVisualStorageService {
  get(key: string): IPromise<string>;
  set(key: string, data: string): IPromise<number>;
  remove(key: string): void;
}
  • createStorageService crea e restituisce un'istanza di ILocalVisualStorageService, in realtà 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 crea e restituisce un'istanza di IVisualEventService, in realtà MockIEventService. 
    function createEventService(): IVisualEventService;

Utilità

Le utilità includono metodi helper per gli unit test degli oggetti visivi di Power BI, inclusi gli helper correlati a colori, numeri ed eventi.

  • renderTimeout restituisce un timeout.

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

  • testDom consente di impostare una fixture negli unit test.

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

    Esempio:

    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();
    });
});

  • getSolidColorStructuralObject

    function getSolidColorStructuralObject(color: string): any

    Restituisce la struttura seguente:

    { solid: { color: color } }

  • assertColorsMatch confronta gli oggetti RgbColor analizzati dalle stringhe di input.

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

  • parseColorString analizza il colore dalla stringa di input e lo restituisce nell'interfaccia RgbColor specificata.

    function parseColorString(color: string): RgbColor

  • getRandomNumbers genera un numero casuale usando valori min e max. È possibile specificare e fornire exceptionList una funzione per la modifica del risultato.

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

  • getRandomNumbers fornisce una matrice di numeri casuali generati dal getRandomNumber metodo con valori min e max specificati.

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

I metodi seguenti vengono scritti per la simulazione di eventi di pagine Web negli unit test.

  • clickElement simula un clic sull'elemento specificato.

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

  • createTouch restituisce un oggetto Touch per simulare un evento di tocco.

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

  • createTouchesListrestituisce un elenco di eventi Touch simulati.

    function createTouchesList(touches: Touch[]): TouchList

  • createContextMenuEvent restituisce MouseEvent.

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

  • createMouseEvent crea e restituisce 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

I metodi seguenti vengono usati per simulare gli eventi D3 negli unit test.

  • flushAllD3Transitions forza il completamento di tutte le transizioni D3.

    function flushAllD3Transitions()

    Nota

    In genere, le transizioni di ritardo zero vengono eseguite dopo un ritardo istantaneo (<10 ms), ma questo può causare un breve sfarfallio se il browser esegue il rendering della pagina due volte. Una volta alla fine del primo ciclo di eventi, quindi subito dopo il primo callback del timer.

    Questi flicker sono più evidenti in Internet Explorer e con un numero elevato di visualizzazioni Web e non sono consigliati per iOS.

    Scaricando la coda timer alla fine del primo ciclo di eventi, è possibile eseguire immediatamente qualsiasi transizione di ritardo zero ed evitare lo sfarfallio.

Sono inclusi anche i metodi seguenti:

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

Interfacce helper

L'interfaccia e le enumerazioni seguenti vengono usate nella funzione helper.

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,
}

Contenuto correlato

Per scrivere unit test per oggetti visivi di Power BI basati su Webpack e unit test con karma e jasmine, vedere Esercitazione: Aggiungere unit test per progetti visivi di Power BI.

  • Last updated on