Views

Storybook

Storybook

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

Storybook.

We’ll start with the RootSkillViewController. All you have to do to start is try and load your Skill View and the test will fail.

import {
    AbstractSpruceFixtureTest
} from '@sprucelabs/spruce-test-fixtures'

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async canLoadRootSkillView() {
        this.views.Controller('eightbitstories.root', {}),
    }
}

This part is pretty easy! Run this following command and follow the instructions!

spruce create.view

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersExpectedCard() {
        const vc = this.views.Controller('eightbitstories.root', {})
        vcAssert.assertSkillViewRendersCard(vc, 'my-card')
    }
}

We’ll quickly create a CardViewController to render in our RootSkillViewController as the only card in a single layout.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
    CardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    protected cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.Controller('card', {
            id: 'my-card',
            header: {
                title: 'My Card',
            },
        })
    }

    public render(): SkillView {
        return {
            layouts: [
                {
                    cards: [this.cardVc.render()],
                },
            ],
        }
    }
}

Note: Your card’s ViewModel is never fully tested. Things like header text changes too much to make a meaningful test. The only time you should test the copy in your view is if it’s dynamically generated.

Extracting the construction of your nested view controllers to builder methods makes the constructor of your RootSkillViewController much easier to read and makes refactor easier.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
    CardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    protected cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            id: 'my-card',
            header: {
                title: 'My Card',
            },
        })
    }

    public render(): SkillView {
        return {
            layouts: [
                {
                    cards: [this.cardVc.render()],
                },
            ],
        }
    }
}

This test picks up where the last one left off. We’re going to test that the CardViewController is rendered as an instance of MyCardViewController.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersExpectedCard() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const cardVc = vcAssert.assertSkillViewRendersCard(vc, 'my-card')
        vcAssert.assertControllerInstanceOf(cardVc, MyCardViewController)
    }
}

Note: You will be getting a “MyCardViewController not defined” error here, that is expected. We will fix that in the next step.

spruce create.view

Make sure you select “Card” as the type of ViewModel you want your new ViewController to render and name it “My Card”.

Note: View controllers will automatically have ‘ViewController’ appended to the end of the name you provide, so “My Card” will become “MyCardViewController”.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'  
import MyCardViewController from '../../ViewControllers/MyCard.vc' 

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersExpectedCard() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const cardVc = vcAssert.assertSkillViewRendersCard(vc, 'my-card')
        vcAssert.assertControllerInstanceOf(cardVc, MyCardViewController)
    }
}

In Spruce, we use composition over inheritance. That means your MyCardViewController should have a CardViewController as a property and render that, rather than trying to extend CardViewController or implement the CardViewController interface.

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        
        this.cardVc = this.Controller('card', {
            id: 'my-card',
            header: {
                title: "Hey there!",
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

Now it’s just a matter of swapping out card for my-card in your CardVc builder method, renaming a few things, and updating the render method to render your new MyCardViewController.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
    CardViewController,
} from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../ViewControllers/MyCard.vc'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    protected myCardVc: MyCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.myCardVc = this.MyCardVc()
    }

    private MyCardVc() {
        return this.Controller('eightbitstories.my-card', {})
    }

    public render(): SkillView {
        return {
            layouts: [
                {
                    cards: [this.myCardVc.render()],
                },
            ],
        }
    }
}

Now we’ll go throught the usual refactor of extracting the construction of your view controllers to builder methods.

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            id: 'my-card',
            header: {
                title: "Hey there!",
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

For this first test, we’re going to drop in the MockRemoteViewControllerFactory test double to get ready to make some assertions.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    @test()
    protected static async loadsRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory
    }
}

You should get 2 errors, one for each class you need to import. Lets start by adding the correct dependency using yarn.

yarn add @sprucelabs/spruce-heartwood-utils

Now that this is done, you can import the classes you need and the tests will pass.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    @test()
    protected static async loadsRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory
    }
}

Now I’m going to execute the operation (in this case this.views.load(...)) where I expect the remote card to be fetched. Then I’ll assert that it was fetched by accessing the MockRemoteViewControllerFactory instance.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    @test()
    protected static async loadsRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory


        const vc = this.views.Controller('eightbitstories.root', {})
        await this.views.load(vc)

        MockRemoteViewControllerFactory.getInstance().assertFetchedRemoteController('other-skill.my-card')

    }
}

The first step in production is to load the remote card. I won’t be actually rendering it yet, that’ll be a different test!

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    public async load() {
        const remote = RemoteViewControllerFactoryImpl.Factory({
            connectToApi: this.connectToApi,
            vcFactory: this.getVcFactory()
        })

        await remote.RemoteController('other-skill.my-card', {})
    }

     public render() {
        return {}
    }
}

You should now be getting an error something like “Couldn’t find a view controller called “other-skill.my-card”.” I’m gonna drop in a CardViewController into the MockRemoteViewControllerFactory to make that error go away.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, CardViewControllerImpl } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    @test()
    protected static async loadsRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory

        MockRemoteViewControllerFactory.dropInRemoteController(
            'forms.remote-form-card',
            CardViewControllerImpl
        )

        const vc = this.views.Controller('eightbitstories.root', {})
        await this.views.load(vc)

        MockRemoteViewControllerFactory.getInstance().assertFetchedRemoteController('other-skill.my-card')

    }
}

Note: I dropped in a CardViewControllerImpl to keep the example simple, but you will probably want to drop in a test double to make more assertions later.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, CardViewControllerImpl } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    @test()
    protected static async loadsRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory

        MockRemoteViewControllerFactory.dropInRemoteController(
            'forms.remote-form-card',
            CardViewControllerImpl
        )

        const vc = this.views.Controller('eightbitstories.root', {})
        await this.views.load(vc)

        MockRemoteViewControllerFactory.getInstance().assertFetchedRemoteController('other-skill.my-card')

    }

    @test()
    protected static async rendersRemoteCard() {
        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory

        MockRemoteViewControllerFactory.dropInRemoteController(
            'forms.remote-form-card',
            CardViewControllerImpl
        )

        const vc = this.views.Controller('eightbitstories.root', {})

        await this.views.load(vc)

        MockRemoteViewControllerFactory.getInstance().assertSkillViewRendersRemoteCard(vc, 'other-skill.my-card')
    }
}

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    private remoteCardVc?: CardViewController

    public async load() {
        const remote = RemoteViewControllerFactoryImpl.Factory({
            connectToApi: this.connectToApi,
            vcFactory: this.getVcFactory()
        })

        this.remoteCardVc = await remote.RemoteController('other-skill.my-card', {})
    }

    public render() {
        if (!this.remoteCardVc) {
            return {}
        }

        return {
            layouts: [
                {
                    cards: [
                        this.remoteCardVc.render()
                    ]
                }
            ]
        }
    }
}

Note: In order to get types to pass, I had to optionally return early from render(). Because render() is called before load(), I had to make sure that this.remoteCardVc was optional and that I returned an empty object if it was not set. You can return anything you want before load.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, CardViewControllerImpl } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    private static vc: RootSkillViewController

    protected static async beforeEach() {
        await super.beforeEach()

        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory
        MockRemoteViewControllerFactory.dropInRemoteController(
            'forms.remote-form-card',
            CardViewControllerImpl
        )
        this.vc = this.views.Controller('eightbitstories.root', {})
    }

    @test()
    protected static async loadsRemoteCard() {
        await this.load()
        this.mockFactory.assertFetchedRemoteController('other-skill.my-card')
    }

    @test()
    protected static async rendersRemoteCard() {
        await this.load()
        this.mockFactory.assertSkillViewRendersRemoteCard(vc, 'other-skill.my-card')
    }

    public static async load() {
        await this.views.load(vc)
    }

    public static get mockFactory() {
        return MockRemoteViewControllerFactory.getInstance()
    }
}

