Udostępnij za pośrednictwem

Narzędzia testowe wizualizacji usługi Power BI

Ten artykuł ułatwia instalowanie, importowanie i używanie narzędzia testowego wizualizacji usługi Power BI. Te narzędzia testowe mogą służyć do testowania jednostkowego i obejmują makiety i metody elementów, takich jak widoki danych, wybory i schematy kolorów.

Wymagania wstępne

Aby użyć tego pakietu, zainstaluj:

Instalacja

Aby zainstalować narzędzia testowe i dodać zależność do package.json, uruchom następujące polecenie z katalogu wizualizacji usługi Power BI:

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

Poniżej przedstawiono opisy i przykłady dotyczące publicznego interfejsu API narzędzia testowego.

VisualBuilderBase

Używany przez program VisualBuilder w testach jednostkowych z najczęściej używanymi metodami, build, updatei updateRenderTimeout.

Metoda build zwraca utworzone wystąpienie wizualizacji.

Metody enumerateObjectInstances i updateEnumerateObjectInstancesRenderTimeout są wymagane do sprawdzania zmian w zasobniku i opcjach formatowania.

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

Uwaga

Aby uzyskać więcej przykładów, zobacz Pisanie testów jednostkowych VisualBuilderBase i scenariusz VisualBuilderBase rzeczywistego użycia.

DataViewBuilder

Używany przez testDataViewBuilder, ten moduł udostępnia klasę CategoricalDataViewBuilder używaną w metodzie createCategoricalDataViewBuilder . Określa również interfejsy i metody wymagane do pracy z wyśmiewanym widokiem DataView w testach jednostkowych.

  • withValues dodaje kolumny serii statycznych i withGroupedValues dodaje kolumny serii dynamicznej.

    Nie stosuj serii dynamicznych i serii statycznych w wizualizacji DataViewCategorical. Można ich używać tylko w zapytaniu DataViewCategorical , gdzie oczekuje się, że funkcja DataViewTransform podzieli je na oddzielne obiekty wizualne DataViewCategorical .

  • build Zwraca element DataView z metadanymi i elementem DataViewCategorical.

    build Zwraca wartość Undefined , jeśli kombinacja parametrów jest niedozwolona, na przykład dołączanie serii dynamicznej i statycznej podczas kompilowania wizualizacji 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

Służy do tworzenia danych VisualData w testach jednostkowych. Gdy dane są umieszczane w zasobnikach pola danych, usługa Power BI tworzy obiekt DataView kategorii na podstawie danych. Narzędzie TestDataViewBuilder pomaga symulować kategoryczne tworzenie elementu DataView .

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

Poniżej wymieniono najczęściej używane interfejsy podczas tworzenia elementu 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[];
}

Uwaga

Aby uzyskać więcej przykładów, zobacz Pisanie testów jednostkowych TestDataViewBuilder i Scenariusz rzeczywistego użycia TestDataViewBuilder.

Makiety

MakietyVisualHost

Implementuje interfejs IVisualHost do testowania wizualizacji usługi Power BI bez zależności zewnętrznych, takich jak struktura usługi Power BI.

Przydatne metody obejmują createSelectionIdBuilderwłaściwości , createSelectionManager, createLocalizationManageri 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 metoda tworzy i zwraca wystąpienie elementu IVisualHost, w rzeczywistości MockIVisualHost.

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

    Przykład:

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

let host: IVisualHost = createVisualHost();

Ważne

MockIVisualHost to fałszywa implementacja interfejsu IVisualHost i powinna być używana tylko z testami jednostkowymi.

MockIColorPalette

Implementuje interfejs IColorPalette do testowania wizualizacji usługi Power BI bez zależności zewnętrznych, takich jak struktura usługi Power BI.

MockIColorPalette udostępnia przydatne właściwości do sprawdzania schematu kolorów lub trybu dużego kontrastu w testach jednostkowych.

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 metoda tworzy i zwraca wystąpienie elementu IColorPalette, a w rzeczywistości MockIColorPalette.

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

    Przykład:

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

