test: LEAP-1141: Add test for concurrent saving annotation and draft (#…

…6022)

### PR fulfills these requirements
- [x] Commit message(s) and PR title follows the format
`[fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made`
ex. `fix: DEV-XXXX: Removed inconsistent code usage causing intermittent
errors`
- [x] Tests for the changes have been added/updated (for bug
fixes/features)
- [ ] Docs have been added/updated (for bug fixes/features)
- [x] Best efforts were made to ensure docs/code are concise and
coherent (checked for spelling/grammatical errors, commented out code,
debug logs etc.)
- [x] Self-reviewed and ran all changes on a local instance (for bug
fixes/features)



#### Change has impacts in these area(s)
- [ ] Product design
- [ ] Backend (Database)
- [ ] Backend (API)
- [x] Frontend



### Describe the reason for change
The case was not covered by tests.


### Does this PR introduce a breaking change?
- [ ] Yes, and covered entirely by feature flag(s)
- [ ] Yes, and covered partially by feature flag(s)
- [x] No
- [ ] Not sure (briefly explain the situation below)



### What level of testing was included in the change?
- [ ] e2e
- [x] integration
- [ ] unit



### Which logical domain(s) does this change affect?
`Tests`, `Submiting process`, `Annotation`, `Draft`

---------

Co-authored-by: Gondragos <Gondragos@users.noreply.github.com>
Co-authored-by: hlomzik <hlomzik@gmail.com>

web/libs/editor/tests/integration/e2e/drafts/submit.cy.ts

@@ -0,0 +1,69 @@
+import { Choices, LabelStudio, ToolBar } from "@humansignal/frontend-test/helpers/LSF";
+import { FF_CUSTOM_SCRIPT, FF_DEV_3873, FF_REVIEWER_FLOW } from "../../../../src/utils/feature-flags";
+
+enum RESPONSE_TYPE {
+  DRAFT = "draft",
+  SUBMIT = "submit",
+}
+const RESPONSE_DELAY = 100;
+const WAITING_FOR_EVENTS_DELAY = 200;
+
+describe("Annotation submitting process", () => {
+  it("should not create a duplicate annotation if the annotation and draft are saved concurrently", () => {
+    LabelStudio.addFeatureFlagsOnPageLoad({
+      [FF_DEV_3873]: true,
+      [FF_REVIEWER_FLOW]: true,
+      [FF_CUSTOM_SCRIPT]: true,
+    });
+    // here will be stored an order of completed saving action
+    // it consists of strings: "draft" and "submit"
+    const callApi = cy.spy().as("callApi");
+
+    LabelStudio.params()
+      .data({
+        text: "Some words",
+      })
+      .config(`<View>
+  <Text name="text" value="$text" />
+  <Choices toName="text" name="choice">
+    <Choice value="ClickMe"/>
+  </Choices>
+</View>`)
+      // To have "new" annotation we need to use userGenerate
+      .withAnnotation({ userGenerate: true, result: [] })
+      .withEventListener("submitAnnotation", () => {
+        callApi(RESPONSE_TYPE.SUBMIT);
+      })
+      .withEventListener("submitDraft", () => {
+        return new Promise<void>((resolve) => {
+          // initialize saving annotation exactly when request of saving draft should be sent to the server
+          ToolBar.submitBtn.click();
+
+          // this emulates server response delay
+          setTimeout(() => {
+            callApi(RESPONSE_TYPE.DRAFT);
+            resolve();
+          }, RESPONSE_DELAY);
+        });
+      })
+      .init();
+
+    // just to have something to save
+    Choices.findChoice("ClickMe").click();
+
+    // Preventing waiting for autosave. It will save time.
+    cy.window().then(async (win) => {
+      win.Htx.annotationStore.selected.saveDraftImmediately();
+    });
+
+    // Wait for all submit events to be invoked, to have `callOrder` ready to check
+    cy.wait(WAITING_FOR_EVENTS_DELAY);
+
+    // Check order
+    cy.window().then((win) => {
+      expect(callApi).to.be.calledTwice;
+      expect(callApi.firstCall).to.be.calledWith(RESPONSE_TYPE.DRAFT);
+      expect(callApi.secondCall).to.be.calledWith(RESPONSE_TYPE.SUBMIT);
+    });
+  });
+});

web/libs/frontend-test/src/helpers/LSF/ToolBar.ts

@@ -1,6 +1,16 @@
+import { FF_DEV_1170 } from "@humansignal/frontend-test/feature-flags";
+import { LabelStudio } from "@humansignal/frontend-test/helpers/LSF/LabelStudio";
+import { FF_DEV_3873 } from "../../../../editor/src/utils/feature-flags";
+
 export const ToolBar = {
   get root() {
-    return cy.get(".lsf-topbar");
+    return LabelStudio.getFeatureFlag(FF_DEV_3873).then((isFFDEV3873) => {
+      if (isFFDEV3873) {
+        return cy.get(".lsf-bottombar");
+      }
+
+      return cy.get(".lsf-topbar");
+    });
   },
 
   get submitBtn() {