test: add tests for theme caching (#119)

cypress.config.ts

@@ -5,6 +5,5 @@ export default defineConfig({
 		baseUrl: "http://localhost:3000",
 		testIsolation: false,
 		defaultCommandTimeout: 4000,
-		supportFile: false,
 	},
 });

cypress/e2e/tests.cy.ts

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+
 import path from "path";
 import "cypress-file-upload";
 
@@ -184,23 +185,53 @@ describe("Chat Bot Test Suite", () => {
 			expect(scrollPosition).to.be.closeTo(totalHeight, 5);
 		});
 	});
-	// this test for theme is not neccessary, only checks localstorage store and retrieve
-	// todo: have a test case that checks cache expiry instead
-	/* it("Should store and retrieve the theme from localStorage", () => {
-		const newTheme = {
-			id: "new-theme",
-			version: "1.0.0",
-			baseUrl: "http://example.com",
-		};
-		cy.window().then((win) => {
-			win.localStorage.setItem("theme", JSON.stringify(newTheme));
-		});
-		cy.window().then((win) => {
-			const cachedTheme = JSON.parse(
-        win.localStorage.getItem("theme") as string
+
+	const themeId = "new-theme";
+	const themeVersion = "1.0.0";
+	const defaultExpiration = 3;
+	const themeSettings = { key: "value" };
+	const inlineStyles = { styleKey: "styleValue" };
+	const cssStylesText = "body { background-color: red; }";
+
+	it("Should retrieve the theme if not expired", () => {
+		cy.chatbotify.setCachedTheme(
+			themeId,
+			themeVersion,
+			themeSettings,
+			inlineStyles,
+			cssStylesText
+		);
+
+		const theme = cy.chatbotify.getCachedTheme(
+			themeId,
+			themeVersion,
+			defaultExpiration
+		);
+
+		expect(theme).to.exist;
+		expect(theme.settings).to.deep.equal(themeSettings);
+		expect(theme.inlineStyles).to.deep.equal(inlineStyles);
+		expect(theme.cssStylesText).to.equal(cssStylesText);
+	});
+
+	it("Should not retrieve the theme if expired", () => {
+		cy.chatbotify.setCachedTheme(
+			themeId,
+			themeVersion,
+			themeSettings,
+			inlineStyles,
+			cssStylesText
+		);
+
+		cy.wait(4000).then(() => {
+
+			const theme = cy.chatbotify.getCachedTheme(
+				themeId,
+				themeVersion,
+				defaultExpiration
 			);
-			expect(cachedTheme).to.have.property("id", newTheme.id);
-			expect(cachedTheme).to.have.property("version", newTheme.version);
-		});
-	}); */
+
+			expect(theme).to.be.null;
+		})
+	});
 });

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './functions'

cypress/support/functions.ts

@@ -0,0 +1,9 @@
+import {
+	getCachedTheme,
+	setCachedTheme,
+} from "../../src/services/ThemeService";
+
+cy.chatbotify = {
+	getCachedTheme,
+	setCachedTheme,
+};

src/services/ThemeService.tsx

@@ -3,9 +3,9 @@ import { Styles } from "../types/Styles";
 import { Theme } from "../types/Theme";
 import { ThemeCacheData } from "../types/internal/ThemeCacheData";
 
-const DEFAULT_URL = import.meta.env.VITE_THEME_BASE_CDN_URL;
-const DEFAULT_EXPIRATION = import.meta.env.VITE_THEME_DEFAULT_CACHE_EXPIRATION;
-const CACHE_KEY_PREFIX = import.meta.env.VITE_THEME_CACHE_KEY_PREFIX;
+const DEFAULT_URL = import.meta.env?.VITE_THEME_BASE_CDN_URL;
+const DEFAULT_EXPIRATION = import.meta.env?.VITE_THEME_DEFAULT_CACHE_EXPIRATION;
+const CACHE_KEY_PREFIX = import.meta.env?.VITE_THEME_CACHE_KEY_PREFIX;
 
 /**
  * Fetches the cached theme if it exist and checks for expiry.
@@ -14,7 +14,7 @@ const CACHE_KEY_PREFIX = import.meta.env.VITE_THEME_CACHE_KEY_PREFIX;
  * @param version version of the theme
  * @param cacheDuration duration that the theme should be cached for
  */
-const getCachedTheme = (id: string, version: string, cacheDuration: number): ThemeCacheData | null => {
+export const getCachedTheme = (id: string, version: string, cacheDuration: number): ThemeCacheData | null => {
 	const cachedTheme = localStorage.getItem(`${CACHE_KEY_PREFIX}_${id}_${version}`);
 
 	// if unable to find theme, not cached so return null
@@ -46,7 +46,7 @@ const getCachedTheme = (id: string, version: string, cacheDuration: number): The
  * @param inlineStyles inline styles to cache
  * @param cssStylesText css styles to cache
  */
-const setCachedTheme = (id: string, version: string, settings: Settings, inlineStyles: Styles,
+export const setCachedTheme = (id: string, version: string, settings: Settings, inlineStyles: Styles,
 	cssStylesText: string) => {
 
 	const milliseconds = new Date().getTime();

tsconfig.json

@@ -109,6 +109,7 @@
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
   "include": [
+    "cypress/**/*",
     "src/**/*",
     "types/*"
   ],

types/cypress.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+    interface Chainable<Subject = any> {
+        chatbotify: {
+            getCachedTheme(id: string, version: string, cacheDuration: number): ThemeCacheData | null
+            setCachedTheme(id: string, version: string, settings: Settings, inlineStyles: Styles, cssStylesText: string)
+        }
+
+    }
+}