Created skeleton transaction web view

.gitignore

@@ -29,3 +29,4 @@ coverage
 /src/ExtensionCommands.ts
 /cypress/videos
 /cypress/screenshots
+/jest-tests.xml

ExtensionCommands.ts

@@ -72,6 +72,6 @@ export class ExtensionCommands {
     static readonly OPEN_SAMPLE_PAGE: string = 'sample.open';
     static readonly OPEN_TUTORIAL_GALLERY: string = 'tutorialGallery.open';
     static readonly OPEN_TUTORIAL_PAGE: string = 'tutorial.open';
-    static readonly OPEN_REACT_PAGE: string = 'reactPage.open';
+    static readonly OPEN_TRANSACTION_PAGE: string = 'transactionPage.open';
     static readonly DEBUG_COMMAND_LIST: string = 'debug.commandList';
 }

azure-pipelines.yml

@@ -60,10 +60,68 @@ stages:
           - template: azure-templates/setup-steps.yml
           - template: azure-templates/cucumber-steps.yml
 
+  - stage: jestTest
+    condition: ne(variables['Build.Reason'], 'Schedule')
+    dependsOn: []
+    jobs:
+      - job: jest
+        strategy:
+          matrix:
+            linux:
+              imageName: 'ubuntu-16.04'
+              VERSION: '1.35.1'
+              MODULES: '64'
+              ELECTRON: '3.0'
+              TARGET: '3.0.0'
+            mac:
+              imageName: 'macos-10.14'
+              VERSION: '1.35.1'
+              MODULES: '64'
+              ELECTRON: '3.0'
+              TARGET: '3.0.0'
+        pool:
+          vmImage: $(imageName)
+
+        steps:
+          - template: azure-templates/setup-steps.yml
+          - template: azure-templates/rebuild-steps.yml
+          - template: azure-templates/jest-test-steps.yml
+
+  - stage: cypressTest
+    condition: ne(variables['Build.Reason'], 'Schedule')
+    dependsOn: []
+    jobs:
+      - job: cypress
+        strategy:
+          matrix:
+            linux:
+              imageName: 'ubuntu-16.04'
+              VERSION: '1.35.1'
+              MODULES: '64'
+              ELECTRON: '3.0'
+              TARGET: '3.0.0'
+            mac:
+              imageName: 'macos-10.14'
+              VERSION: '1.35.1'
+              MODULES: '64'
+              ELECTRON: '3.0'
+              TARGET: '3.0.0'
+        pool:
+          vmImage: $(imageName)
+
+        steps:
+          - template: azure-templates/setup-steps.yml
+          - template: azure-templates/rebuild-steps.yml
+          - template: azure-templates/cypress-steps.yml
+
+
+
   - stage: buildPackage
     dependsOn:
       - unitTest
       - cucumberTest
+      - jestTest
+      - cypressTest
     jobs:
       - job: buildPackage
 
@@ -93,6 +151,8 @@ stages:
     dependsOn:
       - unitTest
       - cucumberTest
+      - jestTest
+      - cypressTest
       - buildPackage
     jobs:
       - job:

azure-templates/cypress-steps.yml

@@ -0,0 +1,19 @@
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+# http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+steps:
+  - bash: |
+      npm run cypressCli
+    env:
+      DISPLAY: ':99.0'
+    displayName: Run cypress tests
+    condition: succeeded()

azure-templates/jest-test-steps.yml

@@ -0,0 +1,25 @@
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+# http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+steps:
+  - bash: |
+      npm run jestTest
+    env:
+      DISPLAY: ':99.0'
+    displayName: Run jest tests
+    condition: succeeded()
+
+  - task: PublishCodeCoverageResults@1
+    condition: succeededOrFailed()
+    inputs:
+      codeCoverageTool: Cobertura
+      summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/clover.xml'

cypress/integration/init.spec.ts

