cypress

usablica · Jul 6, 2024 · 7b76616 · 7b76616
1 parent 409b1ab
commit 7b76616
Show file tree

Hide file tree

Showing 39 changed files with 41 additions and 34 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,7 +37,7 @@ dist/
 .changelog
 
 # Tests
-tests/cypress/setup/dist
-tests/cypress/videos/
-tests/cypress/snapshots/actual
-tests/cypress/snapshots/diff
+cypress/setup/dist
+cypress/videos/
+cypress/snapshots/actual
+cypress/snapshots/diff
diff --git a/...ain checkbox -- should not display the tour if checkbox is clicked (failed).png b/...ain checkbox -- should not display the tour if checkbox is clicked (failed).png
diff --git a/...how again checkbox -- should render the 'Dont show Again' checkbox (failed).png b/...how again checkbox -- should render the 'Dont show Again' checkbox (failed).png
diff --git a/...ctual/tour/dont-show-again.cy.js/dont-show-again-checkbox-first-step-actual.png b/...ctual/tour/dont-show-again.cy.js/dont-show-again-checkbox-first-step-actual.png
diff --git a/...actual/tour/dont-show-again.cy.js/dont-show-again-clicked-first-step-actual.png b/...actual/tour/dont-show-again.cy.js/dont-show-again-clicked-first-step-actual.png
diff --git a/...t-show-again-checkbox-first-step-base.png → ...s/dont_show_again_checkbox_first_step.png b/...t-show-again-checkbox-first-step-base.png → ...s/dont_show_again_checkbox_first_step.png
diff --git a/...-show-again-checkbox-second-step-base.png → .../dont_show_again_checkbox_second_step.png b/...-show-again-checkbox-second-step-base.png → .../dont_show_again_checkbox_second_step.png
diff --git a/...nt-show-again-clicked-after-exit-base.png → ...ts/dont_show_again_clicked_after_exit.png b/...nt-show-again-clicked-after-exit-base.png → ...ts/dont_show_again_clicked_after_exit.png
diff --git a/...again-clicked-after-second-start-base.png → ...show_again_clicked_after_second_start.png b/...again-clicked-after-second-start-base.png → ...show_again_clicked_after_second_start.png
diff --git a/...nt-show-again-clicked-first-step-base.png → ...ts/dont_show_again_clicked_first_step.png b/...nt-show-again-clicked-first-step-base.png → ...ts/dont_show_again_clicked_first_step.png
diff --git a/....js/highlight-element-first-step-base.png → ...ht.cy.ts/highlight_element_first_step.png b/....js/highlight-element-first-step-base.png → ...ht.cy.ts/highlight_element_first_step.png
diff --git a/...js/highlight-element-second-step-base.png → ...t.cy.ts/highlight_element_second_step.png b/...js/highlight-element-second-step-base.png → ...t.cy.ts/highlight_element_second_step.png
diff --git a/...ht.cy.js/highlight-fixed-element-base.png → ...ghlight.cy.ts/highlight_fixed_element.png b/...ht.cy.js/highlight-fixed-element-base.png → ...ghlight.cy.ts/highlight_fixed_element.png
diff --git a/...s/highlight-fixed-element-scroll-base.png → ....cy.ts/highlight_fixed_element_scroll.png b/...s/highlight-fixed-element-scroll-base.png → ....cy.ts/highlight_fixed_element_scroll.png
diff --git a/...ight-fixed-parent-element-scroll-base.png → ...highlight_fixed_parent_element_scroll.png b/...ight-fixed-parent-element-scroll-base.png → ...highlight_fixed_parent_element_scroll.png
diff --git a/...shots/base/tour/modal.cy.js/exit-base.png → ...se/src/packages/tour/modal.cy.ts/exit.png b/...shots/base/tour/modal.cy.js/exit-base.png → ...se/src/packages/tour/modal.cy.ts/exit.png
diff --git a/...base/tour/modal.cy.js/first-step-base.png → .../packages/tour/modal.cy.ts/first_step.png b/...base/tour/modal.cy.js/first-step-base.png → .../packages/tour/modal.cy.ts/first_step.png
diff --git a/...tour/modal.cy.js/position-bottom-base.png → ...ages/tour/modal.cy.ts/position_bottom.png b/...tour/modal.cy.js/position-bottom-base.png → ...ages/tour/modal.cy.ts/position_bottom.png
diff --git a/...e/tour/modal.cy.js/position-left-base.png → ...ckages/tour/modal.cy.ts/position_left.png b/...e/tour/modal.cy.js/position-left-base.png → ...ckages/tour/modal.cy.ts/position_left.png
diff --git a/.../tour/modal.cy.js/position-right-base.png → ...kages/tour/modal.cy.ts/position_right.png b/.../tour/modal.cy.js/position-right-base.png → ...kages/tour/modal.cy.ts/position_right.png
diff --git a/...r/modal.cy.js/refresh-first-step-base.png → ...s/tour/modal.cy.ts/refresh_first_step.png b/...r/modal.cy.js/refresh-first-step-base.png → ...s/tour/modal.cy.ts/refresh_first_step.png
diff --git a/.../modal.cy.js/refresh-second-step-base.png → .../tour/modal.cy.ts/refresh_second_step.png b/.../modal.cy.js/refresh-second-step-base.png → .../tour/modal.cy.ts/refresh_second_step.png
diff --git a/...r/modal.cy.js/refresh-third-step-base.png → ...s/tour/modal.cy.ts/refresh_third_step.png b/...r/modal.cy.js/refresh-third-step-base.png → ...s/tour/modal.cy.ts/refresh_third_step.png
diff --git a/...ase/tour/modal.cy.js/second-step-base.png → ...packages/tour/modal.cy.ts/second_step.png b/...ase/tour/modal.cy.js/second-step-base.png → ...packages/tour/modal.cy.ts/second_step.png
diff --git a/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/exit.png b/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/exit.png
diff --git a/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first_step.png b/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first_step.png
diff --git a/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second_step.png b/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second_step.png
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -6,5 +6,8 @@ declare namespace Cypress {
   }
   interface Window {
     introJs: any;
+    click: () => void;
+    clickRelative: () => void;
+    clickAbsolute: () => void;
   }
 }
