Commit 58bb84c

@@ -2,12 +2,12 @@
   <div class="row">
     <div class="col">
       <h1>Two Factor Authentication (TFA) - Setup</h1>
-      <div data-controller="tfa">
-        <canvas id="canvas" data-target="tfa.canvas"></canvas>
+      <div data-controller="tfa--setup">
+        <canvas id="canvas" data-target="tfa--setup.canvas"></canvas>
         <p>Secret: <%= current_user.tfa_secret %></p>
         <p>Provisioning URI: <%= current_user.tfa_provisioning_uri %></p>
         <%= form_for current_user, url: tfa_path, method: :post do |form| %>
-          <%= form.hidden_field :tfa_secret, data: { target: 'tfa.secret' } %>
+          <%= form.hidden_field :tfa_secret, data: { target: 'tfa--setup.secret' } %>
           <%= form.submit "Save", class: 'btn btn-primary', data: { disable_with: 'Saving…' } %>
           <%= link_to "Cancel", dashboard_path, class: 'btn' %>
         <% end %>

@@ -0,0 +1,19 @@
+import Controller from '../../../../app/javascript/controllers/tfa/setup_controller'
+import { Application } from 'stimulus';
+
+describe('tfa--setup', () => {
+  beforeEach(() => {
+    const $container = affix('div[data-controller="tfa--setup"]')
+    $container.affix('canvas[data-target="tfa--setup.canvas"]')
+    const $form = $container.affix('form')
+    $form.affix('input[type="hidden" data-target="tfa--setup.secret" value="secret"]')
+    const application = Application.start();
+    application.register('tfa--setup', Controller);
+  });
+
+  describe("connect", () => {
+    it("displays a QR code representation of the secret", () => {
+      expect($('canvas')).toBeDefined()
+    });
+  });
+});