fix bug and a test to check that users cannot navigate if a step is i…

…nvalid
jloleysens · Mar 31, 2021 · 4db039c · 4db039c
1 parent 44a4635
commit 4db039c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/.../plugins/snapshot_restore/__jest__/client_integration/helpers/restore_snapshot.helpers.ts b/.../plugins/snapshot_restore/__jest__/client_integration/helpers/restore_snapshot.helpers.ts
@@ -24,12 +24,34 @@ const initTestBed = registerTestBed<RestoreSnapshotFormTestSubject>(
 );
 
 const setupActions = (testBed: TestBed<RestoreSnapshotFormTestSubject>) => {
-  const { find, component, form } = testBed;
+  const { find, component, form, exists } = testBed;
   return {
     findDataStreamCallout() {
       return find('dataStreamWarningCallOut');
     },
 
+    goToNextStep() {
+      act(() => {
+        find('restoreSnapshotsForm.nextButton').simulate('click');
+      });
+      component.update();
+    },
+
+    canGoToADifferentStep() {
+      const canGoNext = find('restoreSnapshotsForm.nextButton').props().disabled !== true;
+      const canGoPrevious = exists('restoreSnapshotsForm.backButton')
+        ? find('restoreSnapshotsForm.nextButton').props().disabled !== true
+        : true;
+      return canGoNext && canGoPrevious;
+    },
+
+    toggleModifyIndexSettings() {
+      act(() => {
+        form.toggleEuiSwitch('modifyIndexSettingsSwitch');
+      });
+      component.update();
+    },
+
     toggleGlobalState() {
       act(() => {
         form.toggleEuiSwitch('includeGlobalStateSwitch');
@@ -59,4 +81,7 @@ export type RestoreSnapshotFormTestSubject =
   | 'snapshotRestoreStepLogistics'
   | 'includeGlobalStateSwitch'
   | 'systemIndicesInfoCallOut'
-  | 'dataStreamWarningCallOut';
+  | 'dataStreamWarningCallOut'
+  | 'restoreSnapshotsForm.backButton'
+  | 'restoreSnapshotsForm.nextButton'
+  | 'modifyIndexSettingsSwitch';
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/restore_snapshot.test.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/restore_snapshot.test.ts
@@ -22,6 +22,26 @@ describe('<RestoreSnapshot />', () => {
     server.restore();
   });
 
+  describe('wizard navigation', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setGetSnapshotResponse(fixtures.getSnapshot());
+
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      testBed.component.update();
+    });
+
+    it('does not allow navigation when the step is invalid', async () => {
+      const { actions } = testBed;
+      actions.goToNextStep();
+      expect(actions.canGoToADifferentStep()).toBe(true);
+      actions.toggleModifyIndexSettings();
+      expect(actions.canGoToADifferentStep()).toBe(false);
+    });
+  });
+
   describe('with data streams', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setGetSnapshotResponse(fixtures.getSnapshot());

diff --git a/...hot_restore/public/application/components/restore_snapshot_form/restore_snapshot_form.tsx b/...hot_restore/public/application/components/restore_snapshot_form/restore_snapshot_form.tsx
@@ -104,7 +104,7 @@ export const RestoreSnapshotForm: React.FunctionComponent<Props> = ({
         updateCurrentStep={updateCurrentStep}
       />
       <EuiSpacer size="l" />
-      <EuiForm>
+      <EuiForm data-test-subj="restoreSnapshotsForm">
         <CurrentStepForm
           snapshotDetails={snapshotDetails}
           restoreSettings={restoreSettings}
@@ -125,7 +125,12 @@ export const RestoreSnapshotForm: React.FunctionComponent<Props> = ({
         <EuiFlexGroup>
           {currentStep > 1 ? (
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="arrowLeft" onClick={() => onBack()}>
+              <EuiButtonEmpty
+                iconType="arrowLeft"
+                onClick={() => onBack()}
+                disabled={!validation.isValid}
+                data-test-subj="backButton"
+              >
                 <FormattedMessage
                   id="xpack.snapshotRestore.restoreForm.backButtonLabel"
                   defaultMessage="Back"
@@ -140,6 +145,7 @@ export const RestoreSnapshotForm: React.FunctionComponent<Props> = ({
                 iconType="arrowRight"
                 onClick={() => onNext()}
                 disabled={!validation.isValid}
+                data-test-subj="nextButton"
               >
                 <FormattedMessage
                   id="xpack.snapshotRestore.restoreForm.nextButtonLabel"

diff --git a/...pshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx b/...pshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
@@ -146,6 +146,7 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
         <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             <EuiSwitch
+              data-test-subj="modifyIndexSettingsSwitch"
               label={
                 <FormattedMessage
                   id="xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsLabel"