@sitecore-feaas/clientside 0.5.3 → 0.5.5

package/src/components/FEAASComponent.tsx

@@ -104,6 +104,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
   } as Partial<FEAASComponentsProps>
 
   needsRefresh: boolean
+  needsToFetchTemplate: boolean
 
   setData(data: DataOptions) {
     this.set({ data })
@@ -123,14 +124,19 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     // force component to be refreshed
     if (name == 'library' || name == 'component' || name == 'revision' || name == 'version') {
       this.payload = undefined
+      if (this.alreadyRendered) {
+        this.needsRefresh = true
+        this.needsToFetchTemplate = true
+      }
     }
 
-    this.needsRefresh = true
-
     super.attributeChangedCallback(name, oldValue, newValue)
 
-    if (name === 'data' && this.props.fetch.includes('data')) {
-      this.fetchData()
+    if (name == 'data') {
+      this.needsRefresh = true
+      if (this.props.fetch.includes('data') || this.alreadyRendered || !DataSettings.hasDataSettings(this.props.data)) {
+        this.fetchData()
+      }
     }
   }
 
@@ -157,6 +163,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
   constructor() {
     super()
 
+    const data = this.getAttribute('data')
     if (!this.getAttribute('data')) {
       this.whenDataReady.resolve({})
     }
@@ -225,7 +232,8 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
       })
     }
 
