refactor(select): use shared validation mixins

PiperOrigin-RevId: 585751913

Author: asyncliz

labs/behaviors/validators/checkbox-validator.ts

@@ -13,12 +13,12 @@ export interface CheckboxState {
   /**
    * Whether the checkbox is checked.
    */
-  checked: boolean;
+  readonly checked: boolean;
 
   /**
    * Whether the checkbox is required.
    */
-  required: boolean;
+  readonly required: boolean;
 }
 
 /**
@@ -46,8 +46,4 @@ export class CheckboxValidator extends Validator<CheckboxState> {
   protected override equals(prev: CheckboxState, next: CheckboxState) {
     return prev.checked === next.checked && prev.required === next.required;
   }
-
-  protected override copy({checked, required}: CheckboxState): CheckboxState {
-    return {checked, required};
-  }
 }

labs/behaviors/validators/select-validator.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, render} from 'lit';
+
+import {Validator} from './validator.js';
+
+/**
+ * Constraint validation properties for a select dropdown.
+ */
+export interface SelectState {
+  /**
+   * The current selected value.
+   */
+  readonly value: string;
+
+  /**
+   * Whether the select is required.
+   */
+  readonly required: boolean;
+}
+
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+export class SelectValidator extends Validator<SelectState> {
+  private selectControl?: HTMLSelectElement;
+
+  protected override computeValidity(state: SelectState) {
+    if (!this.selectControl) {
+      // Lazily create the platform select
+      this.selectControl = document.createElement('select');
+    }
+
+    render(html`<option value=${state.value}></option>`, this.selectControl);
+
+    this.selectControl.value = state.value;
+    this.selectControl.required = state.required;
+    return {
+      validity: this.selectControl.validity,
+      validationMessage: this.selectControl.validationMessage,
+    };
+  }
+
+  protected override equals(prev: SelectState, next: SelectState) {
+    return prev.value === next.value && prev.required === next.required;
+  }
+}

labs/behaviors/validators/select-validator_test.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {SelectValidator} from './select-validator.js';
+
+describe('SelectValidator', () => {
+  it('is invalid when required and value is empty', () => {
+    const state = {
+      required: true,
+      value: '',
+    };
+
+    const validator = new SelectValidator(() => state);
+    const {validity, validationMessage} = validator.getValidity();
+    expect(validity.valueMissing).withContext('valueMissing').toBeTrue();
+    expect(validationMessage).withContext('validationMessage').not.toBe('');
+  });
+
+  it('is valid when required and value is provided', () => {
+    const state = {
+      required: true,
+      value: 'Foo',
+    };
+
+    const validator = new SelectValidator(() => state);
+    const {validity, validationMessage} = validator.getValidity();
+    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();
+    expect(validationMessage).withContext('validationMessage').toBe('');
+  });
+
+  it('is valid when not required', () => {
+    const state = {
+      required: false,
+      value: '',
+    };
+
+    const validator = new SelectValidator(() => state);
+    const {validity, validationMessage} = validator.getValidity();
+    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();
+    expect(validationMessage).withContext('validationMessage').toBe('');
+  });
+});

labs/behaviors/validators/validator.ts

@@ -111,7 +111,9 @@ export abstract class Validator<State> {
    * @param state The state to copy.
    * @return A copy of the state.
    */
-  protected abstract copy(state: State): State;
+  protected copy(state: State): State {
+    return {...state};
+  }
 }
 
 /**

labs/behaviors/validators/validator_test.ts

@@ -26,10 +26,6 @@ describe('Validator', () => {
     equals(prev: CustomState, next: CustomState) {
       return prev.value === next.value && prev.required === next.required;
     }
-
-    copy({value, required}: CustomState) {
-      return {value, required};
-    }
   }
 
   describe('getValidity()', () => {