Generation of transaction template based on user selection

Signed-off-by: Erin Hughes <Erin.Hughes@ibm.com>

cypress/integration/transaction_view.spec.ts

@@ -1,14 +1,60 @@
 /// <reference types="Cypress" />
+import ITransaction from '../../src/interfaces/ITransaction';
+import ISmartContract from '../../src/interfaces/ISmartContract';
 chai.should();
 describe('Cypress', () => {
 
+    const transactionOne: ITransaction = {
+        name: 'transactionOne',
+        parameters: [{
+            description: '',
+            name: 'name',
+            schema: {}
+        }],
+        returns: {
+            type: ''
+        },
+        tag: ['submit']
+    };
+
+    const transactionTwo: ITransaction = {
+        name: 'transactionTwo',
+        parameters: [{
+            description: '',
+            name: 'size',
+            schema: {}
+        }],
+        returns: {
+            type: ''
+        },
+        tag: ['submit']
+    };
+
+    const greenContract: ISmartContract = {
+        name: 'greenContract',
+        version: '0.0.1',
+        channel: 'mychannel',
+        label: 'greenContract@0.0.1',
+        transactions: [transactionOne, transactionTwo],
+        namespace: 'GreenContract'
+    };
+
+    const blueContract: ISmartContract = {
+        name: 'blueContract',
+        version: '0.0.1',
+        channel: 'mychannel',
+        label: 'blueContract@0.0.1',
+        transactions: [transactionOne, transactionTwo],
+        namespace: 'BlueContract'
+    };
+
     describe('Transaction home screen', () => {
 
-        const mockMessage: {path: string, state: {smartContracts: Array<string>, activeSmartContract: string}} = {
+        const mockMessage: {path: string, state: {smartContracts: Array<ISmartContract>, activeSmartContract: ISmartContract}} = {
             path: 'transaction',
             state: {
-                smartContracts: ['greenContract@0.0.1', 'blueContract@0.0.1'],
-                activeSmartContract: 'greenContract@0.0.1'
+                smartContracts: [greenContract, blueContract],
+                activeSmartContract: greenContract
             }
         };
 
@@ -58,21 +104,52 @@ describe('Cypress', () => {
 
         beforeEach(() => {
 
-            const mockMessage: {path: string, state: {smartContracts: Array<string>, activeSmartContract: string}} = {
+            const mockMessage: {path: string, state: {smartContracts: Array<ISmartContract>, activeSmartContract: ISmartContract}} = {
                 path: 'transaction/create',
                 state: {
-                    smartContracts: ['greenContract@0.0.1', 'blueContract@0.0.1'],
-                    activeSmartContract: 'greenContract@0.0.1'
+                    smartContracts: [greenContract, blueContract],
+                    activeSmartContract: greenContract
                 }
             };
-
             cy.visit('build/index.html').then((window: Window) => {
                 window.postMessage(mockMessage, '*');
             });
         });
 
-        it('is a transaction create screen', () => {
-            expect(true).to.equal(true);
+        it('generates appropriate arguments when a transaction is selected', () => {
+            cy.get('#transaction-name-select').select('transactionOne');
+            cy.get('#arguments-text-area')
+                .invoke('val')
+                .then((text: JQuery<HTMLElement>): void => {
+                    it('is a transaction create screen', () => {
+                        expect(text).to.equal('name: ');
+                    });
+                });
+        });
+
+        it('replaces generated arguments when a new transaction is selected', () => {
+            cy.get('#transaction-name-select').select('transactionOne');
+            cy.get('#arguments-text-area')
+                .invoke('val')
+                .then((text: JQuery<HTMLElement>): void => {
+                    it('is a transaction create screen', () => {
+                        expect(text).to.equal('name: ');
+                    });
+                });
+
+            cy.get('#transaction-name-select').select('transactionTwo');
+            cy.get('#arguments-text-area')
+                .invoke('val')
+                .then((text: JQuery<HTMLElement>): void => {
+                    it('is a transaction create screen', () => {
+                        expect(text).to.equal('size: ');
+                    });
+                });
+        });
+
+        it('can navigate back to the home screen', () => {
+            cy.get('.titles-container > span').click();
+            cy.url().should('include', '/transaction');
         });
     });
 });

enzyme/tests/App.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import App from '../../src/App';
+import chai from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import ISmartContract from '../../src/interfaces/ISmartContract';
+import ITransaction from '../../src/interfaces/ITransaction';
+import Utils from '../../src/Utils';
+chai.should();
+chai.use(sinonChai);
+
+describe('App', () => {
+
+    let mySandBox: sinon.SinonSandbox;
+
+    const mockTxn: ITransaction = {
+        name: 'mockTxn',
+        parameters: [{
+            description: '',
+            name: 'name',
+            schema: {}
+        }],
+        returns: {
+            type: ''
+        },
+        tag: ['submit']
+    };
+
+    const greenContract: ISmartContract = {
+        name: 'greenContract',
+        version: '0.0.1',
+        channel: 'mychannel',
+        label: 'greenContract@0.0.1',
+        transactions: [mockTxn],
+        namespace: 'GreenContract'
+    };
+
+    const blueContract: ISmartContract = {
+        name: 'blueContract',
+        version: '0.0.1',
+        channel: 'mychannel',
+        label: 'blueContract@0.0.1',
+        transactions: [mockTxn],
+        namespace: 'BlueContract'
+    };
+
+    const mockState: { smartContracts: Array<ISmartContract>, activeSmartContract: ISmartContract } = {
+        smartContracts: [greenContract, blueContract],
+        activeSmartContract: greenContract
+    };
+
+    beforeEach(async () => {
+        mySandBox = sinon.createSandbox();
+    });
+
+    afterEach(async () => {
+        mySandBox.restore();
+    });
+
+    it('should redirect to the transaction home view', async () => {
+        const component: any = mount(<App/>);
+
+        const msg: MessageEvent = new MessageEvent('message', {
+            data: {
+                path: '/transaction',
+                state: mockState
+            }
+        });
+        dispatchEvent(msg);
+        expect(component.state().redirectPath).toBe('/transaction');
+    });
+
+    it('should redirect to the transaction create view', async () => {
+        const component: any = mount(<App/>);
+
+        const msg: MessageEvent = new MessageEvent('message', {
+            data: {
+                path: '/transaction/create',
+                    state: {
+                        smartContracts: [greenContract, blueContract],
+                        activeSmartContract: greenContract
+                    }
+            }
+        });
+        dispatchEvent(msg);
+        expect(component.state().redirectPath).toBe('/transaction/create');
+    });
+
+    it('does not overwrite state when redirecting to a different page', async () => {
+        const component: any = mount(<App/>);
+
+        const msg: MessageEvent = new MessageEvent('message', {
+            data: {
+                path: '/transaction',
+                state: mockState
+            }
+        });
+        dispatchEvent(msg);
+        expect(component.state().childState).toBe(mockState);
+
+        Utils.changeRoute('/transaction/create');
+        expect(component.state().childState).toBe(mockState);
+    });
+
+    it('updates the state correctly when switching smart contracts', async () => {
+        const component: any = mount(<App/>);
+
+        const msg: MessageEvent = new MessageEvent('message', {
+            data: {
+                path: '/transaction',
+                state: mockState
+            }
+        });
+        dispatchEvent(msg);
+        expect(component.state().childState.activeSmartContract).toBe(greenContract);
+
+        component.instance().switchSmartContract('blueContract@0.0.1');
+        expect(component.state().childState.activeSmartContract).toBe(blueContract);
+    });
+
+});

enzyme/tests/TransactionCreate.test.tsx

@@ -1,18 +1,61 @@
-
+// tslint:disable no-unused-expression
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import TransactionCreate from '../../src/components/TransactionCreate/TransactionCreate';
 import chai from 'chai';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
+import ITransaction from '../../src/interfaces/ITransaction';
+import ISmartContract from '../../src/interfaces/ISmartContract';
+import Utils from '../../src/Utils';
 chai.should();
 chai.use(sinonChai);
 
 describe('TransactionCreate component', () => {
     let mySandbox: sinon.SinonSandbox;
+    let changeRouteStub: sinon.SinonStub;
+    let getTransactionArgumentsSpy: sinon.SinonSpy;
+
+    const transactionOne: ITransaction = {
+        name: 'transactionOne',
+        parameters: [{
+            description: '',
+            name: 'name',
+            schema: {}
+        }],
+        returns: {
+            type: ''
+        },
+        tag: ['submit']
+    };
+
+    const transactionTwo: ITransaction = {
+        name: 'transactionTwo',
+        parameters: [{
+            description: '',
+            name: 'size',
+            schema: {}
+        }],
+        returns: {
+            type: ''
+        },
+        tag: ['submit']
+    };
+
+    const greenContract: ISmartContract = {
+        name: 'greenContract',
+        version: '0.0.1',
+        channel: 'mychannel',
+        label: 'greenContract@0.0.1',
+        transactions: [transactionOne, transactionTwo],
+        namespace: 'GreenContract'
+    };
 
     beforeEach(async () => {
         mySandbox = sinon.createSandbox();
+        changeRouteStub = mySandbox.stub(Utils, 'changeRoute').resolves();
+        getTransactionArgumentsSpy = mySandbox.spy(TransactionCreate.prototype, 'getTransactionArguments');
     });
 
     afterEach(async () => {
@@ -21,8 +64,38 @@ describe('TransactionCreate component', () => {
 
     it('should render the expected snapshot', async () => {
         const component: any = renderer
-            .create(<TransactionCreate/>)
+            .create(<TransactionCreate activeSmartContract={greenContract}/>)
             .toJSON();
         expect(component).toMatchSnapshot();
     });
+
+    it('redirects back to the home page when the appropriate link is clicked on', async () => {
+        const component: any = mount(<TransactionCreate activeSmartContract={greenContract}/>);
+        component.find('.titles-container > span').simulate('click');
+        changeRouteStub.should.have.been.called;
+    });
+
+    it('generates transaction arguments when an option from the transaction select is chosen', async () => {
+        const component: any = mount(<TransactionCreate activeSmartContract={greenContract}/>);
+        expect(component.state().transactionArguments).toBe('');
+        component.find('select').at(0).prop('onChange')( { currentTarget: { value: 'transactionOne' } });
+        getTransactionArgumentsSpy.should.have.been.called;
+        expect(component.state().transactionArguments).toBe('name: \n');
+    });
+
+    it('does not generate arguments in the event that the chosen transaction doesn\'t exist', async () => {
+        const component: any = mount(<TransactionCreate activeSmartContract={greenContract}/>);
+        expect(component.state().transactionArguments).toBe('');
+        component.find('select').at(0).prop('onChange')( { currentTarget: { value: 'anotherTransaction' } });
+        getTransactionArgumentsSpy.should.have.been.called;
+        expect(component.state().transactionArguments).toBe('');
+    });
+
+    it('updates when the user types in the textarea', async () => {
+        const component: any = mount(<TransactionCreate activeSmartContract={greenContract}/>);
+        expect(component.state().transactionArguments).toBe('');
+        component.find('textarea').prop('onChange')( { currentTarget: { value: 'hello' } } );
+        expect(component.state().transactionArguments).toBe('hello');
+    });
+
 });