-    if (this.props.fetch.includes('template')) {
+    if (this.props.fetch.includes('template') || this.needsToFetchTemplate) {
+      this.needsToFetchTemplate = false
       var templatePromise = fetchAndRevalidateComponent(this.props, (html) => {
         this.payload = html
         advanceIfEverythingIsReady()
@@ -252,11 +260,17 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
   update() {
     this.alreadyRendered = true
     // avoid unnecessary rendering if hydration was disabled
-    if (!this.props.fetch.includes('data') && !this.props.fetch.includes('template') && this.firstElementChild) return
+    if (
+      !this.props.fetch.includes('data') &&
+      !this.props.fetch.includes('template') &&
+      this.firstElementChild &&
+      !this.needsRefresh
+    )
+      return
     if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
       renderDOMElement(this, this.readyData)
     } else {
-      this.needsRefresh = true
+      this.needsRefresh = false
       // defer rendering to original element
       if (this.getOriginal()) {
         return

package/src/dom/stylesheet.ts

@@ -17,23 +17,25 @@ export function renderStylesheetPromise(props: FEAASCDNStylesheetProps, styleshe
   }).then(() => stylesheet)
 }
 
+const validatedStylesheets = new WeakSet<HTMLStyleElement | HTMLLinkElement>()
 export function loadStylesheet(props: FEAASCDNStylesheetProps, callback?: ValidatableStylesheetCallback) {
-  var foundStylesheet = findStylesheet(props) as HTMLStyleElement
-  if (!foundStylesheet) {
-    var createdStylesheet = createStylesheet(props)
-  } else {
-    if (foundStylesheet.tagName == 'LINK') {
-      callback(null, 'initial')
-      return Promise.resolve(foundStylesheet)
-    }
+  var foundStylesheet: HTMLStyleElement | HTMLLinkElement
+  var writableStylesheet: HTMLStyleElement
+
+  if (foundStylesheet && validatedStylesheets.has(foundStylesheet)) {
+    return Promise.resolve(foundStylesheet)
   }
 
   return fetchAndRevalidateStylesheet(props, (cssText, phase) => {
-    if (createdStylesheet) {
-      createdStylesheet.textContent = cssText
+    foundStylesheet ||= findStylesheet(props)
+    // dont need to write stylesheet for cached state if we already found a stylesheet
+    if (!(phase == 'initial' && foundStylesheet)) {
+      writableStylesheet ||=
+        !foundStylesheet || foundStylesheet.tagName == 'LINK' ? createStylesheet(props) : foundStylesheet
+      writableStylesheet.textContent = cssText
     }
     callback?.(cssText, phase)
-  }).then(() => foundStylesheet || createdStylesheet)
+  }).then(() => foundStylesheet || writableStylesheet)
 }
 
 export function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps) {
@@ -43,10 +45,10 @@ export function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps) {
 }
 
 export function findStylesheet(props: FEAASCDNStylesheetProps) {
-  return (
-    document.head.querySelector(`style[data-href="${getStylesheetURL(props)}"]`) ||
-    document.querySelector(`link[rel="stylesheet"][href="${getStylesheetURL(props)}"]`)
-  )
+  return (document.head.querySelector(`style[data-href="${getStylesheetURL(props)}"]`) ||
+    document.querySelector(`link[rel="stylesheet"][href="${getStylesheetURL(props)}"]`)) as
+    | HTMLStyleElement
+    | HTMLLinkElement
 }
 
 export function createStylesheet(props: FEAASCDNStylesheetProps) {

package/src/fetch.ts

@@ -68,6 +68,22 @@ export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = fal
 
 export class InvalidResponse extends Error {}
 
+/**
+ * Executes a fetch request optionally validating and handling the response. Using callback function it's possible to
+ * observe successful response twice: Cached version first, and up-to-date later.
+ *
+ * @param {Object}                  request              - An object containing request parameters.
+ * @param {string}                  request.url          - The URL to fetch.
+ * @param {Object}                  request.options      - Fetch request options.
+ * @param {Function}                [request.validator]  - Function to validate the response. Should return `false` if
+ *                                                       validation fails.
+ * @param {Function}                [request.callback]   - Function to execute after fetching. Receives the response,
+ *                                                       phase, and cache status.
+ * @param {Object}                  [request.cache]      - Cache object to store or retrieve cached data.
+ * @param {ValidatableRequestPhase} [phase='initial']    - The phase of the request, defaults to 'initial'.
+ * @returns {Promise<Object>} A promise that resolves to an object containing request details and the response.
+ * @throws {Error} Throws an error if the fetch fails or if the response is not valid according to the validator.
+ */
 export async function fetchWithCacheAwareness(
   { url, options, validator, callback, cache }: ValidatableRequest,
   phase: ValidatableRequestPhase = 'initial'
@@ -107,6 +123,14 @@ export async function fetchWithCacheAwareness(
   }
 }
 
+/**
+ * Validates cache of previousl fetch If the resource is cached and there is a newer version available, it will be
+ * re-fetched.
+ *
+ * @param request  - The request object containing the URL, cache information, options, validator, and response of
+ *                 initial request.
+ * @returns A promise that resolves to the request object.
+ */
 export async function fetchToValidateCache(
   request: ValidatableRequest & Required<Pick<ValidatableRequest, 'response'>>
 ) {
@@ -129,7 +153,7 @@ export async function fetchToValidateCache(
 
     // there's a newer version of the file that we may fetch
     if (head.headers.get('last-modified') != response.headers.get('last-modified')) {
-      // otherwise the new resource has to be re-fetched
+      // the new resource has to be re-fetched
       return fetchBypassingCache(request)
     }
   }

package/src/utils/settings.ts

@@ -52,7 +52,7 @@ export function clean(settings: any) {
  * @returns {boolean} - True if the data is of type DataSettings, false otherwise.
  */
 export const isDataSettings = (data: any): data is DataSettings => {
-  if (typeof data.url != 'string') return false
+  if (!data || typeof data.url != 'string') return false
 
   for (var property in data) {
     if (
@@ -192,7 +192,7 @@ export async function fetchData(data: DataOptions): Promise<DataScopes> {
   )
 }
 
-export async function hasDataSettings(data: DataOptions) {
+export function hasDataSettings(data: DataOptions) {
   if (!data) return false
   return isDataSettings(data) || Object.values(data).some(isDataSettings)
 }

package/test/FEAASComponent.test.tsx

@@ -25,7 +25,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('CDN/components/L/C/V/R')) {
-        return new Response('TODAY', {
+        return new Response('FRESH', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -43,14 +43,21 @@ describe('Components', () => {
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(spy).toHaveBeenCalledTimes(1)
 
-    expect(component.innerHTML).toContain('TODAY')
+    expect(component.innerHTML).toContain('FRESH')
   })
 
   describe('fetch control', () => {
-    it('should not make requests when hydration is turned off', async () => {
+    it('should not make requests when hydration is turned off, unless attribute changed after initial render', async () => {
       const spy = vi.spyOn(global, 'fetch')
-
-      // Fixme юhange to production component
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        return new Response(url, {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      })
+      // Fixme change to production component
       document.body.innerHTML =
         '<feaas-component fetch="" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
 
@@ -59,7 +66,11 @@ describe('Components', () => {
       await expect(component.whenRendered).resolves.toEqual(component)
       expect(spy).toHaveBeenCalledTimes(0)
 
-      expect(component.innerHTML).toBe('')
+      component.setAttribute('library', 'Z')
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(1)
+
+      expect(component.innerHTML).toBe('CDN/components/Z/C/V/R.html')
     })
 
     it('should not make requests when hydration is turned off, but should render template', async () => {
@@ -81,7 +92,7 @@ describe('Components', () => {
       const spy = vi.spyOn(global, 'fetch')
       spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
         if (url.match('.css')) {
-          return new Response('{}', {
+          return new Response('.a{}', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -105,7 +116,7 @@ describe('Components', () => {
       const spy = vi.spyOn(global, 'fetch')
       spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
         if (url.match('CDN/components/L/C/V/R')) {
-          return new Response('TODAY', {
+          return new Response('FRESH', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -113,7 +124,7 @@ describe('Components', () => {
           })
         }
         if (url.match('.css')) {
-          return new Response('{}', {
+          return new Response('.a{}', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -128,7 +139,7 @@ describe('Components', () => {
 
       await expect(component.whenRendered).resolves.toEqual(component)
       expect(spy).toHaveBeenCalledTimes(2)
-      expect(component.innerHTML).toBe('TODAY')
+      expect(component.innerHTML).toBe('FRESH')
       expect(document.head.querySelectorAll('style').length).toEqual(1)
     })
     it('should make data/css requests when fetch="stylesheet data"', async () => {
@@ -143,7 +154,7 @@ describe('Components', () => {
           })
         }
         if (url.match('.css')) {
-          return new Response('{}', {
+          return new Response('.a{}', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -163,17 +174,9 @@ describe('Components', () => {
       expect(document.head.querySelectorAll('style').length).toEqual(1)
     })
 
-    it('should make data/css/html requests when fetch="template stylesheet data"', async () => {
+    it('should fetch data even if fetch control doesnt allow it, once data attribute was updated', async () => {
       const spy = vi.spyOn(global, 'fetch')
       spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
-        if (url.match('.html')) {
-          return new Response('<var data-path="source.path"></var>', {
-            headers: {
-              date: now.toUTCString(),
-              'last-modified': earlier.toUTCString()
-            }
-          })
-        }
         if (url.match('my.json')) {
           return new Response('{"path": "value"}', {
             headers: {
@@ -181,26 +184,23 @@ describe('Components', () => {
               'last-modified': earlier.toUTCString()
             }
           })
-        }
-        if (url.match('.css')) {
-          return new Response('{}', {
-            headers: {
-              date: now.toUTCString(),
-              'last-modified': earlier.toUTCString()
-            }
-          })
+        } else {
+          throw new Error('Unknown fetch url' + url)
         }
       })
 
       document.body.innerHTML =
-        '<feaas-component fetch="template stylesheet data" data=\'{"source": {"url": "my.json"}}\' library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>'
+        '<feaas-component fetch="" data=\'{"source": {"path": "original"}}\' library="L" cdn="CDN" component="C" version="V" revision="R"><var data-path="source.path">original</var></feaas-component>'
 
       const component = document.body.firstElementChild as FEAASComponent
 
       await expect(component.whenRendered).resolves.toEqual(component)
-      expect(spy).toHaveBeenCalledTimes(3)
+      expect(spy).toHaveBeenCalledTimes(0)
+      expect(component.innerHTML).toBe('<var data-path="source.path">original</var>')
+      component.setAttribute('data', '{"source": {"url": "my.json"}}')
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spy).toHaveBeenCalledTimes(1)
       expect(component.innerHTML).toBe('<var data-path="source.path">value</var>')
-      expect(document.head.querySelectorAll('style').length).toEqual(1)
     })
   })
 
@@ -208,7 +208,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('TODAY', {
+        return new Response('FRESH', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -226,7 +226,7 @@ describe('Components', () => {
     expect(spy).toHaveBeenCalledTimes(1)
 
     expect(component.outerHTML).toBe(
-      `<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas">TODAY</feaas-component>`
+      `<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas">FRESH</feaas-component>`
     )
   })
 
@@ -234,7 +234,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('TODAY', {
+        return new Response('FRESH', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -260,16 +260,108 @@ describe('Components', () => {
     expect(document.head.querySelectorAll('style')[1].getAttribute('data-href')).toBe('http://a/styles/b/staged.css')
   })
 
-  it('should render component if stylesheet is statically embedded as link', async () => {
+  it('should validate stylesheet when included as link before rendering component', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      if (url.match('http://a/components/b/c/d/1.html')) {
+        return new Response('FRESH', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      } else if (url.match('.css')) {
+        return new Response('FRESH', {
+          headers: {
+            date: /*String(options?.method).toLowerCase() == 'head' ? */ now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      }
+    })
+
+    document.body.innerHTML =
+      '<feaas-component src="http://a/components/b/c/d/1.html"></feaas-component><link rel="stylesheet" href="http://a/styles/b/published.css" />'
+
+    const component = document.body.firstElementChild as FEAASComponent
+    await expect(component.whenRendered).resolves.toEqual(component)
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(document.head.querySelectorAll('style').length).toBe(0)
+  })
+
+  it('should validate and re-write stylesheet when included as link before rendering component', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      if (url.match('http://a/components/b/c/d/1.html')) {
+        return new Response('FRESH', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      } else if (url.match('.css')) {
+        if (!options?.cache) {
+          // respond with cached css
+          return new Response('CACHED', {
+            headers: {
+              date: earliest.toUTCString(),
+              'last-modified': earliest.toUTCString()
+            }
+          })
+        } else {
+          // respond with up to date
+          return new Response('CACHED', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earliest.toUTCString()
+            }
+          })
+        }
+      }
+    })
+
+    document.body.innerHTML =
+      '<feaas-component src="http://a/components/b/c/d/1.html"></feaas-component><link rel="stylesheet" href="http://a/styles/b/published.css" />'
+
+    const component = document.body.firstElementChild as FEAASComponent
+    await expect(component.whenRendered).resolves.toEqual(component)
+    expect(spy).toHaveBeenCalledTimes(3)
+    // render with stale stylesheet
+    expect(document.head.querySelectorAll('style').length).toBe(0)
+    await new Promise((r) => setTimeout(r, 50))
+    expect(spy).toHaveBeenCalledTimes(3)
+    expect(document.head.querySelectorAll('style').length).toBe(0)
+  })
+
+  it('should validate and re-write stylesheet when included as link before rendering component', async () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('TODAY', {
+        return new Response('FRESH', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
           }
         })
+      } else if (url.match('.css')) {
+        if (!options?.cache) {
+          // respond with cached css
+          return new Response('CACHED', {
+            headers: {
+              date: earliest.toUTCString(),
+              'last-modified': earliest.toUTCString()
+            }
+          })
+        } else {
+          if (String(options?.method).toLowerCase() == 'head') await new Promise((r) => setTimeout(r, 50))
+          // respond with up to date
+          return new Response('FRESH', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': now.toUTCString()
+            }
+          })
+        }
       }
     })
 
@@ -278,7 +370,12 @@ describe('Components', () => {
 
     const component = document.body.firstElementChild as FEAASComponent
     await expect(component.whenRendered).resolves.toEqual(component)
+    expect(spy).toHaveBeenCalledTimes(3)
+    // render with stale stylesheet
     expect(document.head.querySelectorAll('style').length).toBe(0)
+    await new Promise((r) => setTimeout(r, 100))
+    expect(spy).toHaveBeenCalledTimes(4)
+    expect(document.head.querySelectorAll('style').length).toBe(1)
   })
 
   it('should revalidate cached component response', async () => {
@@ -286,7 +383,7 @@ describe('Components', () => {
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('CDN/components/L/C/V/R') && options.method != 'HEAD') {
         // 1. Here's cached component
-        return new Response('TODAY', {
+        return new Response('CACHED', {
           headers: {
             date: earlier.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -311,7 +408,7 @@ describe('Components', () => {
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(spy).toHaveBeenCalledTimes(2)
 
-    expect(component.innerHTML).toContain('TODAY')
+    expect(component.innerHTML).toContain('CACHED')
   })
 
   it('should reload component while using stale cache', async () => {
@@ -335,7 +432,7 @@ describe('Components', () => {
         })
       } else {
         // Up to date version
-        return new Response('TODAY', {
+        return new Response('FRESH', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -356,7 +453,7 @@ describe('Components', () => {
     // whenLoaded only fires when ensures that up-to-date version is loaded
     await expect(component.whenLoaded).resolves.toBeTruthy()
     expect(spy).toHaveBeenCalledTimes(3)
-    expect(component.innerHTML).toContain('TODAY')
+    expect(component.innerHTML).toContain('FRESH')
   })
 
   it('should re-fetch component when attributes change', async () => {
@@ -418,7 +515,7 @@ describe('Components', () => {
           })
         } else {
           await new Promise((resolve) => setTimeout(resolve, 200))
-          return new Response('TODAY {}', {
+          return new Response('FRESH {}', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -445,7 +542,7 @@ describe('Components', () => {
         } else {
           //  Latest
           await new Promise((resolve) => setTimeout(resolve, 100))
-          return new Response('TODAY', {
+          return new Response('FRESH', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -459,20 +556,20 @@ describe('Components', () => {
     const component = document.body.firstElementChild as FEAASComponent
     expect(document.head.querySelector('style')).toBeNull()
     await new Promise((resolve) => setTimeout(resolve, 50))
-    const stylesheet = document.head.querySelector('style') as HTMLStyleElement
-    expect(stylesheet.innerHTML).toEqual('')
+    expect(document.head.querySelector('style')).toBeNull()
     expect(component.innerHTML).toEqual('')
     // Component will rendered with stale cached stylesheet
     await expect(component.whenRendered).resolves.toEqual(component)
+    const stylesheet = document.head.querySelector('style') as HTMLStyleElement
     expect(stylesheet.innerHTML).toEqual('YESTERDAY {}')
     expect(component.innerHTML).toEqual('YESTERDAY')
     // Component will update itself with stale cached stylesheet
-    await expect(component.whenLoaded).resolves.toEqual('TODAY')
+    await expect(component.whenLoaded).resolves.toEqual('FRESH')
     expect(stylesheet.innerHTML).toEqual('YESTERDAY {}')
-    expect(component.innerHTML).toEqual('TODAY')
+    expect(component.innerHTML).toEqual('FRESH')
     await new Promise((resolve) => setTimeout(resolve, 200))
     // Stylesheet will update later
-    expect(stylesheet.innerHTML).toEqual('TODAY {}')
+    expect(stylesheet.innerHTML).toEqual('FRESH {}')
   })
 
   it('render without data', () => {

package/test/FEAASStylesheet.test.tsx

@@ -29,7 +29,7 @@ describe('Stylesheet', () => {
   it('should load stylesheet (cold cache)', async () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
-      return new Response('TODAY {}', {
+      return new Response('FRESH {}', {
         headers: {
           date: now.toUTCString(),
           'last-modified': earlier.toUTCString()
@@ -44,13 +44,13 @@ describe('Stylesheet', () => {
     await expect(stylesheet.whenRendered).resolves.toEqual(stylesheet)
     expect(spy).toHaveBeenCalledTimes(1)
 
-    expect(document.head.querySelector('style').textContent).toContain('TODAY')
+    expect(document.head.querySelector('style').textContent).toContain('FRESH')
   })
   it('should load stylesheet with minimum parameters(cold cache)', async () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match(DEFAULT_CDN_URL + '/styles/L/published.css'))
-        return new Response('TODAY {}', {
+        return new Response('FRESH {}', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -65,14 +65,14 @@ describe('Stylesheet', () => {
     await expect(stylesheet.whenRendered).resolves.toEqual(stylesheet)
     expect(spy).toHaveBeenCalledTimes(1)
 
-    expect(document.head.querySelector('style').textContent).toContain('TODAY')
+    expect(document.head.querySelector('style').textContent).toContain('FRESH')
   })
 
   it('should invalidate stylesheet cache', async () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('CDN/styles/L/published.css') && options?.method != 'HEAD') {
-        return new Response('TODAY {}', {
+        return new Response('FRESH {}', {
           headers: {
             date: earlier.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -95,7 +95,7 @@ describe('Stylesheet', () => {
     await expect(stylesheet.whenRendered).resolves.toEqual(stylesheet)
     expect(spy).toHaveBeenCalledTimes(2)
 
-    expect(document.head.querySelector('style').textContent).toContain('TODAY')
+    expect(document.head.querySelector('style').textContent).toContain('FRESH')
   })
   it('should update stylesheet while using stale cache', async () => {
     const spy = vi.spyOn(global, 'fetch')
@@ -117,7 +117,7 @@ describe('Stylesheet', () => {
           }
         })
       } else {
-        return new Response('TODAY {}', {
+        return new Response('FRESH {}', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -137,7 +137,7 @@ describe('Stylesheet', () => {
     // whenLoaded only fires when ensures that up-to-date version is loaded
     await expect(stylesheet.whenLoaded).resolves.toBeTruthy()
     expect(spy).toHaveBeenCalledTimes(3)
-    expect(document.head.querySelector('style').textContent).toContain('TODAY {}')
+    expect(document.head.querySelector('style').textContent).toContain('FRESH {}')
   })
 
   it('should load stylesheet statically', async () => {
@@ -160,7 +160,7 @@ describe('Stylesheet', () => {
           }
         })
       } else {
-        return new Response('TODAY {}', {
+        return new Response('FRESH {}', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -175,7 +175,9 @@ describe('Stylesheet', () => {
         library: 'L',
         revision: 'published'
       }).then((r) => r.textContent)
-    ).resolves.toEqual('TODAY {}')
-    await expect(loadStylesheet(`http://CDN/L/published.css`).then((r) => r.textContent)).resolves.toEqual('TODAY {}')
+    ).resolves.toEqual('FRESH {}')
+    await expect(loadStylesheet(`http://CDN/L/published.css`).then((r) => r.textContent)).resolves.toEqual('FRESH {}')
   })
+
+  it('should ')
 })