Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lykhoyda
Lykhoyda committed Jan 25, 2024
1 parent d0a07a7 commit 2095cfc
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 55 deletions.
12 changes: 6 additions & 6 deletions packages/widget/src/components/network-selector/network-selector.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class NetworkSelector extends LitElement {
static styles = styles;

@state()
private _isDropdownOpen = false;
_isDropdownOpen = false;

@property({ type: Boolean })
disabled = false;
Expand All @@ -35,22 +35,22 @@ export class NetworkSelector extends LitElement {
@property({ type: Array })
networks: Domain[] = [];

private _toggleDropdown = (): void => {
_toggleDropdown = (): void => {
this._isDropdownOpen = !this._isDropdownOpen;
};

private _selectOption(option: Domain, event: Event): void {
_selectOption(option: Domain, event: Event): void {
event.stopPropagation();
this.selectedNetwork = option;
this.onNetworkSelected?.(option);
this._isDropdownOpen = false;
}

private _renderNetworkIcon(name: string): HTMLTemplateResult {
_renderNetworkIcon(name: string): HTMLTemplateResult {
return networkIconsMap[name] || networkIconsMap.default;
}

private _renderEntries(): Generator<unknown, void> | HTMLTemplateResult {
_renderEntries(): Generator<unknown, void> | HTMLTemplateResult {
return map(
this.networks,
(network: Domain) => html`
Expand All @@ -66,7 +66,7 @@ export class NetworkSelector extends LitElement {
);
}

private _renderTriggerContent(): HTMLTemplateResult {
_renderTriggerContent(): HTMLTemplateResult {
return this.selectedNetwork
? html`${this._renderNetworkIcon(this.selectedNetwork.name)}
<span class="networkName">
Expand Down
43 changes: 19 additions & 24 deletions packages/widget/src/components/network-selector/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,24 @@ import { css } from 'lit';

export const styles = css`
.selectorContainer {
border-radius: 24px;
border: 1px solid #e4e4e7;
border-radius: 1.5rem;
border: 0.0625rem solid #e4e4e7;
display: flex;
width: 314px;
width: 100%;
max-width: 19.625rem;
max-height: 4.625rem;
padding: 12px 16px;
padding: 0.75rem 1rem;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 4px;
gap: 0.25rem;
}
.directionLabel {
color: #a1a1aa;
font-size: 0.875rem;
font-weight: 500;
line-height: 20px;
line-height: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -31,16 +32,16 @@ export const styles = css`
.selector {
width: 100%;
color: #525252;
font-size: 18px;
font-size: 1.125rem;
font-weight: 500;
line-height: 26px;
line-height: 1.625rem;
border: none;
}
.selectorSection {
display: flex;
align-items: center;
gap: 12px;
gap: 0.75rem;
}
.dropdown {
Expand All @@ -59,16 +60,8 @@ export const styles = css`
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 8px;
padding: 0.25rem 0;
box-sizing: border-box;
input {
color: #525252;
font-size: 1.125rem;
font-weight: 500;
border: none;
outline: none;
}
}
.chevron {
Expand All @@ -86,11 +79,12 @@ export const styles = css`
background-color: white;
width: 100%;
border-radius: 0.75rem;
border: 1px solid #f3f4f6;
border: 0.0625rem solid #f3f4f6;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
z-index: 1;
margin-top: 1rem;
}
.show {
Expand All @@ -100,7 +94,7 @@ export const styles = css`
.dropdownOption {
display: flex;
align-items: center;
padding: 12px 16px;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
Expand All @@ -116,9 +110,10 @@ export const styles = css`
.networkIcon {
display: block;
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
}
.networkName {
margin-left: 0.5rem;
}
Expand Down
86 changes: 61 additions & 25 deletions packages/widget/tests/unit/components/network-selector/network-selector.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { getDiffableHTML } from '@open-wc/semantic-dom-diff';
import { fixture, fixtureCleanup, oneEvent } from '@open-wc/testing-helpers';
import { fixture, fixtureCleanup } from '@open-wc/testing-helpers';
import { html } from 'lit';
import { afterEach, assert, describe, it, vi } from 'vitest';
import { NetworkSelector } from '../../../../src/components';
Expand All @@ -13,43 +13,79 @@ describe('network-selector component', function () {
const el = document.createElement('sygma-network-selector');
assert.instanceOf(el, NetworkSelector);
});
it('renders single default option if no network supplied', async () => {
const el = await fixture(html`

it('renders text when no network selected', async () => {
const el = await fixture<NetworkSelector>(html`
<sygma-network-selector .networks=${[]}></sygma-network-selector>
`);
assert.equal(el.shadowRoot!.querySelectorAll('.network-option').length, 1);

const networkOption = el.shadowRoot!.querySelector(
'.selectedNetwork'
) as HTMLDivElement;

assert.ok(
networkOption,
'Network option should be present in the component'
);

assert.equal(
getDiffableHTML(el.shadowRoot!.querySelector('.selector')!),
getDiffableHTML(
`<select class="selector">
<option class="network-option" value="-1">-</option>
</select>`
)
getDiffableHTML(networkOption.textContent?.trim() ?? ''),
getDiffableHTML('Select Network')
);
});

it('toggles dropdown on click', async () => {
const networks = [
{ id: '1', name: 'ethereum' },
{ id: '2', name: 'khala' }
];

const el = await fixture<NetworkSelector>(
html`<sygma-network-selector
.networks=${networks}
></sygma-network-selector>`
);
const dropdownTrigger = el.shadowRoot!.querySelector(
'.dropdownTrigger'
) as HTMLDivElement;

assert.ok(
dropdownTrigger,
'Dropdown trigger should be present in the component'
);

// Initial state should be closed
assert.isFalse(el._isDropdownOpen);

// Simulate click to open dropdown
dropdownTrigger?.click();
await el.updateComplete;
assert.isTrue(el._isDropdownOpen);

// Simulate another click to close dropdown
dropdownTrigger?.click();
await el.updateComplete;
assert.isFalse(el._isDropdownOpen);
});

it('triggers callback on network selected', async () => {
const mockNetworkSelectHandler = vi.fn();
const network = { id: 0, chainId: 1, name: 'Test', type: 'evm' };
const el = await fixture(html`
const el = await fixture<NetworkSelector>(html`
<sygma-network-selector
.networks=${[network]}
.onNetworkSelected=${mockNetworkSelectHandler}
></sygma-network-selector>
`);
const networkOptions = el.shadowRoot!.querySelectorAll('.network-option');
assert.equal(networkOptions.length, 2);
const listener = oneEvent(
el.shadowRoot!.querySelector('.selector')!,
'change',
false
);
(el.shadowRoot!.querySelector('.selector') as HTMLSelectElement).value =
'1';
el.shadowRoot!.querySelector('.selector')!.dispatchEvent(
new Event('change')
);
(networkOptions[1] as HTMLOptionElement).selected = true;
await listener;

// Simulate selecting a network
const firstOption = el.shadowRoot!.querySelector(
'.dropdownOption'
) as HTMLDivElement;
assert.ok(firstOption, 'First option should be present in the component');
firstOption.click();
await el.updateComplete;

assert.equal(mockNetworkSelectHandler.mock.calls.length, 1);
assert.deepEqual(mockNetworkSelectHandler.mock.lastCall, [network]);
});
Expand Down

0 comments on commit 2095cfc

Please sign in to comment.