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 <[email protected]>
verto-health · Sep 13, 2023 · 4f0e6c5 · 4f0e6c5
1 parent 76ff85d
commit 4f0e6c5
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -55,14 +55,24 @@ 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({
     enabledFeatures: [
       "Screen Reader",
       "Contrast",
       "Saturation",
-      "Text Size",
+      "Bigger Text",
       "Text Spacing",
       "Screen Mask",
       "Line Height",

diff --git 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
@@ -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
@@ -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>