Implement more robust waiting for UI updates

Replace hard-coded delays with waits for the specific conditions that we
want to check for.

lms/static/scripts/frontend_apps/components/test/FilePickerApp-test.js

@@ -7,7 +7,7 @@ import { Config } from '../../config';
 import FilePickerApp, { $imports } from '../FilePickerApp';
 import { checkAccessibility } from '../../../test-util/accessibility';
 import mockImportedComponents from '../../../test-util/mock-imported-components';
-import { delay, waitFor } from '../../../test-util/wait';
+import { waitFor, waitForElement } from '../../../test-util/wait';
 
 function interact(wrapper, callback) {
   act(callback);
@@ -145,9 +145,6 @@ describe('FilePickerApp', () => {
       selectContent(wrapper, 'https://example.com');
 
       await waitFor(() => fakeAPICall.called);
-      await delay(100);
-      wrapper.update();
-
       assert.calledWith(fakeAPICall, {
         authToken: 'dummyAuthToken',
         path: createAssignmentPath,
@@ -157,7 +154,9 @@ describe('FilePickerApp', () => {
         },
       });
 
-      assert.called(onSubmit);
+      await waitFor(() => onSubmit.called);
+
+      wrapper.update();
       checkFormFields(
         wrapper,
         {
@@ -180,11 +179,7 @@ describe('FilePickerApp', () => {
 
       selectContent(wrapper, 'https://example.com');
 
-      await waitFor(() => fakeAPICall.called);
-      await delay(100);
-      wrapper.update();
-
-      const errDialog = wrapper.find('ErrorDialog');
+      const errDialog = await waitForElement(wrapper, 'ErrorDialog');
       assert.equal(errDialog.length, 1);
       assert.equal(errDialog.prop('error'), error);
     });