Simply setting the remote card to this.remoteCardVc will not cause the card to be rendered. You need to manually trigger a render on your SkillViewController.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, CardViewControllerImpl } from '@sprucelabs/heartwood-view-controllers'   
import { RemoteViewControllerFactoryImpl, MockRemoteViewControllerFactory } from '@sprucelabs/spruce-heartwood-utils'

export default class RenderingARemoteCard extends AbstractSpruceFixtureTest {
    private static vc: RootSkillViewController

    protected static async beforeEach() {
        await super.beforeEach()

        RemoteViewControllerFactoryImpl.Class = MockRemoteViewControllerFactory
        MockRemoteViewControllerFactory.dropInRemoteController(
            'forms.remote-form-card',
            CardViewControllerImpl
        )
        this.vc = this.views.Controller('eightbitstories.root', {})
    }

    @test()
    protected static async loadsRemoteCard() {
        await this.load()
        this.mockFactory.assertFetchedRemoteController('other-skill.my-card')
    }

    @test()
    protected static async rendersRemoteCard() {
        await this.load()
        this.mockFactory.assertSkillViewRendersRemoteCard(vc, 'other-skill.my-card')
    }

    @test()
    protected static async triggersRender() {
        await this.load()
        vcAssert.assertTriggerRenderCount(this.vc, 1)
    }

    public static async load() {
        await this.views.load(vc)
    }

    public static get mockFactory() {
        return MockRemoteViewControllerFactory.getInstance()
    }
}

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    private remoteCardVc?: CardViewController

    public async load() {
        const remote = RemoteViewControllerFactoryImpl.Factory({
            connectToApi: this.connectToApi,
            vcFactory: this.getVcFactory()
        })

        this.remoteCardVc = await remote.RemoteController('other-skill.my-card', {})
        this.triggerRender()
    }

    public render() {
        if (!this.remoteCardVc) {
            return {}
        }

        return {
            layouts: [
                {
                    cards: [
                        this.remoteCardVc.render()
                    ]
                }
            ]
        }
    }
}

If you haven’t already created a test, you need to run:

spruce create.test

And call it “My Card” and select AbstractSpruceFixtureTest as the base test class (unless you have a different base class you want to use). The idea here is to test the card independently of the Skill View.

import { vcAssert, AbstractSpruceFixtureTest } from '@sprucelabs/heartwood-view-controllers'
import { test } from '@sprucelabs/test-utils'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        vcAssert.assertIsActiveRecordCard(vc)
    }
}

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'list-installed-skills::v2020_12_25',
                responseKey: 'skills',
                rowTransformer: () => ({
                    id: 'aoeu',
                    cells: [],
                }),
            })
        )
    }

    public render() {
        return this.activeRecordCardVc.render()
    }
}

Note: The eventName and responseKey are placeholders. You will need to replace them with the actual event name and response key that you are listening for in upcoming tests.

Even though our goal is to make sure that the ActiveRecordCard is emitting the correct event on load, we’ll first need to make sure that MyCardViewController has a method called load that calls this.activeRecordCardVc.load(). We’re not going to jump right there, though. We’ll start with the test below which will fail because MyCardViewController doesn’t have a load method.

import { vcAssert, AbstractSpruceFixtureTest } from '@sprucelabs/heartwood-view-controllers'
import { eventFaker } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        vcAssert.assertIsActiveRecordCard(vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        let wasHit = false

        await eventFaker.on('eightbitstories.list-family-members::v2024_07_22', () => {
            wasHit = true
            return {
                familyMembers: [],
            }
        })

        const vc = this.views.Controller('eightbitstories.my-card', {})
        await vc.load()
    }
}

Note: The event eightbitstories.list-family-members::v2024_07_22 is a best guess at what the event name will be. It will show a type error to start, that is fine, we’ll fix it in a moment.

Note: The response to the event, { familyMembers: [] }, is what we’d like the event to respond with, once we design it. The idea being, design it how you think it should work, and then make it work that way.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'list-installed-skills::v2020_12_25',
                responseKey: 'skills',
                rowTransformer: () => ({
                    id: 'aoeu',
                    cells: [],
                }),
            })
        )
    }

    public async load() {}

    public render() {
        return this.activeRecordCardVc.render()
    }
}

import { vcAssert, AbstractSpruceFixtureTest } from '@sprucelabs/heartwood-view-controllers'
import { eventFaker } from '@sprucelabs/spruce-test-fixtures'
import { test, assert } from '@sprucelabs/test-utils'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        vcAssert.assertIsActiveRecordCard(vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        let wasHit = false

        await eventFaker.on('eightbitstories.list-family-members::v2024_07_22', () => {
            wasHit = true
            return {
                familyMembers: [],
            }
        })

        const vc = this.views.Controller('eightbitstories.my-card', {})
        await vc.load()

        assert.isTrue(wasHit, 'The event eightbitstories.list-family-members::v2024_07_22 was not emitted.')
    }
}

Not only are we going to load the ActiveRecordCard on load, but we’re going to update the event eightbitstories.list-family-members::v2024_07_22 and the responseKey to match what we want it to look like.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'eightbitstories.list-family-members::v2024_07_22',
                responseKey: 'familyMembers',
                rowTransformer: () => ({
                    id: 'aoeu',
                    cells: [],
                }),
            })
        )
    }

    public async load() {
        await this.activeRecordCardVc.load()
    }

    public render() {
        return this.activeRecordCardVc.render()
    }
}

You should be getting an error that the event eightbitstories.list-family-members::v2024_07_22 doesn’t exist. Let’s create it!

spruce create.event

Make sure to name it “List Family Members”.

Note: Now you can jump into the event definition files and design it how you think it should work. Once you have that, you can run spruce sync.events to generate the event contracts and your test will pass.

If your event requires a target, let’s stub one in for now:

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'eightbitstories.list-family-members::v2024_07_22',
                responseKey: 'familyMembers',
                target: {
                    organizationId: 'aoeu'
                },
                rowTransformer: () => ({
                    id: 'aoeu',
                    cells: [],
                }),
            })
        )
    }

    public async load() {
        await this.activeRecordCardVc.load()
    }

    public render() {
        return this.activeRecordCardVc.render()
    }
}

Now is as good as time as any to cleaup our test code. We’ll move the construction of the MyCardViewController the beforeEach() of the test to make the test easier to read and refactor later.

import { vcAssert, AbstractSpruceFixtureTest } from '@sprucelabs/heartwood-view-controllers'
import { eventFaker } from '@sprucelabs/spruce-test-fixtures'
import { test, assert } from '@sprucelabs/test-utils'
import MyCardViewController from '../../ViewControllers/MyCard.vc'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    protected static vc: MyCardViewController

    protected static async beforeEach() {
        await super.beforeEach()
        this.vc = this.views.Controller('eightbitstories.my-card', {})
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        let wasHit = false

        await eventFaker.on('eightbitstories.list-family-members::v2024_07_22', () => {
            wasHit = true
            return {
                familyMembers: [],
            }
        })

        await this.vc.load()

        assert.isTrue(wasHit, 'The event eightbitstories.list-family-members::v2024_07_22 was not emitted.')
    }
}

If this were a SkillViewController, our load() method would be passed Scope, which would be how we could get the current Organization or Location. But, since this is a ViewController, we don’t have that luxury. We’ll need the person calling load() on our ViewController to pass the important information in and we’ll construct the target from that.