diff --git a/cypress/videos/hint/hideHints.cy.js.mp4 b/cypress/videos/hint/hideHints.cy.js.mp4
diff --git a/cypress/videos/hint/modal.cy.js.mp4 b/cypress/videos/hint/modal.cy.js.mp4
diff --git a/cypress/videos/hint/removeHints.cy.js.mp4 b/cypress/videos/hint/removeHints.cy.js.mp4
diff --git a/cypress/videos/hint/showHints.cy.js.mp4 b/cypress/videos/hint/showHints.cy.js.mp4
diff --git a/cypress/videos/tour/dont-show-again.cy.js.mp4 b/cypress/videos/tour/dont-show-again.cy.js.mp4
diff --git a/cypress/videos/tour/exit.cy.js.mp4 b/cypress/videos/tour/exit.cy.js.mp4
diff --git a/src/packages/tour/dont-show-again.cy.ts b/src/packages/tour/dont-show-again.cy.ts
@@ -7,7 +7,8 @@ context("Don't show again checkbox", () => {
   it("should render the 'Dont show Again' checkbox", () => {
     cy.window().then((window) => {
       window
-        .introJs()
+        .introJs
+        .tour()
         .setOptions({
           dontShowAgain: true,
           steps: [
@@ -36,7 +37,7 @@ context("Don't show again checkbox", () => {
 
   it("should not display the tour if checkbox is clicked", () => {
     cy.window().then((window) => {
-      const instance = window.introJs().setOptions({
+      const instance = window.introJs.tour().setOptions({
         dontShowAgain: true,
         steps: [
           {

diff --git a/src/packages/tour/exit.cy.ts b/src/packages/tour/exit.cy.ts
@@ -5,7 +5,7 @@ context("Exit", () => {
 
   it("should remove leftovers from the DOM", () => {
     cy.window().then((window) => {
-      const instance = window.introJs().setOptions({
+      const instance = window.introJs.tour().setOptions({
         steps: [
           {
             intro: "step one",
@@ -32,7 +32,7 @@ context("Exit", () => {
 
   it("should exit the tour after clicking on the skip icon", () => {
     cy.window().then((window) => {
-      const instance = window.introJs().setOptions({
+      const instance = window.introJs.tour().setOptions({
         steps: [
           {
             intro: "step one",
@@ -57,7 +57,7 @@ context("Exit", () => {
 
   it("should exit the tour after clicking on the overlay layer", () => {
     cy.window().then((window) => {
-      const instance = window.introJs().setOptions({
+      const instance = window.introJs.tour().setOptions({
         steps: [
           {
             intro: "step one",
@@ -82,7 +82,7 @@ context("Exit", () => {
 
   it("should not exit the tour after clicking on the tooltip layer", () => {
     cy.window().then((window) => {
-      const instance = window.introJs().setOptions({
+      const instance = window.introJs.tour().setOptions({
         steps: [
           {
             intro: "step one",

diff --git a/src/packages/tour/highlight.cy.ts b/src/packages/tour/highlight.cy.ts
@@ -5,8 +5,8 @@ context("Highlight", () => {
 
   it("should highlight the target element", () => {
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -34,8 +34,8 @@ context("Highlight", () => {
 
   it("should let user interact with the target element", () => {
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -65,8 +65,8 @@ context("Highlight", () => {
 
   it("interaction with the target element should be disabled when disabledInteraction is true", () => {
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           disableInteraction: true,
           steps: [
@@ -91,8 +91,8 @@ context("Highlight", () => {
 
   it("should interaction with the target element the parent element has positive: relative", () => {
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -123,8 +123,8 @@ context("Highlight", () => {
         "z-index: 1;position: relative;"
       );
 
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -148,8 +148,8 @@ context("Highlight", () => {
 
   it("should interaction with the target element the parent element has positive: absolute", () => {
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -180,8 +180,8 @@ context("Highlight", () => {
         "z-index: 1;position: absolute;"
       );
 
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -207,8 +207,8 @@ context("Highlight", () => {
     cy.viewport(550, 750);
 
     cy.window().then((window) => {
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -236,8 +236,8 @@ context("Highlight", () => {
         top: 200,
       });
 
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -265,8 +265,8 @@ context("Highlight", () => {
         top: 200,
       });
 
-      window
-        .introJs()
+      window.introJs
+        .tour()
         .setOptions({
           steps: [
             {

diff --git a/src/packages/tour/modal.cy.ts b/src/packages/tour/modal.cy.ts
@@ -6,7 +6,8 @@ context("Modal", () => {
   it("should match the popup", () => {
     cy.window().then((win) => {
       win
-        .introJs()
+        .introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -40,7 +41,8 @@ context("Modal", () => {
       cy.viewport("macbook-13");
 
       win
-        .introJs()
+        .introJs
+        .tour()
         .setOptions({
           steps: [
             {
@@ -77,7 +79,7 @@ context("Modal", () => {
 
   it("should update the modal after refresh(true)", () => {
     cy.window().then((win) => {
-      const instance = win.introJs().setOptions({
+      const instance = win.introJs.tour().setOptions({
         showProgress: true,
         showBullets: true,
         steps: [

diff --git a/src/packages/tour/navigation.cy.ts b/src/packages/tour/navigation.cy.ts
@@ -2,7 +2,8 @@ context("Navigation", () => {
   beforeEach(() => {
     cy.visit("./cypress/setup/index.html").then((window) => {
       window
-        .introJs()
+        .introJs
+        .tour()
         .setOptions({
           steps: [
             {