cypress-on-rails 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aae2ee8af5bc58f866014195d209fe1c79f38782abd34d9754fab0dd1e0d6339
-  data.tar.gz: 9b996dccb18d1ee0aa677d6f2cdd3956077ac5f769b41bcccc262c197fefbf4b
+  metadata.gz: a0b54d8af351f5f44e1da67e4c75540a40f529b03434ed24a50e8e145e456084
+  data.tar.gz: 599595f9a60941b3b23696d1867fb4c687eaa24b656392df4c98650ba6786558
 SHA512:
-  metadata.gz: c846da7db38f8b685aa9777851b16b03425410b10e6699d7ac995ce9a2840cc43659774d41550266752e80d3b49ed90bf44c3fe0bcaa35ce45e369bca26d50e6
-  data.tar.gz: b33a157691f8cb4629d9f853aa26d3dfec134ae3aefa598f44d5100be3d376340563778753c0a62e193a70990f17140fb622ee561100677d0aca39419802956e
+  metadata.gz: 05ebe6824bea9027f18f5e02425aa7f15979e6e8e36af99a3dd3112df3715d7a5d456ecd85b9a307486c873b9af5029bc7f1b6a0f75ae544670c18efe13182ae
+  data.tar.gz: d831d9abb63c8b89fad1eb5367c4ad95489f6dfc83c739da0e8508ede8a13723ef0204ad5dba80b9625f47f2d96306ec1d484f13acd77015c9a1eb3671013a34

data/.travis.yml

@@ -2,12 +2,12 @@ language: ruby
 rvm:
   - 2.2
 
-addons:
-  artifacts:
-    s3_region: "ap-southeast-2"
-    paths:
-      - $(ls spec/integrations/*/*/cypress/{screenshots,videos}/* | tr "\n" ":")
-      - $(ls spec/integrations/rails_3_2/cypress/{screenshots,videos}/* | tr "\n" ":")
+#addons:
+#  artifacts:
+#    s3_region: "ap-southeast-2"
+#    paths:
+#      - $(ls spec/integrations/*/*/cypress/{screenshots,videos}/* | tr "\n" ":")
+#      - $(ls spec/integrations/rails_3_2/cypress/{screenshots,videos}/* | tr "\n" ":")
 
 cache:
   directories:

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+### Tasks
+* add cypress examples to install generator
+* add active record integration specs
+
 ## 1.0.1
 ### Fixed
 * install generator adding on-rails.js to import.js

data/README.md

@@ -12,6 +12,12 @@ Do things like:
 * use factory_bot to setup data
 * create scenario files used for specific tests
 
+Has examples of setting up state with:
+* factory_bot
+* rails test fixtures
+* scenarios
+* custom commands
+
 This gem is based off https://github.com/konvenit/cypress-on-rails
 
 ## Getting started
@@ -64,46 +70,49 @@ cd spec
 yarn run cypress open
 ```
 
-### Example of using scenarios
-
-Scenarios are named `before` blocks that you can reference in your test.
+### Example of using factory bot
+You can run your [factory_bot](https://github.com/thoughtbot/factory_bot) directly as well
 
-You define a scenario in the `spec/cypress/app_commands/scenarios` directory:
 ```ruby
 # spec/cypress/app_commands/scenarios/basic.rb
-Profile.create name: "Cypress Hill"
+require 'cypress_dev/smart_factory_wrapper'
 
-# or if you have factory_bot enabled in your cypress_helper
-CypressDev::SmartFactoryWrapper.create(:profile, name: "Cypress Hill") 
+CypressDev::SmartFactoryWrapper.configure(
+    always_reload: !Rails.configuration.cache_classes,
+    factory: FactoryBot,
+    files: Dir['./spec/factories/**/*.rb']
+) 
 ```
 
-Then reference the scenario in your test:
 ```js
