main
1import Controller from '../../../app/javascript/controllers/input_controller'
2import { Application } from 'stimulus';
3
4describe('input', () => {
5 beforeEach(() => {
6 fixture.setBase('spec/fixtures')
7 const el = fixture.load('input.html')
8
9 const application = new Application();
10 application.router.start();
11 application.dispatcher.start();
12 application.register('input', Controller);
13 });
14
15 afterEach(() => {
16 fixture.cleanup();
17 });
18
19 it("displays an error message next to the field", () => {
20 const nameElement = document.querySelector('#name')
21 nameElement.value = ''
22 nameElement.dispatchEvent(new Event('keyup'));
23 expect(nameElement.classList.contains('is-danger')).toEqual(true);
24
25 const helpElement = document.querySelector('#name-help')
26 expect(helpElement.textContent).toEqual('is required')
27 expect(helpElement.classList.contains('hide')).toEqual(false)
28 expect(helpElement.classList.contains('is-danger')).toEqual(true)
29 });
30
31 it("disables the submit button, when one field is valid and the other is not", () => {
32 let nameElement = document.querySelector('#name');
33 nameElement.value = '';
34 nameElement.dispatchEvent(new Event('keyup'));
35 expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
36
37 let emailElement = document.querySelector('#email');
38 emailElement.value = 'test@example.org';
39 emailElement.dispatchEvent(new Event('keyup'));
40 expect(emailElement.getAttribute('data-input-valid')).toEqual('true')
41
42 const submitButton = document.querySelector('#submit-button')
43 expect(submitButton.getAttribute('disabled')).toEqual('disabled')
44 });
45
46 it('disables the submit button, when a field does not meet the minLength', () => {
47 document.querySelector('#email').value = 'test@example.org';
48 let nameElement = document.querySelector('#name');
49 nameElement.value = '12';
50 nameElement.dispatchEvent(new Event('keyup'));
51 expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
52
53 const submitButton = document.querySelector('#submit-button')
54 expect(submitButton.getAttribute('disabled')).toEqual('disabled')
55 });
56
57 it('disables the submit button, when a field exceeds the maxLength', () => {
58 document.querySelector('#email').value = 'test@example.org';
59
60 let nameElement = document.querySelector('#name');
61 nameElement.value = '1234567890';
62 nameElement.dispatchEvent(new Event('keyup'));
63 expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
64
65 const submitButton = document.querySelector('#submit-button')
66 expect(submitButton.getAttribute('disabled')).toEqual('disabled')
67 });
68
69 it("disables the submit button, when the password does not match the confirmation", () => {
70 document.querySelector('#email').value = 'test@example.org';
71 document.querySelector('#name').value = 'Tsuyoshi';
72
73 const passwordElement = document.querySelector('#password')
74 passwordElement.value = "PASSWORD"
75
76 const confirmationElement = document.querySelector('#password_confirmation')
77 confirmationElement.value = "NOT PASSWORD"
78 confirmationElement.dispatchEvent(new Event('keyup'));
79
80 expect(confirmationElement.getAttribute('data-input-valid')).toEqual('false')
81
82 const submitButton = document.querySelector('#submit-button')
83 expect(submitButton.getAttribute('disabled')).toEqual('disabled')
84 });
85
86 it("is invalid, when the email is not valid", () => {
87 const emailElement = document.querySelector('#email')
88 emailElement.value = 'invalid';
89 emailElement.dispatchEvent(new Event('keyup'));
90 expect(emailElement.getAttribute('data-input-valid')).toEqual('false')
91 });
92
93 it('enables the submit button, when the fields are valid', () => {
94 document.querySelector('#email').value = 'test@example.org';
95 document.querySelector('#password').value = 'password';
96 document.querySelector('#password_confirmation').value = 'password';
97
98 let nameElement = document.querySelector('#name');
99 nameElement.value = '';
100 nameElement.dispatchEvent(new Event('keyup'));
101
102 nameElement.value = 'Tsuyoshi';
103 nameElement.dispatchEvent(new Event('keyup'));
104 expect(nameElement.getAttribute('data-input-valid')).toEqual('true')
105
106 const submitButton = document.querySelector('#submit-button')
107 expect(submitButton.getAttribute('disabled')).toEqual(null)
108 });
109
110 it('hides error messages, when the fields are valid', () => {
111 document.querySelector('#email').value = 'test@example.org';
112 document.querySelector('#password').value = 'password';
113 document.querySelector('#password_confirmation').value = 'password';
114
115 let nameElement = document.querySelector('#name');
116 nameElement.value = '';
117 nameElement.dispatchEvent(new Event('keyup'));
118
119 nameElement.value = 'Tsuyoshi';
120 nameElement.dispatchEvent(new Event('keyup'));
121
122 const helpElement = document.querySelector('#name-help')
123 expect(helpElement.textContent).toEqual('')
124 expect(helpElement.classList.contains('hide')).toEqual(true)
125 expect(helpElement.classList.contains('is-danger')).toEqual(false)
126 });
127});