Debugging for frontend (#15)

OVERVIEW.md

@@ -1,7 +1,47 @@
-# Azure Pipelines Protractor Report
+[![Donate](https://img.shields.io/static/v1?logo=paypal&label=PayPal&message=Donate&color=yellow)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZH953HFWKBJFA)
+[![Build Status](https://dev.azure.com/maciejmaciejewski-dev/extensions/_apis/build/status/Protractor/extension-build?branchName=master)](https://dev.azure.com/maciejmaciejewski-dev/extensions/_build/latest?definitionId=1&branchName=master)
 
-Azure DevOps extension that provides task for Publishing Protractor HTML Reports into built into Azure Storage which ten can be viewed as a tab embeded into Build and Release pages.
+# Protractor Report Tab for Azure Pipelines
 
-The extension uses HTLM report from  [Protractor Beautiful Reporter](https://www.npmjs.com/package/protractor-beautiful-reporter)
+Azure DevOps extension that provides a task for publishing Protractor report in a HTML format and embeds it into a Build and Release pages.
 
-For more info please refer to documentation page on [GitHub](https://github.com/maciejmaciejewski/azure-pipelines-protractor)
+The extension is and will remain free of charge, however if you would like to support me please consider donating by using the PayPal button above.
+
+## Configuration
+
+### Protractor
+
+Before starting using this extension it is necessary to install `Protractor Beautiful Reporter` package via npm. For more information and configuration please refer to [protractor-beautiful-reporter](https://www.npmjs.com/package/protractor-beautiful-reporter).
+
+```JavaScript
+import * as BeautifulReporter from 'protractor-beautiful-reporter';
+
+const beautifulReporter = new BeautifulReporter({
+  baseDirectory: resultsDir,
+  screenshotsSubfolder: 'screenshots',
+  jsonsSubfolder: 'jsons',
+  takeScreenShotsOnlyForFailedSpecs: false,
+  docName: 'report.html',
+  preserveDirectory: true
+});
+
+jasmine.getEnv().addReporter(beautifulReporter.getJasmine2Reporter());
+
+```
+
+### Extension
+
+In order to see report on Protractor Tab one must first use `Publish Protractor Report` task. This is supporting task which makes Protractor tab visible.
+
+This task takes two parameters - required `cwd` which is a path to Protractor Report directory and also optional `tabName` which is the name of the tab displayed within Azure DevOps report. The directory used to generate HTML must contain `combined.json` - file which is a source of the data displayed in the report. We also check content of `screenshots` directory for associated screenshots image files and upload them as attachments to the Azure DevOps cloud storage.
+
+#### Example YAML setup
+
+```YAML
+steps:
+- task: PublishProtractorReport@1
+  displayName: 'Publish Protractor Report'
+  inputs:
+    cwd: './protractor'
+    tabName: 'My Web Test'
+```

README.md

@@ -1,8 +1,11 @@
+[![Donate](https://img.shields.io/static/v1?logo=paypal&label=PayPal&message=Donate&color=yellow)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZH953HFWKBJFA)
+[![Build Status](https://dev.azure.com/maciejmaciejewski-dev/extensions/_apis/build/status/Protractor/extension-build?branchName=master)](https://dev.azure.com/maciejmaciejewski-dev/extensions/_build/latest?definitionId=1&branchName=master)
+
 # Protractor Report Tab for Azure Pipelines
 
-This repository contains the source code of Azure DevOps extension for publishig Protractor Report on Build and Release tabs.
+Azure DevOps extension that provides a task for publishing Protractor report in a HTML format and embeds it into a Build and Release pages.
 
-The uses reports from :heart: [Protractor Beautiful Reporter](https://www.npmjs.com/package/protractor-beautiful-reporter) :heart:.
+The extension is and will remain free of charge, however if you would like to support me please consider donating by using the PayPal button above.
 
 ## Configuration
 
@@ -49,48 +52,3 @@ steps:
 ### Result Example
 
 ![Protractor Report Task](documentation/protractor-tab-build.png)
-
-## Contributors
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-      <td align="center">
-      <a href="https://github.com/maciejmaciejewski">
-        <img src="https://avatars1.githubusercontent.com/u/15831316?v=4" width="100px;" alt=""/>
-        <br />
-        <b>Maciej Maciejewski</b>
-    </td>
-    <td align="center">
-      <a href="https://github.com/janzaremski">
-        <img src="https://avatars1.githubusercontent.com/u/30691590" width="100px;" alt=""/>
-        <br />
-        <b>Jan Zaremski</b>
-    </td>
-    <td align="center">
-      <a href="https://github.com/afeblot">
-        <img src="https://avatars1.githubusercontent.com/u/12073123?v=4" width="100px;" alt=""/>
-        <br />
-        <b>Alexandre Feblot</b>
-    </td>
-  </tr>
-</table>
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
-
-## Changelog
-
-1.1.1
-
-- Introduced new variable `tabName` task variable to control the name of the report tab. If none specified it is defaulted to `Protractor`
-- Support for multi-stage pipelines. With multiple attempts counter is added to the tab header
-- Support for multiple tasks in the same job
-- Support for multiple jobs
-
-1.1.0
-
-- Extension rewritten to React component
-
-1.0.0
-
-- Initial release

azure-devops-extension.json

@@ -5,7 +5,7 @@
   "publisher": "MaciejMaciejewski",
   "public": false,
   "author": "Maciej Maciejewski",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Embed Protractor HTML report in Azure Pipelines",
   "galleryFlags": [
     "Preview"
@@ -16,10 +16,10 @@
   },
   "screenshots": [
     {
-      "path": "documentation/azure-pipelines-configuration.png"
+      "path": "documentation/protractor-tab-build.png"
     },
     {
-      "path": "documentation/protractor-tab-build.png"
+      "path": "documentation/azure-pipelines-configuration.png"
     }
   ],
   "targets": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsts-protractor-extension",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Embed Protractor HTML result into release and build tabs",
   "main": "index.js",
   "scripts": {

src/tabContent.tsx

@@ -218,9 +218,9 @@ abstract class AttachmentClient {
       throw new Error(response.statusText)
     }
 
-    setText('Processing Report File')
+    setText('Processing Report')
     const responseText = await response.text()
-
+    console.log(responseText)
     const contentJSON = JSON.parse(JSON.parse(responseText))
     const screenshots = await this.getScreenshotAttachments()
     if (screenshots.length > 0) {
@@ -249,15 +249,18 @@ class BuildAttachmentClient extends AttachmentClient {
 
   public async init() {
     await this.loadReportTemplates()
-    console.log('Get attachment list')
     const buildClient: BuildRestClient = getClient(BuildRestClient)
+    setText('Fetching list of report attachments')
     this.attachments = await buildClient.getAttachments(this.build.project.id, this.build.id, ATTACHMENT_TYPE)
+    console.log(this.attachments)
   }
 
   public async getScreenshotAttachments(): Promise<Attachment[]> {
-    console.log('Get screenshot list')
+    setText('Fetchning list of screenshot attachments')
     const buildClient: BuildRestClient = getClient(BuildRestClient)
-    return await buildClient.getAttachments(this.build.project.id, this.build.id, SCREENSHOT_ATTACHMENT_TYPE)
+    const screenshotAttachments = await buildClient.getAttachments(this.build.project.id, this.build.id, SCREENSHOT_ATTACHMENT_TYPE)
+    console.log(screenshotAttachments)
+    return screenshotAttachments
   }
 }
 
@@ -323,9 +326,10 @@ class ReleaseAttachmentClient extends AttachmentClient {
   }
 
   public async getScreenshotAttachments(): Promise<ReleaseTaskAttachment[]> {
-    console.log('Get screenshot list')
     const releaseClient: ReleaseRestClient = getClient(ReleaseRestClient)
-    return await releaseClient.getReleaseTaskAttachments(this.projectId, this.releaseEnvironment.releaseId, this.releaseEnvironment.id, this.deployStepAttempt, this.runPlanId, SCREENSHOT_ATTACHMENT_TYPE)
+    const screenshotAttachments = await releaseClient.getReleaseTaskAttachments(this.projectId, this.releaseEnvironment.releaseId, this.releaseEnvironment.id, this.deployStepAttempt, this.runPlanId, SCREENSHOT_ATTACHMENT_TYPE)
+    console.log(screenshotAttachments)
+    return screenshotAttachments
   }
 
 }

tasks/PublishProtractorReport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publishprotractorreport",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "main": "main.js",
   "scripts": {

tasks/PublishProtractorReport/task.json

@@ -15,7 +15,7 @@
   "version": {
     "Major": "1",
     "Minor": "1",
-    "Patch": "1"
+    "Patch": "2"
   },
   "minimumAgentVersion": "1.95.0",
   "instanceNameFormat": "Publish Protractor Report",