-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: test modal components #3495
Open
tomiir
wants to merge
11
commits into
main
Choose a base branch
from
chore/test-views
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+600
−111
Open
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
b7966d0
chore: add accoubnt-button modal and button missing tests
tomiir b3dc413
chore: add w3m-connect-button tests
tomiir 42278f6
chore: add missing network button tests
tomiir 9265bab
wip: router tests
tomiir 69f773b
Merge branch 'main' of github.com:reown-com/appkit into chore/test-views
tomiir 8e2af1f
Merge branch 'main' into chore/test-views
tomiir b43b9df
chore: remove unused import
tomiir 546d7b6
chore: remove log
tomiir 5fbf653
Merge branch 'chore/test-views' of github.com:reown-com/appkit into c…
tomiir f7b5813
chore: remove router tests as they were not complete
tomiir d819575
Merge branch 'main' into chore/test-views
tomiir File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
chore: add accoubnt-button modal and button missing tests
- Loading branch information
commit b7966d0c44eab139231728e4ed9a1c988eba855e
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 was deleted.
Oops, something went wrong.
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,98 @@ | ||
import { fixture, expect, html } from '@open-wc/testing' | ||
import { vi, describe, it, beforeEach, afterEach } from 'vitest' | ||
import { W3mButton } from '../../src/modal/w3m-button' | ||
import { | ||
ChainController, | ||
ModalController, | ||
type ChainControllerState, | ||
type ModalControllerState | ||
} from '@reown/appkit-core' | ||
import { HelpersUtil } from '../utils/HelpersUtil' | ||
import type { W3mAccountButton } from '../../exports' | ||
|
||
describe('W3mButton', () => { | ||
beforeEach(() => { | ||
vi.spyOn(ChainController, 'state', 'get').mockReturnValue({ | ||
activeCaipAddress: null | ||
} as unknown as ChainControllerState) | ||
|
||
vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ | ||
loading: false | ||
} as ModalControllerState) | ||
|
||
vi.spyOn(ChainController, 'subscribeKey').mockImplementation(() => () => {}) | ||
vi.spyOn(ModalController, 'subscribeKey').mockImplementation(() => () => {}) | ||
}) | ||
|
||
afterEach(() => { | ||
vi.clearAllMocks() | ||
}) | ||
|
||
it('renders connect button when not connected', async () => { | ||
const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`) | ||
const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button') | ||
const accountButton = HelpersUtil.querySelect(element, 'appkit-account-button') | ||
|
||
expect(connectButton).to.exist | ||
expect(accountButton).to.not.exist | ||
}) | ||
|
||
it('renders account button when connected', async () => { | ||
vi.spyOn(ChainController, 'state', 'get').mockReturnValue({ | ||
activeCaipAddress: 'eip155:1:0x123' | ||
} as unknown as ChainControllerState) | ||
|
||
const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`) | ||
const accountButton = HelpersUtil.querySelect(element, 'appkit-account-button') | ||
const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button') | ||
|
||
expect(accountButton).to.exist | ||
expect(connectButton).to.not.exist | ||
}) | ||
|
||
it('renders connect button when loading', async () => { | ||
vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ | ||
loading: true | ||
} as ModalControllerState) | ||
|
||
const element: W3mButton = await fixture(html`<appkit-button></appkit-button>`) | ||
const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button') | ||
|
||
expect(connectButton).to.exist | ||
}) | ||
|
||
it('passes properties to account button correctly', async () => { | ||
vi.spyOn(ChainController, 'state', 'get').mockReturnValue({ | ||
activeCaipAddress: 'eip155:1:0x123' | ||
} as unknown as ChainControllerState) | ||
|
||
const element: W3mButton = await fixture( | ||
html`<appkit-button | ||
.disabled=${true} | ||
balance="1 ETH" | ||
.charsStart=${2} | ||
.charsEnd=${4} | ||
></appkit-button>` | ||
) | ||
|
||
const accountButton = HelpersUtil.querySelect( | ||
element, | ||
'appkit-account-button' | ||
) as W3mAccountButton | null | ||
expect(accountButton?.getAttribute('balance')).to.equal('1 ETH') | ||
expect(accountButton?.charsStart).to.equal(2) | ||
expect(accountButton?.charsEnd).to.equal(4) | ||
expect(accountButton?.disabled).to.equal(true) | ||
}) | ||
|
||
it('passes properties to connect button correctly', async () => { | ||
const element: W3mButton = await fixture( | ||
html`<appkit-button size="md" label="Connect" loadingLabel="Connecting..."></appkit-button>` | ||
) | ||
|
||
const connectButton = HelpersUtil.querySelect(element, 'appkit-connect-button') | ||
expect(connectButton?.getAttribute('size')).to.equal('md') | ||
expect(connectButton?.getAttribute('label')).to.equal('Connect') | ||
expect(connectButton?.getAttribute('loadingLabel')).to.equal('Connecting...') | ||
}) | ||
}) |
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,201 @@ | ||
import { W3mModal } from '../../src/modal/w3m-modal' | ||
import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest' | ||
import { elementUpdated, fixture } from '@open-wc/testing' | ||
import { html } from 'lit' | ||
import { | ||
ModalController, | ||
OptionsController, | ||
ChainController, | ||
RouterController, | ||
ApiController, | ||
EventsController | ||
} from '@reown/appkit-core' | ||
import { HelpersUtil } from '../utils/HelpersUtil' | ||
import type { RouterControllerState } from '@reown/appkit-core' | ||
import type { CaipNetwork } from '@reown/appkit-common' | ||
|
||
// Mock ResizeObserver | ||
beforeAll(() => { | ||
global.ResizeObserver = vi.fn().mockImplementation(() => ({ | ||
observe: vi.fn(), | ||
unobserve: vi.fn(), | ||
disconnect: vi.fn() | ||
})) | ||
}) | ||
|
||
describe('W3mModal', () => { | ||
describe('Embedded Mode', () => { | ||
let element: W3mModal | ||
|
||
beforeEach(async () => { | ||
OptionsController.setEnableEmbedded(true) | ||
ModalController.close() | ||
element = await fixture(html`<w3m-modal .enableEmbedded=${true}></w3m-modal>`) | ||
}) | ||
|
||
afterEach(() => { | ||
vi.clearAllMocks() | ||
}) | ||
|
||
it('should be visible when embedded is enabled', () => { | ||
expect(element).toBeTruthy() | ||
const card = HelpersUtil.getByTestId(element, 'w3m-modal-card') | ||
expect(card).toBeTruthy() | ||
expect(HelpersUtil.querySelect(element, 'w3m-header')).toBeTruthy() | ||
expect(HelpersUtil.querySelect(element, 'w3m-router')).toBeTruthy() | ||
expect(HelpersUtil.querySelect(element, 'w3m-snackbar')).toBeTruthy() | ||
expect(HelpersUtil.querySelect(element, 'w3m-alertbar')).toBeTruthy() | ||
expect(HelpersUtil.querySelect(element, 'w3m-tooltip')).toBeTruthy() | ||
}) | ||
|
||
it('should not render overlay in embedded mode', () => { | ||
const overlay = HelpersUtil.getByTestId(element, 'w3m-modal-overlay') | ||
expect(overlay).toBeNull() | ||
}) | ||
|
||
it('should close modal when wallet is connected', async () => { | ||
ModalController.open() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
;(element as any).caipAddress = 'eip155:1:0x123...' | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
expect(ModalController.state.open).toBe(false) | ||
}) | ||
}) | ||
|
||
describe('Standard Mode', () => { | ||
let element: W3mModal | ||
|
||
beforeEach(async () => { | ||
OptionsController.setEnableEmbedded(false) | ||
ModalController.close() | ||
vi.spyOn(ApiController, 'prefetch').mockImplementation(() => Promise.resolve()) | ||
element = await fixture(html`<w3m-modal></w3m-modal>`) | ||
}) | ||
|
||
it('should not be visible when closed', () => { | ||
expect(HelpersUtil.getByTestId(element, 'w3m-modal-overlay')).toBeNull() | ||
}) | ||
|
||
it('should be visible when opened', async () => { | ||
await ModalController.open() | ||
|
||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
expect(HelpersUtil.getByTestId(element, 'w3m-modal-overlay')).toBeTruthy() | ||
expect(HelpersUtil.getByTestId(element, 'w3m-modal-card')).toBeTruthy() | ||
}) | ||
|
||
it('should handle overlay click', async () => { | ||
ModalController.open() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
const overlay = HelpersUtil.getByTestId(element, 'w3m-modal-overlay') | ||
overlay?.click() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
expect(ModalController.state.open).toBe(false) | ||
}) | ||
|
||
it('should add shake class when shaking', async () => { | ||
ModalController.open() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
ModalController.shake() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
const card = HelpersUtil.getByTestId(element, 'w3m-modal-card') | ||
expect(card?.getAttribute('shake')).toBe('true') | ||
}) | ||
|
||
it('prevents closing on unsupported chain', async () => { | ||
vi.spyOn(RouterController, 'state', 'get').mockReturnValue({ | ||
view: 'UnsupportedChain' | ||
} as RouterControllerState) | ||
const shakeSpy = vi.spyOn(ModalController, 'shake') | ||
|
||
ModalController.open() | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
const overlay = HelpersUtil.getByTestId(element, 'w3m-modal-overlay') | ||
overlay?.click() | ||
|
||
expect(shakeSpy).toHaveBeenCalled() | ||
expect(ModalController.state.open).toBe(true) | ||
}) | ||
}) | ||
|
||
describe('Network Changes', () => { | ||
let element: W3mModal | ||
|
||
beforeEach(async () => { | ||
element = await fixture(html`<w3m-modal></w3m-modal>`) | ||
}) | ||
|
||
it('should handle network change when not connected', async () => { | ||
const goBackSpy = vi.spyOn(RouterController, 'goBack') | ||
const nextNetwork = { | ||
id: '2', | ||
name: 'Network 2', | ||
caipNetworkId: 'eip155:2' | ||
} as unknown as CaipNetwork | ||
|
||
ChainController.setActiveCaipNetwork(nextNetwork) | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
expect(goBackSpy).toHaveBeenCalled() | ||
}) | ||
|
||
it('should handle network change when connected', async () => { | ||
const goBackSpy = vi.spyOn(RouterController, 'goBack') | ||
;(element as any).caipAddress = 'eip155:1:0x123' | ||
;(element as any).caipNetwork = { id: '1', name: 'Network 1', caipNetworkId: 'eip155:1' } | ||
|
||
const nextNetwork = { | ||
id: '2', | ||
name: 'Network 2', | ||
caipNetworkId: 'eip155:2' | ||
} as unknown as CaipNetwork | ||
ChainController.setActiveCaipNetwork(nextNetwork) | ||
element.requestUpdate() | ||
await elementUpdated(element) | ||
|
||
expect(goBackSpy).toHaveBeenCalled() | ||
}) | ||
}) | ||
|
||
describe('Initialization', () => { | ||
it('should send modal loaded event', async () => { | ||
const eventSpy = vi.spyOn(EventsController, 'sendEvent') | ||
await fixture(html`<w3m-modal></w3m-modal>`) | ||
|
||
expect(eventSpy).toHaveBeenCalledWith({ type: 'track', event: 'MODAL_LOADED' }) | ||
}) | ||
|
||
it('should prefetch API data', async () => { | ||
const prefetchSpy = vi.spyOn(ApiController, 'prefetch') | ||
await fixture(html`<w3m-modal></w3m-modal>`) | ||
|
||
expect(prefetchSpy).toHaveBeenCalled() | ||
}) | ||
|
||
it('should clean up subscriptions on disconnect', async () => { | ||
const element: W3mModal = await fixture(html`<w3m-modal></w3m-modal>`) | ||
const abortSpy = vi.fn() | ||
;(element as any).abortController = { abort: abortSpy } | ||
|
||
element.disconnectedCallback() | ||
|
||
expect(abortSpy).toHaveBeenCalled() | ||
}) | ||
}) | ||
}) |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Log
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
xD