fix(grep): update cypress-grep references & docs & add e2e tests

.circleci/workflows.yml

@@ -1876,11 +1876,14 @@ jobs:
       - restore_cached_workspace
       - run:
           name: Run tests
-          command: yarn workspace @cypress/grep cy:run
+          command: yarn workspace @cypress/grep test
       - store_test_results:
           path: npm/grep/test_results
       - store_artifacts:
           path: npm/grep/test_results
+      - run:
+          name: Run e2e tests
+          command: yarn workspace @cypress/grep cy:run
       - store-npm-logs
 
   npm-create-cypress-tests:

npm/grep/README.md

@@ -19,7 +19,7 @@ All other tests will be marked pending, see why in the [Cypress test statuses](h
 
 If you have multiple spec files, all specs will be loaded, and every test will be filtered the same way, since the grep is run-time operation and cannot eliminate the spec files without loading them. If you want to run only specific tests, use the built-in [--spec](https://on.cypress.io/command-line#cypress-run-spec-lt-spec-gt) CLI argument.
 
-Watch the video [intro to cypress-grep plugin](https://www.youtube.com/watch?v=HS-Px-Sghd8)
+Watch the video [intro to @cypress/grep plugin](https://www.youtube.com/watch?v=HS-Px-Sghd8)
 
 Table of Contents
 
@@ -417,7 +417,7 @@ This package comes with [src/index.d.ts](./src/index.d.ts) definition file that
 
 ```js
 // cypress/integration/my-spec.js
-/// <reference types="cypress-grep" />
+/// <reference types="@cypress/grep" />
 ```
 
 If you have `tsconfig.json` file, add this library to the types list
@@ -427,7 +427,7 @@ If you have `tsconfig.json` file, add this library to the types list
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "cypress-grep"]
+    "types": ["cypress", "@cypress/grep"]
   },
   "include": ["**/*.ts"]
 }
@@ -489,18 +489,18 @@ Cypress.grep('hello', '@smoke', 10)
 
 ## Debugging
 
-When debugging a problem, first make sure you are using the expected version of this plugin, as some features might be only available in the [later releases](https://github.com/cypress-io/cypress-grep/releases).
+When debugging a problem, first make sure you are using the expected version of this plugin, as some features might be only available in the [later releases](https://www.npmjs.com/package/@cypress/grep?activeTab=versions).
 
 ```
-# get the cypress-grep version using NPM
-$ npm ls cypress-grep
+# get the @cypress/grep version using NPM
+$ npm ls @cypress/grep
 ...
-└── cypress-[email protected]
-# get the cypress-grep version using Yarn
-$ yarn why cypress-grep
+└── @cypress/[email protected]
+# get the @cypress/grep version using Yarn
+$ yarn why @cypress/grep
 ...
-=> Found "cypress-grep@2.10.1"
-info Has been hoisted to "cypress-grep"
+=> Found "@cypress/grep@3.1.0"
+info Has been hoisted to "@cypress/grep"
 info This module exists because it's specified in "devDependencies".
 ...
 ```
@@ -521,30 +521,30 @@ This module uses [debug](https://github.com/visionmedia/debug#readme) to log ver
 
 ### Debugging in the plugin
 
-Start Cypress with the environment variable `DEBUG=cypress-grep`. You will see a few messages from this plugin in the terminal output:
+Start Cypress with the environment variable `DEBUG=@cypress/grep`. You will see a few messages from this plugin in the terminal output:
 
 ```
-$ DEBUG=cypress-grep npx cypress run --env grep=works,grepFilterSpecs=true
-cypress-grep: tests with "works" in their names
-cypress-grep: filtering specs using "works" in the title
-  cypress-grep Cypress config env object: { grep: 'works', grepFilterSpecs: true }
+$ DEBUG=@cypress/grep npx cypress run --env grep=works,grepFilterSpecs=true
+@cypress/grep: tests with "works" in their names
+@cypress/grep: filtering specs using "works" in the title
+@cypress/grep Cypress config env object: { grep: 'works', grepFilterSpecs: true }
   ...
-  cypress-grep found 1 spec files +5ms
-  cypress-grep [ 'spec.js' ] +0ms
-  cypress-grep spec file spec.js +5ms
-  cypress-grep suite and test names: [ 'hello world', 'works', 'works 2 @tag1',
+  @cypress/grep found 1 spec files +5ms
+  @cypress/grep [ 'spec.js' ] +0ms
+  @cypress/grep spec file spec.js +5ms
+  @cypress/grep suite and test names: [ 'hello world', 'works', 'works 2 @tag1',
     'works 2 @tag1 @tag2', 'works @tag2' ] +0ms
-  cypress-grep found "works" in 1 specs +0ms
-  cypress-grep [ 'spec.js' ] +0ms
+  @cypress/grep found "works" in 1 specs +0ms
+  @cypress/grep [ 'spec.js' ] +0ms
 ```
 
 ### Debugging in the browser
 
-To enable debug console messages in the browser, from the DevTools console set `localStorage.debug='cypress-grep'` and run the tests again.
+To enable debug console messages in the browser, from the DevTools console set `localStorage.debug='@cypress/grep'` and run the tests again.
 
 ![Debug messages](./images/debug.png)
 
-To see how to debug this plugin, watch the video [Debug cypress-grep Plugin](https://youtu.be/4YMAERddHYA).
+To see how to debug this plugin, watch the video [Debug @cypress/grep Plugin](https://youtu.be/4YMAERddHYA).
 
 ## Examples
 
@@ -585,7 +585,7 @@ The above scenario was confusing - did you want to find all tests with title con
 
 ### from v2 to v3
 
-Version >= 3 of cypress-grep _only_ supports Cypress >= 10.
+Version >= 3 of @cypress/grep _only_ supports Cypress >= 10.
 
 ## Small Print
 

npm/grep/cypress/e2e/completed-spec.js

@@ -0,0 +1,98 @@
+// type definitions for Cypress and
+// custom commands like "createDefaultTodos"
+/// <reference types="../support" />
+
+// check this file using TypeScript if available
+// @ts-check
+
+describe('TodoMVC - React', function () {
+  beforeEach(function () {
+    // By default Cypress will automatically
+    // clear the Local Storage prior to each
+    // test which ensures no todos carry over
+    // between tests.
+    //
+    // Go out and visit our local web server
+    // before each test, which serves us the
+    // TodoMVC App we want to test against
+    //
+    // We've set our baseUrl to be http://localhost:8888
+    // which is automatically prepended to cy.visit
+    //
+    // https://on.cypress.io/api/visit
+    cy.visit('/')
+  })
+
+  afterEach(() => {
+    // In firefox, blur handlers will fire upon navigation if there is an activeElement.
+    // Since todos are updated on blur after editing,
+    // this is needed to blur activeElement after each test to prevent state leakage between tests.
+    cy.window().then((win) => {
+      // @ts-ignore
+      win.document.activeElement.blur()
+    })
+  })
+
+  context('Mark all as completed', function () {
+    // New commands used here:
+    // - cy.check    https://on.cypress.io/api/check
+    // - cy.uncheck  https://on.cypress.io/api/uncheck
+
+    beforeEach(function () {
+      // This is an example of aliasing
+      // within a hook (beforeEach).
+      // Aliases will automatically persist
+      // between hooks and are available
+      // in your tests below
+      cy.createDefaultTodos().as('todos')
+    })
+
+    it('should allow me to mark all items as completed', function () {
+      // complete all todos
+      // we use 'check' instead of 'click'
+      // because that indicates our intention much clearer
+      cy.get('.toggle-all').check()
+
+      // get each todo li and ensure its class is 'completed'
+      cy.get('@todos').eq(0).should('have.class', 'completed')
+
+      cy.get('@todos').eq(1).should('have.class', 'completed')
+
+      cy.get('@todos').eq(2).should('have.class', 'completed')
+    })
+
+    it('should allow me to clear the complete state of all items', function () {
+      // check and then immediately uncheck
+      cy.get('.toggle-all').check().uncheck()
+
+      cy.get('@todos').eq(0).should('not.have.class', 'completed')
+
+      cy.get('@todos').eq(1).should('not.have.class', 'completed')
+
+      cy.get('@todos').eq(2).should('not.have.class', 'completed')
+    })
+
+    it('complete all checkbox should update state when items are completed / cleared', function () {
+      // alias the .toggle-all for reuse later
+      cy.get('.toggle-all')
+      .as('toggleAll')
+      .check()
+      // this assertion is silly here IMO but
+      // it is what TodoMVC does
+      .should('be.checked')
+
+      // alias the first todo and then click it
+      cy.get('.todo-list li').eq(0).as('firstTodo').find('.toggle').uncheck()
+
+      // reference the .toggle-all element again
+      // and make sure its not checked
+      cy.get('@toggleAll').should('not.be.checked')
+
+      // reference the first todo again and now toggle it
+      cy.get('@firstTodo').find('.toggle').check()
+
+      // assert the toggle all is checked again
+      cy.get('@toggleAll').should('be.checked')
+    })
+  })
+})

npm/grep/cypress/e2e/counter-spec.js

@@ -0,0 +1,52 @@
+// type definitions for Cypress and
+// custom commands like "createDefaultTodos"
+/// <reference types="../support" />
+
+// check this file using TypeScript if available
+// @ts-check
+
+import { TODO_ITEM_ONE, TODO_ITEM_TWO } from './utils'
+
+describe('TodoMVC - React', function () {
+  beforeEach(function () {
+    // By default Cypress will automatically
+    // clear the Local Storage prior to each
+    // test which ensures no todos carry over
+    // between tests.
+    //
+    // Go out and visit our local web server
+    // before each test, which serves us the
+    // TodoMVC App we want to test against
+    //
+    // We've set our baseUrl to be http://localhost:8888
+    // which is automatically prepended to cy.visit
+    //
+    // https://on.cypress.io/api/visit
+    cy.visit('/')
+  })
+
+  afterEach(() => {
+    // In firefox, blur handlers will fire upon navigation if there is an activeElement.
+    // Since todos are updated on blur after editing,
+    // this is needed to blur activeElement after each test to prevent state leakage between tests.
+    cy.window().then((win) => {
+      // @ts-ignore
+      win.document.activeElement.blur()
+    })
+  })
+
+  context('Counter', function () {
+    it('should not exist without items', function () {
+      cy.get('.todo-count').should('not.exist')
+      cy.createTodo(TODO_ITEM_ONE)
+      cy.get('.todo-count').should('be.visible')
+    })
+
+    it('should display the current number of todo items', function () {
+      cy.createTodo(TODO_ITEM_ONE)
+      cy.get('.todo-count').contains('1 item left')
+      cy.createTodo(TODO_ITEM_TWO)
+      cy.get('.todo-count').contains('2 items left')
+    })
+  })
+})

npm/grep/cypress/e2e/dynamic/test1.spec.js

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+const parameterized = 'parameterized'
+
+describe('should run these tests', () => {
+  it(`${parameterized} title`, { tags: '@smoke' }, () => {})
+
+  it(`split title`, { tags: '@smoke' }, () => {})
+})

npm/grep/cypress/e2e/dynamic/test2.spec.js

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+const parameterized = 'parameterized'
+
+describe('should filter out this spec', () => {
+  it(`${parameterized} title`, { tags: '@sanity' }, () => {})
+
+  it(`split title`, { tags: '@sanity' }, () => {})
+})

npm/grep/cypress/e2e/each-spec.js

@@ -4,7 +4,7 @@
 import 'cypress-each'
 
 describe('tests that use .each work', () => {
-  // creating tests dynamically works with "cypress-grep"
+  // creating tests dynamically works with "@cypress/grep"
   it.each([1, 2, 3])('test for %d', (x) => {
     expect(x).to.be.oneOf([1, 2, 3])
   })

npm/grep/cypress/e2e/explicit-spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+it('tag1', { tags: '@tag1' }, () => {})
+
+it('tag2', { tags: '@tag2' }, () => {})
+
+it('tag3', { tags: '@tag3' }, () => {})
+
+it('tag1 and 2', { tags: ['@tag1', '@tag2'] }, () => {})
+
+it('tag1 and 3', { tags: ['@tag1', '@tag3'] }, () => {})
+
+it('tag2 and 3', { tags: ['@tag2', '@tag3'] }, () => {})
+
+it('all tags', { tags: ['@tag1', '@tag2', '@tag3'] }, () => {})

npm/grep/cypress/e2e/multiple-registrations.js

@@ -3,8 +3,8 @@
 // register the plugin multiple times
 // to simulate including from support and spec files
 // https://github.com/cypress-io/cypress-grep/issues/59
-require('../../src/support')()
-require('../../src/support')()
-require('../../src/support')()
+require('@cypress/grep/src/support')()
+require('@cypress/grep/src/support')()
+require('@cypress/grep/src/support')()
 
 it('hello world', () => {})

npm/grep/cypress/e2e/omit-and-skip-spec.js

@@ -1,8 +1,10 @@
 /// <reference path="../../src/index.d.ts" />
 
 // @ts-check
+
 describe('Page', () => {
   describe('List', { tags: ['@us1'] }, () => {
+    // NOTE: Skipped to test these
     it.skip('first test', () => {})
     it('second test', () => {})
     it('third test', () => {})

npm/grep/cypress/e2e/tags/README.md

@@ -0,0 +1,3 @@
+# Testing tags
+
+Test case for [#92](https://github.com/cypress-io/cypress-grep/issues/92)