Bagikan melalui

Power BI utils pengujian visual

Artikel ini membantu Anda menginstal, mengimpor, dan menggunakan util pengujian visual Power BI. Utilitas pengujian ini dapat digunakan untuk pengujian unit dan mencakup tiruan dan metode untuk elemen, seperti tampilan data, pilihan, dan skema warna.

Prasyarat

Untuk menggunakan paket ini, instal:

Penginstalan

Untuk menginstal util pengujian dan menambahkan dependensinya ke package.json Anda, jalankan perintah berikut dari direktori visual Power BI Anda:

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

Berikut ini memberikan deskripsi dan contoh pada API publik utils pengujian.

VisualBuilderBase

Digunakan oleh VisualBuilder dalam pengujian unit dengan metode yang paling sering digunakan, , buildupdate, dan updateRenderTimeout.

Metode build mengembalikan instans visual yang dibuat.

Metode enumerateObjectInstances dan updateEnumerateObjectInstancesRenderTimeout diperlukan untuk memeriksa perubahan pada opsi wadah dan pemformatan.

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

Catatan

Untuk contoh selengkapnya, lihat Menulis pengujian unit VisualBuilderBase dan skenario VisualBuilderBase penggunaan nyata.

DataViewBuilder

Digunakan oleh TestDataViewBuilder, modul ini menyediakan kelas CategoricalDataViewBuilder yang digunakan dalam metode createCategoricalDataViewBuilder. Ini juga menentukan antarmuka dan metode yang diperlukan untuk bekerja dengan DataView yang ditiru dalam pengujian unit.

  • withValues menambahkan kolom seri statis, dan withGroupedValues menambahkan kolom seri dinamis.

    Jangan terapkan seri dinamis dan seri statis dalam visual DataViewCategorical. Anda hanya dapat menggunakan keduanya dalam kueri DataViewCategorical, di mana DataViewTransform diharapkan untuk membaginya menjadi objek Visual DataViewCategorical terpisah.

  • buildmengembalikan DataView dengan metadata dan DataViewCategorical.

    build mengembalikan Tidak terdefinisi jika kombinasi parameter ilegal, seperti termasuk seri dinamis dan statis saat membangun Visual 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

Digunakan untuk pembuatan VisualData dalam pengujian unit. Saat data ditempatkan dalam wadah bidang data, Power BI menghasilkan objek DataView kategoris berdasarkan data. TestDataViewBuilder membantu mensimulasikan pembuatan DataView kategoris.

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

Daftar berikut ini mencantumkan antarmuka yang paling sering digunakan saat membuat 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[];
}

Catatan

Untuk contoh selengkapnya, lihat Menulis pengujian unit TestDataViewBuilder dan skenario Real usage TestDataViewBuilder.

Tiruan

MockIVisualHost

Menerapkan IVisualHost untuk menguji visual Power BI tanpa dependensi eksternal, seperti kerangka kerja Power BI.

Metode yang berguna termasuk createSelectionIdBuilder, createSelectionManager, createLocalizationManager, dan properti 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 membuat dan mengembalikan instans IVisualHost, sebenarnya MockIVisualHost.

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

    Contoh:

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

let host: IVisualHost = createVisualHost();

Penting

MockIVisualHost adalah implementasi palsu dari IVisualHost dan hanya boleh digunakan dengan pengujian unit.

MockIColorPalette

Menerapkan IColorPalette untuk menguji visual Power BI tanpa dependensi eksternal, seperti kerangka kerja Power BI.

MockIColorPalette menyediakan properti yang berguna untuk memeriksa skema warna atau mode kontras tinggi dalam pengujian unit.

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 membuat dan mengembalikan instans IColorPalette, sebenarnya MockIColorPalette.

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

    Contoh:

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

let colorPalette: IColorPalette = createColorPalette();

Penting

MockIColorPalette adalah implementasi palsu dari IColorPalette dan hanya boleh digunakan dengan pengujian unit.

MockISelectionId

Menerapkan ISelectionId untuk menguji visual Power BI tanpa dependensi eksternal, seperti kerangka kerja 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 membuat dan mengembalikan instans ISelectionId, sebenarnya MockISelectionId.

    function createSelectionId(key?: string): ISelectionId;

    Contoh:

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

let selectionId: ISelectionId = createSelectionId();

Catatan

MockISelectionId adalah implementasi palsu dari ISelectionId dan hanya boleh digunakan dengan pengujian unit.

MockISelectionIdBuilder

Menerapkan ISelectionIdBuilder untuk menguji visual Power BI tanpa dependensi eksternal, seperti kerangka kerja 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 membuat dan mengembalikan instans ISelectionIdBuilder, sebenarnya MockISelectionIdBuilder.

    function createSelectionIdBuilder(): ISelectionIdBuilder;

    Contoh:

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

let selectionIdBuilder = createSelectionIdBuilder();

Catatan

MockISelectionIdBuilder adalah implementasi palsu dari ISelectionIdBuilder dan hanya boleh digunakan dengan pengujian unit.

MockISelectionManager

Menerapkan ISelectionManager untuk menguji visual Power BI tanpa dependensi eksternal, seperti kerangka kerja 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 membuat dan mengembalikan instans ISelectionManager, sebenarnya MockISelectionManager.

    function createSelectionManager(): ISelectionManager

    Contoh:

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

let selectionManager: ISelectionManager = createSelectionManager();

Catatan

