fix(ApiFormItemElement): no selected value for enum

Author: carowright

demo/W-11836777/W-11836777.yaml

@@ -0,0 +1,87 @@
+openapi: 3.0.0
+info:
+  title: eMPF API Specification - Contribution Module
+  description: eMPF API Specification - Contribution Module
+  version: 0.1.0
+paths:
+  /cas/ad/contribution/external/v1/bill/list:
+    get:
+      tags:
+        - ER-Portal-API
+      summary: CON-PERIOD-BILLABLE CON - Retrieve period bill
+      description: |
+        **API ID:** CON-PERIOD-BILLABLE \
+        **CM:** CM-Web-Employer-Contribution A1, A2, A3, A4, B1, B2, B3, B4 \
+        **FS:** FS-UF-CON-REE-009,FS-UF-CON-CEE-001 \
+        CON - Retrieve period bill
+      parameters:
+        - $ref: '#/components/parameters/pageSize'
+      responses:
+        '200':
+          description: successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/periodBillableResponse'
+        '400':
+          $ref: '#/components/responses/400'
+      security:
+        - bearerAuth: []
+
+components:
+  parameters:
+    pageSize:
+      in: query
+      required: true
+      name: pageSize
+      description: Page Size
+      schema:
+        enum:
+          - 25
+          - 50
+          - 100
+        example: 50
+        type: integer
+  schemas:
+    GlobalSuccessResponse:
+      type: object
+      properties:
+        success:
+          type: boolean
+          description: The flag indicates there is no bussiness error occurred in the request
+        code:
+          type: integer
+          example: '200'
+    periodBillableResponse:
+      allOf:
+        - $ref: '#/components/schemas/GlobalSuccessResponse'
+        - properties:
+            payload:
+              $ref: '#/components/schemas/periodBillablesResDto'
+    periodBillablesResDto:
+      type: object
+      properties:
+        pageRecords:
+          type: integer
+          example: 50
+        page:
+          type: integer
+          example: 0
+        pageSize:
+          type: integer
+          example: 50
+        totalPages:
+          type: integer
+          example: 3
+        totalRecords:
+          type: integer
+          example: 139
+  responses:
+    '400':
+      description: Business validation exception
+
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT

demo/api-form-item.js

@@ -121,6 +121,18 @@ class ComponentDemo extends DemoPage {
         enum: ['apple', 'banana', 'cherries', 'grapes', 'lemon', 'orange', 'pear', 'watermelon']
       }
     });
+
+    this.m12 = /** @type AmfFormItem */({
+      name: '',
+      value: 50,
+      schema: {
+        required: true,
+        apiType: 'integer',
+        inputLabel: 'Enum integer',
+        inputType: 'text',
+        enum: ['25', '50', '100']
+      }
+    });
   }
 
   _readonlyHandler(e) {
@@ -306,6 +318,19 @@ class ComponentDemo extends DemoPage {
           @change="${this._valueHandler}"></api-form-item>
         <code>${this.v10}</code>
       </section>
+
+      <section class="card">
+        <h3>Enum with integer options</h3>
+        <api-form-item
+          .readOnly="${readOnly}"
+          .model="${this.m12}"
+          ?outlined="${outlined}"
+          ?compatibility="${compatibility}"
+          name="enumIntModel"
+          data-target="m12"
+          @change="${this._valueHandler}" 
+          value="${50}"></api-form-item>
+      </section>
   `;
   }
 }

demo/apis.json

@@ -6,5 +6,6 @@
   "annotated-oauth2/annotated-oauth2.raml": "RAML 1.0",
   "APIC-298/APIC-298.json": ["OAS 2.0", "application/json"],
   "APIC-289/APIC-289.yaml": ["OAS 2.0", "application/yaml"],
+  "W-11836777/W-11836777.yaml": ["OAS 3.0", "application/yaml"],
   "no-auto-encoding/no-auto-encoding.raml": "RAML 1.0"
 }

src/ApiFormItemElement.js

@@ -502,6 +502,7 @@ export class ApiFormItemElement extends ValidatableMixin(LitElement) {
       // non required items should have an option to set a null value.
       values.unshift('');
     }
+    const selectedValue = schema.apiType === 'integer' ? value.toString() : value;
     return html`
     <anypoint-dropdown-menu
       name="${name}"
@@ -517,7 +518,7 @@ export class ApiFormItemElement extends ValidatableMixin(LitElement) {
       <anypoint-listbox
         slot="dropdown-content"
         attrforselected="data-value"
-        .selected="${value}"
+        .selected="${selectedValue}"
         ?compatibility="${compatibility}"
         @selected-changed="${this._listSelectionHandler}"
       >

test/ApiFormItemElement.enum.test.js

@@ -111,6 +111,25 @@ describe('ApiFormItemElement', () => {
       const item = items[0];
       assert.equal(item.getAttribute('data-value'), '', 'has no value');
     });
+
+    it('renders template when no enum values', async () => {
+      element.model = {
+        name: '',
+        value: 50,
+        schema: {
+          required: true,
+          apiType: 'integer',
+          inputLabel: 'Enum integer',
+          inputType: 'text',
+          enum: ['25', '50', '100']
+        }
+      };
+      await nextFrame();
+      await nextFrame();
+
+      const listBox = element.shadowRoot.querySelector('anypoint-listbox');
+      assert.isDefined(listBox.selected, 'listbox has the property');
+    });
   });
 
   describe('Enum values: a11y', () => {