SRC

When testing UI components, it is important to treat them as black boxes, the same way we would test classes in an API, testing only inputs and outputs, not the internal workings.

This means we do not test:

• html classes
• html ids
• methods

Things we can test:

• What the component emits as a result of user interactions/child component emits
• What the component displays, as a result of changing props, events emitted from children, and user interaction

How we can test:

Generic Classes

To create a generic class we can use the @template tag above the class, and reuse the template name in the class methods and properties:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * @template T
 */
class MyClass {
    /** @type {t} */
    #prop;

    /**
     * @param {T} value
     */
    constructor(value) {
        this.#prop = value;
    }

    /**
     * @returns {T}
     */
    getValue() {
       return this.#prop;
    }
}

/** @type {MyClass<string>} */
const foo = new MyClass("test");

If the generic needs to extend another type we can use @template {OtherType} T.

There are several questions I find it useful to ask myself or the team during refinement sessions, which help me think about how features can be implemented or if there are missing requirements.

These are:

1. How do we explain this to a user?
   • how does the user use the feature?
   • what is the reason for the feature?
2. How can we test this?
3. How can we update/upgrade/version this? Preferably without a breaking change.