Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Bu makale Power BI görselleri test yardımcı programlarını yüklemenize, içeri aktarmanıza ve kullanmanıza yardımcı olur. Bu test yardımcı programları birim testi için kullanılabilir ve veri görünümleri, seçimler ve renk şemaları gibi öğelere yönelik sahteleri ve yöntemleri içerir.
Önkoşullar
Bu paketi kullanmak için şunları yükleyin:
- node.js, LTS sürümünün kullanılması önerilir
- npm, sürüm 3.0.0 veya üzeri
PowerBI-visuals-toolspaketi
Yükleme
Test yardımcı programlarını yüklemek ve bağımlılığını package.json eklemek için Power BI görselleri dizininizden aşağıdaki komutu çalıştırın:
npm install powerbi-visuals-utils-testutils --save
Aşağıda test yardımcı programları genel API'sine ilişkin açıklamalar ve örnekler verilmiştir.
VisualBuilderBase
VisualBuilder tarafından birim testlerinde en sık kullanılan , ve updateRenderTimeoutyöntemleriyle buildupdatekullanılır.
yöntemi, build görselin oluşturulmuş bir örneğini döndürür.
Demet enumerateObjectInstances ve biçimlendirme seçeneklerindeki değişiklikleri denetlemek için ve updateEnumerateObjectInstancesRenderTimeout yöntemleri gereklidir.
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[];
}
Not
Daha fazla örnek için bkz . VisualBuilderBase birim testleri yazma ve Gerçek kullanım VisualBuilderBase senaryosu.
DataViewBuilder
TestDataViewBuilder tarafından kullanılan bu modül, yönteminde createCategoricalDataViewBuilder kullanılan bir CategoricalDataViewBuilder sınıfı sağlar. Ayrıca birim testlerinde sahte DataView ile çalışmak için gereken arabirimleri ve yöntemleri belirtir.
withValuesstatik seri sütunları ekler vewithGroupedValuesdinamik seri sütunları ekler.Görsel DataViewCategorical içinde hem dinamik seri hem de statik seri uygulamayın. Her ikisini de yalnızca DataViewCategorical sorgusunda kullanabilirsiniz. DataViewTransform'un bunları ayrı görsel DataViewCategorical nesnelerine bölmesi beklenir.
buildmeta veriler ve DataViewCategorical ile DataView döndürür.build, visual DataView oluşturulurken hem dinamik hem de statik seriler dahil olmak üzere parametrelerin bileşimi geçersizse Undefined döndürür.
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
Birim testlerinde VisualData oluşturma için kullanılır. Veriler veri alanı demetlerine yerleştirildiğinde Power BI, verileri temel alan kategorik bir DataView nesnesi oluşturur. TestDataViewBuilder, kategorik DataView oluşturma işleminin benzetimini oluşturmaya yardımcı olur.
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;
}
Aşağıda, oluştururken testDataViewen sık kullanılan arabirimler listelenir:
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[];
}
Not
Daha fazla örnek için bkz . TestDataViewBuilder birim testleri yazma ve Gerçek kullanım TestDataViewBuilder senaryosu.
Sahte uygulamalar
MockIVisualHost
Power BI çerçevesi gibi dış bağımlılıklar olmadan Power BI görsellerini test etmek için IVisualHost uygular.
Yararlı yöntemler arasında , createSelectionManager, createLocalizationManagerve getter özellikleri bulunurcreateSelectionIdBuilder.
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, aslında MockIVisualHost olan bir IVisualHost örneği oluşturur ve döndürür.function createVisualHost(locale?: Object, allowInteractions?: boolean, colors?: IColorInfo[], isEnabled?: boolean, displayNames?: any, token?: string): IVisualHost;Örnek:
import { createVisualHost } from "powerbi-visuals-utils-testutils" let host: IVisualHost = createVisualHost();
Önemli
MockIVisualHost, IVisualHost'un sahte bir uygulamasıdır ve yalnızca birim testleriyle kullanılmalıdır.
MockIColorPalette
Power BI çerçevesi gibi dış bağımlılıklar olmadan Power BI görsellerini test etmek için IColorPalette uygular.
MockIColorPalette , birim testlerinde renk şemasını veya yüksek karşıtlık modunu denetlemek için kullanışlı özellikler sağlar.
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};
}
createColorPaletteaslında MockIColorPalette olan IColorPalette örneğini oluşturur ve döndürür.function createColorPalette(colors?: IColorInfo[]): IColorPalette;Örnek:
import { createColorPalette } from "powerbi-visuals-utils-testutils" let colorPalette: IColorPalette = createColorPalette();
Önemli
MockIColorPalette, IColorPalette'in sahte bir uygulamasıdır ve yalnızca birim testleriyle kullanılmalıdır.
MockISelectionId
Power BI çerçevesi gibi dış bağımlılıklar olmadan Power BI görsellerini test etmek için ISelectionId uygular.
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, aslında MockISelectionId olan bir ISelectionId örneği oluşturur ve döndürür.function createSelectionId(key?: string): ISelectionId;Örnek:
import { createColorPalette } from "powerbi-visuals-utils-testutils" let selectionId: ISelectionId = createSelectionId();
Not
MockISelectionId, ISelectionId'nin sahte bir uygulamasıdır ve yalnızca birim testleriyle kullanılmalıdır.
MockISelectionIdBuilder
Power BI çerçevesi gibi dış bağımlılıklar olmadan Power BI görsellerini test etmek için ISelectionIdBuilder uygular.
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, aslında MockISelectionIdBuilder olan bir ISelectionIdBuilder örneği oluşturur ve döndürür.function createSelectionIdBuilder(): ISelectionIdBuilder;Örnek:
import { selectionIdBuilder } from "powerbi-visuals-utils-testutils"; let selectionIdBuilder = createSelectionIdBuilder();
Not
MockISelectionIdBuilder, ISelectionIdBuilder'ın sahte bir uygulamasıdır ve yalnızca birim testleriyle kullanılmalıdır.
MockISelectionManager
Power BI çerçevesi gibi dış bağımlılıklar olmadan Power BI görsellerini test etmek için ISelectionManager uygular.
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, aslında MockISelectionManager olan ISelectionManager örneğini oluşturur ve döndürür.function createSelectionManager(): ISelectionManagerÖrnek:
import { createSelectionManager } from "powerbi-visuals-utils-testutils"; let selectionManager: ISelectionManager = createSelectionManager();
Not
MockISelectionManager, ISelectionManager'ın sahte bir uygulamasıdır ve yalnızca birim testleriyle kullanılmalıdır.
MockILocale
Birim testi işlemi sırasında yerel ayarı ayarlar ve gereksinimlerinize göre değiştirir.
class MockILocale {
constructor(locales?: Object): void; // Default locales are en-US and ru-RU
locale(key: string): void;// setter property
locale(): string; // getter property
}
createLocalebir MockILocale örneği oluşturur ve döndürür.funciton createLocale(locales?: Object): MockILocale;
MockITooltipService
Bir birim testi işlemi sırasında gereksinimleriniz için benzetimini TooltipService yapıp çağırır.
class MockITooltipService implements ITooltipService {
constructor(isEnabled: boolean = true);
enabled(): boolean;
show(options: TooltipShowOptions): void;
move(options: TooltipMoveOptions): void;
hide(options: TooltipHideOptions): void;
}
createTooltipServicebir MockITooltipService örneği oluşturur ve döndürür.function createTooltipService(isEnabled?: boolean): ITooltipService;
MockIAllowInteractions
export class MockIAllowInteractions {
constructor(public isEnabled?: boolean); // false by default
}
createAllowInteractionsbir MockIAllowInteractions örneği oluşturur ve döndürür.function createAllowInteractions(isEnabled?: boolean): MockIAllowInteractions;
MockILocalizationManager
Birim testi için gereken LocalizationManager'ın temel özelliklerini sağlar.
class MockILocalizationManager implements ILocalizationManager {
constructor(displayNames: {[key: string]: string});
getDisplayName(key: string): string; // returns default or setted displayNames for localized elements
}
createLocalizationManageraslında MockILocalizationManager olan ILocalizationManager örneğini oluşturur ve döndürür.function createLocalizationManager(displayNames?: any): ILocalizationManager;Örnek:
import { createLocalizationManager } from "powerbi-visuals-utils-testutils"; let localizationManagerMock: ILocalizationManager = createLocalizationManager();
MockITelemetryService
TelemetriHizmet kullanımını simüle eder.
class MockITelemetryService implements ITelemetryService {
instanceId: string;
trace(veType: powerbi.VisualEventType, payload?: string) {
}
}
Oluşturma MockITelemetryServicetypescript function createTelemetryService(): ITelemetryService;
MockIAuthenticationService
Sahte bir Microsoft Entra belirteci sağlayarak AuthenticationService'in çalışmasının benzetimini gerçekleştirir.
class MockIAuthenticationService implements IAuthenticationService {
constructor(token: string);
getAADToken(visualId?: string): powerbi.IPromise<string>
}
createAuthenticationServiceaslında MockIAuthenticationService olan IAuthenticationService örneğini oluşturur ve döndürür.function createAuthenticationService(token?: string): IAuthenticationService;
MockIStorageService
ILocalVisualStorageService'i LocalStorage ile aynı davranışla kullanmanıza olanak tanır.
class MockIStorageService implements ILocalVisualStorageService {
get(key: string): IPromise<string>;
set(key: string, data: string): IPromise<number>;
remove(key: string): void;
}
createStorageServiceaslında MockIStorageService olan ILocalVisualStorageService örneğini oluşturur ve döndürür.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, aslında MockIEventService olan bir IVisualEventService örneği oluşturur ve döndürür.function createEventService(): IVisualEventService;
Yardımcı Programlar
Yardımcı programlar, Power BI görsellerinin birim testi için renkler, sayılar ve olaylarla ilgili yardımcılar da dahil olmak üzere yardımcı yöntemleri içerir.
renderTimeoutbir zaman aşımı döndürür.function renderTimeout(fn: Function, timeout: number = DefaultWaitForRender): numbertestDombirim testlerinde bir fikstür ayarlamaya yardımcı olur.function testDom(height: number | string, width: number | string): JQueryÖrnek:
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(); }); });
Renkle ilgili yardımcı yöntemler
getSolidColorStructuralObjectfunction getSolidColorStructuralObject(color: string): anyAşağıdaki yapıyı döndürür:
{ solid: { color: color } }assertColorsMatchgiriş dizelerinden ayrıştırılan RgbColor nesnelerini karşılaştırır.function assertColorsMatch(actual: string, expected: string, invert: boolean = false): booleanparseColorStringgiriş dizesindeki rengi ayrıştırarak belirtilen RgbColor arabiriminde döndürür.function parseColorString(color: string): RgbColor
Numarayla ilgili yardımcı yöntemler
getRandomNumbersmin ve max değerlerini kullanarak rastgele bir sayı oluşturur. Sonuç değişikliği için bir işlev belirtebilirexceptionListve sağlayabilirsiniz.function getRandomNumber( min: number, max: number, exceptionList?: number[], changeResult: (value: any) => number = x => x): numbergetRandomNumbers, belirtilen min ve max değerleriyle yöntemi tarafındangetRandomNumberoluşturulan rastgele sayıların bir dizisini sağlar.function getRandomNumbers(count: number, min: number = 0, max: number = 1): number[]
Olayla ilgili yardımcı yöntemler
Aşağıdaki yöntemler, birim testlerinde web sayfası olay benzetimi için yazılmıştır.
clickElementbelirtilen öğeye bir tıklama benzetimi sağlar.function clickElement(element: JQuery, ctrlKey: boolean = false): voidcreateTouchbir dokunma olayının simülasyonunu yapmaya yardımcı olmak için bir Touch nesnesi döndürür.function createTouch(x: number, y: number, element: JQuery, id: number = 0): TouchcreateTouchesListsanal Dokunma olaylarının listesini döndürür.function createTouchesList(touches: Touch[]): TouchListcreateContextMenuEventMouseEvent döndürür.function createContextMenuEvent(x: number, y: number): MouseEventcreateMouseEvent, MouseEvent'i oluşturur ve döndürür.function createMouseEvent( mouseEventType: MouseEventType, eventType: ClickEventType, x: number, y: number, button: number = 0): MouseEventcreateTouchEndEventfunction createTouchEndEvent(touchList?: TouchList): UIEventcreateTouchMoveEventfunction createTouchMoveEvent(touchList?: TouchList): UIEventcreateTouchStartEventfunction createTouchStartEvent(touchList?: TouchList): UIEvent
D3 olayla ilgili yardımcı yöntemler
Birim testlerinde D3 olaylarının benzetimini yapmak için aşağıdaki yöntemler kullanılır.
flushAllD3Transitionstüm D3 geçişlerini tamamlamaya zorlar.function flushAllD3Transitions()Not
Normalde, sıfır gecikmeli geçişler anlık bir gecikmeden (<10 ms) sonra yürütülür, ancak tarayıcı sayfayı iki kez işlerse bu kısa bir titremeye neden olabilir. İlk olay döngüsünün sonunda bir kez, ardından ilk zamanlayıcı geri çağırmada hemen yeniden.
Bu titreşimler IE'de ve çok sayıda web görünümüyle daha belirgindir ve iOS için önerilmez.
İlk olay döngüsünün sonunda zamanlayıcı kuyruğu temizleyerek, sıfır gecikmeli geçişleri hemen çalıştırabilir ve titremeyi önleyebilirsiniz.
Aşağıdaki yöntemler de dahildir:
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
Yardımcı arabirimler
Yardımcı işlevinde aşağıdaki arabirim ve numaralandırmalar kullanılır.
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,
}
İlgili içerik
Webpack tabanlı Power BI görselleri için birim testleri yazmak ve ve jasmineile karma birim testi yazmak için bkz. Öğretici: Power BI görsel projeleri için birim testleri ekleme.