test: add cypress test for language options

verto-health · Sep 12, 2024 · 3634906 · 3634906
1 parent a0510c4
commit 3634906
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 0 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
     baseUrl: 'http://0.0.0.0:4200',
     reactiveFormUrl: 'http://0.0.0.0:4200/reactive-form-example',
     templateDrivenFormUrl: 'http://0.0.0.0:4200/template-driven-form-example',
+    languageOptionUrl: 'http://0.0.0.0:4200/language-option-example',
   },
   e2e: {
     setupNodeEvents(on, config) {

diff --git a/cypress/e2e/ngx-turnstile.cy.ts b/cypress/e2e/ngx-turnstile.cy.ts
@@ -12,4 +12,18 @@ describe('tests the ngx-turnstile library', () => {
     cy.wait(3000);
     cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
   });
+
+  it('Passes Language Option Example', () => {
+    cy.visit(Cypress.env('languageOptionUrl'));
+    cy.wait(3000);
+    cy.get('ngx-turnstile').should('have.attr', 'ng-reflect-language', 'FR');
+
+    // checks the iframe src attribute to make sure the language option was sent to cloudflare correctly
+    cy.get('ngx-turnstile div')
+      .shadow()
+      .find('iframe')
+      .then(($iframe) => {
+        cy.wrap($iframe).should('have.attr', 'src').and('include', 'FR');
+      });
+  });
 });
diff --git a/projects/ngx-turnstile-demo/src/app/app.component.ts b/projects/ngx-turnstile-demo/src/app/app.component.ts
@@ -74,6 +74,12 @@ import { RouterModule } from '@angular/router';
           [routerLinkActive]="['route-active']"
           >Template Driven Form Example</a
         >
+
+        <a
+          routerLink="/language-option-example"
+          [routerLinkActive]="['route-active']"
+          >Language Option Example</a
+        >
       </div>
       <main class="form-signin">
         <form action="https://demo.turnstile.workers.dev/handler" method="POST">

diff --git a/projects/ngx-turnstile-demo/src/app/examples/language-option/language-option.component.ts b/projects/ngx-turnstile-demo/src/app/examples/language-option/language-option.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { NgxTurnstileModule } from 'ngx-turnstile';
+
+@Component({
+  selector: 'app-regular-example',
+  standalone: true,
+  template: `
+    <ng-container>
+      <ngx-turnstile
+        [siteKey]="siteKey"
+        theme="light"
+        [language]="language"
+      ></ngx-turnstile>
+    </ng-container>
+  `,
+  imports: [NgxTurnstileModule],
+})
+export class LanguageOptionComponent {
+  siteKey = '1x00000000000000000000AA';
+  language = 'FR';
+}
diff --git a/projects/ngx-turnstile-demo/src/app/routes.ts b/projects/ngx-turnstile-demo/src/app/routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { EventBindingExampleComponent } from './examples/event-binding/event-binding-example.component';
 import { ReactiveFormExampleComponent } from './examples/reactive-form/reactive-form-example.component';
 import { TemplateDrivenFormExampleComponent } from './examples/template-driven-form/template-driven-form-example.component';
+import { LanguageOptionComponent } from './examples/language-option/language-option.component';
 
 export const APP_ROUTES: Routes = [
   {
@@ -15,6 +16,11 @@ export const APP_ROUTES: Routes = [
     component: ReactiveFormExampleComponent,
     title: 'Reactive Form Example',
   },
+  {
+    path: 'language-option-example',
+    component: LanguageOptionComponent,
+    title: 'Language Option Example',
+  },
   {
     path: 'template-driven-form-example',
     component: TemplateDrivenFormExampleComponent,

diff --git a/projects/ngx-turnstile-demo/src/main.ts b/projects/ngx-turnstile-demo/src/main.ts
@@ -6,6 +6,17 @@ import { APP_ROUTES } from './app/routes';
 
 import { environment } from './environments/environment';
 
+function overWriteAttachShadowToPreventClosedShadowDoms() {
+  const og = HTMLDivElement.prototype.attachShadow;
+  HTMLDivElement.prototype.attachShadow = function (options: ShadowRootInit) {
+    if (options.mode === 'closed') {
+      options.mode = 'open';
+    }
+    return og.call(this, options);
+  };
+}
+overWriteAttachShadowToPreventClosedShadowDoms(); // Open shadow DOMS to enable cypress testing
+
 if (environment.production) {
   enableProdMode();
 }