working

src/modules/nestedMenu/components/nestedSubMenu/item.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {randomInteger} from "../../services/randomInteger";
-import {checkStyle, createStyleElement} from "../../services/createStyleElement";
+import {parseStyle, createStyleElement} from "../../services/createStyleElement";
 
 const styles = {
     root: {
@@ -10,7 +10,7 @@ const styles = {
 
 export function Item({name, selected, children}:{name:string, selected:boolean, children:any}){
     let id = `nestedMenuItem_${randomInteger()}`
-    createStyleElement(id,checkStyle(name))
+    createStyleElement(id,parseStyle(name))
     return <div id={id} className={`nestedMenu_item ${selected&&'selected'}`} style={styles.root}>
         {children}
     </div>

src/modules/nestedMenu/components/nestedSubMenu/nestedSubMenu2.component.tsx

@@ -3,6 +3,7 @@ import {NestedMenuContent} from "../../../shared/services/content.service";
 import {Item} from "./item.component";
 import {AnalyticsLink} from "./analyticsLink.component";
 import {SubCategory} from "./subCategory.component";
+import {parseStyle} from "../../services/createStyleElement";
 
 const styles = {
     root: {
@@ -69,14 +70,21 @@ export function NestedSubMenu2({menuJson, order}:{menuJson:NestedMenuContent,ord
         setFocus(order);
     }
 
+    let windowCss;
+    const isStyleOnly = name=>/^\{.+\}$/.test(name)
+    let first:string = Object.keys(menuJson)[0];
+    if (isStyleOnly(first)) windowCss = parseStyle(first);
+    let id = `subMenu_${Math.floor(Math.random()*1e7)}`
     return <>
-        <div style={Object.assign({},styles.root,getBorderRadius(position))} className={`nestedSubMenu subMenu_${order} ${order>0?'appear':''}`}>
-            {Object.keys(menuJson).map((category,index)=><Item name={category} key={index} selected={selectedKey===category}>
+        <div id={id} style={Object.assign({},styles.root,getBorderRadius(position))} className={`nestedSubMenu subMenu_${order} ${order>0?'appear':''}`}>
+            {Object.keys(menuJson).filter((category)=>!isStyleOnly(category)).map((category,index)=><Item name={category} key={index} selected={selectedKey===category}>
                 {typeof menuJson[category] === 'string' ?
                     <AnalyticsLink link={menuJson[category] as string} name={category} key={index}/>
                     :<SubCategory onClick={()=>onSetCategory(category)} name={category} />}
             </Item>)}
         </div>
+        {windowCss&&<style>{`#${id}{${windowCss}}`}</style>}
+        {windowCss&&<div>{`#${id}{${windowCss}}`}</div>}
         {selectedKey&&<NestedSubMenu2 menuJson={menuJson[selectedKey] as NestedMenuContent} order={order+1}/>}
     </>
 }

src/modules/nestedMenu/services/createStyleElement.tsx

@@ -10,7 +10,7 @@ export function removeStyle(category:string):string{
     return category.replace(/\{.+\}/, '')
 }
 
-export function checkStyle(category:string):string|null{
+export function parseStyle(category:string):string|null{
     if (!/\{.+\}/.test(category)) return null;
     let r = category.match(/\{.+\}/);
     return r&&r[0]

src/test/nestedMenu/06.nestedMemuCss.test.tsx

@@ -15,5 +15,5 @@ test('5 > Nested menu',async ()=>{
     mockContent(widgetContent);
     await setUpComponent(<Index/>, ['Results','Targets']);
     expect(getComputedStyle(document.querySelector('[id*="nestedMenu"]') as HTMLElement).height).toEqual('200px')
-    expect(getComputedStyle(screen.getByText('Results').parentElement as HTMLElement)['font-weight']).toEqual('500')
+    expect(getComputedStyle(screen.getByText('Results').parentElement as HTMLElement)['font-weight']).toEqual('700')
 })

src/test/nestedMenu/08.nestedSubMenuStyle.test.tsx

@@ -0,0 +1,23 @@
+import {initServerSettings, mockContent, setUpComponent} from "../shared.testServices";
+import {readFileSync} from "fs";
+import {screen} from "@testing-library/react";
+import {Index} from "../../modules/main/components/index.component";
+import {debug} from "@pepfar-react-lib/testwrap";
+import {clickByText} from "@pepfar-react-lib/testwrap/jsbuild";
+
+let widgetContent:string = readFileSync(`${__dirname}/serverResponseSubMenuCss.html`).toString();
+
+const checkStyle = (selector:string,property:string,value:string)=>expect(getComputedStyle(document.querySelector(selector) as HTMLElement)[property]).toEqual(value)
+
+test('7 > Nested sub-menu style',async ()=>{
+    initServerSettings({
+        superUserOnly: false,
+        isSuperAdmin: true,
+        onEditPage: false,
+    })
+    mockContent(widgetContent);
+    await setUpComponent(<Index/>, ['Results','Targets']);
+    checkStyle('.subMenu_0','font-weight','700')
+    clickByText('Results')
+    checkStyle('.subMenu_1','color','red')
+})

src/test/nestedMenu/23.childStyle.test.ts

@@ -1,4 +1,4 @@
-import {checkStyle} from "../../modules/nestedMenu/services/createStyleElement";
+import {parseStyle} from "../../modules/nestedMenu/services/createStyleElement";
 
 type TestCase = {
     input:string;
@@ -23,5 +23,5 @@ const testCases:TestCase[] = [{
 }]
 
 testCases.forEach(({input,output})=>test(`23 > child style > ${input}`,()=>{
-    expect(checkStyle(input)).toBe(output)
+    expect(parseStyle(input)).toBe(output)
 }))

src/test/nestedMenu/serverResponseCss.html

@@ -1,4 +1,4 @@
-<pre type="nestedMenu" style="height:200px">Results {font-weight: 500}:
+<pre type="nestedMenu" style="height:200px">Results {font-weight: 700}:
   Prevention:
     VMMC_CIRC:
       Age/sex {background-color: #b7db8f}: