[explorer] fix: Restriction display issue #1116

* [explorer] task: refactor and fix for restriction service and field component

* [explorer] feat: added unit test

* [explorer] task: patch description update

__tests__/components/fileds/RestrictionField.spec.js

@@ -0,0 +1,105 @@
+import RestrictionField from '../../../src/components/fields/RestrictionField.vue';
+import UI from '../../../src/store/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('RestrictionField component', () => {
+	const setupStoreMount = restrictions => {
+		const uiModule = {
+			namespaced: true,
+			getters: {
+				getNameByKey: UI.getters.getNameByKey
+			}
+		};
+
+		const store = new Vuex.Store({
+			modules: {
+				ui:uiModule
+			}
+		});
+
+		const propsData = {
+			value: restrictions
+		};
+
+		return shallowMount(RestrictionField, {
+			store,
+			localVue,
+			propsData
+		});
+	};
+
+	describe('mosaic address restriction', () => {
+		it('renders restriction field', () => {
+			// Arrange:
+			const restrictions = [
+				{
+					restrictionKey: '12345',
+					restrictionValue: '10'
+				},
+				{
+					restrictionKey: '67890',
+					restrictionValue: '15'
+				}
+			];
+
+			const wrapper = setupStoreMount(restrictions);
+
+			// Act:
+			const titles = wrapper.findAll('.restriction');
+			const contents = wrapper.findAll('.restriction-content');
+
+			//Assert:
+			expect(titles.length).toBe(2);
+			expect(contents.length).toBe(2);
+
+			expect(titles.at(0).attributes().title).toBe('Value: 10');
+			expect(contents.at(0).text()).toBe('Key 12345 : 10');
+
+			expect(titles.at(1).attributes().title).toBe('Value: 15');
+			expect(contents.at(1).text()).toBe('Key 67890 : 15');
+		});
+	});
+
+	describe('mosaic global restriction', () => {
+		it('renders restriction field with different restriction type', () => {
+			// Arrange:
+			const restrictionTypes = ['EQ', 'GE', 'GT', 'LE', 'LT', 'NE', 'NONE'];
+
+			const restrictions = restrictionTypes.map(type => ({
+				restrictionKey: '567890',
+				restrictionType: 'mosaicRestrictionType.' + type,
+				restrictionValue: '10',
+				referenceMosaicId: '1788BA84888894EB'
+			}));
+
+			const wrapper = setupStoreMount(restrictions);
+
+			// Act:
+			const titles = wrapper.findAll('.restriction');
+			const contents = wrapper.findAll('.restriction-content');
+
+			//Assert:
+			expect(titles.length).toBe(7);
+			expect(contents.length).toBe(7);
+
+			const expectedResult = [
+				'Equal',
+				'Greater Than Or Equal',
+				'Greater Than',
+				'Less Than Or Equal',
+				'Less Than',
+				'Not Equal',
+				'No Restriction'
+			];
+
+			expectedResult.forEach((result, index) => {
+				expect(titles.at(index).attributes().title).toBe(`Restriction Type: ${result} | Value: 10`);
+				expect(contents.at(index).text()).toBe(`1788BA84888894EB Key 567890 ${result} 10`);
+			});
+		});
+	});
+});

__tests__/infrastructure/RestrictionService.spec.js

