node-red-dashboard/cypress/tests/widgets/form.spec.js at 11848bf8dcb1be9e968890439e11dc4eb98c023e · FlowFuse/node-red-dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
describe('Node-RED Dashboard 2.0 - Forms', () => {
    beforeEach(() => {
        cy.deployFixture('dashboard-forms')
        // Clear sentinel context keys (like connectTopic) before the dashboard page loads,
        // so the per-test barrier waits for THIS test's connect-event rather than
        // passing immediately on stale data from a previous test run.
        cy.resetContext()
        cy.visit('/dashboard/page1')
    })

    it('are disabled by default if a field has been marked required', () => {
        cy.get('[data-action="form-submit"]').should('be.disabled')
    })

    it('blurring a required field runs validation', () => {
        // Deterministic barrier: wait for the ui-control connect-event chain to have
        // propagated to the forms tab. Without this, Vuetify can be mid-re-render when
        // we focus/blur and the validator gets skipped because the input is transiently disabled.
        cy.checkOutput('connectTopic', 'forms-connect-ready')
        // Scope assertions to the Test Form widget — the connect-event chain sends
        // payload:'connect' to form1 which inadvertently triggers its validation,
        // so an unscoped cy.contains() would pick up form1's "Name is required" text.
        cy.get('#nrdb-ui-widget-dashboard-ui-form').within(() => {
            cy.contains('Name is required').should('not.exist')
        })
        cy.get('[data-form="form-row-name"] input[type="text"]').should('be.visible').and('not.be.disabled')
        // Click the input directly (rather than the wrapper + .focus()) so Vuetify's
        // "touched" state is set reliably; then blur the focused element to fire validators.
        cy.get('[data-form="form-row-name"]').find('input[type="text"]').click({ force: true })
        cy.focused().blur()

        cy.get('#nrdb-ui-widget-dashboard-ui-form').within(() => {
            cy.contains('Name is required').should('be.visible')
        })
    })

    it('enables the submit button once required fields are completed', () => {
        cy.get('#nrdb-ui-widget-dashboard-ui-form').within(() => {
            cy.contains('Name is required').should('not.exist')
        })

        // need to click first to allow for Vuetify's animation of label
        // cy.get('[data-form="form-row-name"]').click()
        // cy.wait(200)
        cy.clickAndWait(cy.get('[data-form="form-row-name"]'), 200)
        // then we can type into the input
        cy.get('[data-form="form-row-name"]').find('input[type="text"]').type('John Smith', { force: true })
        cy.focused().blur()

        cy.get('#nrdb-ui-group-dashboard-ui-group').within(() => {
            cy.get('[data-action="form-submit"]').should('not.be.disabled')
        })
    })
    it('permits users to set default values via msg.payload', () => {
        // check that the form is empty
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name0"] input[type="text"]').should('have.value', '')
        cy.clickAndWait(cy.get('button').contains('Set Defaults'), 200)
        cy.clickAndWait(cy.get('button').contains('Set Defaults'), 200)
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name0"] input[type="text"]').should('have.value', 'Overridden Default Name')
    })

    it('can have their content defined by msg.ui_update.options', () => {
        // Deterministic barrier: the ui-control connect-event chain also re-sets the dynamic
        // form's options to a minimal set. Wait for that to complete first, otherwise it can
        // arrive AFTER the override click and overwrite the full option set we're testing.
        cy.checkOutput('connectTopic', 'forms-connect-ready')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-multiline"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-password"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-email"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-age"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-newsletter"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-notifications"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-dob"]').should('not.exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-tob"]').should('not.exist')

        cy.clickAndWait(cy.get('button').contains('Override Form Options'), 200)

        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name"] input[type="text"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-multiline"] textarea').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-password"] input[type="password"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-email"] input[type="email"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-age"] input[type="number"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-newsletter"] input[type="checkbox"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-notifications"] input[type="checkbox"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-dob"] input[type="date"]').should('exist')
        cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-tob"] input[type="time"]').should('exist')
    })

    const payloadElId = '#nrdb-ui-widget-74cbdedad6183c40'
    const topicElId = '#nrdb-ui-widget-d31f09b33f18c5db'

    it('Delivers topic from msg.topic', () => {
        // Deterministic barrier: wait for connect-event chain to complete before interacting
        cy.checkOutput('connectTopic', 'forms-connect-ready')
        const formElId = '#nrdb-ui-widget-3cd8df20415c4c04'
        // wait for the input to be actionable
        cy.get(formElId).find('[data-form="form-row-name1"] input[type="text"]').should('not.be.disabled')
        // enter a value into the text input field
        cy.get(formElId).find('[data-form="form-row-name1"] input[type="text"]').clear({ force: true })
        cy.get(formElId).find('[data-form="form-row-name1"] input[type="text"]').should('have.value', '')
        cy.get(formElId).find('[data-form="form-row-name1"] input[type="text"]').type('payload for msg.topic test', { force: true })
        // submit the form; force-click to bypass transient disabled state from connect-event re-renders
        cy.get(formElId).find('[data-action="form-submit"]').click({ force: true })
        // check the output for the topic
        cy.get(payloadElId).find('.nrdb-ui-text-value').contains('{"name1":"payload for msg.topic test"}')
        cy.get(topicElId).find('.nrdb-ui-text-value').contains('topic from msg.topic')
    })

    it('Delivers topic from flow.f1', () => {
        // Deterministic barrier: wait for connect-event chain to complete before interacting
        cy.checkOutput('connectTopic', 'forms-connect-ready')
        const formElId = '#nrdb-ui-widget-ddb5a30c677e5e0b'
        // wait for the input to be actionable
        cy.get(formElId).find('[data-form="form-row-name2"] input[type="text"]').should('not.be.disabled')
        // enter a value into the text input field
        cy.get(formElId).find('[data-form="form-row-name2"] input[type="text"]').clear({ force: true })
        cy.get(formElId).find('[data-form="form-row-name2"] input[type="text"]').should('have.value', '')
        cy.get(formElId).find('[data-form="form-row-name2"] input[type="text"]').should('not.be.disabled')
        cy.get(formElId).find('[data-form="form-row-name2"] input[type="text"]').type('flow.f1 test', { force: true })
        // submit the form; force-click to bypass transient disabled state from connect-event re-renders
        cy.get(formElId).find('[data-action="form-submit"]').click({ force: true })
        // check the output for the topic
        cy.get(payloadElId).find('.nrdb-ui-text-value').contains('{"name2":"flow.f1 test"}')
        cy.get(topicElId).find('.nrdb-ui-text-value').contains('topic from flow.f1')
    })

    it('Delivers topic from global.g1', () => {
        // Deterministic barrier: wait for connect-event chain to complete before interacting
        cy.checkOutput('connectTopic', 'forms-connect-ready')
        const formElId = '#nrdb-ui-widget-cf0774a3c2e9edd4'
        // wait for the input to be actionable
        cy.get(formElId).find('[data-form="form-row-name3"] input[type="text"]').should('not.be.disabled')
        // enter a value into the text input field
        cy.get(formElId).find('[data-form="form-row-name3"] input[type="text"]').clear({ force: true })
        cy.get(formElId).find('[data-form="form-row-name3"] input[type="text"]').type('global.g1 test', { force: true })
        // submit the form; force-click to bypass transient disabled state from connect-event re-renders
        cy.get(formElId).find('[data-action="form-submit"]').click({ force: true })
        // check the output for the topic
        cy.get(payloadElId).find('.nrdb-ui-text-value').contains('{"name3":"global.g1 test"}')
        cy.get(topicElId).find('.nrdb-ui-text-value').contains('topic from global.g1')
    })
})