let colorPalette: IColorPalette = createColorPalette();

Ważne

MockIColorPalette to fałszywa implementacja interfejsu IColorPalette i powinna być używana tylko z testami jednostkowymi.

MockISelectionId

Implementuje identyfikator ISelectionId do testowania wizualizacji usługi Power BI bez zależności zewnętrznych, takich jak struktura usługi 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 metoda tworzy i zwraca wystąpienie identyfikatora ISelectionId, czyli MockISelectionId.

    function createSelectionId(key?: string): ISelectionId;

    Przykład:

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

let selectionId: ISelectionId = createSelectionId();

Uwaga

MockISelectionId to fałszywa implementacja ISelectionId i powinna być używana tylko z testami jednostkowymi.

MockISelectionIdBuilder

Implementuje interfejs ISelectionIdBuilder do testowania wizualizacji usługi Power BI bez zależności zewnętrznych, takich jak struktura usługi 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 metoda tworzy i zwraca wystąpienie klasy ISelectionIdBuilder, w rzeczywistości MockISelectionIdBuilder.

    function createSelectionIdBuilder(): ISelectionIdBuilder;

    Przykład:

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

let selectionIdBuilder = createSelectionIdBuilder();

Uwaga

MockISelectionIdBuilder to fałszywa implementacja ISelectionIdBuilder i powinna być używana tylko z testami jednostkowymi.

MockISelectionManager

Implementuje element ISelectionManager do testowania wizualizacji usługi Power BI bez zależności zewnętrznych, takich jak struktura usługi 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 metoda tworzy i zwraca wystąpienie elementu ISelectionManager, w rzeczywistości MockISelectionManager.

    function createSelectionManager(): ISelectionManager

    Przykład:

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

let selectionManager: ISelectionManager = createSelectionManager();

Uwaga

MockISelectionManager to fałszywa implementacja ISelectionManager i powinna być używana tylko z testami jednostkowymi.

MockILocale

Ustawia ustawienia regionalne i zmienia je na potrzeby podczas procesu testowania jednostkowego.

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 metoda tworzy i zwraca wystąpienie programu MockILocale. 
    funciton createLocale(locales?: Object): MockILocale;

MockITooltipService

Symuluje TooltipService i wywołuje je do Twoich potrzeb podczas procesu testowania jednostkowego.

class MockITooltipService implements ITooltipService {
    constructor(isEnabled: boolean = true);
    enabled(): boolean;
    show(options: TooltipShowOptions): void;
    move(options: TooltipMoveOptions): void;
    hide(options: TooltipHideOptions): void;
}
  • createTooltipService metoda tworzy i zwraca wystąpienie interfejsu MockITooltipService. 
    function createTooltipService(isEnabled?: boolean): ITooltipService;

MockIAllowInteractions

export class MockIAllowInteractions {
    constructor(public isEnabled?: boolean); // false by default
}
  • createAllowInteractions metoda tworzy i zwraca wystąpienie interfejsu MockIAllowInteractions. 
    function createAllowInteractions(isEnabled?: boolean): MockIAllowInteractions;

MockILocalizationManager

Zapewnia podstawowe możliwości narzędzia LocalizationManager, które są potrzebne do testowania jednostkowego.

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

  • createLocalizationManager metoda tworzy i zwraca wystąpienie elementu ILocalizationManager, w rzeczywistości MockILocalizationManager.

    function createLocalizationManager(displayNames?: any): ILocalizationManager;

    Przykład:

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

MockITelemetryService

Symuluje użycie usługi Telemetrii.

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

Tworzenie MockITelemetryServicetypescript function createTelemetryService(): ITelemetryService;

MockIAuthenticationService

Symuluje pracę usługi AuthenticationService , zapewniając pozorowany token firmy Microsoft Entra.

