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