@@ -0,0 +1,161 @@
+import { RestrictionService } from '../../src/infrastructure';
+import TestHelper from '../TestHelper';
+import { restore, stub } from 'sinon';
+import { MosaicId, UInt64, MosaicRestrictionType, Address } from 'symbol-sdk';
+
+describe('RestrictionService', () => {
+	describe('formatMosaicGlobalRestriction', () => {
+		const runBasicMosaicGlobalRestrictionTests = (restrictionType, expectedResult) => {
+			const createMosaicGlobalRestriction = referenceMosaicId => {
+				return {
+					compositeHash: 'E040D414A6F2E083EC4EBC5060461385E71392F292D6D25ADF7F1CBD0C24CE99',
+					entryType: 1,
+					mosaicId: new MosaicId('1788BA84888894EB'),
+					restrictions: [{
+						key: UInt64.fromUint(790526),
+						referenceMosaicId,
+						restrictionType: restrictionType.type,
+						restrictionValue: UInt64.fromUint(10)
+					}],
+					version: 1
+				};
+			};
+
+			it(`returns mosaic global restriction dto with type ${restrictionType.name} and with self reference mosaic`, () => {
+				// Arrange:
+				const mosaicGlobalRestriction = createMosaicGlobalRestriction(new MosaicId('0'.repeat(16)));
+
+				// Act:
+				const result = RestrictionService.formatMosaicGlobalRestriction(mosaicGlobalRestriction);
+
+				// Assert:
+				expect(result).toEqual({
+					compositeHash: mosaicGlobalRestriction.compositeHash,
+					version: 1,
+					entryType: 'Mosaic global restriction',
+					mosaicId: '1788BA84888894EB',
+					restrictions: [{
+						restrictionKey: '790526',
+						restrictionType: expectedResult,
+						restrictionValue: '10',
+						referenceMosaicId: '1788BA84888894EB'
+					}]
+				});
+			});
+
+			it(`returns mosaic global restriction dto with type ${restrictionType.name} and reference mosaic`, () => {
+				// Arrange:
+				const mosaicGlobalRestriction = createMosaicGlobalRestriction(new MosaicId('0845619DCCC7C163'));
+
+				// Act:
+				const result = RestrictionService.formatMosaicGlobalRestriction(mosaicGlobalRestriction);
+
+				// Assert:
+				expect(result).toEqual({
+					compositeHash: mosaicGlobalRestriction.compositeHash,
+					version: 1,
+					entryType: 'Mosaic global restriction',
+					mosaicId: '1788BA84888894EB',
+					restrictions: [{
+						restrictionKey: '790526',
+						restrictionType: expectedResult,
+						restrictionValue: '10',
+						referenceMosaicId: '0845619DCCC7C163'
+					}]
+				});
+			});
+		};
+
+		// Arrange:
+		const data = [
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.EQ,
+					name: 'equal'
+				},
+				expectedResult: 'mosaicRestrictionType.EQ'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.GE,
+					name: 'great equal'
+				},
+				expectedResult: 'mosaicRestrictionType.GE'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.GT,
+					name: 'greater than'
+				},
+				expectedResult: 'mosaicRestrictionType.GT'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.LE,
+					name: 'less equal'
+				},
+				expectedResult: 'mosaicRestrictionType.LE'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.LT,
+					name: 'less than'
+				},
+				expectedResult: 'mosaicRestrictionType.LT'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.NE,
+					name: 'not equal'
+				},
+				expectedResult: 'mosaicRestrictionType.NE'
+			},
+			{
+				restrictionType: {
+					type: MosaicRestrictionType.NONE,
+					name: 'no restriction'
+				},
+				expectedResult: 'mosaicRestrictionType.NONE'
+			}
+		];
+
+		data.forEach(info => {
+			runBasicMosaicGlobalRestrictionTests(info.restrictionType, info.expectedResult);
+		});
+	});
+
+	describe('formatMosaicAddressRestriction', () => {
+		it('returns mosaic address restriction dto', () => {
+			// Arrange:
+			const targetAddress = TestHelper.generateAccount(1)[0].address;
+
+			const mosaicGlobalRestriction = {
+				compositeHash: 'E040D414A6F2E083EC4EBC5060461385E71392F292D6D25ADF7F1CBD0C24CE99',
+				entryType: 0,
+				mosaicId: new MosaicId('1788BA84888894EB'),
+				restrictions: [{
+					key: UInt64.fromUint(790526),
+					restrictionValue: UInt64.fromUint(10)
+				}],
+				targetAddress,
+				version: 1
+			};
+
+			// Act:
+			const result = RestrictionService.formatMosaicAddressRestriction(mosaicGlobalRestriction);
+
+			// Assert:
+			expect(result).toEqual({
+				compositeHash: mosaicGlobalRestriction.compositeHash,
+				version: 1,
+				entryType: 'Mosaic address restriction',
+				mosaicId: '1788BA84888894EB',
+				restrictions: [{
+					restrictionKey: '790526',
+					restrictionValue: '10'
+				}],
+				targetAddress: targetAddress.plain()
+			});
+		});
+	});
+});

src/components/fields/RestrictionField.vue