import { SpruceSchemas, vcAssert } from '@sprucelabs/heartwood-view-controllers'
import { eventFaker, AbstractFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { assert, generateId, test } from '@sprucelabs/test-utils'
import MyCardViewController from '../../../viewControllers/MyCard.vc'

export default class MyCardTest extends AbstractFixtureTest {
    private static vc: MyCardViewController

    protected static async beforeEach() {
        await super.beforeEach()
        this.vc = this.views.Controller('eightbitstories.my-card', {})
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        const organizationId = generateId()

        let wasHit = false
        let passedTarget:
            | SpruceSchemas.Eightbitstories.v2024_07_22.ListFamilyMembersEmitTarget
            | undefined

        await eventFaker.on(
            'eightbitstories.list-family-members::v2024_07_22',
            ({ target }) => {
                passedTarget = target
                wasHit = true
                return {
                    people: [],
                }
            }
        )

        await this.vc.load(organizationId)

        assert.isTrue(wasHit)
        assert.isEqualDeep(passedTarget, { organizationId })
    }
}

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'eightbitstories.list-family-members::v2024_07_22',
                responseKey: 'familyMembers',
                rowTransformer: () => ({
                    id: 'aoeu',
                    cells: [],
                }),
            })
        )
    }

    public async load(organizationId: string) {
        this.activeRecordCardVc.setTarget({ organizationId })
        await this.activeRecordCardVc.load()
    }

    public render() {
        return this.activeRecordCardVc.render()
    }
}

Note: Because we are setting the target using setTarget(), we don’t need to pass it to the constructor of the ActiveRecordCard. So we removed the stubbed target from the constructor.

The idea here is to remove the redundant assertions and to extract out the eventFaker to an EventFaker class we can reuse across tests.

import { vcAssert } from '@sprucelabs/heartwood-view-controllers'
import { AbstractFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { assert, generateId, test } from '@sprucelabs/test-utils'
import MyCardViewController from '../../../viewControllers/MyCard.vc'
import EventFaker, { ListFamilyMembersTargetAndPayload } from '../../support/EventFaker'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    private static vc: MyCardViewController
    private static eventFaker: EventFaker

    protected static async beforeEach() {
        await super.beforeEach()
        this.eventFaker = new EventFaker()
        this.vc = this.views.Controller('eightbitstories.my-card', {})
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        const organizationId = generateId()

        let passedTarget:
            | ListFamilyMembersTargetAndPayload['target']
            | undefined

        await this.eventFaker.fakeListFamilyMembers(({ target }) => {
            passedTarget = target
            return {
                people: []
            }
        })

        await this.vc.load(organizationId)

        assert.isEqualDeep(passedTarget, { organizationId })
    }
}

And our new EventFaker implementation:

import { eventFaker, SpruceSchemas } from '@sprucelabs/spruce-test-fixtures'
import { generateId } from '@sprucelabs/test-utils'
import { SpruceSchemas, Person } from '@sprucelabs/spruce-core-schemas'

export class EventFaker {
    public async fakeListFamilyMembers(
        cb?: (targetAndPayload: ListConnectPeopleTargetAndPayload) => void | ListConnectedPeopleResponse
    ) {
        await eventFaker.on(
            'eightbitstories.list-familyMembers::v2024_07_22',
            (targetAndPayload) => {
                return cb?.(targetAndPayload) ?? {
                    people: [],
                }
            }
        )
    }
}

export type ListFamilyMembersTargetAndPayload =
    SpruceSchemas.Eightbitstories.v2024_07_22.ListFamilyMembersEmitTargetAndPayload
export type ListConnectedPeopleResponse =
    SpruceSchemas.Eightbitstories.v2024_07_22.ListFamilyMembersResponsePayload

import { vcAssert } from '@sprucelabs/heartwood-view-controllers'
import { AbstractFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { assert, generateId, test } from '@sprucelabs/test-utils'
import MyCardViewController from '../../../viewControllers/MyCard.vc'
import { Person } from '@sprucelabs/spruce-core-schemas'
import EventFaker, { ListFamilyMembersTargetAndPayload } from '../../support/EventFaker'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    private static vc: MyCardViewController
    private static eventFaker: EventFaker

    protected static async beforeEach() {
        await super.beforeEach()
        this.eventFaker = new EventFaker()
        this.vc = this.views.Controller('eightbitstories.my-card', {})
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        const organizationId = generateId()

        let passedTarget:
            | ListFamilyMembersTargetAndPayload['target']
            | undefined

        await this.eventFaker.fakeListFamilyMembers(({ target }) => {
            passedTarget = target
            return {
                people: []
            }
        })

        await this.vc.load(organizationId)

        assert.isEqualDeep(passedTarget, { organizationId })
    }

    @test()
    protected static async rendersRowForResults() {
        const organizationId = generateId()

        const person: Person = {
            id: generateId(),
            casualName: generateId(),
            networkInterface: 'eth0',
        }

        await this.eventFaker.fakeListConnectedPeople(() => [person])

        await this.vc.load(organizationId)

        listAssert.listRendersRow(this.vc.getListVc(), person.id)
    }
}

Note: You should get an error that getListVc() doesn’t exist. To fix this, we’ll need a Spy test double to expose the ActiveRecordCard’s getListVc() method.

Here we’re going to create the SpyMyCard test double, override the controller using this.views.setController(), and typecast the controller to SpyMyCard to expose the getListVc() method.

import { vcAssert } from '@sprucelabs/heartwood-view-controllers'
import { AbstractFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { assert, generateId, test } from '@sprucelabs/test-utils'
import MyCardViewController from '../../../viewControllers/MyCard.vc'
import { Person } from '@sprucelabs/spruce-core-schemas'
import EventFaker, { ListFamilyMembersTargetAndPayload } from '../../support/EventFaker'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard
    private static eventFaker: EventFaker

    protected static async beforeEach() {
        await super.beforeEach()
        this.eventFaker = new EventFaker()

        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        const organizationId = generateId()

        let passedTarget:
            | ListFamilyMembersTargetAndPayload['target']
            | undefined

        await this.eventFaker.fakeListFamilyMembers(({ target }) => {
            passedTarget = target
            return {
                people: []
            }
        })

        await this.vc.load(organizationId)

        assert.isEqualDeep(passedTarget, { organizationId })
    }

    @test()
    protected static async rendersRowForResults() {
        const organizationId = generateId()

        const person: Person = {
            id: generateId(),
            casualName: generateId(),
            networkInterface: 'eth0',
        }

        await this.eventFaker.fakeListConnectedPeople(() => [person])

        await this.vc.load(organizationId)

        listAssert.listRendersRow(this.vc.getListVc(), person.id)
    }
}

class SpyMyCard extends MyCardViewController {
    public getListVc() {
        return this.activeRecordCardVc.getListVc()
    }
}

Note: Even though the test will pass, you’ll get a type error because activeRecordCard is private in MyCardViewController. We’ll address that in the production code while we make the test pass.

We are doing 2 things here:

1. Setting activeRecordCardVc to protected so that SpyMyCard can access it.
2. Updating the rowTransformer to use the family member’s id for the row id and the family member’s name for the row cell.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    buildActiveRecordCard,
    ActiveRecordCardViewController,
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    protected activeRecordCardVc: ActiveRecordCardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.activeRecordCardVc = this.ActiveCardVc()
    }

    private ActiveCardVc() {
        return this.Controller(
            'active-record-card',
            buildActiveRecordCard({
                id: 'my-cards-id',
                header: {
                    title: "Family Members",
                },
                eventName: 'eightbitstories.list-family-members::v2024_07_22',
                responseKey: 'familyMembers',
                rowTransformer: (familyMember) => ({
                    id: familyMember.id,
                    cells: [{
                        text: {
                            content: familyMember.name
                        }
                    }],
                }),
            })
        )
    }

    public async load(organizationId: string) {
        this.activeRecordCardVc.setTarget({ organizationId })
        await this.activeRecordCardVc.load()
    }

    public render() {
        return this.activeRecordCardVc.render()
    }
}

There is quite a bit happening here:

1. Moved a lot of things to the beforeEach() to simplify the tests
   1. The organizationId
   2. The familyMembers return from the event
   3. The lastListFamilyMembersTarget from the event
2. Created a load() method to pass the organizationId to load() for us

