[solved] Testing <compose>

Help Requests
12

my bad … I misread the answer given :grimacing:. You correctly showed to test as custom-element.

I think I’ve figured out how to test a <compose> element. Test <compose> as custom element; i.e. .inView('<compose-elem></compose-elem>')

github repo

Thanks @Sayan751 and @bigopon for helping me on this

import { bootstrap } from "aurelia-bootstrapper"
import { StageComponent } from "aurelia-testing"

const sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))

describe("Compose-Elem", () => {
  let component

  beforeEach(async (done) => {
    /*
    component = StageComponent
      .withResources("compose-elem")
      .inView(`<compose></compose>`)
      .manuallyHandleLifecycle()
    */

    component = StageComponent
      .withResources("compose-elem")
      .inView(`<compose-elem></compose-elem>`)
      .manuallyHandleLifecycle()

    done()
  })

  afterEach(async (done) => {
    component
      .dispose()

    done()
  })

  describe("Test Group", async () => {
    it("test unit", async (done) => {
      await component.create(bootstrap)
      await component.bind(undefined)
      component.viewModel.activate("new data")
      await component.attached()

      const viewModel = component.viewModel
      const element = component.element
      expect(element.querySelector("div").textContent)
        .toContain("stuff = new data")

      viewModel.stuff = "extra new data"
      await sleep(200)
      expect(element.querySelector("div").textContent)
        .toContain("stuff = extra new data")

      await component.detached()
      await component.unbind()

      done()
    })
  })
})

Edits:

  • Update code in post
  • Add where I went wrong…please see post
1 Like