Εκμάθηση: Προσθήκη δοκιμών μονάδας για έργα απεικόνισης Power BITutorial: Add unit tests for Power BI visual projects

• 06/18/2019
• 7 λεπτά για ανάγνωση
• • K
  • o

Αυτό το άρθρο περιγράφει τα βασικά στοιχεία εγγραφής δοκιμών μονάδας για τις απεικονίσεις σας Power BI, συμπεριλαμβανομένου του τρόπου:This article describes the basics of writing unit tests for your Power BI visuals, including how to:

• Ρύθμιση του πλαισίου λειτουργίας δοκιμών Karma JavaScript, Jasmine.Set up the Karma JavaScript test runner testing framework, Jasmine.
• Χρήση του πακέτου powerbi-visuals-utils-testutils.Use the powerbi-visuals-utils-testutils package.
• Χρήση δοκιμών και απομιμήσεων για να απλοποιηθεί η δοκιμή μονάδας των απεικονίσεων Power BI.Use mocks and fakes to help simplify unit testing of Power BI visuals.

Προαπαιτούμενα στοιχείαPrerequisites

• Ένα εγκατεστημένο έργο απεικονίσεων Power BIAn installed Power BI visuals project
• Ένα διαμορφωμένο περιβάλλον Node.jsA configured Node.js environment

Εγκατάσταση και ρύθμιση παραμέτρων της λειτουργίας δοκιμών Karma JavaScript και του JasmineInstall and configure the Karma JavaScript test runner and Jasmine

Προσθέστε τις απαιτούμενες βιβλιοθήκες στο αρχείο package.json στην ενότητα devDependencies:Add the required libraries to the package.json file in the devDependencies section:

"@babel/polyfill": "^7.2.5",
"@types/d3": "5.5.0",
"@types/jasmine": "2.5.37",
"@types/jasmine-jquery": "1.5.28",
"@types/jquery": "2.0.41",
"@types/karma": "3.0.0",
"@types/lodash-es": "4.17.1",
"coveralls": "3.0.2",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine": "2.5.2",
"jasmine-core": "2.5.2",
"jasmine-jquery": "2.1.1",
"jquery": "3.1.1",
"karma": "3.1.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.2",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "2.0.1",
"karma-junit-reporter": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^3.0.13",
"karma-typescript-preprocessor": "0.4.0",
"karma-webpack": "3.0.5",
"puppeteer": "1.17.0",
"style-loader": "0.23.1",
"ts-loader": "5.3.0",
"ts-node": "7.0.1",
"tslint": "^5.12.0",
"webpack": "4.26.0"

Για να μάθετε περισσότερα σχετικά με το package.json, δείτε την περιγραφή στο npm-package.json.To learn more about package.json, see the description at npm-package.json.

Αποθηκεύστε το αρχείο package.json και, στην τοποθεσία package.json, εκτελέστε την ακόλουθη εντολή:Save the package.json file and, at the package.json location, run the following command:

npm install

Η διαχείριση πακέτων εγκαθιστά όλα τα νέα πακέτα που προστίθενται στο package.json.The package manager installs all new packages that are added to package.json.

Για να εκτελέσετε δοκιμές μονάδας, διαμορφώστε τη λειτουργία δοκιμών και τις παραμέτρους webpack.To run unit tests, configure the test runner and webpack config.

Ο παρακάτω κώδικας είναι ένα δείγμα του αρχείου test.webpack.config.js:The following code is a sample of the test.webpack.config.js file:

const path = require('path');
const webpack = require("webpack");

module.exports = {
    devtool: 'source-map',
    mode: 'development',
    optimization : {
        concatenateModules: false,
        minimize: false
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.tsx?$/i,
                enforce: 'post',
                include: /(src)/,
                exclude: /(node_modules|resources\/js\/vendor)/,
                loader: 'istanbul-instrumenter-loader',
                options: { esModules: true }
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            paths: [path.resolve(__dirname, 'node_modules')]
                        }
                    }
                ]
            }
        ]
    },
    externals: {
        "powerbi-visuals-api": '{}'
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.css']
    },
    output: {
        path: path.resolve(__dirname, ".tmp/test")
    },
    plugins: [
        new webpack.ProvidePlugin({
            'powerbi-visuals-api': null
        })
    ]
};

Ο παρακάτω κώδικας είναι ένα δείγμα του αρχείου karma.conf.ts:The following code is a sample of the karma.conf.ts file:

