view_components/test/system/alpha/toggle_switch_test.rb at 24c134d5864e5c7d86a936d52742a885605a60af · primer/view_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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
# frozen_string_literal: true

require "system/test_case"

module Alpha
  class IntegrationToggleSwitchTest < System::TestCase
    def setup
      Primer::ViewComponents::ToggleSwitchController.last_request = nil
    end

    def test_click
      visit_preview(:default)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")
    end

    def test_click_disabled
      visit_preview(:disabled)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      wait_for_spinner
      refute_selector(".ToggleSwitch--checked")
    end

    def test_click_checked_disabled
      visit_preview(:checked_disabled)

      assert_selector(".ToggleSwitch--checked")
      assert_selector(".ToggleSwitch--disabled")
      find("toggle-switch").click
      wait_for_spinner
      assert_selector(".ToggleSwitch--checked")
    end

    def test_submits_correct_value_when_off
      visit_preview(:default)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")

      wait_for_request

      assert_equal "1", Primer::ViewComponents::ToggleSwitchController.last_request.params[:value]
    end

    def test_submits_correct_value_when_on
      visit_preview(:checked)

      assert_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      wait_for_spinner
      refute_selector(".ToggleSwitch--checked")

      wait_for_request

      assert_equal "0", Primer::ViewComponents::ToggleSwitchController.last_request.params[:value]
    end

    def test_csrf_token
      visit_preview(:with_csrf_token)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")
    end

    def test_bad_csrf_token
      visit_preview(:with_bad_csrf_token)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector("[data-target='toggle-switch.errorIcon']")
    end

    def test_fetch_made_with_correct_headers
      visit_preview(:default)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")

      wait_for_request

      assert_equal "XMLHttpRequest", Primer::ViewComponents::ToggleSwitchController.last_request.headers["HTTP_REQUESTED_WITH"]
    end

    def test_fetch_made_with_turbo
      visit_preview(:with_turbo)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")

      wait_for_request

      assert_equal "text/vnd.turbo-stream.html", Primer::ViewComponents::ToggleSwitchController.last_request.headers["HTTP_ACCEPT"]
    end

    def test_fetch_made_without_turbo
      visit_preview(:default)

      refute_selector(".ToggleSwitch--checked")
      find("toggle-switch").click
      assert_selector(".ToggleSwitch--checked")

      wait_for_request

      assert_equal "*/*", Primer::ViewComponents::ToggleSwitchController.last_request.headers["HTTP_ACCEPT"]
    end

    def test_switch_does_not_move_when_loading_spinner_is_shown
      visit_preview(:small)

      before_top = track_top

      # Show the spinner the same way setLoadingState() does, without racing the request.
      page.execute_script(
        "document.querySelector(\"[data-target='toggle-switch.loadingSpinner']\").removeAttribute('hidden')"
      )
      assert_selector("[data-target='toggle-switch.loadingSpinner']")

      assert_in_delta before_top, track_top, 0.5
    end

    def test_switch_does_not_move_when_error_icon_is_shown
      visit_preview(:small)

      before_top = track_top

      # Show the error icon the same way setErrorState() does. It's an <svg>, so it has no
      # `hidden` IDL property and the attribute has to be removed directly.
      page.execute_script(
        "document.querySelector(\"[data-target='toggle-switch.errorIcon']\").removeAttribute('hidden')"
      )
      assert_selector("[data-target='toggle-switch.errorIcon']")

      assert_in_delta before_top, track_top, 0.5
    end

    private

    def track_top
      evaluate_script("document.querySelector('.ToggleSwitch-track').getBoundingClientRect().top")
    end

    def wait_for_spinner
      refute_selector("[data-target='toggle-switch.loadingSpinner']")
    end

    # Toggle switches switch immediately for a11y reasons, i.e. they do not wait for the
    # request to finish before toggling. We used to wait for the request by asserting the
    # checked state, but that doesn't work anymore. This method waits for the request by
    # examining ToggleSwitchController.last_request.
    def wait_for_request
      count = 0

      loop do
        break if Primer::ViewComponents::ToggleSwitchController.last_request

        count += 1
        break if count >= 5

        sleep 1
      end
    end
  end
end