UI/vault 9268/pki component tests (#17609)

* wip

* work in progress

* pki-role-form-test

* clean up

* radio-select-ttl-or-string test

* clean up

* add yielded check

* 12 to 13

* add pki-key-usage test

* remove meep

* key-params test

* clean up

* clean up

* pr comments

ui/lib/core/addon/components/radio-select-ttl-or-string.hbs

@@ -5,6 +5,7 @@
     @value="ttl"
     @onChange={{this.onRadioButtonChange}}
     @groupValue={{this.groupValue}}
+    data-test-radio-button="ttl"
   />
   <label class="has-left-margin-xs">
     <TtlPicker2
@@ -26,6 +27,7 @@
     @value="specificDate"
     @onChange={{this.onRadioButtonChange}}
     @groupValue={{this.groupValue}}
+    data-test-radio-button="not_after"
   />
   <label class="has-left-margin-xs">
     <span class="ttl-picker-label is-large">Specific date</span><br />
@@ -34,14 +36,13 @@
     </p>
     {{#if (eq this.groupValue "specificDate")}}
       <input
-        data-test-input="not_after"
         id="not_after"
         autocomplete="off"
         spellcheck="false"
         value={{this.notAfter}}
         {{on "input" this.setAndBroadcastInput}}
         class="input"
-        maxLength="21"
+        data-test-input="not_after"
       />
     {{/if}}
   </label>

ui/lib/core/addon/components/radio-select-ttl-or-string.js

@@ -28,16 +28,21 @@ export default class RadioSelectTtlOrString extends Component {
     // Clear the previous selection if they have clicked the other radio button.
     if (selection === 'specificDate') {
       this.args.model.set('ttl', '');
-      this.ttlTime = ''; //clear out the form field
+      this.ttlTime = '';
     }
-    if (selection === 'tll') {
+    if (selection === 'ttl') {
       this.args.model.set('notAfter', '');
-      this.notAfter = ''; //clear out the form field
+      this.notAfter = '';
+      this.args.model.set('ttl', this.ttlTime);
     }
   }
 
   @action setAndBroadcastTtl(value) {
     let valueToSet = value.enabled === true ? `${value.seconds}s` : 0;
+    if (this.groupValue === 'specificDate') {
+      // do not save ttl on the model until the ttl radio button is selected
+      return;
+    }
     this.args.model.set('ttl', `${valueToSet}`);
   }