@@ -4,18 +4,14 @@ chai.should();
 describe('Cypress', () => {
     it('is working', () => {
         cy.visit('build/index.html').then((window) => {
-            window.postMessage('/one', '*'); // This is needed to trigger the `window.addEventListener`
+            window.postMessage('/transaction', '*'); // This is needed to trigger the `window.addEventListener`
         });
 
-        cy.get('#checkboxOne').then((checkbox: any) => {
-            const label: any[] = checkbox.siblings('label');
-            label.should.have.text('checkboxOne Label');
-        });
-
-        cy.get('#buttonOne').contains('Do Nothing').click();
-
-        cy.focused().should('have.id', 'buttonOne').and('have.class', 'bx--btn--primary');
-        cy.focused().should('have.css', 'border-color').and('eq', 'rgb(255, 255, 255)');
+        cy.get('#create-button').click();
+        cy.focused().should('have.id', 'create-button');
 
+        cy.get('#import-button').click();
+        cy.focused().should('have.id', 'import-button');
     });
+
 });

enzyme/tests/TransactionViewPage.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import TransactionViewPage from '../../src/components/TransactionViewPage/TransactionViewPage';
+import chai from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+chai.should();
+chai.use(sinonChai);
+
+describe('TransactionViewPage component', () => {
+
+    let mySandBox: sinon.SinonSandbox;
+
+    beforeEach(async () => {
+        mySandBox = sinon.createSandbox();
+    });
+
+    afterEach(async () => {
+        mySandBox.restore();
+    });
+
+    it('should render the expected snapshot', async () => {
+        const component: any = renderer
+            .create(<TransactionViewPage activeSmartContract="penguinContract@0.0.1"/>)
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });   
+
+});

enzyme/tests/TransactionViewSidebar.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import TransactionViewSidebar from '../../src/components/TransactionViewSidebar/TransactionViewSidebar';
+import chai from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+chai.should();
+chai.use(sinonChai);
+
+describe('TransactionViewSidebar component', () => {
+
+    let mySandBox: sinon.SinonSandbox;
+
+    beforeEach(async () => {
+        mySandBox = sinon.createSandbox();
+    });
+
+    afterEach(async () => {
+        mySandBox.restore();
+    });
+
+    it('should render the expected snapshot', async () => {
+        const component: any = renderer
+            .create(<TransactionViewSidebar/>)
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });
+
+});

enzyme/tests/TransactionViewSidebarPanel.test.tsx

@@ -0,0 +1,58 @@
+import React  from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import SidebarPanel from '../../src/components/TransactionViewSidebarPanel/TransactionViewSidebarPanel';
+import chai from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+chai.should();
+chai.use(sinonChai);
+
+describe('SidebarPanel component', () => {
+
+    let mySandBox: sinon.SinonSandbox;
+
+    beforeEach(async () => {
+        mySandBox = sinon.createSandbox();
+    });
+
+    afterEach(async () => {
+        mySandBox.restore();
+    });
+
+    it('should render the expected snapshot when panelType = \`buttons\`', async () => {
+        const component: any = renderer
+            .create(<SidebarPanel panelType={'buttons'}></SidebarPanel>)
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('should render the expected snapshot when panelType = \`filters\`', async () => {
+        const component: any = renderer
+            .create(<SidebarPanel panelType={'filters'}></SidebarPanel>)
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('should render the expected snapshot when panelType = \`log\`', async () => {
+        const component: any = renderer
+            .create(<SidebarPanel panelType={'log'}></SidebarPanel>)
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('will one day allow a user to create a new transaction', async() => {
+        const createTxnSpy: sinon.SinonSpy = sinon.spy(SidebarPanel.prototype, 'createTxn');
+        const component: any = mount(<SidebarPanel panelType='buttons'></SidebarPanel>);
+        component.find('button[id=\'create-button\']').simulate('click');
+        createTxnSpy.should.have.been.called;
+    });
+
+    it('will one day allow a user to create a new transaction', async() => {
+        const importTxnSpy: sinon.SinonSpy = sinon.spy(SidebarPanel.prototype, 'importTxn');
+        const component: any = mount(<SidebarPanel panelType='buttons'></SidebarPanel>);
+        component.find('button[id=\'import-button\']').simulate('click');
+        importTxnSpy.should.have.been.called;
+    });
+
+});