fix: wait for css files to load before returning the svelte instance (#253)

* wait for css files to load before returning the svelte instance

fixes #250

* add test that asserts my change works

Author: JohnnyFun

cypress/components/styles/styles-spec.js

@@ -28,4 +28,19 @@ describe('Styles', () => {
     })
     cy.get('body').should('have.css', 'background-color', 'rgb(0, 255, 255)')
   })
+  
+  it('adds CSS file and resolves a svelte component', () => {
+    // Regression test for https://github.com/bahmutov/cypress-svelte-unit-test/issues/250.
+    // Basically, `mount` was not returning the promise that returns the svelte component instance if using `cssFile` option.
+    // So the test couldn't access the instance to call svelte's `$set` method, for instance.
+    mount(Component, null, {
+      cssFile: 'cypress/components/styles/app.css',
+    }).then((componentInstance) => {
+      expect(componentInstance.$set != null).to.eq(
+        true,
+        'The resolved object should be a svelte component instance.',
+      )
+    })
+    cy.get('body').should('have.css', 'background-color', 'rgb(0, 255, 255)')
+  })
 })

lib/index.ts

@@ -113,36 +113,36 @@ export function mount(
       el.setAttribute('id', rootId)
       document.getElementsByTagName('body')[0].prepend(el)
     }
-    injectStylesBeforeElement(styleOptions, document, el)
+    return injectStylesBeforeElement(styleOptions, document, el).then(() => {
+      // by default we mount the component into the created element
+      let target = el
 
-    // by default we mount the component into the created element
-    let target = el
-
-    if (styleOptions && styleOptions.html) {
-      el.innerHTML = styleOptions.html
-      target = document.getElementById('here')
-      if (!target) {
-        console.error('mount has HTML with DIV with ID "here"')
-        console.error(styleOptions.html)
-        throw new Error(
-          'Could not find element with ID "here" in the HTML passed',
-        )
+      if (styleOptions && styleOptions.html) {
+        el.innerHTML = styleOptions.html
+        target = document.getElementById('here')
+        if (!target) {
+          console.error('mount has HTML with DIV with ID "here"')
+          console.error(styleOptions.html)
+          throw new Error(
+            'Could not find element with ID "here" in the HTML passed',
+          )
+        }
       }
-    }
-
-    const allOptions = Object.assign({}, options, {
-      target,
-    })
 
-    const component = new Component(allOptions)
-    if (options.callbacks) {
-      // write message callbacks
-      Object.keys(options.callbacks).forEach((message) => {
-        component.$$.callbacks[message] = [options.callbacks![message]]
+      const allOptions = Object.assign({}, options, {
+        target,
       })
-    }
 
-    return cy.wrap(component)
+      const component = new Component(allOptions)
+      if (options.callbacks) {
+        // write message callbacks
+        Object.keys(options.callbacks).forEach((message) => {
+          component.$$.callbacks[message] = [options.callbacks![message]]
+        })
+      }
+
+      return cy.wrap(component)
+    })
   })
 }