@@ -22,11 +22,10 @@
 			v-for="(item, index) in value"
 			class="restriction"
 			:key="'restriction_key_' + index"
-			:title="getTranslation('restrictionType') + ': ' + getTranslation(item.restrictionType) + ' | ' + getTranslation('restrictionValue') + ': ' + item.restrictionValue"
+			:title="getTitle(item)"
 		>
-
 			<span class="restriction-content">
-				{{getTranslation('restrictionKey')}} {{ item.restrictionKey }} {{ getTranslation(item.restrictionType) || ':' }} {{ item.restrictionValue }}
+				{{ getInfo(item) }}
 			</span>
 		</span>
 	</div>
@@ -46,6 +45,24 @@ export default {
 	methods: {
 		getTranslation (key) {
 			return this.$store.getters['ui/getNameByKey'](key);
+		},
+		getTitle (item) {
+			if (item.referenceMosaicId) {
+				// global restriction
+				return `${this.getTranslation('restrictionType')}: ${this.getTranslation(item.restrictionType)} | ${this.getTranslation('restrictionValue')}: ${item.restrictionValue}`;
+			} else {
+				// address restriction
+				return `${this.getTranslation('restrictionValue')}: ${item.restrictionValue}`;
+			}
+		},
+		getInfo (item) {
+			if (item.referenceMosaicId) {
+				// global restriction
+				return `${item.referenceMosaicId} ${this.getTranslation('restrictionKey')} ${item.restrictionKey} ${this.getTranslation(item.restrictionType)} ${item.restrictionValue}`;
+			} else {
+				// address restriction
+				return `${this.getTranslation('restrictionKey')} ${item.restrictionKey} : ${item.restrictionValue}`;
+			}
 		}
 	}
 };

src/infrastructure/RestrictionService.js

@@ -93,22 +93,14 @@ class RestrictionService {
    * @returns {object } readable MosaicGlobalRestrictions object.
    */
   static formatMosaicGlobalRestriction = mosaicRestriction => {
-  	let mosaicGlobalRestrictionItem = [];
-
-  	// Convert Map<k,v> to Array
-  	mosaicRestriction.restrictions.forEach((value, key) => {
-  		mosaicGlobalRestrictionItem.push({ key, ...value });
-  		return mosaicGlobalRestrictionItem;
-  	});
-
   	return {
   		...mosaicRestriction,
   		entryType: Constants.MosaicRestrictionEntryType[mosaicRestriction.entryType],
   		mosaicId: mosaicRestriction.mosaicId.toHex(),
-  		restrictions: mosaicGlobalRestrictionItem.map(item => ({
-  			restrictionKey: item.key,
+  		restrictions: mosaicRestriction.restrictions.map(item => ({
+  			restrictionKey: item.key.toString(),
   			restrictionType: Constants.MosaicRestrictionType[item.restrictionType],
-  			restrictionValue: item.restrictionValue,
+  			restrictionValue: item.restrictionValue.toString(),
   			referenceMosaicId: '0000000000000000' === item.referenceMosaicId.toHex()
 			  ? mosaicRestriction.mosaicId.toHex()
 			  : item.referenceMosaicId.toHex()
@@ -122,21 +114,14 @@ class RestrictionService {
    * @returns {object} Custom address restriction object
    */
   static formatMosaicAddressRestriction = addressRestriction => {
-  	let mosaicAddressRestrictionItem = [];
-
-  	// Convert Map<k,v> to Array
-  	addressRestriction.restrictions.forEach((value, key) => {
-  		mosaicAddressRestrictionItem.push({ key, value });
-	  });
-
   	return {
   		...addressRestriction,
   		entryType: Constants.MosaicRestrictionEntryType[addressRestriction.entryType],
   		mosaicId: addressRestriction.mosaicId.toHex(),
   		targetAddress: addressRestriction.targetAddress.address,
-  		restrictions: mosaicAddressRestrictionItem.map(item => ({
-  			restrictionKey: item.key,
-  			restrictionValue: item.value
+  		restrictions: addressRestriction.restrictions.map(item => ({
+  			restrictionKey: item.key.toString(),
+  			restrictionValue: item.restrictionValue.toString()
   		}))
   	};
   }