DEV: flaky toggle flag spec (#28292)

Very similar to move up/down flag problem fixed here -  https://github.com/discourse/discourse/pull/28272

Those are the steps to toggle the flag:
1. click toggle - `saving` CSS class is added;
2. request to backend;
3. `saving` CSS class is removed.

And check if the flag was toggle was:
```ruby
def has_saved_flag?(key)
  has_css?(".admin-flag-item.#{key}.saving")
  has_no_css?(".admin-flag-item.#{key}.saving")
end
```
If the save action is very fast, then the saving class is removed before the first check.

Therefore I decided to invert it, and once action is finished add `saved` CSS class.

Then we can have a quick positive check:

```ruby
def has_saved_flag?(key)
  has_css?(".admin-flag-item.#{key}.saved")
end
```
This commit is contained in:
Krzysztof Kotlarek 2024-08-09 09:56:10 +10:00 committed by GitHub
parent 6cf613d5f5
commit 56524f4bdf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 13 deletions

View File

@ -21,7 +21,7 @@ export default class AdminFlagItem extends Component {
@service router; @service router;
@tracked enabled = this.args.flag.enabled; @tracked enabled = this.args.flag.enabled;
@tracked isSaving = false; @tracked isSaved = true;
get canMove() { get canMove() {
return this.args.flag.id !== SYSTEM_FLAG_IDS.notify_user; return this.args.flag.id !== SYSTEM_FLAG_IDS.notify_user;
@ -49,7 +49,7 @@ export default class AdminFlagItem extends Component {
@action @action
toggleFlagEnabled(flag) { toggleFlagEnabled(flag) {
this.enabled = !this.enabled; this.enabled = !this.enabled;
this.isSaving = true; this.isSaved = false;
return ajax(`/admin/config/flags/${flag.id}/toggle`, { return ajax(`/admin/config/flags/${flag.id}/toggle`, {
type: "PUT", type: "PUT",
@ -62,7 +62,7 @@ export default class AdminFlagItem extends Component {
return popupAjaxError(error); return popupAjaxError(error);
}) })
.finally(() => { .finally(() => {
this.isSaving = false; this.isSaved = true;
}); });
} }
@ -73,18 +73,18 @@ export default class AdminFlagItem extends Component {
@action @action
moveUp() { moveUp() {
this.isSaving = true; this.isSaved = false;
this.args.moveFlagCallback(this.args.flag, "up").finally(() => { this.args.moveFlagCallback(this.args.flag, "up").finally(() => {
this.isSaving = false; this.isSaved = true;
this.dMenu.close(); this.dMenu.close();
}); });
} }
@action @action
moveDown() { moveDown() {
this.isSaving = true; this.isSaved = false;
this.args.moveFlagCallback(this.args.flag, "down").finally(() => { this.args.moveFlagCallback(this.args.flag, "down").finally(() => {
this.isSaving = false; this.isSaved = true;
this.dMenu.close(); this.dMenu.close();
}); });
} }
@ -95,18 +95,18 @@ export default class AdminFlagItem extends Component {
@action @action
delete() { delete() {
this.isSaving = true; this.isSaved = false;
this.dialog.yesNoConfirm({ this.dialog.yesNoConfirm({
message: i18n("admin.config_areas.flags.delete_confirm", { message: i18n("admin.config_areas.flags.delete_confirm", {
name: this.args.flag.name, name: this.args.flag.name,
}), }),
didConfirm: () => { didConfirm: () => {
this.args.deleteFlagCallback(this.args.flag).finally(() => { this.args.deleteFlagCallback(this.args.flag).finally(() => {
this.isSaving = false; this.isSaved = true;
}); });
}, },
didCancel: () => { didCancel: () => {
this.isSaving = false; this.isSaved = true;
}, },
}); });
this.dMenu.close(); this.dMenu.close();
@ -117,7 +117,7 @@ export default class AdminFlagItem extends Component {
class={{concatClass class={{concatClass
"admin-flag-item" "admin-flag-item"
@flag.name_key @flag.name_key
(if this.isSaving "saving") (if this.isSaved "saved")
}} }}
> >
<td> <td>

View File

@ -64,8 +64,7 @@ module PageObjects
end end
def has_saved_flag?(key) def has_saved_flag?(key)
has_css?(".admin-flag-item.#{key}.saving") has_css?(".admin-flag-item.#{key}.saved")
has_no_css?(".admin-flag-item.#{key}.saving")
end end
def has_closed_flag_menu? def has_closed_flag_menu?