"use strict";

const webpackConfig = require("./test.webpack.config.js");
const tsconfig = require("./test.tsconfig.json");
const path = require("path");

const testRecursivePath = "test/visualTest.ts";
const srcOriginalRecursivePath = "src/**/*.ts";
const coverageFolder = "coverage";

process.env.CHROME_BIN = require("puppeteer").executablePath();

import { Config, ConfigOptions } from "karma";

module.exports = (config: Config) => {
    config.set(<ConfigOptions>{
        mode: "development",
        browserNoActivityTimeout: 100000,
        browsers: ["ChromeHeadless"], // or Chrome to use locally installed Chrome browser
        colors: true,
        frameworks: ["jasmine"],
        reporters: [
            "progress",
            "junit",
            "coverage-istanbul"
        ],
        junitReporter: {
            outputDir: path.join(__dirname, coverageFolder),
            outputFile: "TESTS-report.xml",
            useBrowserName: false
        },
        singleRun: true,
        plugins: [
            "karma-coverage",
            "karma-typescript",
            "karma-webpack",
            "karma-jasmine",
            "karma-sourcemap-loader",
            "karma-chrome-launcher",
            "karma-junit-reporter",
            "karma-coverage-istanbul-reporter"
        ],
        files: [
            "node_modules/jquery/dist/jquery.min.js",
            "node_modules/jasmine-jquery/lib/jasmine-jquery.js",
            {
                pattern: './capabilities.json',
                watched: false,
                served: true,
                included: false
            },
            testRecursivePath,
            {
                pattern: srcOriginalRecursivePath,
                included: false,
                served: true
            }
        ],
        preprocessors: {
            [testRecursivePath]: ["webpack", "coverage"]
        },
        typescriptPreprocessor: {
            options: tsconfig.compilerOptions
        },
        coverageIstanbulReporter: {
            reports: ["html", "lcovonly", "text-summary", "cobertura"],
            dir: path.join(__dirname, coverageFolder),
            'report-config': {
                html: {
                    subdir: 'html-report'
                }
            },
            combineBrowserReports: true,
            fixWebpackSourcePaths: true,
            verbose: false
        },
        coverageReporter: {
            dir: path.join(__dirname, coverageFolder),
            reporters: [
                // reporters not supporting the `file` property
                { type: 'html', subdir: 'html-report' },
                { type: 'lcov', subdir: 'lcov' },
                // reporters supporting the `file` property, use `subdir` to directly
                // output them in the `dir` directory
                { type: 'cobertura', subdir: '.', file: 'cobertura-coverage.xml' },
                { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
                { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
            ]
        },
        mime: {
            "text/x-typescript": ["ts", "tsx"]
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: "errors-only"
        }
    });
};

Εάν χρειαστεί, μπορείτε να τροποποιήσετε αυτήν τη ρύθμιση παραμέτρων.If necessary, you can modify this configuration.

Ο κώδικας στο karma.conf.js περιέχει την ακόλουθη μεταβλητή:The code in karma.conf.js contains the following variable:

• recursivePathToTests: Εντοπίζει τον κωδικό δοκιμήςrecursivePathToTests: Locates the test code

• srcRecursivePath: Εντοπίζει τον κώδικα JavaScript εξόδου μετά τη μεταγλώττισηsrcRecursivePath: Locates the output JavaScript code after compiling

• srcCssRecursivePath: Εντοπίζει το CSS εξόδου μετά τη μεταγλώττιση μικρότερου αρχείου με στυλsrcCssRecursivePath: Locates the output CSS after compiling less file with styles

• srcOriginalRecursivePath: Εντοπίζει τον πηγαίο κώδικα της απεικόνισής σαςsrcOriginalRecursivePath: Locates the source code of your visual

• coverageFolder: Προσδιορίζει πού θα δημιουργηθεί η αναφορά κάλυψηςcoverageFolder: Determines where the coverage report is to be created

Το αρχείο ρύθμισης παραμέτρων περιλαμβάνει τις εξής ιδιότητες:The configuration file includes the following properties:

• singleRun: true: Οι δοκιμές εκτελούνται σε ένα σύστημα συνεχούς ενοποίηση (CI) ή μπορούν να εκτελεστούν μία φορά.singleRun: true: Tests are run on a continuous integration (CI) system, or they can be run one time. Μπορείτε να αλλάξετε τη ρύθμιση σε false για τον εντοπισμό σφαλμάτων στις δοκιμές σας.You can change the setting to false for debugging your tests. Το Karma διατηρεί το πρόγραμμα περιήγησης σε λειτουργία, ώστε να μπορείτε να χρησιμοποιήσετε την κονσόλα για εντοπισμό σφαλμάτων.Karma keeps the browser running so that you can use the console for debugging.

• files: [...]: Σε αυτόν τον πίνακα, μπορείτε να καθορίσετε τα αρχεία για φόρτωση στο πρόγραμμα περιήγησης.files: [...]: In this array, you can specify the files to load to the browser. Συνήθως, υπάρχουν αρχεία προέλευσης, υποθέσεις δοκιμών και βιβλιοθήκες (Jasmine, βοηθητικά προγράμματα δοκιμών).Usually, there are source files, test cases, libraries (Jasmine, test utilities). Μπορείτε να προσθέσετε επιπλέον αρχεία στη λίστα, ανάλογα με τις ανάγκες.You can add additional files to the list, as necessary.

• preprocessors: Σε αυτήν την ενότητα, διαμορφώνετε ενέργειες που εκτελούνται πριν την εκτέλεση των δοκιμών μονάδας.preprocessors: In this section, you configure actions that run before the unit tests run. Εκτελούν προ-μεταγλώττιση του typescript σε JavaScript, προετοιμάζουν αρχεία αντιστοίχισης προέλευσης και δημιουργούν αναφορά κάλυψης κώδικα.They precompile the typescript to JavaScript, prepare source map files, and generate code coverage report. Μπορείτε να απενεργοποιήσετε το coverage όταν εντοπίζετε σφάλματα στις δοκιμές σας.You can disable coverage when you debug your tests. Η κάλυψη δημιουργεί πρόσθετο κώδικα για έλεγχο της κάλυψης δοκιμής, που περιπλέκει τις δοκιμές εντοπισμού σφαλμάτων.Coverage generates additional code for check code for the test coverage, which complicates debugging tests.

Για περιγραφές όλων των ρυθμίσεων Karma, μεταβείτε στη σελίδα Αρχείο ρύθμισης παραμέτρων Karma page.For descriptions of all Karma configurations, go to the Karma Configuration File page.

Για τη διευκόλυνσή σας, μπορείτε να προσθέσετε μια εντολή δοκιμής στο scripts:For your convenience, you can add a test command into scripts:

{
    "scripts": {
        "pbiviz": "pbiviz",
        "start": "pbiviz start",
        "typings":"node node_modules/typings/dist/bin.js i",
        "lint": "tslint -r \"node_modules/tslint-microsoft-contrib\"  \"+(src|test)/**/*.ts\"",
        "pretest": "pbiviz package --resources --no-minify --no-pbiviz --no-plugin",
        "test": "karma start"
    }
    ...
}

Είστε τώρα έτοιμοι να ξεκινήσετε τη συγγραφή των δοκιμών μονάδας.You're now ready to begin writing your unit tests.

Έλεγχος του στοιχείου DOM της απεικόνισηςCheck the DOM element of the visual

Για να δοκιμάσετε την απεικόνιση, δημιουργήστε πρώτα μια παρουσία απεικόνισης.To test the visual, first create an instance of visual.

Δημιουργία εργαλείου δόμησης παρουσίας απεικόνισηςCreate a visual instance builder

Προσθέστε ένα αρχείο visualBuilder.ts στον φάκελο δοκιμή χρησιμοποιώντας τον ακόλουθο κώδικα:Add a visualBuilder.ts file to the test folder by using the following code:

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

import {
    BarChart as VisualClass
} from "../src/visual";

import  powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

export class BarChartBuilder extends VisualBuilderBase<VisualClass> {
    constructor(width: number, height: number) {
        super(width, height);
    }

    protected build(options: VisualConstructorOptions) {
        return new VisualClass(options);
    }

    public get mainElement() {
        return this.element.children("svg.barChart");
    }
}

Υπάρχει μέθοδος build για τη δημιουργία μιας παρουσίας της απεικόνισής σας.There's build method for creating an instance of your visual. Το mainElement είναι μια μέθοδος "get", η οποία επιστρέφει μια παρουσία του στοιχείου μοντέλου αντικειμένου εγγράφου "root" (DOM) στην απεικόνισή σας.mainElement is a get method, which returns an instance of "root" document object model (DOM) element in your visual. Η ιδιότητα getter είναι προαιρετική, αλλά διευκολύνει τη συγγραφή της δοκιμής μονάδας.The getter is optional, but it makes writing the unit test easier.

Τώρα έχετε μια δομή μιας παρουσίας της απεικόνισής σας.You now have a build of an instance of your visual. Ας γράψουμε την περίπτωση δοκιμής.Let's write the test case. Η περίπτωση δοκιμής ελέγχει τα στοιχεία SVG που δημιουργούνται όταν εμφανίζεται η απεικόνισή σας.The test case checks the SVG elements that are created when your visual is displayed.

Δημιουργία αρχείου typescript για τη συγγραφή περιπτώσεων δοκιμήςCreate a typescript file to write test cases

Προσθέστε ένα αρχείο visualTest.ts για τις περιπτώσεις δοκιμών χρησιμοποιώντας τον παρακάτω κώδικα:Add a visualTest.ts file for the test cases by using the following code:

import powerbi from "powerbi-visuals-api";

import { BarChartBuilder } from "./VisualBuilder";

import {
    BarChart as VisualClass
} from "../src/visual";

import VisualBuilder = powerbi.extensibility.visual.test.BarChartBuilder;

describe("BarChart", () => {
    let visualBuilder: VisualBuilder;
    let dataView: DataView;

    beforeEach(() => {
        visualBuilder = new VisualBuilder(500, 500);
    });

    it("root DOM element is created", () => {
        expect(visualBuilder.mainElement).toBeInDOM();
    });
});

Καλούνται πολλές μέθοδοι:Several methods are called:

• describe: Περιγράφει μια περίπτωση δοκιμής.describe: Describes a test case. Στο πλαίσιο του Jasmine, περιγράφει συχνά μια οικογένεια ή ομάδα προδιαγραφών.In the context of the Jasmine framework, it often describes a suite or group of specs.

• beforeEach: Καλείται πριν από κάθε κλήση της μεθόδου it, που ορίζεται στη μέθοδο describe.beforeEach: Is called before each call of the it method, which is defined in the describe method.

• it: Καθορίζει μια μεμονωμένη προδιαγραφή. Η μέθοδος it θα πρέπει να περιέχει ένα ή περισσότερα expectations.it: Defines a single spec. The it method should contain one or more expectations.

• expect: Δημιουργεί μια προσδοκία για μια προδιαγραφή. Μια προδιαγραφή είναι πετυχημένη όταν όλες οι προσδοκίες είναι πετυχημένες χωρίς καμία αποτυχία.expect: Creates an expectation for a spec. A spec succeeds if all expectations pass without any failures.

• toBeInDOM: Μία από τις μεθόδους matchers.toBeInDOM: One of the matchers methods. Για περισσότερες πληροφορίες σχετικά με matchers, ανατρέξτε στην ενότητα Χώρος ονομάτων Jasmine: matchers.For more information about matchers, see Jasmine Namespace: matchers.

Για περισσότερες πληροφορίες σχετικά με το Jasmine, ανατρέξτε στη σελίδα Τεκμηρίωση πλαισίου Jasmine.For more information about Jasmine, see the Jasmine framework documentation page.

Εκκίνηση δοκιμών μονάδωνLaunch unit tests

Αυτή η δοκιμή ελέγχει αν δημιουργείται το ριζικό στοιχείο SVG των απεικονίσεων.This test checks that root SVG element of the visuals is created. Για να εκτελέσετε τη δοκιμή μονάδας, εισαγάγετε την ακόλουθη εντολή στο εργαλείο γραμμής εντολών:To run the unit test, enter the following command in the command-line tool:

npm run test

Το karma.js εκτελεί την περίπτωση δοκιμής στο πρόγραμμα περιήγησης Chrome.karma.js runs the test case in the Chrome browser.

Στο παράθυρο γραμμής εντολών, θα λάβετε τα εξής αποτελέσματα:In the command-line window, you'll get following output:

> karma start

23 05 2017 12:24:26.842:WARN [watcher]: Pattern "E:/WORKSPACE/PowerBI/PowerBI-visuals-sampleBarChart/data/*.csv" does not match any file.
23 05 2017 12:24:30.836:WARN [karma]: No captured browser, open https://localhost:9876/
23 05 2017 12:24:30.849:INFO [karma]: Karma v1.3.0 server started at https://localhost:9876/
23 05 2017 12:24:30.850:INFO [launcher]: Launching browser Chrome with unlimited concurrency
23 05 2017 12:24:31.059:INFO [launcher]: Starting browser Chrome
23 05 2017 12:24:33.160:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: Connected on socket /#2meR6hjXFmsE_fjiAAAA with id 5875251
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.194 secs / 0.011 secs)

=============================== Coverage summary ===============================
Statements   : 27.43% ( 65/237 )
Branches     : 19.84% ( 25/126 )
Functions    : 43.86% ( 25/57 )
Lines        : 20.85% ( 44/211 )
================================================================================

Πώς μπορείτε να προσθέσετε στατικά δεδομένα για δοκιμές μονάδωνHow to add static data for unit tests

Δημιουργήστε το αρχείο visualData.ts στον φάκελο δοκιμή χρησιμοποιώντας τον παρακάτω κώδικα:Create the visualData.ts file in the test folder by using the following code:

import powerbi from "powerbi-visuals-api";
import DataView = powerbi.DataView;

import {
    testDataViewBuilder,
    getRandomNumbers
} from "powerbi-visuals-utils-testutils";

export class SampleBarChartDataBuilder extends TestDataViewBuilder {
    public static CategoryColumn: string = "category";
    public static MeasureColumn: string = "measure";

    public constructor() {
        super();
        ...
    }

    public getDataView(columnNames?: string[]): DataView {
        let dateView: any = this.createCategoricalDataViewBuilder([
            ...
        ],
        [
            ...
        ], columnNames).build();

        // there's client side computed maxValue
        let maxLocal = 0;
        this.valuesMeasure.forEach((item) => {
                if (item > maxLocal) {
                    maxLocal = item;
                }
        });
        (<any>dataView).categorical.values[0].maxLocal = maxLocal;
    }
}

Η κλάση SampleBarChartDataBuilder επεκτείνει την TestDataViewBuilder και υλοποιεί την αφηρημένη μέθοδο getDataView.The SampleBarChartDataBuilder class extends TestDataViewBuilder and implements the abstract method getDataView.

Όταν τοποθετείτε δεδομένα σε κάδους πεδίων δεδομένων, το Power BI παράγει ένα κατηγορικό αντικείμενο dataview με βάση τα δεδομένα σας.When you put data into data-field buckets, Power BI produces a categorical dataview object that's based on your data.

Στις δοκιμές μονάδας, δεν έχετε βασικές συναρτήσεις Power BI για να αναπαραγάγετε τα δεδομένα.In unit tests, you don't have Power BI core functions to reproduce the data. Ωστόσο, πρέπει να αντιστοιχίσετε τα στατικά δεδομένα σας στην κατηγορική dataview.But you need to map your static data to the categorical dataview. Η κλάση TestDataViewBuilder μπορεί να σας βοηθήσει με την αντιστοίχιση.The TestDataViewBuilder class can help you map it.

Για περισσότερες πληροφορίες σχετικά με την αντιστοίχιση προβολής δεδομένων, ανατρέξτε στο θέμα DataViewMappings.For more information about Data View mapping, see DataViewMappings.

Στη μέθοδο getDataView, καλέστε τη μέθοδο createCategoricalDataViewBuilder με τα δεδομένα σας.In the getDataView method, you call the createCategoricalDataViewBuilder method with your data.

Στο αρχείο sampleBarChart visual capabilities.json, έχουμε αντικείμενα dataRoles και dataViewMapping:In sampleBarChart visual capabilities.json file, we have dataRoles and dataViewMapping objects:

"dataRoles": [
    {
        "displayName": "Category Data",
        "name": "category",
        "kind": "Grouping"
    },
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
"dataViewMappings": [
    {
        "conditions": [
            {
                "category": {
                    "max": 1
                },
                "measure": {
                    "max": 1
                }
            }
        ],
        "categorical": {
            "categories": {
                "for": {
                    "in": "category"
                }
            },
            "values": {
                "select": [
                    {
                        "bind": {
                            "to": "measure"
                        }
                    }
                ]
            }
        }
    }
],

Για να δημιουργήσετε την ίδια αντιστοίχιση, πρέπει να ορίσετε τις ακόλουθες παραμέτρους στη μέθοδο createCategoricalDataViewBuilder:To generate the same mapping, you must set the following params to createCategoricalDataViewBuilder method:

([
    {
        source: {
            displayName: "Category",
            queryName: SampleBarChartData.ColumnCategory,
            type: ValueType.fromDescriptor({ text: true }),
            roles: {
                Category: true
            },
        },
        values: this.valuesCategory
    }
],
[
    {
        source: {
            displayName: "Measure",
            isMeasure: true,
            queryName: SampleBarChartData.MeasureColumn,
            type: ValueType.fromDescriptor({ numeric: true }),
            roles: {
                Measure: true
            },
        },
        values: this.valuesMeasure
    },
], columnNames)

Όπου το this.valuesCategory είναι ένας πίνακας κατηγοριών:Where this.valuesCategory is an array of categories:

public valuesCategory: string[] = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

Ενώ το this.valuesMeasure είναι ένας πίνακας μετρήσεων για κάθε κατηγορία:And this.valuesMeasure is an array of measures for each category:

public valuesMeasure: number[] = [742731.43, 162066.43, 283085.78, 300263.49, 376074.57, 814724.34, 570921.34];

Τώρα, μπορείτε να χρησιμοποιήσετε την κλάση SampleBarChartDataBuilder στη δοκιμή μονάδας σας.Now, you can use the SampleBarChartDataBuilder class in your unit test.

Η κλάση ValueType ορίζεται στο πακέτο powerbi-visuals-utils-testutils.The ValueType class is defined in the powerbi-visuals-utils-testutils package. Και η μέθοδος createCategoricalDataViewBuilder απαιτεί τη βιβλιοθήκη lodash.And the createCategoricalDataViewBuilder method requires the lodash library.

Προσθέστε αυτά τα πακέτα στις εξαρτήσεις.Add these packages to the dependencies.

Στο package.json στην ενότητα devDependenciesIn package.json at devDependencies section

"lodash-es": "4.17.1",
"powerbi-visuals-utils-testutils": "2.2.0"

ΚαλέστεCall

npm install

για να εγκαταστήσετε τη βιβλιοθήκη lodash-es.to install lodash-es library.

Τώρα, μπορείτε να εκτελέσετε ξανά τη δοκιμή μονάδας.Now, you can run the unit test again. Πρέπει να λάβετε τα παρακάτω αποτελέσματα:You must get the following output:

> karma start

23 05 2017 16:19:54.318:WARN [watcher]: Pattern "E:/WORKSPACE/PowerBI/PowerBI-visuals-sampleBarChart/data/*.csv" does not match any file.
23 05 2017 16:19:58.333:WARN [karma]: No captured browser, open https://localhost:9876/
23 05 2017 16:19:58.346:INFO [karma]: Karma v1.3.0 server started at https://localhost:9876/
23 05 2017 16:19:58.346:INFO [launcher]: Launching browser Chrome with unlimited concurrency
23 05 2017 16:19:58.394:INFO [launcher]: Starting browser Chrome
23 05 2017 16:19:59.873:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: Connected on socket /#NcNTAGH9hWfGMCuEAAAA with id 3551106
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (1.266 secs / 1.052 secs)

=============================== Coverage summary ===============================
Statements   : 56.72% ( 135/238 )
Branches     : 32.54% ( 41/126 )
Functions    : 66.67% ( 38/57 )
Lines        : 52.83% ( 112/212 )
================================================================================

Η απεικόνισή σας ανοίγει στο πρόγραμμα περιήγησης Chrome, όπως φαίνεται:Your visual opens in the Chrome browser, as shown:

Η σύνοψη δείχνει ότι η κάλυψη αυξήθηκε.The summary shows that coverage has increased. Για να μάθετε περισσότερα σχετικά με την τρέχουσα κάλυψη κώδικα, ανοίξτε το coverage\index.html.To learn more about current code coverage, open coverage\index.html.

Εναλλακτικά, εξετάστε το πεδίο του φακέλου src:Or look at the scope of the src folder:

Στο πεδίο του αρχείου, μπορείτε να προβάλετε τον πηγαίο κώδικα.In the scope of file, you can view the source code. Τα βοηθητικά προγράμματα Coverage θα επισημάνουν τη γραμμή με κόκκινο εάν δεν εκτελείται συγκεκριμένος κώδικας κατά τις δοκιμές μονάδας.The Coverage utilities would highlight the row in red if certain code isn't executed during the unit tests.

Επόμενα βήματαNext steps

Όταν η απεικόνισή σας είναι έτοιμη, μπορείτε να την υποβάλετε εκ νέου για δημοσίευση.When your visual is ready, you can submit it for publication. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Δημοσίευση απεικονίσεων Power BI στο AppSource.For more information, see Publish Power BI visuals to AppSource.