-// spec/cypress/integrations/scenario_example_spec.js
+// spec/cypress/integrations/simple_spec.js
 describe('My First Test', function() {
   it('visit root', function() {
     // This calls to the backend to prepare the application state
-    cy.appScenario('basic')
+    cy.appFactories([
+      ['create_list', 'post', 10],
+      ['create', 'post', {title: 'Hello World'} ]
+    ])
 
-    cy.visit('/profiles')
+    // Visit the application under test
+    cy.visit('/')
 
-    cy.contains("Cypress Hill")
+    cy.contains("Hello World")
   })
 })
 ```
 
-### Example of using factory bot
-You can run your [factory_bot](https://github.com/thoughtbot/factory_bot) directly as well
-
+### Example of loading rails test fixtures
 ```ruby
-# spec/cypress/app_commands/scenarios/basic.rb
-require 'cypress_dev/smart_factory_wrapper'
+# spec/cypress/app_commands/activerecord_fixtures.rb
+require "active_record/fixtures"
 
-CypressDev::SmartFactoryWrapper.configure(
-    always_reload: !Rails.configuration.cache_classes,
-    factory: FactoryBot,
-    files: Dir['./spec/factories/**/*.rb']
-) 
+fixtures_dir = ActiveRecord::Tasks::DatabaseTasks.fixtures_path
+fixture_files = Dir["#{fixtures_dir}/**/*.yml"].map { |f| f[(fixtures_dir.size + 1)..-5] }
+
+logger.debug "loading fixtures: { dir: #{fixtures_dir}, files: #{fixture_files} }"
+ActiveRecord::FixtureSet.reset_cache
+ActiveRecord::FixtureSet.create_fixtures(fixtures_dir, fixture_files)
 ```
 
 ```js
