[W-11858334] Missing array properties (#59)

* feat(PropertyRangeDocument): missing minCount and maxCount for arrays

* build: bump version

Author: carowright

demo/W-11858334/W-11858334.raml

@@ -0,0 +1,22 @@
+#%RAML 1.0
+
+title: W-11858334
+
+types:
+  testType:
+    properties:
+      country:
+        type: string
+        required: true
+        displayName: "Country"
+      skuList:
+        type: string[]
+        minItems: 3
+        maxItems: 10
+        required: true
+
+/test:
+ get:
+  body:
+   application/json:
+    type: testType

demo/apis.json

@@ -14,6 +14,7 @@
   "enum-test/enum-test.raml": "RAML 1.0",
   "APIC-667/APIC-667.raml": "RAML 1.0",
   "array-type/array-type.raml": "RAML 1.0",
+  "W-11858334/W-11858334.raml": "RAML 1.0",
   "APIC-429/APIC-429.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "SE-17897/SE-17897.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "new-oas3-types/new-oas3-types.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },

demo/index.js

@@ -113,6 +113,7 @@ class ApiDemo extends ApiDemoPage {
       ['new-oas3-types', 'New OAS 3 types API'],
       ['APIC-483', 'APIC 483'],
       ['array-type', 'array-type'],
+      ['W-11858334', 'W-11858334'],
     ].map(
       ([file, label]) => html` <anypoint-item data-src="${file}-compact.json"
           >${label} - compact model</anypoint-item

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.18",
+  "version": "4.2.19",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -303,6 +303,25 @@ export class PropertyRangeDocument extends PropertyDocumentMixin(LitElement) {
     </div>`;
   }
 
+  _arrayPropertiesTemplate() {
+    const { range } = this;
+
+    return html` ${this._hasProperty(range, this.ns.w3.shacl.minCount)
+      ? this._listItemTemplate(
+        'Minimum array length',
+        'Minimum amount of items in array',
+        this.ns.w3.shacl.minCount
+      )
+      : ''}
+    ${this._hasProperty(range, this.ns.w3.shacl.maxCount)
+      ? this._listItemTemplate(
+        'Maximum array length',
+        'Maximum amount of items in array',
+        this.ns.w3.shacl.maxCount
+      )
+      : ''}`;
+  }
+
   /**
    * @return {TemplateResult|string} Template for the element.
    */
@@ -355,6 +374,7 @@ export class PropertyRangeDocument extends PropertyDocumentMixin(LitElement) {
         ? this._filePropertiesTemplate()
         : this._nonFilePropertiesTemplate()}
       ${this.isEnum ? this._enumTemplate() : ''}
+      ${this.isArray ? this._arrayPropertiesTemplate() : ''}
 
       <section class="examples" ?hidden="${!this._hasExamples}">
         <api-resource-example-document

src/PropertyRangeDocument.js

@@ -16,11 +16,11 @@ describe('PropertyRangeDocument', () => {
     return /** @type PropertyRangeDocument */ (elm);
   }
 
-  function findTypePropertyRange(element, type, index = 0) {
+  function findTypePropertyRange(element, type, index = 0, propIndex = 0) {
     type = element._resolve(type);
     const props = element._computeObjectProperties(type);
     const key = element._getAmfKey(element.ns.aml.vocabularies.shapes.range);
-    return element._ensureArray(props[0][key])[index];
+    return element._ensureArray(props[propIndex][key])[index];
   }
 
   async function getTypePropertyRange(
@@ -252,6 +252,58 @@ describe('PropertyRangeDocument', () => {
     });
   });
 
+  describe('Array data rendering', () => {
+    [
+      ['Regular model', false],
+      ['Compact model', true],
+    ].forEach((item) => {
+      describe(String(item[0]), () => {
+        let element;
+        let amf;
+        let type;
+
+        before(async () => {
+          const data = await AmfLoader.loadType('testType', item[1], 'W-11858334');
+          amf = data[0];
+          type = data[1];
+        });
+
+        beforeEach(async () => {
+          element = await basicFixture();
+          element.amf = amf;
+          element.range = findTypePropertyRange(element, type, 0, 1);
+          await aTimeout(0);
+        });
+
+        it('Renders array minimum count', async () => {
+          const properties = element.shadowRoot.querySelectorAll('.property-attribute');
+          assert.lengthOf(properties, 2);
+
+          const minProperty = properties[0]
+          const label = minProperty.querySelector('.attribute-label');
+          assert.equal(label.innerText, 'Minimum array length:');
+
+          const value = minProperty.querySelector('.attribute-value');
+          assert.equal(value.title, 'Minimum amount of items in array');
+          assert.equal(value.innerText.trim().toLowerCase(), '3');
+        });
+
+        it('Renders array maximum count', async () => {
+          const properties = element.shadowRoot.querySelectorAll('.property-attribute');
+          assert.lengthOf(properties, 2);
+
+          const maxProperty = properties[1]
+          const label = maxProperty.querySelector('.attribute-label');
+          assert.equal(label.innerText, 'Maximum array length:');
+
+          const value = maxProperty.querySelector('.attribute-value');
+          assert.equal(value.title, 'Maximum amount of items in array');
+          assert.equal(value.innerText.trim().toLowerCase(), '10');
+        });
+      });
+    });
+  });
+
   describe('a11y', () => {
     let element;