Add playwright tests (#2274)

* Add playwright tests for Autoscale/Manual Throughpout and TTL

* fix unit tests and lint

* fix unit tests

* fix tests

* fix autoscale selector

* changed throughput above limit

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -127,9 +127,9 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   };
 
   private ttlChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: TtlType.Off, text: "Off" },
-    { key: TtlType.OnNoDefault, text: "On (no default)" },
-    { key: TtlType.On, text: "On" },
+    { key: TtlType.Off, text: "Off", ariaLabel: "ttl-off-option" },
+    { key: TtlType.OnNoDefault, text: "On (no default)", ariaLabel: "ttl-on-no-default-option" },
+    { key: TtlType.On, text: "On", ariaLabel: "ttl-on-option" },
   ];
 
   public getTtlValue = (value: string): TtlType => {
@@ -223,6 +223,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
             onChange={this.onTimeToLiveSecondsChange}
             suffix="second(s)"
             ariaLabel={`Time to live in seconds`}
+            data-test="ttl-input"
           />
         )}
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -503,7 +503,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           <span style={{ float: "left", transform: "translateX(-50%)" }}>
             {this.props.instantMaximumThroughput.toLocaleString()}
           </span>
-          <span style={{ float: "right" }}>{this.props.softAllowedMaximumThroughput.toLocaleString()}</span>
+          <span style={{ float: "right" }} data-test="soft-allowed-maximum-throughput">
+            {this.props.softAllowedMaximumThroughput.toLocaleString()}
+          </span>
         </Stack.Item>
       </Stack>
       <ProgressIndicator
@@ -626,11 +628,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               min={autoPilotThroughput1K}
               onGetErrorMessage={(value: string) => {
                 const sanitizedValue = getSanitizedInputValue(value);
-                return sanitizedValue % 1000
-                  ? "Throughput value must be in increments of 1000"
-                  : this.props.throughputError;
+                const errorMessage: string =
+                  sanitizedValue % 1000 ? "Throughput value must be in increments of 1000" : this.props.throughputError;
+                return <span data-test="autopilot-throughput-input-error">{errorMessage}</span>;
               }}
               validateOnLoad={false}
+              data-test="autopilot-throughput-input"
             />
           </Stack>
         </Stack>
@@ -650,7 +653,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           }
           onChange={this.onThroughputChange}
           min={this.props.minimum}
-          errorMessage={this.props.throughputError}
+          onGetErrorMessage={() => {
+            return <span data-test="manual-throughput-input-error">{this.props.throughputError}</span>;
+          }}
+          data-test="manual-throughput-input"
         />
       )}
     </>

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -273,6 +273,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               />
             </Stack>
             <StyledTextFieldBase
+              data-test="autopilot-throughput-input"
               disabled={true}
               id="autopilotInput"
               key="auto pilot throughput input"
@@ -333,6 +334,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                   5,000
                 </span>
                 <span
+                  data-test="soft-allowed-maximum-throughput"
                   style={
                     {
                       "float": "right",
@@ -752,11 +754,13 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       >
         <StyledTextFieldBase
+          data-test="manual-throughput-input"
           disabled={false}
           id="throughputInput"
           key="provisioned throughput input"
           min={10000}
           onChange={[Function]}
+          onGetErrorMessage={[Function]}
           required={true}
           step={100}
           styles={
@@ -811,6 +815,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                   5,000
                 </span>
                 <span
+                  data-test="soft-allowed-maximum-throughput"
                   style={
                     {
                       "float": "right",
@@ -1206,11 +1211,13 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         }
       >
         <StyledTextFieldBase
+          data-test="manual-throughput-input"
           disabled={false}
           id="throughputInput"
           key="provisioned throughput input"
           min={10000}
           onChange={[Function]}
+          onGetErrorMessage={[Function]}
           required={true}
           step={100}
           styles={
@@ -1265,6 +1272,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                   5,000
                 </span>
                 <span
+                  data-test="soft-allowed-maximum-throughput"
                   style={
                     {
                       "float": "right",

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -22,14 +22,17 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       options={
         [
           {
+            "ariaLabel": "ttl-off-option",
             "key": "off",
             "text": "Off",
           },
           {
+            "ariaLabel": "ttl-on-no-default-option",
             "key": "on-nodefault",
             "text": "On (no default)",
           },
           {
+            "ariaLabel": "ttl-on-option",
             "key": "on",
             "text": "On",
           },
@@ -63,6 +66,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
     />
     <StyledTextFieldBase
       ariaLabel="Time to live in seconds"
+      data-test="ttl-input"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -284,14 +288,17 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       options={
         [
           {
+            "ariaLabel": "ttl-off-option",
             "key": "off",
             "text": "Off",
           },
           {
+            "ariaLabel": "ttl-on-no-default-option",
             "key": "on-nodefault",
             "text": "On (no default)",
           },
           {
+            "ariaLabel": "ttl-on-option",
             "key": "on",
             "text": "On",
           },
@@ -325,6 +332,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
     />
     <StyledTextFieldBase
       ariaLabel="Time to live in seconds"
+      data-test="ttl-input"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -601,14 +609,17 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       options={
         [
           {
+            "ariaLabel": "ttl-off-option",
             "key": "off",
             "text": "Off",
           },
           {
+            "ariaLabel": "ttl-on-no-default-option",
             "key": "on-nodefault",
             "text": "On (no default)",
           },
           {
+            "ariaLabel": "ttl-on-option",
             "key": "on",
             "text": "On",
           },
@@ -642,6 +653,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
     />
     <StyledTextFieldBase
       ariaLabel="Time to live in seconds"
+      data-test="ttl-input"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -878,14 +890,17 @@ exports[`SubSettingsComponent renders 1`] = `
       options={
         [
           {
+            "ariaLabel": "ttl-off-option",
             "key": "off",
             "text": "Off",
           },
           {
+            "ariaLabel": "ttl-on-no-default-option",
             "key": "on-nodefault",
             "text": "On (no default)",
           },
           {
+            "ariaLabel": "ttl-on-option",
             "key": "on",
             "text": "On",
           },
@@ -919,6 +934,7 @@ exports[`SubSettingsComponent renders 1`] = `
     />
     <StyledTextFieldBase
       ariaLabel="Time to live in seconds"
+      data-test="ttl-input"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -1220,14 +1236,17 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       options={
         [
           {
+            "ariaLabel": "ttl-off-option",
             "key": "off",
             "text": "Off",
           },
           {
+            "ariaLabel": "ttl-on-no-default-option",
             "key": "on-nodefault",
             "text": "On (no default)",
           },
           {
+            "ariaLabel": "ttl-on-option",
             "key": "on",
             "text": "On",
           },