@@ -111,12 +120,9 @@ CypressDev::SmartFactoryWrapper.configure(
 describe('My First Test', function() {
   it('visit root', function() {
     // This calls to the backend to prepare the application state
-    cy.appFactories([
-      ['create_list', 'post', 10],
-      ['create', 'post', {title: 'Hello World'} ]
-    ])
+    cy.appFixtures()
 
-    // The application unter test is available at SERVER_PORT
+    // Visit the application under test
     cy.visit('/')
 
     cy.contains("Hello World")
@@ -124,6 +130,34 @@ describe('My First Test', function() {
 })
 ```
 
+### Example of using scenarios
+
+Scenarios are named `before` blocks that you can reference in your test.
+
+You define a scenario in the `spec/cypress/app_commands/scenarios` directory:
+```ruby
+# spec/cypress/app_commands/scenarios/basic.rb
+Profile.create name: "Cypress Hill"
+
+# or if you have factory_bot enabled in your cypress_helper
+CypressDev::SmartFactoryWrapper.create(:profile, name: "Cypress Hill") 
+```
+
+Then reference the scenario in your test:
+```js
+// spec/cypress/integrations/scenario_example_spec.js
+describe('My First Test', function() {
+  it('visit root', function() {
+    // This calls to the backend to prepare the application state
+    cy.appScenario('basic')
+
+    cy.visit('/profiles')
+
+    cy.contains("Cypress Hill")
+  })
+})
+```
+
 ### Example of using app commands
 
 create a ruby file in `spec/cypress/app_commands` directory:

data/lib/cypress_dev/version.rb

@@ -1,3 +1,3 @@
 module CypressDev
-  VERSION = '1.0.1'
+  VERSION = '1.1.0'
 end

data/lib/generators/cypress_dev/install_generator.rb

@@ -2,6 +2,7 @@ module CypressDev
   class InstallGenerator < Rails::Generators::Base
     class_option :cypress_folder, type: :string, default: 'spec/cypress'
     class_option :install_cypress_with, type: :string, default: 'yarn'
+    class_option :install_cypress_examples, type: :boolean, default: true
     source_root File.expand_path('../templates', __FILE__)
 
     def install_cypress
@@ -19,6 +20,10 @@ module CypressDev
           say command
           fail 'failed to install cypress' unless system(command)
         end
+        if options.install_cypress_examples
+          directory 'spec/cypress/integration/examples', "#{options.cypress_folder}/integration/examples"
+          directory 'spec/cypress/fixtures', "#{options.cypress_folder}/fixtures"
+        end
         copy_file "spec/cypress/support/index.js", "#{options.cypress_folder}/support/index.js"
         copy_file "spec/cypress/support/commands.js", "#{options.cypress_folder}/support/commands.js"
         copy_file "spec/cypress.json", "#{options.cypress_folder}/../cypress.json"
@@ -28,12 +33,9 @@ module CypressDev
     def add_initial_files
       template "config/initializers/cypress_dev.rb.erb", "config/initializers/cypress_dev.rb"
       copy_file "spec/cypress/cypress_helper.rb", "#{options.cypress_folder}/cypress_helper.rb"
-      copy_file "spec/cypress/integration/on_rails_spec.js", "#{options.cypress_folder}/integration/on_rails_spec.js"
       copy_file "spec/cypress/support/on-rails.js", "#{options.cypress_folder}/support/on-rails.js"
-      copy_file "spec/cypress/app_commands/scenarios/basic.rb", "#{options.cypress_folder}/app_commands/scenarios/basic.rb"
-      copy_file "spec/cypress/app_commands/clean.rb", "#{options.cypress_folder}/app_commands/clean.rb"
-      copy_file "spec/cypress/app_commands/eval.rb", "#{options.cypress_folder}/app_commands/eval.rb"
-      copy_file "spec/cypress/app_commands/factory_bot.rb", "#{options.cypress_folder}/app_commands/factory_bot.rb"
+      directory 'spec/cypress/app_commands', "#{options.cypress_folder}/app_commands"
+      directory 'spec/cypress/integration/rails_examples', "#{options.cypress_folder}/integration/rails_examples"
     end
 
     def update_files

data/lib/generators/cypress_dev/templates/spec/cypress/app_commands/activerecord_fixtures.rb

@@ -0,0 +1,21 @@
+# you can delete this file if you don't use Rails Test Fixtures
+
+fixtures_dir = command_options.try(:[], 'fixtures_dir')
+fixture_files = command_options.try(:[], 'fixtures')
+
+if defined?(ActiveRecord)
+  require "active_record/fixtures"
+
+  fixtures_dir ||= ActiveRecord::Tasks::DatabaseTasks.fixtures_path
+  fixture_files ||= Dir["#{fixtures_dir}/**/*.yml"].map { |f| f[(fixtures_dir.size + 1)..-5] }
+
+  logger.debug "loading fixtures: { dir: #{fixtures_dir}, files: #{fixture_files} }"
+  ActiveRecord::FixtureSet.reset_cache
+  ActiveRecord::FixtureSet.create_fixtures(fixtures_dir, fixture_files)
+else # this else part can be removed
+  logger.error "Looks like activerecord_fixtures has to be modified to suite your need"
+  Post.create(title: 'MyCypressFixtures')
+  Post.create(title: 'MyCypressFixtures2')
+  Post.create(title: 'MyRailsFixtures')
+  Post.create(title: 'MyRailsFixtures2')
+end

data/lib/generators/cypress_dev/templates/spec/cypress/app_commands/clean.rb

@@ -4,4 +4,5 @@ if defined?(DatabaseCleaner)
   DatabaseCleaner.clean
 else
   logger.warn "add database_cleaner or update clean_db"
+  Post.delete_all if defined?(Post)
 end

data/lib/generators/cypress_dev/templates/spec/cypress/app_commands/scenarios/basic.rb

@@ -1,2 +1,3 @@
 # You can setup your Rails state here
-# MyModel.create name: 'something'
+# MyModel.create name: 'something'
+Post.create(title: 'I am a Postman')

data/lib/generators/cypress_dev/templates/spec/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

data/lib/generators/cypress_dev/templates/spec/cypress/integration/examples/actions.spec.js

@@ -0,0 +1,272 @@
+/// <reference types="Cypress" />
+
+context('Actions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/actions')
+  })
+
+  // https://on.cypress.io/interacting-with-elements
+
+  it('.type() - type into a DOM element', () => {
+    // https://on.cypress.io/type
+    cy.get('.action-email')
+      .type('fake@email.com').should('have.value', 'fake@email.com')
+
+      // .type() with special character sequences
+      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+      .type('{del}{selectall}{backspace}')
+
+      // .type() with key modifiers
+      .type('{alt}{option}') //these are equivalent
+      .type('{ctrl}{control}') //these are equivalent
+      .type('{meta}{command}{cmd}') //these are equivalent
+      .type('{shift}')
+
+      // Delay each keypress by 0.1 sec
+      .type('slow.typing@email.com', { delay: 100 })
+      .should('have.value', 'slow.typing@email.com')
+
+    cy.get('.action-disabled')
+      // Ignore error checking prior to type
+      // like whether the input is visible or disabled
+      .type('disabled error checking', { force: true })
+      .should('have.value', 'disabled error checking')
+  })
+
+  it('.focus() - focus on a DOM element', () => {
+    // https://on.cypress.io/focus
+    cy.get('.action-focus').focus()
+      .should('have.class', 'focus')
+      .prev().should('have.attr', 'style', 'color: orange;')
+  })
+
+  it('.blur() - blur off a DOM element', () => {
+    // https://on.cypress.io/blur
+    cy.get('.action-blur').type('About to blur').blur()
+      .should('have.class', 'error')
+      .prev().should('have.attr', 'style', 'color: red;')
+  })
+
+  it('.clear() - clears an input or textarea element', () => {
+    // https://on.cypress.io/clear
+    cy.get('.action-clear').type('Clear this text')
+      .should('have.value', 'Clear this text')
+      .clear()
+      .should('have.value', '')
+  })
+
+  it('.submit() - submit a form', () => {
+    // https://on.cypress.io/submit
+    cy.get('.action-form')
+      .find('[type="text"]').type('HALFOFF')
+    cy.get('.action-form').submit()
+      .next().should('contain', 'Your form has been submitted!')
+  })
+
+  it('.click() - click on a DOM element', () => {
+    // https://on.cypress.io/click
+    cy.get('.action-btn').click()
+
+    // You can click on 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // clicking in the center of the element is the default
+    cy.get('#action-canvas').click()
+
+    cy.get('#action-canvas').click('topLeft')
+    cy.get('#action-canvas').click('top')
+    cy.get('#action-canvas').click('topRight')
+    cy.get('#action-canvas').click('left')
+    cy.get('#action-canvas').click('right')
+    cy.get('#action-canvas').click('bottomLeft')
+    cy.get('#action-canvas').click('bottom')
+    cy.get('#action-canvas').click('bottomRight')
+
+    // .click() accepts an x and y coordinate
+    // that controls where the click occurs :)
+
+    cy.get('#action-canvas')
+      .click(80, 75) // click 80px on x coord and 75px on y coord
+      .click(170, 75)
+      .click(80, 165)
+      .click(100, 185)
+      .click(125, 190)
+      .click(150, 185)
+      .click(170, 165)
+
+    // click multiple elements by passing multiple: true
+    cy.get('.action-labels>.label').click({ multiple: true })
+
+    // Ignore error checking prior to clicking
+    cy.get('.action-opacity>.btn').click({ force: true })
+  })
+
+  it('.dblclick() - double click on a DOM element', () => {
+    // https://on.cypress.io/dblclick
+
+    // Our app has a listener on 'dblclick' event in our 'scripts.js'
+    // that hides the div and shows an input on double click
+    cy.get('.action-div').dblclick().should('not.be.visible')
+    cy.get('.action-input-hidden').should('be.visible')
+  })
+
+  it('.check() - check a checkbox or radio element', () => {
+    // https://on.cypress.io/check
+
+    // By default, .check() will check all
+    // matching checkbox or radio elements in succession, one after another
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
+      .check().should('be.checked')
+
+    cy.get('.action-radios [type="radio"]').not('[disabled]')
+      .check().should('be.checked')
+
+    // .check() accepts a value argument
+    cy.get('.action-radios [type="radio"]')
+      .check('radio1').should('be.checked')
+
+    // .check() accepts an array of values
+    cy.get('.action-multiple-checkboxes [type="checkbox"]')
+      .check(['checkbox1', 'checkbox2']).should('be.checked')
+
+    // Ignore error checking prior to checking
+    cy.get('.action-checkboxes [disabled]')
+      .check({ force: true }).should('be.checked')
+
+    cy.get('.action-radios [type="radio"]')
+      .check('radio3', { force: true }).should('be.checked')
+  })
+
+  it('.uncheck() - uncheck a checkbox element', () => {
+    // https://on.cypress.io/uncheck
+
+    // By default, .uncheck() will uncheck all matching
+    // checkbox elements in succession, one after another
+    cy.get('.action-check [type="checkbox"]')
+      .not('[disabled]')
+      .uncheck().should('not.be.checked')
+
+    // .uncheck() accepts a value argument
+    cy.get('.action-check [type="checkbox"]')
+      .check('checkbox1')
+      .uncheck('checkbox1').should('not.be.checked')
+
+    // .uncheck() accepts an array of values
+    cy.get('.action-check [type="checkbox"]')
+      .check(['checkbox1', 'checkbox3'])
+      .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+
+    // Ignore error checking prior to unchecking
+    cy.get('.action-check [disabled]')
+      .uncheck({ force: true }).should('not.be.checked')
+  })
+
+  it('.select() - select an option in a <select> element', () => {
+    // https://on.cypress.io/select
+
+    // Select option(s) with matching text content
+    cy.get('.action-select').select('apples')
+
+    cy.get('.action-select-multiple')
+    .select(['apples', 'oranges', 'bananas'])
+
+    // Select option(s) with matching value
+    cy.get('.action-select').select('fr-bananas')
+
+    cy.get('.action-select-multiple')
+      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+  })
+
+  it('.scrollIntoView() - scroll an element into view', () => {
+    // https://on.cypress.io/scrollintoview
+
+    // normally all of these buttons are hidden,
+    // because they're not within
+    // the viewable area of their parent
+    // (we need to scroll to see them)
+    cy.get('#scroll-horizontal button')
+      .should('not.be.visible')
+
+    // scroll the button into view, as if the user had scrolled
+    cy.get('#scroll-horizontal button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-vertical button')
+      .should('not.be.visible')
+
+    // Cypress handles the scroll direction needed
+    cy.get('#scroll-vertical button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-both button')
+      .should('not.be.visible')
+
+    // Cypress knows to scroll to the right and down
+    cy.get('#scroll-both button').scrollIntoView()
+      .should('be.visible')
+  })
+
+  it('cy.scrollTo() - scroll the window or element to a position', () => {
+
+    // https://on.cypress.io/scrollTo
+
+    // You can scroll to 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo('bottom')
+
+    cy.get('#scrollable-horizontal').scrollTo('right')
+
+    // or you can scroll to a specific coordinate:
+    // (x axis, y axis) in pixels
+    cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+    // or you can scroll to a specific percentage
+    // of the (width, height) of the element
+    cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+    // control the easing of the scroll (default is 'swing')
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+    // control the duration of the scroll (in ms)
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+  })
+
+  it('.trigger() - trigger an event on a DOM element', () => {
+    // https://on.cypress.io/trigger
+
+    // To interact with a range input (slider)
+    // we need to set its value & trigger the
+    // event to signal it changed
+
+    // Here, we invoke jQuery's val() method to set
+    // the value and trigger the 'change' event
+    cy.get('.trigger-input-range')
+      .invoke('val', 25)
+      .trigger('change')
+      .get('input[type=range]').siblings('p')
+      .should('have.text', '25')
+  })
+})