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>
2025-12-19 17:01:13 +00:00 · 2025-12-10 14:02:31 -05:00
parent 5b7d1a74af
commit d67c1a0464
13 changed files with 315 additions and 17 deletions
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1482,6 +1482,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        itemKey: SettingsV2TabTypes[tab.tab],
        style: { marginTop: 20 },
        headerText: getTabTitle(tab.tab),
+        headerButtonProps: {
+          "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
+        },
      };

      return (
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/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>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/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"
        />
      )}
    </>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/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",
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/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",
          },
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -12,6 +12,11 @@ exports[`SettingsComponent renders 1`] = `
      selectedKey="ScaleTab"
    >
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/ScaleTab",
+          }
+        }
        headerText="Scale"
        itemKey="ScaleTab"
        key="ScaleTab"
@@ -102,6 +107,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/SubSettingsTab",
+          }
+        }
        headerText="Settings"
        itemKey="SubSettingsTab"
        key="SubSettingsTab"
@@ -201,6 +211,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/ContainerVectorPolicyTab",
+          }
+        }
        headerText="Container Policies"
        itemKey="ContainerVectorPolicyTab"
        key="ContainerVectorPolicyTab"
@@ -227,6 +242,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/IndexingPolicyTab",
+          }
+        }
        headerText="Indexing Policy"
        itemKey="IndexingPolicyTab"
        key="IndexingPolicyTab"
@@ -263,6 +283,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/PartitionKeyTab",
+          }
+        }
        headerText="Partition Keys (preview)"
        itemKey="PartitionKeyTab"
        key="PartitionKeyTab"
@@ -370,6 +395,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/ComputedPropertiesTab",
+          }
+        }
        headerText="Computed Properties"
        itemKey="ComputedPropertiesTab"
        key="ComputedPropertiesTab"
@@ -404,6 +434,11 @@ exports[`SettingsComponent renders 1`] = `
        />
      </PivotItem>
      <PivotItem
+        headerButtonProps={
+          {
+            "data-test": "settings-tab-header/GlobalSecondaryIndexTab",
+          }
+        }
        headerText="Global Secondary Index (Preview)"
        itemKey="GlobalSecondaryIndexTab"
        key="GlobalSecondaryIndexTab"