import { vcAssert } from '@sprucelabs/heartwood-view-controllers'
import { AbstractFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { assert, generateId, test } from '@sprucelabs/test-utils'
import MyCardViewController from '../../../viewControllers/MyCard.vc'
import { Person } from '@sprucelabs/spruce-core-schemas'
import EventFaker, { ListFamilyMembersTargetAndPayload } from '../../support/EventFaker'

export default class WhosOnWifiCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard
    private static eventFaker: EventFaker
    private static organizationId: string
    private static lastListFamilyMembersTarget:
        | ListFamilyMembersTargetAndPayload['target']
        | undefined

    private static familyMembers: Person[] = []

    protected static async beforeEach() {
        await super.beforeEach()
        
        this.eventFaker = new EventFaker()
        this.organizationId = generateId()
        this.familyMembers = []

        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard

        delete this.lastListFamilyMembersTarget
        
        await this.eventFaker.fakeListFamilyMembers(({ target }) => {
            this.lastListFamilyMembersTarget = target
            return {
                people: this.familyMembers
            }
        })
    }

    @test()
    protected static async rendersAsInstanceOfActiveRecordCard() {
        vcAssert.assertIsActiveRecordCard(this.vc)
    }

    @test()
    protected static async emitsListConnectedPeopleOnLoad() {
        await this.load()
        assert.isEqualDeep(this.lastListFamilyMembersTarget, { organizationId: this.organizationId })
    }

    @test()
    protected static async rendersRowForResults() {
        this.familyMembers.push({
            id: generateId(),
            casualName: generateId(),
            networkInterface: 'eth0',
        })

        await this.load()

        listAssert.listRendersRow(this.vc.getListVc(), this.familyMembers[0].id)
    }

    protected static async load() {
        await this.vc.load(this.organizationId)
    }
}

class SpyMyCard extends MyCardViewController {
    public getListVc() {
        return this.activeRecordCardVc.getListVc()
    }
}

For this example, we’ll keep the dialog simple and render a Card ViewModel in the RootSkillViewController’s load() Lifecycle method.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'   

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersAlertOnLoad() {
        const vc = this.views.Controller('eightbitstories.root', {})
        await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
    }
}

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillView extends AbstractSkillViewController {
    public async load() {
        this.renderInDialog({
            header: {
                title: 'Hello, World!',
            },
        })
    }
}

This first test is very simple, just making sure a dialog is rendered.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, vcPluginAssert } from '@sprucelabs/heartwood-view-controllers'

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersAlertOnLoad() {
        const vc = this.views.Controller('eightbitstories.root', {})
        await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
    }
}

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    public async load() {
        this.renderInDialog({})
    }

    public render() {
        return {}
    }
}

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert, vcPluginAssert } from '@sprucelabs/heartwood-view-controllers'

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {

    @test()
    protected static async rendersAlertOnLoad() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
        vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController)
    }

}

You’re going to get a failure here because MyCardViewController doesn’t exist yet. Let’s create it!

When you are creating your View, make sure to base it on a Card.

spruce create.view

Call it My Card (or whatever you want).

Note: Don’t add ViewController to the end of the name of ViewControllers. That’ll be added for you.

Note: It is helpful to add the name of the ViewModel being rendered. Examples: If you render a Card, end your name in Card. If you render a Form, end your name in Form.

Note: Don’t add Dialog to name of your ViewController. Because a CardViewController can be rendered in a dialog or in a SkillView, it is better to keep the name free from where it is rendered.

It is much better to use composition over inheritance. This is how you can make MyCardViewController render a CardViewController.

import { 
    CardViewController, 
    AbstractViewController, 
    Card 
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {

    public static id = 'my-card'
    private cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.Controller('card', {
            header: {
                title: 'Hello, World!',
            },
        })
    }

    public render(): CardViewController {
        return this.cardVc.render()
    }
}

Back inside your RootSkillViewController, you can render MyCardViewController directly to .

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    public async load() {
        const myCardVc = this.Controller('eightbitstories.my-card', {})
        this.renderInDialog(myCardVc.render())
    }

     public render() {
        return {}
    }
}

We have to start by checking if the load method is called on the MyViewController when the dialog is rendered.

Note: We are starting with the “Test 2” from above and adding the callsLoadOnMyCardAfterShowingAsDialog test.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import MyCardViewController from '../../viewControllers/MyCardViewController'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {

    @test()
    protected static async rendersAlertOnLoad() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
        vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController)
    }

    @test()
    protected static async callsLoadOnMyCardAfterShowingAsDialog() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
        const myCardVc = vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController)
    
        myCardVc.assertLoaded()
    }

}

Your test should throw an error because MyCardViewController doesn’t have an assertLoaded() method. We’ll actually never add that, so we’re going to create a MockMyCardViewController that extends MyCardViewController and add the assertLoaded() method.

Note: I chose to create a Mock vs. a Spy (or any other test double) arbitrarily. You can use any test double you want, it only changes how you do the assertion.

import MyCardViewController from '../../viewControllers/MyCardViewController'
import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', MockMyCardViewController)
    }

    @test()
    protected static async rendersAlertOnLoad() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
        vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController)
    }

    @test()
    protected static async callsLoadOnMyCardAfterShowingAsDialog() {
        const vc = this.views.Controller('eightbitstories.root', {})
        const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
        const myCardVc = vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController) as MockMyCardViewController
    
        myCardVc.assertLoaded()
    }

}

class MockMyCardViewController extends MyCardViewController {
    private wasLoadCalled = false

    public async load() {
        await super.load()
        this.wasLoadCalled = true
    }

    public assertLoaded() {
        assert.isTrue(this.wasLoadCalled, `Expected load() to be called on MyCardViewController`)
    }
}

Note: The test will fail because MyCardViewController doesn’t have a load() method. Add that now to get to the last assertion.

import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'

class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    public async load() {
        const myCardVc = this.Controller('eightbitstories.my-card', {})
        this.renderInDialog(myCardVc.render())

        await myCardVc.load()
    }

     public render() {
        return {}
    }
}

I moved a lot to the beforeEach() method and used the static state of the test class to hold the MyCardViewController instance. This makes it much easier to access in tests.

import MyCardViewController from '../../viewControllers/MyCardViewController'
import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { vcAssert } from '@sprucelabs/heartwood-view-controllers'

export default class RenderingADialogTest extends AbstractSpruceFixtureTest {

    private static vc: MockMyCardViewController

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', MockMyCardViewController)
        this.vc = this.views.Controller('eightbitstories.root', {}) as MockMyCardViewController
    }

    @test()
    protected static async rendersAlertOnLoad() {
        await this.loadAndAssertRendersMyCard()
    }

    @test()
    protected static async callsLoadOnMyCardAfterShowingAsDialog() {
        const myCardVc = await this.loadAndAssertRendersMyCard()
        myCardVc.assertLoaded()
    }

    private static async load() {
        await this.views.load(this.vc)
    }

    private static async loadAndAssertRendersMyCard() {
        const dlgVc = await vcAssert.assertRendersDialog(this.vc, () => this.load())
        return vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController) as MockMyCardViewController
    }

}

class MockMyCardViewController extends MyCardViewController {
    private wasLoadCalled = false

    public async load() {
        await super.load()
        this.wasLoadCalled = true
    }

    public assertLoaded() {
        assert.isTrue(this.wasLoadCalled, `Expected load() to be called on MyCardViewController`)
    }
}

Now that we’ve tested that MyCardViewController is loaded in a dialog from RootSkillViewController, we can test MyCardViewController directly to minimize coupling in our tests.

spruce create.test

Call the test My Card View (or whatever you want) and drop it into behaviors.

For brevity, I’m going to test that a listener is set and calls a private method on MyCardViewController when the event is emitted. This is only to give you an idea of how to test that listeners are set and removed. It may make sense to test double something to make sure it’s invoked when the event is emitted.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardViewTest extends AbstractSpruceFixtureTest {

    @test()
    protected static async setsListenersOnLoad() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        await vc.load()

        let wasHit = false
        vc.handleDidGenerateStory = async () => {
            wasHit = true
        }

        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})

        assert.isTrue(wasHit, `Expected handleDidGenerateStory to be called in my Card`)
    }

}

