ExpediaGroup · danadajian · Jun 27, 2022 · Jun 27, 2022 · Jun 27, 2022 · Jun 27, 2022
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -7,7 +7,7 @@ on:
 
 jobs:
   test:
-    name: Build and Test
+    name: Lint and Unit Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -26,6 +26,28 @@ jobs:
 
       - name: Unit Tests
         run: npm run test
+  component:
+    name: ${{ matrix.name }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: Component Integration
+            command: cypress:component
+          - name: E2E Integration
+            command: cypress:e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install
+        run: npm ci
 
       - name: Integration Tests
-        run: npm run cypress:run
+        run: npm run ${{ matrix.command }}
diff --git a/README.md b/README.md
@@ -24,21 +24,36 @@ npm i --save-dev cypress-codegen
 
 ## Usage
 
-1. Add to `cypress/plugins.ts`:
+Model your Cypress project exactly like [the one in this repository](cypress.config.ts)!
+
+1. Add the required plugin code to `cypress.config.ts` like so:
 
 ```ts
 import { cypressCodegen } from 'cypress-codegen/dist/plugin';
-
-const plugins: Cypress.PluginConfig = (on, config) => {
-    cypressCodegen(on, config);
-
-    return config;
-};
-
-export default plugins;
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        setupNodeEvents(on, config) {
+            cypressCodegen(on, config);
+            return config;
+        }
+    },
+
+    component: {
+        setupNodeEvents(on, config) {
+            cypressCodegen(on, config);
+            return config;
+        },
+        devServer: {
+            framework: 'create-react-app',
+            bundler: 'webpack'
+        }
+    }
+});
 ```
 
-2. Add to `cypress/support.ts`:
+2. Add to `cypress/support/component.ts` and/or `cypress/support/e2e.ts`:
 
 ```ts
 import 'cypress-codegen';

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,13 +1,22 @@
+import { cypressCodegen } from 'cypress-codegen/dist/plugin';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  retries: 1,
-  video: false,
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.ts').default(on, config);
+      cypressCodegen(on, config);
+      return config;
+    }
+  },
+
+  component: {
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'webpack'
+    },
+    setupNodeEvents(on, config) {
+      cypressCodegen(on, config);
+      return config;
     }
   }
 });
diff --git a/cypress/plugins/index.ts → cypress/component/component-example.cy.tsx b/cypress/plugins/index.ts → cypress/component/component-example.cy.tsx
@@ -11,12 +11,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { cypressCodegen } from 'cypress-codegen/dist/plugin';
+import * as React from 'react';
 
-const plugins: Cypress.PluginConfig = (on, config) => {
-  cypressCodegen(on, config);
+const componentText = 'Here is a component';
 
-  return config;
-};
+describe('Example Test', () => {
+    beforeEach(() => {
+        cy.mount(<p>{componentText}</p>);
+    });
 
-export default plugins;
+    it('should import custom commands in component tests', () => {
+        cy.functionExample(componentText);
+    });
+});
diff --git a/cypress/e2e/example.cy.ts → cypress/e2e/e2e-example.cy.ts b/cypress/e2e/example.cy.ts → cypress/e2e/e2e-example.cy.ts
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>Components App</title>
+    </head>
+    <body>
+        <div data-cy-root></div>
+    </body>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2022 Expedia, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    https://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import 'cypress-codegen';
+import { mount } from 'cypress/react';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);