MockISelectionManager adalah implementasi palsu dari ISelectionManager dan hanya boleh digunakan dengan pengujian unit.

MockILocale

Mengatur lokal dan mengubahnya untuk kebutuhan Anda selama proses pengujian unit.

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 membuat dan mengembalikan instans MockILocale. 
    funciton createLocale(locales?: Object): MockILocale;

MockITooltipService

Mensimulasikan TooltipService dan memanggilnya untuk kebutuhan Anda selama proses pengujian unit.

class MockITooltipService implements ITooltipService {
    constructor(isEnabled: boolean = true);
    enabled(): boolean;
    show(options: TooltipShowOptions): void;
    move(options: TooltipMoveOptions): void;
    hide(options: TooltipHideOptions): void;
}
  • createTooltipService membuat dan mengembalikan instans MockITooltipService. 
    function createTooltipService(isEnabled?: boolean): ITooltipService;

MockIAllowInteractions

export class MockIAllowInteractions {
    constructor(public isEnabled?: boolean); // false by default
}
  • createAllowInteractions membuat dan mengembalikan instans MockIAllowInteractions. 
    function createAllowInteractions(isEnabled?: boolean): MockIAllowInteractions;

MockILocalizationManager

Menyediakan kemampuan dasar LocalizationManager, yang diperlukan untuk pengujian unit.

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

  • createLocalizationManager membuat dan mengembalikan instans ILocalizationManager, sebenarnya MockILocalizationManager.

    function createLocalizationManager(displayNames?: any): ILocalizationManager;

    Contoh:

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

MockITelemetryService

Mensimulasikan penggunaan TelemetryService.

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

Pembuatan MockITelemetryServicetypescript function createTelemetryService(): ITelemetryService;

MockIAuthenticationService

Mensimulasikan pekerjaan AuthenticationService dengan menyediakan token Microsoft Entra yang ditiru.

class MockIAuthenticationService implements IAuthenticationService  {
    constructor(token: string);
    getAADToken(visualId?: string): powerbi.IPromise<string>
}
  • createAuthenticationService membuat dan mengembalikan instans IAuthenticationService, sebenarnya MockIAuthenticationService. 
    function createAuthenticationService(token?: string): IAuthenticationService;

MockIStorageService

Memungkinkan Anda menggunakan ILocalVisualStorageService dengan perilaku yang sama dengan LocalStorage.

class MockIStorageService implements ILocalVisualStorageService {
  get(key: string): IPromise<string>;
  set(key: string, data: string): IPromise<number>;
  remove(key: string): void;
}
  • createStorageService membuat dan mengembalikan instans ILocalVisualStorageService, sebenarnya 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 membuat dan mengembalikan instans IVisualEventService, sebenarnya MockIEventService. 
    function createEventService(): IVisualEventService;

Utils

Utils mencakup metode pembantu untuk pengujian unit visual Power BI, termasuk pembantu yang terkait dengan warna, angka, dan peristiwa.

  • renderTimeout mengembalikan batas waktu.

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

  • testDom membantu mengatur perlengkapan dalam pengujian unit.

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

    Contoh:

    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

    Mengembalikan struktur berikut:

    { solid: { color: color } }

  • assertColorsMatchmembandingkan objek RgbColor yang diurai dari string input.

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

  • parseColorString mengurai warna dari string input dan mengembalikannya dalam antarmuka yang ditentukan RgbColor.

    function parseColorString(color: string): RgbColor

  • getRandomNumbers menghasilkan angka acak menggunakan nilai min dan maks. Anda dapat menentukan exceptionList dan menyediakan fungsi untuk perubahan hasil.

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

  • getRandomNumbers menyediakan array angka acak yang dihasilkan oleh getRandomNumber metode dengan nilai min dan maks yang ditentukan.

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

Metode berikut ditulis untuk simulasi peristiwa halaman web dalam pengujian unit.

  • clickElement mensimulasikan klik pada elemen yang ditentukan.

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

  • createTouchmengembalikan objek Touch untuk membantu mensimulasikan peristiwa sentuhan.

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

  • createTouchesListmengembalikan daftar acara Touch yang disimulasikan.

    function createTouchesList(touches: Touch[]): TouchList

  • createContextMenuEvent mengembalikan MouseEvent.

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

  • createMouseEvent membuat dan mengembalikan 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

Metode berikut digunakan untuk mensimulasikan peristiwa D3 dalam pengujian unit.

  • flushAllD3Transitions memaksa semua transisi D3 selesai.

    function flushAllD3Transitions()

    Catatan

    Biasanya, transisi penundaan nol dijalankan setelah penundaan seketika (<10 md), tetapi ini dapat menyebabkan kedipan singkat jika browser merender halaman dua kali. Setelah di akhir perulangan peristiwa pertama, maka sekali lagi segera pada panggilan balik timer pertama.

    Kedipan ini lebih terlihat pada IE dan dengan sejumlah besar tampilan web dan tidak disarankan untuk iOS.

    Dengan menghapus antrean timer di akhir perulangan peristiwa pertama, Anda dapat segera menjalankan transisi nol penundaan dan menghindari kedipan.

Metode berikut juga disertakan:

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

Antarmuka pembantu

Antarmuka dan enumerasi berikut digunakan dalam fungsi pembantu.

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

Konten terkait

Untuk menulis pengujian unit untuk visual Power BI berbasis webpack, dan pengujian unit dengan karma dan , lihat Tutorial: Menambahkan pengujian unit untuk proyekjasmine visual Power BI.