From 4f0e6c5013b3616ec19882e97d77d85bc8eabd39 Mon Sep 17 00:00:00 2001
From: shameerrehman <94149351+shameerrehman@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:33:21 -0400
Subject: [PATCH] test: adding cypress tests for feature filtering (#25)

* feat: when initializing astral added options to filter which widgets to see, also added more detail in readme

* chore: enabled all widgets

* chore: changed variable name, docs: updated README file

* test: adding cypress tests to check if enabling of features work

---------

Co-authored-by: smalik <smalik@verto.ca>
---
 README.md                        |  12 +++-
 cypress.config.ts                |   1 +
 cypress/e2e/filter-feature.cy.ts | 113 +++++++++++++++++++++++++++++++
 projects/demo/blank-page.html    |  14 ++++
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 cypress/e2e/filter-feature.cy.ts
 create mode 100644 projects/demo/blank-page.html

diff --git a/README.md b/README.md
index 96eb1bd..4b1413b 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,16 @@ You can choose which widgets should appear by passing an object inside of the `i
 
 Here's an example:
 
+```html
+<script>
+  initializeAstral({
+    filterWidget: ["Contrast", "Bigger Text", "Screen Mask"],
+  });
+</script>
+```
+
+Optionally we can choose which widgets should appear by passing an object inside of function call:
+
 ```html
 <script>
   initializeAstral({
@@ -62,7 +72,7 @@ Here's an example:
       "Screen Reader",
       "Contrast",
       "Saturation",
-      "Text Size",
+      "Bigger Text",
       "Text Spacing",
       "Screen Mask",
       "Line Height",
diff --git a/cypress.config.ts b/cypress.config.ts
index ae953ea..b42c86f 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
 
   env: {
     baseUrl: "http://localhost:8000",
+    blankUrl: "http://localhost:8000/blank-page.html",
   },
 
   e2e: {
diff --git a/cypress/e2e/filter-feature.cy.ts b/cypress/e2e/filter-feature.cy.ts
new file mode 100644
index 0000000..8a76f3e
--- /dev/null
+++ b/cypress/e2e/filter-feature.cy.ts
@@ -0,0 +1,113 @@
+describe("tests the enabling of different features", () => {
+  it("passes", () => {
+    //checks contract component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", { enabledFeatures: ["Contrast"] });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-contrast");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen reader component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Reader"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-reader");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks saturation component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Saturation"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-saturate");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text size component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Bigger Text"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-size");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text spacing component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Text Spacing"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-spacing");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen mask component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Mask"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-mask");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks line height component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Line Height"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-line-height");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.clearLocalStorage();
+  });
+});
diff --git a/projects/demo/blank-page.html b/projects/demo/blank-page.html
new file mode 100644
index 0000000..b77fa6b
--- /dev/null
+++ b/projects/demo/blank-page.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <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>Astral Accessibility</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <p>Filter Feature Test</p>
+    <script src="main.js"></script>
+  </body>
+</html>