import { 
    CardViewController, 
    AbstractViewController, 
    Card 
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {

    public static id = 'my-card'
    private cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            header: {
                title: 'Hello, World!',
            },
        })
    }

    public async load() {
        const client = await this.connectToApi()
        await client.on('eightbitstories.did-generate-story::v2024_01_01', async () => this.handleDidGenerateStory())
    }

    private async handleDidGenerateStory() {
        // Do something when the event is emitted
    }

    public render(): CardViewController {
        return this.cardVc.render()
    }
}

Note: I also extracted the construction of the CardViewController to a private method to simplify the constructor.

We are going to essentially copy the last test but add interactor.hide(vc) before emitting the event. Once the tests passes, we’ll refactor.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { interactor } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardViewTest extends AbstractSpruceFixtureTest {

    @test()
    protected static async setsListenersOnLoad() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        await vc.load()

        let wasHit = false
        vc.handleDidGenerateStory = async () => {
            wasHit = true
        }

        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})

        assert.isTrue(wasHit, `Expected handleDidGenerateStory to be called in my Card`)
    }

    @test()
    protected static async removesListenersOnHide() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        await vc.load()

        let wasHit = false
        vc.handleDidGenerateStory = async () => {
            wasHit = true
        }

        await interactor.hide(vc)

        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})

        assert.isFalse(wasHit, `Expected handleDidGenerateStory to not be called in MyCard`)

    }

}

import { 
    CardViewController, 
    AbstractViewController, 
    Card 
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {

    public static id = 'my-card'
    private cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            header: {
                title: 'Hello, World!',
            },
        })
    }

    public async load() {
        const client = await this.connectToApi()
        await client.on('eightbitstories.did-generate-story::v2024_01_01', async () => this.handleDidGenerateStory())
    }

    private async handleDidGenerateStory() {
        // Do something when the event is emitted
    }

    public async didHide() {
        const client = await this.connectToApi()
        await client.off('eightbitstories.did-generate-story::v2024_01_01')
    }

    public render(): CardViewController {
        return this.cardVc.render()
    }
}

Note: The client.off(...) method accepts 2 arguments. The first is the event name and the second is the callback. If you don’t pass the callback, all listeners for that event are removed. This may prove to be a problem if you have multiple listeners for the same event.

Once again, we are going to move repetitive code to the beforeEach() method and use the static state of the test class to hold helpful details. We’ll also move the monkey patching to beforeEach() to make refactoring it easier.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { interactor } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardViewTest extends AbstractSpruceFixtureTest {
    private static vc: MyCardViewController
    private static wasDidGenerateStoryCalled = false

    public static async beforeEach() {
        await super.beforeEach()
        
        this.wasDidGenerateStoryCalled = true
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as MyCardViewController
       
        this.vc.handleDidGenerateStory = async () => {
            this.wasDidGenerateStoryCalled = true
        }

        await this.vc.load()
    }

    @test()
    protected static async setsListenersOnLoad() {
        await this.emitDidGenerateStory()
        assert.isTrue(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to be called in my Card`)
    }

    @test()
    protected static async removesListenersOnHide() {
        await interactor.hide(this.vc)
        await this.emitDidGenerateStory()
        assert.isFalse(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to not be called in MyCard`)
    }

    private static async emitDidGenerateStory() {
        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})
    }
}

You only need to follow this if you need to make sure you are removing the correct listener. This is a little more complicated when using monkey patching because of the way that javascript handles scope and this. So, this will require a little bit of refactoring to keep past tests passing.

We’re going to start by creating the failing test, then refactor from there.

Note: I also refactored the test to cut down on repetition. See this.hideAndEmitDidGenerateStory() for more information.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { interactor } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardViewTest extends AbstractSpruceFixtureTest {
    private static vc: MyCardViewController
    private static wasDidGenerateStoryCalled = false

    public static async beforeEach() {
        await super.beforeEach()
        
        this.wasDidGenerateStoryCalled = true
        this.vc = this.views.Controller('eightbitstories.my-card', {})
       
        this.vc.handleDidGenerateStory = async () => {
            this.wasDidGenerateStoryCalled = true
        }

        await this.vc.load()
    }

    @test()
    protected static async setsListenersOnLoad() {
        await this.emitDidGenerateStory()
        assert.isTrue(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to be called in my Card`)
    }

    @test()
    protected static async removesListenersOnHide() {
        await this.hideAndEmitDidGenerateStory()
        assert.isFalse(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to not be called in MyCard`)
    }

    @test()
    protected static async removesTheCorrectListener() {
        let wasHit = false

        await this.fakeClient.on('eightbitstories.did-generate-story::v2024_01_01', () => {
            wasHit = true
        })

        await this.hideAndEmitDidGenerateStory()

        assert.isTrue(wasHit, `Oops, I removed too many listeners`)
    }

    private static async emitDidGenerateStory() {
        await this.hide()
        await this.emitDidGenerateStory()
    }

    private static async emitDidGenerateStory() {
        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})
    }

    private static async hide() {
        await interactor.hide(this.vc)
    }
}

We’re going to have to work around the way javascript handles scope (and this) to make this work. So, we’ll first make it pass, then refactor in a way that is cleaner.

import { 
    CardViewController, 
    AbstractViewController, 
    Card 
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {

    public static id = 'my-card'
    private cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            header: {
                title: 'Hello, World!',
            },
        })
    }

    public async load() {
        const client = await this.connectToApi()
        await client.on('eightbitstories.did-generate-story::v2024_01_01', this.handleListener)
    }

    private handleListener = async () => {
        return this.handleDidGenerateStory()
    }

    private async handleDidGenerateStory() {
        // Do something when the event is emitted
    }

    public async didHide() {
        const client = await this.connectToApi()
        await client.off('eightbitstories.did-generate-story::v2024_01_01', this.handleListener)
    }

    public render(): CardViewController {
        return this.cardVc.render()
    }
}

Note: Notice how I used an arrow function to maintain this and had it call this.handleDidGenerateStory(). This will allow us to remove the listener properly while not breaking the tests.

