get integration test running

.rubocop.yml

@@ -4,6 +4,7 @@ Style/Documentation:
 Metrics/BlockLength:
   Exclude:
     - 'app.rb'
+    - 'system_spec.rb'
 
 Metrics/ClassLength:
   Enabled: false

spec/system_spec.rb

@@ -1,12 +1,16 @@
 # frozen_string_literal: true
 
 require_relative 'spec_helper'
+require 'securerandom'
 
 describe Tectonic do
   include Capybara::DSL
   include Minitest::Capybara::Behaviour
   include Rack::Test::Methods
 
+  password = SecureRandom.hex
+  email = SecureRandom.hex + '@gmail.com'
+
   let :app do
     Tectonic
   end
@@ -22,11 +26,17 @@
     assert_includes last_response.body, 'stephanie'
   end
 
-  it 'lets user log in and look at a shelf' do
+  it 'lets new user sign up' do
     visit '/'
-    visit '/workouts'
-    fill_in 'Email address', with: '[email protected]'
-    fill_in 'Password', with: 'password'
-    click_on 'Sign in'
+    click_on 'Sign up'
+    fill_in 'email', with: email
+    fill_in 'email-confirm', with: email
+    fill_in 'password', with: password
+    fill_in 'password-confirm', with: password
+    click_on 'Sign up'
+    assert_includes page.body, 'Start a new workout'
+    click_on 'exit'
+    assert_includes page.body, 'Log out'
+    click_on 'Log out'
   end
 end

views/create-account.erb

@@ -14,9 +14,9 @@
         </div>
       </div>
       <div>
-        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Confirm email address</label>
+        <label for="email-confirm" class="block text-sm font-medium leading-6 text-gray-900">Confirm email address</label>
         <div class="mt-2">
-          <input id="email" name="login-confirm" id="login-confirm" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-lime-500 sm:text-sm sm:leading-6">
+          <input id="email-confirm" name="login-confirm" id="login-confirm" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-lime-500 sm:text-sm sm:leading-6">
         </div>
       </div>
       <div>
@@ -26,13 +26,13 @@
         </div>
       </div>
       <div>
-        <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Confirm password</label>
+        <label for="password-confirm" class="block text-sm font-medium leading-6 text-gray-900">Confirm password</label>
         <div class="mt-2">
           <input id="password-confirm" name="password-confirm" type="password" autocomplete="off" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-lime-500 sm:text-sm sm:leading-6">
         </div>
       </div>
       <div>
-        <button type="submit" class="flex w-full justify-center rounded-md bg-lime-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-lime-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500">Sign in</button>
+        <button type="submit" class="flex w-full justify-center rounded-md bg-lime-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-lime-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500">Sign up</button>
       </div>
     </form>