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
|
import Controller from '../../../app/javascript/controllers/input_controller'
import { Application } from 'stimulus';
describe('input', () => {
beforeEach(() => {
fixture.setBase('spec/fixtures')
const el = fixture.load('input.html')
const application = new Application();
application.router.start();
application.dispatcher.start();
application.register('input', Controller);
});
afterEach(() => {
fixture.cleanup();
});
it("displays an error message next to the field", () => {
const nameElement = document.querySelector('#name')
nameElement.value = ''
nameElement.dispatchEvent(new Event('keyup'));
expect(nameElement.classList.contains('is-danger')).toEqual(true);
const helpElement = document.querySelector('#name-help')
expect(helpElement.textContent).toEqual('is required')
expect(helpElement.classList.contains('hide')).toEqual(false)
expect(helpElement.classList.contains('is-danger')).toEqual(true)
});
it("disables the submit button, when one field is valid and the other is not", () => {
let nameElement = document.querySelector('#name');
nameElement.value = '';
nameElement.dispatchEvent(new Event('keyup'));
expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
let emailElement = document.querySelector('#email');
emailElement.value = 'test@example.org';
emailElement.dispatchEvent(new Event('keyup'));
expect(emailElement.getAttribute('data-input-valid')).toEqual('true')
const submitButton = document.querySelector('#submit-button')
expect(submitButton.getAttribute('disabled')).toEqual('disabled')
});
it('disables the submit button, when a field does not meet the minLength', () => {
document.querySelector('#email').value = 'test@example.org';
let nameElement = document.querySelector('#name');
nameElement.value = '12';
nameElement.dispatchEvent(new Event('keyup'));
expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
const submitButton = document.querySelector('#submit-button')
expect(submitButton.getAttribute('disabled')).toEqual('disabled')
});
it('disables the submit button, when a field exceeds the maxLength', () => {
document.querySelector('#email').value = 'test@example.org';
let nameElement = document.querySelector('#name');
nameElement.value = '1234567890';
nameElement.dispatchEvent(new Event('keyup'));
expect(nameElement.getAttribute('data-input-valid')).toEqual('false')
const submitButton = document.querySelector('#submit-button')
expect(submitButton.getAttribute('disabled')).toEqual('disabled')
});
it("disables the submit button, when the password does not match the confirmation", () => {
document.querySelector('#email').value = 'test@example.org';
document.querySelector('#name').value = 'Tsuyoshi';
const passwordElement = document.querySelector('#password')
passwordElement.value = "PASSWORD"
const confirmationElement = document.querySelector('#password_confirmation')
confirmationElement.value = "NOT PASSWORD"
confirmationElement.dispatchEvent(new Event('keyup'));
expect(confirmationElement.getAttribute('data-input-valid')).toEqual('false')
const submitButton = document.querySelector('#submit-button')
expect(submitButton.getAttribute('disabled')).toEqual('disabled')
});
it("is invalid, when the email is not valid", () => {
const emailElement = document.querySelector('#email')
emailElement.value = 'invalid';
emailElement.dispatchEvent(new Event('keyup'));
expect(emailElement.getAttribute('data-input-valid')).toEqual('false')
});
it('enables the submit button, when the fields are valid', () => {
document.querySelector('#email').value = 'test@example.org';
document.querySelector('#password').value = 'password';
document.querySelector('#password_confirmation').value = 'password';
let nameElement = document.querySelector('#name');
nameElement.value = '';
nameElement.dispatchEvent(new Event('keyup'));
nameElement.value = 'Tsuyoshi';
nameElement.dispatchEvent(new Event('keyup'));
expect(nameElement.getAttribute('data-input-valid')).toEqual('true')
const submitButton = document.querySelector('#submit-button')
expect(submitButton.getAttribute('disabled')).toEqual(null)
});
it('hides error messages, when the fields are valid', () => {
document.querySelector('#email').value = 'test@example.org';
document.querySelector('#password').value = 'password';
document.querySelector('#password_confirmation').value = 'password';
let nameElement = document.querySelector('#name');
nameElement.value = '';
nameElement.dispatchEvent(new Event('keyup'));
nameElement.value = 'Tsuyoshi';
nameElement.dispatchEvent(new Event('keyup'));
const helpElement = document.querySelector('#name-help')
expect(helpElement.textContent).toEqual('')
expect(helpElement.classList.contains('hide')).toEqual(true)
expect(helpElement.classList.contains('is-danger')).toEqual(false)
});
});
|