Just for demonstration’s sake, I’m going to move to a Spy to make sure that handleDidGenerateStory() is called when the event is emitted. This will actually simplify the test and case could be made we should have started there, but the power of these testing practices is we get to make the decision on how to best design a solution after it’s actually built. Bonus, this does away with the monkey patching we did before.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { interactor } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardViewTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCardViewController
    

    public static async beforeEach() {
        await super.beforeEach()
        
        this.views.setController('eightbitstories.my-card', SpyMyCardViewController)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCardViewController

        await this.vc.load()
    }

    @test()
    protected static async setsListenersOnLoad() {
        await this.emitDidGenerateStory()
        assert.isTrue(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to be called in my Card`)
    }

    @test()
    protected static async removesListenersOnHide() {
        await this.hideAndEmitDidGenerateStory()
        assert.isFalse(this.wasDidGenerateStoryCalled, `Expected handleDidGenerateStory to not be called in MyCard`)
    }

    @test()
    protected static async removesTheCorrectListener() {
        let wasHit = false

        await this.fakeClient.on('eightbitstories.did-generate-story::v2024_01_01', () => {
            wasHit = true
        })

        await this.hideAndEmitDidGenerateStory()

        assert.isTrue(wasHit, `Oops, I removed too many listeners`)
    }

    private static get wasDidGenerateStoryCalled() {
        return this.vc.wasHandleDidGenerateStoryCalled
    }

    private static async emitDidGenerateStory() {
        await this.hide()
        await this.emitDidGenerateStory()
    }

    private static async emitDidGenerateStory() {
        await this.fakeClient.emitAndFlattenResponse('eightbitstories.did-generate-story::v2024_01_01', {})
    }

    private static async hide() {
        await interactor.hide(this.vc)
    }
}

class SpyMyCardViewController extends MyCardViewController {
    public wasHandleDidGenerateStoryCalled = false

    public async handleDidGenerateStory() {
        await super.handleDidGenerateStory()
        this.wasHandleDidGenerateStoryCalled = true
    }
}

Here is an overview of what I did:

1. I created a Spy that extends MyCardViewController and added a public property called wasHandleDidGenerateStoryCalled.
2. Did away with the local property wasDidGenerateStoryCalled on the test class and replaced it with a getter that returns the Spy’s property.
3. Removed the monkey patching all together.

Because we’ve moved to a Spy, we can simplify the implementation of MyCardViewController by removing the additional method this.handleListener(). But, we’ll need to also change this.handleDidGenerateStory() to an arrow function to maintain this.

import { 
    CardViewController, 
    AbstractViewController, 
    Card 
} from '@sprucelabs/heartwood-view-controllers'

export default class MyCardViewController extends AbstractViewController<Card> {

    public static id = 'my-card'
    private cardVc: CardViewController

    public constructor(options: ViewControllerOptions) {
        super(options)
        this.cardVc = this.CardVc()
    }

    private CardVc() {
        return this.Controller('card', {
            header: {
                title: 'Hello, World!',
            },
        })
    }

    public async load() {
        const client = await this.connectToApi()
        await client.on('eightbitstories.did-generate-story::v2024_01_01', this.handleDidGenerateStory)
    }


    private async handleDidGenerateStory = async () => {
        // Do something when the event is emitted
    }

    public async didHide() {
        const client = await this.connectToApi()
        await client.off('eightbitstories.did-generate-story::v2024_01_01', this.handleDidGenerateStory)
    }

    public render(): CardViewController {
        return this.cardVc.render()
    }
}

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert } from '@sprucelabs/heartwood-view-controllers'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersACard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        formAssert.cardRendersForm(vc)
    }
}

This is a big first step, but pay attention to a few things:

1. You construct your form using the buildForm utility for better typing.
2. The FormViewController interface is a generic, so it’ll take the type of your Schema to enable advanced typing.
3. You render your Form into the form property of your CardSection.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.formVc = this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [],
            })
        )
        this.cardVc = this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {},
})

type MyFormSchema = typeof myFormSchema

Note: You will rely on buildForm to get better typing while constructing your form.

Our goal is to check that a desired field is being rendered, but first we’ll get blocked by needing to expose our formVc. We’ll do that using a test double.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert } from '@sprucelabs/heartwood-view-controllers'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersACard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        formAssert.cardRendersForm(vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        formAssert.formRendersFields(vc.getForm(), ['destination'])
    }
}

Note: You should see an error that getForm() doesn’t exist. We’ll create a Spy to fix that.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersACard() {
        const vc = this.views.Controller('eightbitstories.my-card', {})
        formAssert.cardRendersForm(vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        const vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
        formAssert.formRendersFields(vc.getForm(), ['field1','field2'])
    }
}

class SpyMyCard extends MyCardViewController {
    public getForm() {
        return this.formVc
    }
}

Note: If you are following along, you will get a type error because formVc is private. You can make it protected in MyCardViewController to get around this.

Note: Now you should get an error that your form is not rendering the expected fields. It’s time to implement the fields in your form.

Getting your fields to render is a 2-step process:

1. Add the fields to your Schema.
2. Add the fields as a Section to your Form.

This separation allows you to have “source of truth” in your Schema and then render the fields you actually want in your form.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.formVc = this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: ['field1', 'field2'],
                    }
                ],
            })
        )
        this.cardVc = this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

Let’s take a sec to cleanup our ViewController's constructor to make it more readable.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.formVc = FormVc()
        this.cardVc = CardVc()
    }

    private FormVc() {
        return this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: ['field1', 'field2'],
                    }
                ],
            })
        )
    }

    private CardVc() {
        return this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

Once again, we’re going to utilize our Test Class’s static state to cut down on duplication.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.vc.getForm(), ['field1','field2'])
    }
}

class SpyMyCard extends MyCardViewController {
    public getForm() {
        return this.formVc
    }
}

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert, AutocompleteInputViewController } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.formVc, ['field1','field2'])
    }

    @test()
    protected static async rendersAutocompleteInput() {
        formAssert.fieldRendersUsingInstanceOf(
            this.formVc,
            'field1',
            AutocompleteInputViewController
        )
    }

    protected static get formVc() {
        return this.vc.getForm()
    }
}

class SpyMyCard extends MyCardViewController {
    public getForm() {
        return this.formVc
    }
}

Note: In addition to the formAssert.fieldRendersUsingInstanceOf assertion, we’ve added a formVc getter to cut down on duplication.

This is another 2 parter:

1. Construct an AutocompleteInputViewController and track it on your ViewController.
2. Update your FormSection to be the “expanded” type, which is an object with field and vc properties (among others).

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
    AutocompleteInputViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>
    private autocompleteInputVc: AutocompleteInputViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.autocompleteInputVc = this.AutocompleteVc()
        this.formVc = FormVc()
        this.cardVc = CardVc()
    }

    private AutocompleteVc(): AutocompleteInputViewController {
        return this.Controller('autocomplete-input', {})
    }

    private FormVc() {
        return this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: [
                            {
                                name: 'field1'
                                vc: this.autocompleteInputVc,
                            }, 
                            'field2'
                        ],
                    }
                ],
            })
        )
    }

    private CardVc() {
        return this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

We’ll use formAssert.fieldRendersAs to assert that the field is rendering as an autocomplete.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { formAssert, AutocompleteInputViewController } from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.formVc, ['field1','field2'])
    }

    @test()
    protected static async rendersAutocompleteInput() {
        formAssert.fieldRendersUsingInstanceOf(
            this.formVc,
            'field1',
            AutocompleteInputViewController
        )
    }

    @test()
    protected static async rendersAsAutocomplete() {
        formAssert.fieldRendersAs(
            this.formVc,
            'field1',
            'autocomplete'
        )
    }

    protected static get formVc() {
        return this.vc.getForm()
    }
}

class SpyMyCard extends MyCardViewController {
    public getForm() {
        return this.formVc
    }
}

A quick, easy add. Simple set the renderAs property to autocomplete in field.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
    AutocompleteInputViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>
    protected autocompleteInputVc: AutocompleteInputViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.autocompleteInputVc = this.AutocompleteVc()
        this.formVc = FormVc()
        this.cardVc = CardVc()
    }

    private AutocompleteVc(): AutocompleteInputViewController {
        return this.Controller('autocomplete-input', {
            onChangeRenderedValue: () =>
                this.autocompleteInputVc.showSuggestions([]),
        })
    }

    private FormVc() {
        return this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: [
                            {
                                name: 'field1'
                                vc: this.autocompleteInputVc,
                                renderAs: 'autocomplete',
                            }, 
                            'field2'
                        ],
                    }
                ],
            })
        )
    }

    private CardVc() {
        return this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

The next steps are:

1. Use the autocompleteAssert utility to assert that the AutocompleteInputViewController shows suggestions when the renderedValue is changed.
2. Update your Spy to expose the AutocompleteInputViewController with getAutocompleteVc().

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import {
    autocompleteAssert,
    AutocompleteInputViewController,
    formAssert,
} from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.formVc, ['field1','field2'])
    }

    @test()
    protected static async rendersAutocompleteInput() {
        formAssert.fieldRendersUsingInstanceOf(
            this.formVc,
            'field1',
            AutocompleteInputViewController
        )
    }

    @test()
    protected static async rendersAsAutocomplete() {
        formAssert.fieldRendersAs(
            this.formVc,
            'field1',
            'autocomplete'
        )
    }

    @test()
    protected static async changingDestinationsRendersSuggestions() {
        await autocompleteAssert.actionShowsSuggestions(
            this.vc.getAutocompleteVc(),
            () => this.vc.getAutocompleteVc().setRenderedValue('test')
        )
    }

    protected static get formVc() {
        return this.vc.getForm()
    }
}

class SpyMyCard extends MyCardViewController {
    public getAutocompleteVc() {
        return this.autocompleteInputVc
    }

    public getForm() {
        return this.formVc
    }
}

Note: You’re going to get an type error because autocompleteInputVc is ‘private’. You can make it ‘protected’ in MyCardViewController to get around this.

Notice how we added a onChangeRenderedValue callback to the AutocompleteInputViewController to show suggestions when the renderedValue changes and just pass an empty array for now.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
    AutocompleteInputViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>
    protected autocompleteInputVc: AutocompleteInputViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.autocompleteInputVc = this.AutocompleteVc()
        this.formVc = FormVc()
        this.cardVc = CardVc()
    }

    private AutocompleteVc(): AutocompleteInputViewController {
        return this.Controller('autocomplete-input', {
            onChangeRenderedValue: () =>
                this.autocompleteInputVc.showSuggestions([]),
        })
    }

    private FormVc() {
        return this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: [
                            {
                                name: 'field1'
                                vc: this.autocompleteInputVc,
                            }, 
                            'field2'
                        ],
                    }
                ],
            })
        )
    }

    private CardVc() {
        return this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

import { AbstractSpruceFixtureTest, eventFaker } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import {
    autocompleteAssert,
    AutocompleteInputViewController,
    formAssert,
} from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard

    protected static async beforeEach() {
        await super.beforeEach()
        this.views.setController('eightbitstories.my-card', SpyMyCard)
        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.formVc, ['field1','field2'])
    }

    @test()
    protected static async rendersAutocompleteInput() {
        formAssert.fieldRendersUsingInstanceOf(
            this.formVc,
            'field1',
            AutocompleteInputViewController
        )
    }

    @test()
    protected static async changingDestinationsRendersSuggestions() {
        await autocompleteAssert.actionShowsSuggestions(
            this.autocompleteInputVc,
            () => this.typeIntoField1('test')
        )
    }

    @test()
    protected static async typeingIntoField1EmitsEvent() {
        let wasHit = false
        await eventFaker.on('eightbitstories.autocomplete-event::v2020_01_01', () => {
            wasHit = true
            return []
        })

        await this.typeIntoField1('hello world')
        
        assert.isTrue(wasHit)
    }

    protected static get autocompleteVc() {
        return this.vc.getAutocompleteVc()
    }

    protected static async typeIntoField1(value: string) {
       return this.autocompleteVc.setRenderedValue(value)
    }

    protected static get formVc() {
        return this.vc.getForm()
    }
}

class SpyMyCard extends MyCardViewController {
    public getAutocompleteVc() {
        return this.autocompleteInputVc
    }

    public getForm() {
        return this.formVc
    }
}

Time to change the onChangeRenderedValue handler to emit an event when the renderedValue changes.

import {
    AbstractViewController,
    ViewControllerOptions,
    Card,
    CardViewController,
    buildForm,
    FormViewController,
    AutocompleteInputViewController,
} from '@sprucelabs/heartwood-view-controllers'
import { buildSchema } from '@sprucelabs/schema'

export default class MyCardViewController extends AbstractViewController<Card> {
    public static id = 'my-card'
    private cardVc: CardViewController
    protected formVc: FormViewController<MyFormSchema>
    protected autocompleteInputVc: AutocompleteInputViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.autocompleteInputVc = this.AutocompleteVc()
        this.formVc = FormVc()
        this.cardVc = CardVc()
    }

    private AutocompleteVc(): AutocompleteInputViewController {
        return this.Controller('autocomplete-input', {
            onChangeRenderedValue: (value) =>
                this.handleAutocompleteChange(value),
        })
    }

    private async handleAutocompleteChange(_value: string) {
        this.autocompleteInputVc.showSuggestions([])
        const client = await this.connectToApi()
        await client.emitAndFlattenResponses(
            'eightbitstories.autocomplete-event::v2020_01_01'
        )
    }

    private FormVc() {
        return this.Controller(
            'form',
            buildForm({
                schema: myFormSchema,
                sections: [
                    {
                        fields: [
                            {
                                name: 'field1'
                                vc: this.autocompleteInputVc,
                            }, 
                            'field2'
                        ],
                    }
                ],
            })
        )
    }

    private CardVc() {
        return this.Controller('card', {
            body: {
                sections: [
                    {
                        form: this.formVc.render(),
                    },
                ],
            },
        })
    }

    public render() {
        return this.cardVc.render()
    }
}

const myFormSchema = buildSchema({
    id: 'myForm',
    fields: {
        field1: {
            type: 'text',
            label: 'Field 1',
        },
        field2: {
            type: 'text',
            label: 'Field 2',
        },
    },
})

type MyFormSchema = typeof myFormSchema

Note: We still show an empty array of suggestions to keep the past test working.

Note: You should be getting an error that a listener for eightbitstories.autocomplete-event::v2020_01_01 doesn’t exist for the last test, we’ll refactor our test next to make it work.

Note: To avoid an unused variable warning, you can prepend the variable name with an underscore (_value).

We’re going to take a short detour now to create an EventFaker class to keep our tests DRY.

import { AbstractSpruceFixtureTest, eventFaker } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import {
    autocompleteAssert,
    AutocompleteInputViewController,
    formAssert,
} from '@sprucelabs/heartwood-view-controllers'
import MyCardViewController from '../../viewControllers/MyCardViewController'

export default class MyCardTest extends AbstractSpruceFixtureTest {
    private static vc: SpyMyCard
    private static eventFaker: EventFaker

    protected static async beforeEach() {
        await super.beforeEach()

        this.views.setController('eightbitstories.my-card', SpyMyCard)

        this.vc = this.views.Controller('eightbitstories.my-card', {}) as SpyMyCard
        this.eventFaker = new EventFaker()
        
        await this.eventFaker.fakeAutocompleteEvent()
    }

    @test()
    protected static async rendersACard() {
        formAssert.cardRendersForm(this.vc)
    }

    @test()
    protected static async rendersExpectedFields() {
        formAssert.formRendersFields(this.formVc, ['field1','field2'])
    }

    @test()
    protected static async rendersAutocompleteInput() {
        formAssert.fieldRendersUsingInstanceOf(
            this.formVc,
            'field1',
            AutocompleteInputViewController
        )
    }

    @test()
    protected static async changingDestinationsRendersSuggestions() {
        await autocompleteAssert.actionShowsSuggestions(
            this.autocompleteInputVc,
            () => this.typeIntoField1('test')
        )
    }

    @test()
    protected static async typeingIntoField1EmitsEvent() {
        let wasHit = false
        await this.eventFaker.fakeAutocompleteEvent(() => {
            wasHit = true
            return []
        })

        await this.typeIntoField1('hello world')
        
        assert.isTrue(wasHit)
    }

    protected static get autocompleteVc() {
        return this.vc.getAutocompleteVc()
    }

    protected static async typeIntoField1(value: string) {
       return this.autocompleteVc.setRenderedValue(value)
    }

    protected static get formVc() {
        return this.vc.getForm()
    }
}

class SpyMyCard extends MyCardViewController {
    public getAutocompleteVc() {
        return this.autocompleteInputVc
    }

    public getForm() {
        return this.formVc
    }
}

class EventFaker {
    public async fakeAutocompleteEvent(cb?: () => void) {
        return this.fakeEvent('eightbitstories.autocomplete-event::v2020_01_01', () => {
            return {
                results: [],
            }
        })
    }
}

Note: By adding the EventFaker class and faking the event in beforeEach, we can be sure that no test fails because of a missing listener.

Notice that we’re importing crudAssert from @sprucelabs/spruce-crud-utils and using it to assert that the RootSkillView renders as a MasterSkillView.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import { crudAssert } from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
    @test()
    protected static async rendersMaster() {
        const vc = this.views.Controller('eightbitstories.root', {})
        crudAssert.skillViewRendersMasterView(]vc)
    }
}

Note: This is going to be mad about a beforeEach() setup that needs to be done, follow the instructions to get to the next step.

The fix happens in your tests beforeEach() method.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import { crudAssert } from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {

    protected static async beforeEach() {
        await super.beforeEach()
        crudAssert.beforeEach(this.views)
    }


    @test()
    protected static async rendersMaster() {
        const vc = this.views.Controller('eightbitstories.root', {})
        crudAssert.skillViewRendersMasterView(]vc)
    }
}

Note: Now it’s going to blow up about not setting up the Crud Views properly. We’ll do this in your RootSkillView or wherever you’re rendering your MasterSkillView.

Since we’re starting with an empty SkillView, we’ll implement just the constructor and call setController(...) on the ViewControllerFactory to set the CrudMasterSkillViewController and MasterListCardViewController.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
} from '@sprucelabs/heartwood-view-controllers'
import {
    CrudMasterSkillViewController,
    MasterListCardViewController,
} from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.getVcFactory().setController(
            'crud.master-skill-view',
            CrudMasterSkillViewController
        )
        this.getVcFactory().setController(
            'crud.master-list-card',
            MasterListCardViewController
        )

    }

    public render(): SkillView {
        return {}
    }
}

> **Note**: This will bring you to the next failing assertion, which requires you to actually render a `MasterSkillView`.

Also, the MasterSkillView requires at least one entity, so use buildMasterListEntity(...) to create one (you can put in gibberish for now).

Here are the steps:

1. Construct a MasterSkillView
2. Pass it at least one entity (using buildMasterListEntity(...)) and put in gibberish for now.
3. Render the MasterSkillView by updating the render() method in your RootSkillView.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
} from '@sprucelabs/heartwood-view-controllers'
import {
    CrudMasterSkillViewController,
    MasterListCardViewController,
} from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    private masterSkillViewVc: CrudMasterSkillViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.getVcFactory().setController(
            'crud.master-skill-view',
            CrudMasterSkillViewController
        )
        this.getVcFactory().setController(
            'crud.master-list-card',
            MasterListCardViewController
        )

        this.masterSkillViewVc = this.Controller('crud.master-skill-view', {
            entities: [
                buildMasterListEntity({
                    id: 'aoeu',
                    title: 'aoeu',
                    load: {
                        fqen: 'aoeu',
                        responseKey: 'aoue',
                        rowTransformer: (skill) => ({
                            id: 'aoeuaoeu',
                            cells: [],
                        }),
                    },
                }),
            ],
        })
    }

    public render(): SkillView {
        return this.masterSkillViewVc.render()
    }
}

Note: You are going to get a lot of type errors, which is fine, because we’ll get to that next test!

This one is fast, let’s use crudAssert.skillViewLoadsMasterView() to assert that the MasterSkillView is loaded when your SkillView is loaded.

import { AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
import { test } from '@sprucelabs/test-utils'
import { crudAssert } from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewTest extends AbstractSpruceFixtureTest {

    protected static async beforeEach() {
        await super.beforeEach()
        crudAssert.beforeEach(this.views)
    }


    @test()
    protected static async rendersMaster() {
        const vc = this.views.Controller('eightbitstories.root', {})
        crudAssert.skillViewRendersMasterView(]vc)
    }

    @test()
    protected static async loadsMaster() {
        const vc = this.views.Controller('eightbitstories.root', {})
        await crudAssert.skillViewLoadsMasterView(vc)
    }
}

To get this test to pass, you need to implement the load() method in your SkillView and call load(...) on the MasterSkillView.

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
    SkillViewControllerLoadOptions,
} from '@sprucelabs/heartwood-view-controllers'
import {
    CrudMasterSkillViewController,
    MasterListCardViewController,
} from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    private masterSkillViewVc: CrudMasterSkillViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.getVcFactory().setController(
            'crud.master-skill-view',
            CrudMasterSkillViewController
        )
        this.getVcFactory().setController(
            'crud.master-list-card',
            MasterListCardViewController
        )

        this.masterSkillViewVc = this.Controller('crud.master-skill-view', {
            entities: [
                buildMasterListEntity({
                    id: 'aoeu',
                    title: 'aoeu',
                    load: {
                        fqen: 'aoeu',
                        responseKey: 'aoue',
                        rowTransformer: (skill) => ({
                            id: 'aoeuaoeu',
                            cells: [],
                        }),
                    },
                }),
            ],
        })
    }

    public async load(options: SkillViewControllerLoadOptions) {
        await this.masterSkillViewVc.load(options)
    }

    public render(): SkillView {
        return this.masterSkillViewVc.render()
    }
}

import {
    AbstractSkillViewController,
    ViewControllerOptions,
    SkillView,
    SkillViewControllerLoadOptions,
} from '@sprucelabs/heartwood-view-controllers'
import {
    CrudMasterSkillViewController,
    MasterListCardViewController,
} from '@sprucelabs/spruce-crud-utils'

export default class RootSkillViewController extends AbstractSkillViewController {
    public static id = 'root'
    private masterSkillViewVc: CrudMasterSkillViewController

    public constructor(options: ViewControllerOptions) {
        super(options)

        this.getVcFactory().setController(
            'crud.master-skill-view',
            CrudMasterSkillViewController
        )
        this.getVcFactory().setController(
            'crud.master-list-card',
            MasterListCardViewController
        )

        this.masterSkillViewVc = this.MasterSkillViewVc()
    }

    private MastSkillViewVc() {
        return this.Controller('crud.master-skill-view', {
            entities: [
                buildMasterListEntity({
                    id: 'aoeu',
                    title: 'aoeu',
                    load: {
                        fqen: 'aoeu',
                        responseKey: 'aoue',
                        rowTransformer: (skill) => ({
                            id: 'aoeuaoeu',
                            cells: [],
                        }),
                    },
                }),
            ],
        })
    }

    public async load(options: SkillViewControllerLoadOptions) {
        await this.masterSkillViewVc.load(options)
    }

    public render(): SkillView {
        return this.masterSkillViewVc.render()
    }
}

import {
    vcAssert,
    vcPluginAssert,
} from '@sprucelabs/heartwood-view-controllers'
import { AutoLogoutPlugin } from '@sprucelabs/spruce-heartwood-utils'

export default class AutoLoggingOutTest extends AbstractSpruceFixtureTest {

    @test()
    protected static async autoLogoutPluginInstalled() {
        vcPluginAssert.pluginIsInstalled(
            this.views.Controller('eightbitstories.root', {}),
            'autoLogout',
            AutoLogoutPlugin
        )
    }
}

Note: If you are planning on using your own plugin (one that is not built yet), use it instead of AutoLogoutPlugin as if it exists and then begin with the productions steps below.

1. Install the module that holds the plugin: yarn add {packageName}
2. Create the plugin: spruce create.view.plugin
3. Implement the plugin at ./src/viewPlugins/{pluginName}.ts

Your plugin starts like this:

import { ViewControllerPlugin } from '@sprucelabs/heartwood-view-controllers'

export default class MyViewPlugin implements ViewControllerPlugin {
    ...
}

Now that plugin is created, you can import it into your test.

Note: If you are using a prebuilt plugin, you would implement it like this:

export { AutoLogoutPlugin as default } from '@sprucelabs/spruce-heartwood-utils'

You can drop in your test double using the views fixture on your AbstractSpruceFixtureTest . Here is how you may do that in your beforeEach():

protected static async beforeEach() {
    await super.beforeEach()

    this.spy = new SpyPlugin()
    this.views.addPlugin('autoLogout', this.spy)
}

Now, in any View Controller you create, this.plugins.autoLogout will be the SpyPlugin instance.

class RootSkillView extends AbstractSkillViewController {
    public constructor(options: SkillViewControllerOptions) {
        super(options)
    }

    public async load() {
        this.plugins.autoLogout.doSomething()
    }
}