I am new to IndexedDB and trying to create a database with many stores in it.
After creating the stores my app can go ahead and add records to it, but I need to be sure that all stores have been created.

I am using this function to do so:

function createDatabase() {
   return new Promise((resolve, reject) => {
      const dbOpenRequest = window.indexedDB.open('GHCaching', 14);

      dbOpenRequest.onupgradeneeded = (event: any) => {
         const db = event.target.result;

         if (!db.objectStoreNames.contains('myTestStore1')) {
            const suppliersObjectStore = db.createObjectStore('myTestStore1', { keyPath: 'ssn' });
            suppliersObjectStore.transaction.oncomplete = () => {
               //First was created
            };
         }

         if (!db.objectStoreNames.contains('myTestStore2')) {
            const customersObjectStore = db.createObjectStore('myTestStore2', { keyPath: 'ssn' });
            customersObjectStore.transaction.oncomplete = () => {
               //Second was created
            };
         }
      };

      dbOpenRequest.onsuccess = (event: any) => {
         const db = event.target.result;
         console.log('Database opened successfully.');
         resolve('success');
      };

      dbOpenRequest.onerror = (event: any) => {
         console.error('Error creating database:', event.target.error);
         reject(event.target.error);
      };
   });
}

I would expect the dbOpenRequest.onsuccess to be fired only after both stores have been created successfuly.
However, //First was created, is NEVER called at all.

How can I create multiple stores in the beginning and get a callback that fires only after all stores have been created?