web-components/packages/form-layout/test/visual/aura/form-layout.test.js at 9ee6b9d24d71dc5ac6042b3bf2ae39bf62f07bdf · vaadin/web-components · 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
import { nextFrame } from '@vaadin/testing-helpers';
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
import { visualDiff } from '@web/test-runner-visual-regression';
import '@vaadin/aura/aura.css';
import '../../../vaadin-form-layout.js';
import '../../../vaadin-form-item.js';

describe('form-layout', () => {
  let element;

  describe('basic', () => {
    beforeEach(() => {
      element = fixtureSync(`
        <vaadin-form-layout>
          <vaadin-form-item>
            <label slot="label">First Name</label>
            <input class="full-width" value="Jane" />
          </vaadin-form-item>

          <vaadin-form-item>
            <label slot="label">Last Name</label>
            <input class="full-width" value="Doe" />
          </vaadin-form-item>

          <vaadin-form-item>
            <label slot="label">Email</label>
            <input class="full-width" value="jane.doe@example.com" />
          </vaadin-form-item>

          <vaadin-form-item>
            <span slot="label">Date of Birth</span>
            <input placeholder="YYYY" size="4" /> - <input placeholder="MM" size="2" /> -
            <input placeholder="DD" size="2" /><br />
            <em>Example: 1900-01-01</em>
          </vaadin-form-item>

          <vaadin-form-item colspan="2">
            <label slot="label">Conference Abstract</label>
            <textarea rows="6" class="full-width" style="display: inline-flex; vertical-align: top"></textarea>
          </vaadin-form-item>

          <vaadin-form-item>
            <input type="checkbox" />
            Subscribe to our Newsletter
          </vaadin-form-item>
        </vaadin-form-layout>
      `);
    });

    it('basic', async () => {
      await visualDiff(element, 'basic');
    });
  });

  describe('required indicator', () => {
    beforeEach(async () => {
      element = fixtureSync(`
        <vaadin-form-layout>
          <vaadin-form-item>
            <label slot="label">First Name</label>
            <input required value="Jane" />
          </vaadin-form-item>

          <vaadin-form-item>
            <label slot="label">Last Name</label>
            <input required />
          </vaadin-form-item>

          <vaadin-form-item>
            <label slot="label">Email</label>
            <input required value="jane.doe@example.com" />
          </vaadin-form-item>
        </vaadin-form-layout>
      `);

      await nextFrame();

      // Make the second input validate so that it becomes invalid
      element.querySelectorAll('input')[1].dispatchEvent(new CustomEvent('change'));
    });

    it('required indicator - labels aside', async () => {
      await visualDiff(element, 'required-indicator-labels-aside');
    });

    it('required-indicator - labels on top', async () => {
      element.responsiveSteps = element.responsiveSteps.map((step) => {
        step.labelsPosition = 'top';
        return step;
      });
      await visualDiff(element, 'required-indicator-labels-on-top');
    });
  });
});