-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for colorScheme display option
- Loading branch information
Showing
10 changed files
with
390 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
187 changes: 187 additions & 0 deletions
187
specs/specs/aiChat/options/js/displayOptions-colorScheme.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| import {AiChat, createAiChat} from '@nlux-dev/core/src'; | ||
| import {afterEach, beforeEach, describe, expect, it, Mock, vi} from 'vitest'; | ||
| import {adapterBuilder} from '../../../../utils/adapterBuilder'; | ||
| import {AdapterController} from '../../../../utils/adapters'; | ||
| import {waitForRenderCycle} from '../../../../utils/wait'; | ||
|
|
||
| describe('createAiChat() + displayOptions + colorScheme', () => { | ||
| let adapterController: AdapterController | undefined; | ||
| let rootElement: HTMLElement; | ||
| let aiChat: AiChat | undefined; | ||
|
|
||
| let matchMedia: Mock; | ||
| let matchMediaNative: typeof window.matchMedia; | ||
|
|
||
| beforeEach(() => { | ||
| adapterController = adapterBuilder().withFetchText().create(); | ||
| rootElement = document.createElement('div'); | ||
| document.body.append(rootElement); | ||
| matchMedia = vi.fn(() => ({matches: true})); | ||
| matchMediaNative = window.matchMedia; | ||
| (window as unknown as Record<string, unknown>).matchMedia = matchMedia; | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| adapterController = undefined; | ||
| aiChat?.unmount(); | ||
| rootElement?.remove(); | ||
| (window as unknown as Record<string, unknown>).matchMedia = matchMediaNative; | ||
| }); | ||
|
|
||
| describe('When the component is created without a color scheme option', () => { | ||
| describe('When the system default color scheme is light', () => { | ||
| it('The system default light theme scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: false}); | ||
| aiChat = createAiChat().withAdapter(adapterController!.adapter); | ||
|
|
||
| // Act | ||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-light'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('When the system default color scheme is dark', () => { | ||
| it('The system default dark theme scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: true}); | ||
| aiChat = createAiChat().withAdapter(adapterController!.adapter); | ||
|
|
||
| // Act | ||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-dark'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('When a color scheme option is set to light', () => { | ||
| it('The light theme scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: true}); // System default is dark | ||
|
|
||
| // Act | ||
| aiChat = createAiChat() | ||
| .withAdapter(adapterController!.adapter) | ||
| .withDisplayOptions({ | ||
| colorScheme: 'light', | ||
| }); | ||
|
|
||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
|
|
||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-light'); | ||
| }); | ||
|
|
||
| describe('When the color scheme is updated after the component is created', () => { | ||
| it('The new color scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: true}); // System default is dark | ||
| aiChat = createAiChat() | ||
| .withAdapter(adapterController!.adapter) | ||
| .withDisplayOptions({ | ||
| colorScheme: 'light', | ||
| }); | ||
|
|
||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
|
|
||
| // Act | ||
| aiChat.updateProps({ | ||
| displayOptions: { | ||
| colorScheme: 'dark', | ||
| }, | ||
| }); | ||
| await waitForRenderCycle(); | ||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-dark'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('When a color scheme option is unset after the component is created', () => { | ||
| it('The system default color scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: true}); // System default is dark | ||
| aiChat = createAiChat() | ||
| .withAdapter(adapterController!.adapter) | ||
| .withDisplayOptions({ | ||
| colorScheme: 'light', | ||
| }); | ||
|
|
||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
|
|
||
| // Act | ||
| aiChat.updateProps({ | ||
| displayOptions: { | ||
| colorScheme: undefined, | ||
| }, | ||
| }); | ||
| await waitForRenderCycle(); | ||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-dark'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('When the displayOptions are unset after the component is created', () => { | ||
| it('The system default color scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: true}); // System default is dark | ||
| aiChat = createAiChat() | ||
| .withAdapter(adapterController!.adapter) | ||
| .withDisplayOptions({ | ||
| colorScheme: 'light', | ||
| }); | ||
|
|
||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
|
|
||
| // Act | ||
| aiChat.updateProps({ | ||
| displayOptions: undefined, | ||
| }); | ||
| await waitForRenderCycle(); | ||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-dark'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('When a color scheme option is set to dark', () => { | ||
| it('The dark theme scheme should be used', async () => { | ||
| // Arrange | ||
| matchMedia.mockReturnValue({matches: false}); // System default is light | ||
|
|
||
| // Act | ||
| aiChat = createAiChat() | ||
| .withAdapter(adapterController!.adapter) | ||
| .withDisplayOptions({ | ||
| colorScheme: 'dark', | ||
| }); | ||
|
|
||
| aiChat.mount(rootElement); | ||
| await waitForRenderCycle(); | ||
|
|
||
| const aiChatDom = rootElement.querySelector('.nlux-AiChat-root')!; | ||
|
|
||
| // Assert | ||
| expect(aiChatDom.className).toContain('nlux-colorScheme-dark'); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.