From d22c47b39dd4896a6ab5a1d2e3d988a239400e59 Mon Sep 17 00:00:00 2001 From: Tami Takamiya Date: Fri, 3 Jan 2025 08:03:52 -0500 Subject: [PATCH] Update ColorThemeSwitch and its unit test (#1471) --- ansible_ai_connect_chatbot/src/App.test.tsx | 14 +++++--------- .../src/ColorThemeSwitch/ColorThemeSwitch.tsx | 14 +++++++------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/ansible_ai_connect_chatbot/src/App.test.tsx b/ansible_ai_connect_chatbot/src/App.test.tsx index 4f51a9665..cc0f36cc8 100644 --- a/ansible_ai_connect_chatbot/src/App.test.tsx +++ b/ansible_ai_connect_chatbot/src/App.test.tsx @@ -371,19 +371,15 @@ test("Color theme switch", async () => { if (colorThemeSwitch) { expect(colorThemeSwitch.checked).toBeFalsy(); - const { getComputedStyle } = window; - const showLight = view.container.querySelector(".show-light"); - const showDark = view.container.querySelector(".show-dark"); - expect(getComputedStyle(showLight!).display).toEqual("block"); - - // NOTE: seem to be broken? - // expect(getComputedStyle(showDark!).display).toEqual("none") + const htmlElementClassList = + document.getElementsByTagName("html")[0].classList; + expect(htmlElementClassList.length).equals(0); await colorThemeSwitch.click(); expect(colorThemeSwitch.checked).toBeTruthy(); - // expect(getComputedStyle(showLight!).display).toEqual("none") - expect(getComputedStyle(showDark!).display).toEqual("block"); + expect(htmlElementClassList.length).equals(1); + expect(htmlElementClassList[0]).equals("pf-v6-theme-dark"); } }); diff --git a/ansible_ai_connect_chatbot/src/ColorThemeSwitch/ColorThemeSwitch.tsx b/ansible_ai_connect_chatbot/src/ColorThemeSwitch/ColorThemeSwitch.tsx index a7a3a47cb..c0f39b44d 100644 --- a/ansible_ai_connect_chatbot/src/ColorThemeSwitch/ColorThemeSwitch.tsx +++ b/ansible_ai_connect_chatbot/src/ColorThemeSwitch/ColorThemeSwitch.tsx @@ -8,13 +8,13 @@ export const ColorThemeSwitch = () => { checked: boolean, ) => { setIsChecked(checked); - const element = document.getElementsByTagName("html"); - element[0].classList.remove( - checked ? "pf-v6-theme-light" : "pf-v6-theme-dark", - ); - element[0].classList.add( - checked ? "pf-v6-theme-dark" : "pf-v6-theme-light", - ); + const htmlElementClassList = + document.getElementsByTagName("html")[0].classList; + if (checked) { + htmlElementClassList.add("pf-v6-theme-dark"); + } else { + htmlElementClassList.remove("pf-v6-theme-dark"); + } }; return (