Fix setup wizard click button loading state (#33358)

* Fix setup wizard usage button loading state

* Add e2e tests for usage button loading state
This commit is contained in:
Chi-Hsuan Huang 2022-06-09 17:30:06 +08:00 committed by GitHub
parent e80312eef0
commit a3d42be6b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 9 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: add
Add tests to check usage button loading state

View File

@ -129,6 +129,12 @@ const completeOnboardingWizard = async () => {
expect( continueButtons ).toHaveLength( 1 );
await continueButtons[ 0 ].click();
await expect( page ).toMatchElement(
'.woocommerce-usage-modal__actions button.is-secondary.is-busy'
);
await expect( page ).not.toMatchElement(
'.woocommerce-usage-modal__actions button.is-primary:disabled'
);
}
await page.waitForNavigation( { waitUntil: 'networkidle0' } );

View File

@ -17,6 +17,7 @@ class UsageModal extends Component {
this.state = {
isLoadingScripts: false,
isRequestStarted: false,
selectedAction: null,
};
}
@ -131,7 +132,7 @@ class UsageModal extends Component {
acceptActionText = __( 'Yes, count me in!', 'woocommerce' ),
} = this.props;
const { isRequestStarted } = this.state;
const { isRequestStarted, selectedAction } = this.state;
const isBusy = isRequestStarted && isRequesting;
return (
@ -148,19 +149,23 @@ class UsageModal extends Component {
<div className="woocommerce-usage-modal__actions">
<Button
isSecondary
isBusy={ isBusy }
onClick={ () =>
this.updateTracking( { allowTracking: false } )
}
isBusy={ isBusy && selectedAction === 'dismiss' }
disabled={ isBusy && selectedAction === 'accept' }
onClick={ () => {
this.setState( { selectedAction: 'dismiss' } );
this.updateTracking( { allowTracking: false } );
} }
>
{ dismissActionText }
</Button>
<Button
isPrimary
isBusy={ isBusy }
onClick={ () =>
this.updateTracking( { allowTracking: true } )
}
isBusy={ isBusy && selectedAction === 'accept' }
disabled={ isBusy && selectedAction === 'dismiss' }
onClick={ () => {
this.setState( { selectedAction: 'accept' } );
this.updateTracking( { allowTracking: true } );
} }
>
{ acceptActionText }
</Button>

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
fix setup wizard usage button loading state