class MockIAuthenticationService implements IAuthenticationService  {
    constructor(token: string);
    getAADToken(visualId?: string): powerbi.IPromise<string>
}
  • createAuthenticationService metoda tworzy i zwraca wystąpienie usługi IAuthenticationService, w rzeczywistości MockIAuthenticationService. 
    function createAuthenticationService(token?: string): IAuthenticationService;

MockIStorageService

Umożliwia używanie usługi ILocalVisualStorageService z tym samym zachowaniem co LocalStorage.

class MockIStorageService implements ILocalVisualStorageService {
  get(key: string): IPromise<string>;
  set(key: string, data: string): IPromise<number>;
  remove(key: string): void;
}
  • createStorageService metoda tworzy i zwraca wystąpienie usługi ILocalVisualStorageService, w rzeczywistości 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 metoda tworzy i zwraca wystąpienie usługi IVisualEventService, w rzeczywistości MockIIEventService. 
    function createEventService(): IVisualEventService;

Narzędzia

Narzędzia obejmują metody pomocnicze do testowania jednostkowego wizualizacji usługi Power BI, w tym pomocników związanych z kolorami, liczbami i zdarzeniami.

  • renderTimeout zwraca limit czasu.

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

  • testDom pomaga ustawić urządzenie w testach jednostkowych.

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

    Przykład:

    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

    Zwraca następującą strukturę:

    { solid: { color: color } }

  • assertColorsMatch porównuje obiekty RgbColor analizowane z ciągów wejściowych.

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

  • parseColorString Analizuje kolor z ciągu wejściowego i zwraca go w określonym interfejsie RgbColor.

    function parseColorString(color: string): RgbColor

  • getRandomNumbers generuje liczbę losową przy użyciu wartości minimalnych i maksymalnych. Można określić exceptionList i podać funkcję zmiany wyniku.

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

  • getRandomNumbers udostępnia tablicę losowych liczb wygenerowanych przez metodę getRandomNumber z określonymi wartościami minimalnymi i maksymalnymi.

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

Następujące metody są napisane na potrzeby symulacji zdarzeń strony internetowej w testach jednostkowych.

  • clickElement symuluje kliknięcie określonego elementu.

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

  • createTouchZwraca obiekt Touch, aby pomóc symulować zdarzenie dotykowe.

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

  • createTouchesList Zwraca listę symulowanych zdarzeń touch .

    function createTouchesList(touches: Touch[]): TouchList

  • createContextMenuEvent zwraca element MouseEvent.

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

  • createMouseEvent metoda tworzy i zwraca element 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

Poniższe metody służą do symulowania zdarzeń D3 w testach jednostkowych.

  • flushAllD3Transitions wymusza ukończenie wszystkich przejść D3.

    function flushAllD3Transitions()

    Uwaga

    Zwykle przejścia zerowe opóźnienia są wykonywane po natychmiastowym opóźnieniu (<10 ms), ale może to spowodować krótkie migotanie, jeśli przeglądarka dwukrotnie renderuje stronę. Raz na końcu pierwszej pętli zdarzeń, a następnie ponownie natychmiast przy pierwszym wywołaniu zwrotnym czasomierza.

    Te migacze są bardziej zauważalne w programie IE i z dużą liczbą widoków internetowych i nie są zalecane dla systemu iOS.

    Opróżniając kolejkę czasomierza na końcu pierwszej pętli zdarzeń, można natychmiast uruchomić dowolne przejścia zerowe opóźnienia i uniknąć migotania.

Dostępne są również następujące 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

Interfejsy pomocnika

Poniższy interfejs i wyliczenia są używane w funkcji pomocnika.

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

Powiązana zawartość

Aby napisać testy jednostkowe dla wizualizacji usługi Power BI opartych na pakietach webpack i test jednostkowy za pomocą karma poleceń i jasmine, zobacz Samouczek: dodawanie testów jednostkowych dla projektów wizualizacji usługi Power BI.

  • Last updated on