@sitecore-feaas/clientside 0.5.4 → 0.5.6

package/src/dom/rendering.ts

@@ -96,23 +96,33 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   } else if (attribute == 'data-embed-src') {
     loadScript(element, value)
   } else if (attribute == 'data-path-attributes') {
-    const oldKeys = element.getAttribute('data-attributes-keys')?.split(',').filter(Boolean) || []
-    if (!Array.isArray(value))
-      for (var property in value) {
-        var subvalue = value[property]
-        setDOMAttribute(
-          element,
-          property,
-          typeof subvalue == 'object' && subvalue ? JSON.stringify(subvalue) : subvalue,
-          config
-        )
-      }
-    for (var i = 0; i < oldKeys.length; i++) {
-      if (value == null || !(oldKeys[i] in value)) {
-        setDOMAttribute(element, oldKeys[i], null, config)
+    if (!Array.isArray(value)) {
+      const oldKeys = element.getAttribute('data-attributes-keys')?.split(',').filter(Boolean) || []
+      if (!Array.isArray(value))
+        for (var property in value) {
+          var subvalue = value[property]
+          setDOMAttribute(
+            element,
+            property,
+            typeof subvalue == 'object' && subvalue ? JSON.stringify(subvalue) : subvalue,
+            config
+          )
+        }
+      for (var i = 0; i < oldKeys.length; i++) {
+        if (value == null || !(oldKeys[i] in value)) {
+          setDOMAttribute(element, oldKeys[i], null, config)
+        }
       }
+      setDOMAttribute(element, 'data-attributes-keys', Object.keys(value || {}).join(','))
+    }
+    // BYOC components also accept their data object in datasources attribute.
+    if (element.tagName == 'FEAAS-EXTERNAL') {
+      const datasourceId =
+        String(element.getAttribute('data-path-attributes') || '')
+          .slice(0, -1)
+          .split('.')[0] || '_'
+      setDOMAttribute(element, 'datasources', JSON.stringify({ [datasourceId]: value }))
     }
-    setDOMAttribute(element, 'data-attributes-keys', Object.keys(value || {}).join(','))
     return
   }
   if (typeof value == 'boolean') {
@@ -198,7 +208,12 @@ export function renderDOMElement(
     for (var i = 0; i < attrs.length; i++) {
       const { name, value: datapath } = attrs[i]
       if (name.startsWith('data-path') && name != 'data-path-scope') {
-        setDOMAttribute(element, name, queryScopes(datascopes, datapath, true), config)
+        setDOMAttribute(
+          element,
+          name,
+          queryScopes(datascopes, datapath, true, undefined, element.tagName != 'FEAAS-EXTERNAL'),
+          config
+        )
       }
       if (name == 'data-embed-src') {
         setDOMAttribute(element, name, element.getAttribute(name), config)

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/dom/thumbnail.ts

@@ -2,7 +2,7 @@ import type { SDK, Style, VersionModel, ComponentModel, StylesheetModel } from '
 import { fetchAndRevalidate } from '../fetch.js'
 import { renderComponent } from './component.js'
 
-export type Callback = (image: HTMLImageElement, isCached: boolean) => void
+export type Callback = (image: HTMLImageElement | null, isCached: boolean) => void
 
 export const convertBase64toBlob = (base64: string) => fetch(base64).then((res) => res.blob())
 

package/src/fetch.ts

@@ -1,17 +1,5 @@
 import { ControlledPromise } from './utils/promise.js'
 
-/**
- * Utility to cache-bust static files. It relies on reading Date header to detect cached response, so it requires CORS
- * settings to be set.
- *
- * It accepts validator function that determines if response is usable. If response was pulled from cache and is valid,
- * the optional callback function is fired right away. Then HEAD request is made bypassing the cache, to see if the
- * response has an newer Last-Modified header. In case it does and it passes validation, third request is fired that
- * actually fetches the new content and callback is invoked the second time.
- *
- * It works as promise, but also accepts callback to use cached blobs mid-flight and have access to headers. Any network
- * errors will not be caught. Function throws when unable to fetch valid response.
- */
 const phases = ['initial', 'check', 'updated'] as const
 export type ValidatableRequestPhase = (typeof phases)[number]
 export type FetchCache = Record<string, FetchCacheRequest>
@@ -38,6 +26,18 @@ export function clearFetchCache() {
   fetchCache = {}
 }
 
+/**
+ * Utility to cache-bust static files. It relies on reading Date header to detect cached response, so it requires CORS
+ * settings to be set.
+ *
+ * It accepts validator function that determines if response is usable. If response was pulled from cache and is valid,
+ * the optional callback function is fired right away. Then HEAD request is made bypassing the cache, to see if the
+ * response has an newer Last-Modified header. In case it does and it passes validation, third request is fired that
+ * actually fetches the new content and callback is invoked the second time.
+ *
+ * It works as promise, but also accepts callback to use cached blobs mid-flight and have access to headers. Any network
+ * errors will not be caught. Function throws when unable to fetch valid response.
+ */
 export async function fetchAndRevalidate(
   url: ValidatableRequest['url'],
   options?: ValidatableRequest['options'],
@@ -51,23 +51,22 @@ export async function fetchAndRevalidate(
     .then((result) => result.response)
 }
 
-export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = false) {
-  const key = String(url).replace('?head', '')
-  var cache = fetchCache[key]
-  if (!cache && !dontCreate) {
-    cache = fetchCache[key] = {
-      phase: null,
-      initial: ControlledPromise(),
-      check: ControlledPromise(),
-      updated: ControlledPromise(),
-      final: ControlledPromise()
-    }
-  }
-  return cache
-}
-
-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 +106,31 @@ export async function fetchWithCacheAwareness(
   }
 }
 
+export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = false) {
+  const key = String(url).replace('?head', '')
+  var cache = fetchCache[key]
+  if (!cache && !dontCreate) {
+    cache = fetchCache[key] = {
+      phase: null,
+      initial: ControlledPromise(),
+      check: ControlledPromise(),
+      updated: ControlledPromise(),
+      final: ControlledPromise()
+    }
+  }
+  return cache
+}
+
+export class InvalidResponse extends Error {}
+
+/**
+ * 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/data.ts

@@ -7,11 +7,15 @@ export function queryObjectRaw(json: any, path: string) {
     return []
   }
 }
-export function queryObject(json: any, path: string) {
-  return queryObjectRaw(json, path)?.flat(Infinity) || []
+export function queryObject(json: any, path: string, flatten = true) {
+  const data = queryObjectRaw(json, path) || []
+  if (flatten) {
+    return data.flat(Infinity)
+  }
+  return data
 }
 
-export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
+export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes, flatten = true) {
   var path = datapath
   /* find closest parent scope */
   const keys = Object.keys(scopes).sort((b, a) => a.length - b.length)
@@ -30,11 +34,11 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
     }
   }
 
-  var collection = queryObject(json, path)
+  var collection = queryObject(json, path, flatten)
 
   // If regular path didn't match any data, try fallbacks
   // datasourceId.wrapper.$.path
-  if (Array.isArray(collection) && collection?.length == 0) {
+  if (collection.length == 0) {
     collection = [
       // look up in `_` datasource id (catch-all id is used in JSS)
       //   _.wrapper.$.path
@@ -56,11 +60,11 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
     ]
       .filter((v, i, a) => a.indexOf(v) === i)
       .reduce((v, path) => {
-        return v.length > 0 ? v : queryObject(json, path)
+        return v.length > 0 ? v : queryObject(json, path, flatten)
       }, [] as any[])
   }
 
-  if (singleValue && Array.isArray(collection)) {
+  if (singleValue) {
     return collection[0]
   } else {
     return collection

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 (

package/test/FEAASComponent.react.test.tsx

@@ -9,8 +9,8 @@ function Hello(props: { firstName: string; telephone: string }) {
   return React.createElement(
     'div',
     {},
-    `Hello my name is ${props.firstName} (${typeof props.firstName}) and my tel is ${
-      props.telephone
+    `Hello my name is ${props.firstName || 'Unknown'} (${typeof props.firstName}) and my tel is ${
+      props.telephone || 'Unknown'
     } (${typeof props.telephone}). And context value is ${context}`
   )
 }
@@ -169,7 +169,23 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-external-id="MyTestComponent" data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-external-id="MyTestComponent" data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" datasources="{&quot;_&quot;:{&quot;telephone&quot;:321}}" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render not map attributes of external component with given array', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external first-name="Yarik" data-path-attributes="$" data-external-id="MyTestComponent"></feaas-external>'
+            }
+            data={[{ telephone: 321 }]}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component class="-feaas" data="[{&quot;telephone&quot;:321}]"><feaas-external data-external-id="MyTestComponent" first-name="Yarik" data-path-attributes="$" datasources="{&quot;_&quot;:[{&quot;telephone&quot;:321}]}" hydrate="false"><div>Hello my name is Yarik (string) and my tel is Unknown (undefined). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
 })

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,7 +43,7 @@ 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', () => {
@@ -116,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()
@@ -139,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 () => {
@@ -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,63 @@ 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('TODAY', {
+        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()
+            }
+          })
+        }
       }
     })
 
@@ -278,15 +325,65 @@ 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, 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('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()
+            }
+          })
+        }
+      }
+    })
+
+    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, 100))
+    expect(spy).toHaveBeenCalledTimes(4)
+    expect(document.head.querySelectorAll('style').length).toBe(1)
+  })
+
   it('should revalidate cached component response', async () => {
     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') && 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', () => {