Dev Scripts & Dev Docs (#19)

.npmignore

@@ -7,3 +7,4 @@
 /blob-report/
 /.github/
 /playwright/.cache/
+/Rakefile

README.md

@@ -243,6 +243,16 @@ If you're not already using a CSS or style component framework. I suggest checki
   </dialog>
 ```
 
+## Development
+
+After cloning the repository, you'll need to install dependencies by running `yarn install`.
+
+The test suite can be run with `yarn test`. Or open the [Playwright] GUI application with `yarn test:ui`
+
+Finally, the test app's server can be run on PORT 3000 with `yarn dev`.
+
+Each of these tasks is also accessible via [Rake], if you prefer. Run `rake -T` for details.
+
 ## Acknowledgments
 
 **Turbo-Confirm** is [MIT-licensed](LICENSE), open-source software from [RoleModel Software][rms].
@@ -255,4 +265,6 @@ If you're not already using a CSS or style component framework. I suggest checki
 [mdn-promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
 [mdn-dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog/
 [Optics]: https://github.com/RoleModel/optics/
+[Playwright]: https://playwright.dev/
+[Rake]: https://github.com/ruby/rake/
 [rms]: https://rolemodelsoftware.com/

Rakefile

@@ -0,0 +1,37 @@
+require 'open3'
+
+task default: :test
+
+desc 'Install dependencies & setup the dummy application'
+task :install do
+  sh 'yarn install --check-files'
+  Rake::Task['dummy:setup'].invoke
+end
+
+desc 'Run Playwright tests'
+task test: 'dummy:setup' do
+  sh 'npx playwright test --reporter=dot'
+end
+
+desc 'Open the Playwright test runner app'
+task test_ui: 'dummy:setup' do
+  sh 'npx playwright test --ui'
+end
+
+namespace :dummy do
+  desc 'Setup the dummy application'
+  task :setup do
+    Dir.chdir('test/dummy') do
+      sh 'bin/setup'
+    end
+  end
+
+  desc 'Run the dummy application on port 3000'
+  task run: :setup do
+    Dir.chdir('test/dummy') do
+      Open3.popen2e({'PORT' => '3000'}, 'foreman start -f Procfile.dev') do |_, output|
+        output.each_line { puts _1 }
+      end
+    end
+  end
+end

package.json

@@ -8,7 +8,9 @@
     "lib": "src/lib"
   },
   "scripts": {
-    "test": "npx playwright test"
+    "dev": "rake dummy:run",
+    "test": "rake test",
+    "test:ui": "rake test_ui"
   },
   "repository": {
     "type": "git",

test/dummy/Gemfile

@@ -41,6 +41,8 @@ group :development do
   # Use console on exceptions pages [https://github.com/rails/web-console]
   gem "web-console"
 
+  gem 'foreman'
+
   gem 'rolemodel_rails', github: 'RoleModel/rolemodel_rails'
 end
 

test/dummy/Gemfile.lock

@@ -98,6 +98,7 @@ GEM
       reline (>= 0.3.8)
     drb (2.2.1)
     erubi (1.12.0)
+    foreman (0.87.2)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.4)
@@ -242,6 +243,7 @@ DEPENDENCIES
   bootsnap
   cssbundling-rails
   debug
+  foreman
   jsbundling-rails
   puma (>= 5.0)
   rails (~> 7.1.3, >= 7.1.3.2)

test/dummy/bin/setup

@@ -18,7 +18,7 @@ FileUtils.chdir APP_ROOT do
   system("bundle check") || system!("bundle install")
 
   # Install JavaScript dependencies
-  system("yarn check --check-files") || system!("yarn install")
+  system!("yarn install --check-files")
 
   # puts "\n== Copying sample files =="
   # unless File.exist?("config/database.yml")

test/dummy/config/routes.rb

@@ -8,4 +8,6 @@
     get :dialog, on: :collection # dialog element based confirm
     get :custom, on: :collection # custom confirm
   end
+
+  root to: 'todos#index'
 end

test/dummy/package.json

@@ -5,7 +5,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.4",
     "@rolemodel/optics": "^1.0.0",
-    "@rolemodel/turbo-confirm": "file:./../../",
+    "@rolemodel/turbo-confirm": "link:./../../",
     "sass": "^1.72.0"
   },
   "scripts": {

test/dummy/yarn.lock

@@ -584,8 +584,9 @@
   dependencies:
     modern-css-reset "^1.4.0"
 
-"@rolemodel/turbo-confirm@file:../..":
-  version "2.0.0"
+"@rolemodel/turbo-confirm@link:../..":
+  version "0.0.0"
+  uid ""
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"

test/system/turbo.spec.js

@@ -21,6 +21,7 @@ test('Turbo Confirmation Integration', async ({ page }) => {
   const dialog = page.getByTestId('confirm')
   const todoDialog = page.getByTestId('confirm-todo')
   const defaultContent = await dialog.textContent() || ''
+  const todosCount = await page.locator('.todo-card').count()
 
   await expect(header).toContainText('Todos')
 
@@ -34,7 +35,6 @@ test('Turbo Confirmation Integration', async ({ page }) => {
   await expect(dialog).toBeHidden()
   await expect(dialog).toContainText(defaultContent)
   await expect(header).toContainText('Confirm Rejected')
-  expect(await page.locator('.todo-card').count()).toBe(todos.length)
 
   await page.getByTestId(`todo_${todos[0]['id']}`).getByRole('button', {name: 'delete'}).click()
 
@@ -48,7 +48,7 @@ test('Turbo Confirmation Integration', async ({ page }) => {
 
   await expect(dialog).toBeHidden()
   await expect(dialog).toContainText(defaultContent)
-  expect(await page.locator('.todo-card').count()).toBe(todos.length - 1)
+  expect(await page.locator('.todo-card').count()).toBe(todosCount - 1)
 
   // navigate to first remaining todo's show page
   await page.getByRole('link', {name: todos[1]['title']}).click()
@@ -84,5 +84,5 @@ test('Turbo Confirmation Integration', async ({ page }) => {
 
   // back on the index page
   await expect(header).toContainText('Todos')
-  expect(await page.locator('.todo-card').count()).toBe(todos.length - 2)
+  expect(await page.locator('.todo-card').count()).toBe(todosCount - 2)
 });