test: installing cypress and setting up basic ci check

.github/workflows/cypress.yml

@@ -0,0 +1,34 @@
+name: e2e Tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node-version: [16]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install Angular
+        run: npm install -g @angular/cli
+      - name: Install Dependencies
+        run: yarn install
+      - name: Build ngx-turnstile
+        run: ng build ngx-turnstile
+      - name: Run Cypress for environment
+        uses: cypress-io/github-action@v2
+        with:
+          start: |
+            ng serve ngx-turnstile-demo
+          wait-on: "http://localhost:4200"
+          wait-on-timeout: 300
+          browser: chrome
+          config-file: cypress.config.ts

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.tokenColorCustomizations": {
+    "comments": "",
+    "textMateRules": []
+  }
+}

cypress.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+    },
+    specPattern: '**/*.cy.ts',
+  },
+  env: {
+    baseUrl: 'http://localhost:4200',
+    reactiveFormUrl: 'http://localhost:4200/reactive-form-example',
+    templateDrivenFormUrl: 'http://localhost:4200/template-driven-form-example',
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/ngx-turnstile.cy.ts

@@ -0,0 +1,15 @@
+describe('tests the ngx-turnstile library', () => {
+  // visits the Reactive Form Example route and makes sure the Successful DUMMY TOKEN is generated
+  it('Passes Reactive Form Example', () => {
+    cy.visit(Cypress.env('reactiveFormUrl'));
+    cy.wait(3000);
+    cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
+  });
+
+  // visits the Template Driven Form Example route and makes sure the Successful DUMMY TOKEN is generated
+  it('Passes Template Driven Form Example', () => {
+    cy.visit(Cypress.env('templateDrivenFormUrl'));
+    cy.wait(3000);
+    cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1 @@
+/// <reference types="cypress" />

cypress/support/e2e.ts

@@ -0,0 +1,2 @@
+// Import commands.js using ES2015 syntax:
+import './commands';

package.json

@@ -35,6 +35,7 @@
     "@types/jasmine": "~4.3.2",
     "@typescript-eslint/eslint-plugin": "5.59.8",
     "@typescript-eslint/parser": "5.59.8",
+    "cypress": "^12.17.4",
     "eslint": "^8.23.1",
     "jasmine-core": "~5.0.0",
     "karma": "~6.4.0",