diff --git a/cypress.config.ts b/cypress.config.ts
index 9f8d21a9..66265399 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -5,6 +5,5 @@ export default defineConfig({
baseUrl: "http://localhost:3000",
testIsolation: false,
defaultCommandTimeout: 4000,
- supportFile: false,
},
});
diff --git a/cypress/e2e/tests.cy.ts b/cypress/e2e/tests.cy.ts
index d46fb44e..f839d73e 100644
--- a/cypress/e2e/tests.cy.ts
+++ b/cypress/e2e/tests.cy.ts
@@ -1,4 +1,5 @@
///
+
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;
+ })
+ });
});
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
new file mode 100644
index 00000000..a66af41c
--- /dev/null
+++ b/cypress/support/e2e.ts
@@ -0,0 +1 @@
+import './functions'
\ No newline at end of file
diff --git a/cypress/support/functions.ts b/cypress/support/functions.ts
new file mode 100644
index 00000000..eed18710
--- /dev/null
+++ b/cypress/support/functions.ts
@@ -0,0 +1,9 @@
+import {
+ getCachedTheme,
+ setCachedTheme,
+} from "../../src/services/ThemeService";
+
+cy.chatbotify = {
+ getCachedTheme,
+ setCachedTheme,
+};
diff --git a/src/services/ThemeService.tsx b/src/services/ThemeService.tsx
index daa52a0c..a4cf38e8 100644
--- a/src/services/ThemeService.tsx
+++ b/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();
diff --git a/tsconfig.json b/tsconfig.json
index cc2a5053..2b1ad615 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -109,6 +109,7 @@
"skipLibCheck": true /* Skip type checking all .d.ts files. */
},
"include": [
+ "cypress/**/*",
"src/**/*",
"types/*"
],
diff --git a/types/cypress.d.ts b/types/cypress.d.ts
new file mode 100644
index 00000000..ef63e91d
--- /dev/null
+++ b/types/cypress.d.ts
@@ -0,0 +1,9 @@
+declare namespace Cypress {
+ interface Chainable {
+ chatbotify: {
+ getCachedTheme(id: string, version: string, cacheDuration: number): ThemeCacheData | null
+ setCachedTheme(id: string, version: string, settings: Settings, inlineStyles: Styles, cssStylesText: string)
+ }
+
+ }
+}
\ No newline at end of file