Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit c333e2f

Browse files
utkarsha-derivutkarsha-deriv
committed
fix: merge design changes
2 parents 904d661 + 7aaa7bd commit c333e2f

File tree

24 files changed

+514
-228
lines changed

24 files changed

+514
-228
lines changed

‎docs/languages/javascript/websocket-connection/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ If you're not familiar with WebSockets, please check out [our documentation](/do
1717
:::
1818

1919
### Set up a WebSocket connection
20+
2021
<!-- To create a websocket connection, we want to use the Deriv websocket URL with an `app_id`. You can create your own app_id within your [dashboard](/dashboard) or keep the default `1089` app_id for testing. Keep in mind that eventually, you should make your own app_id. Especially if you would like to monetize your application. -->
2122

2223
Next, we'll create a WebSocket connection to Deriv WebSocket Server as seen below:

‎src/components/ApiTokenNavbarItem/api_token_switcher.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
@media (max-width: 1200px) {
122122
position: fixed;
123123
width: 100%;
124-
top: calc(var(--nav-height) + rem(3.3));
124+
top: calc(var(--nav-height) + rem(7));
125125
left: 0;
126126
right: 0;
127127
}

‎src/components/CustomSelectDropdown/custom_select_dropdown.module.scss‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,93 @@
11
@use 'src/styles/utility' as *;
22

33
.customSelectField {
4+
position: relative;
5+
.dropdownWrapper {
6+
.dropdown {
7+
position: absolute;
8+
max-height: 200px;
9+
overflow-y: auto;
10+
top: 40px;
11+
left: 0;
12+
gap: rem(1);
13+
width: 100%;
14+
z-index: 10;
15+
padding: rem(1);
16+
background-color: var(--ifm-color-emphasis-0);
17+
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
18+
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
19+
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
20+
}
21+
}
22+
.selectWrapper {
423
position: relative;
5-
.dropdownWrapper {
6-
.dropdown {
7-
position: absolute;
8-
max-height: 200px;
9-
overflow-y: auto;
10-
top: 40px;
11-
left: 0;
12-
gap: rem(1);
13-
width: 100%;
14-
z-index: 10;
15-
padding: rem(1);
16-
background-color: var(--ifm-color-emphasis-0);
17-
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
18-
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
19-
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
20-
}
24+
margin: rem(1) 0;
25+
width: 100%;
26+
height: rem(4);
27+
line-height: 36px;
28+
border-radius: rem(1.6);
29+
font-size: rem(1.6);
30+
padding: 0 rem(3) 0 rem(1);
31+
color: var(--ifm-color-emphasis-1000);
32+
border: 1px solid var(--colors-greyLight400);
33+
34+
&.error {
35+
border: 1px solid var(--colors-coral500);
36+
}
37+
&:hover {
38+
border-color: var(--ifm-color-emphasis-500);
39+
}
40+
&:focus {
41+
outline: solid 1px var(--colors-blue500);
42+
border-radius: rem(1.6);
43+
.selectLabel {
44+
color: var(--colors-blue500) !important;
45+
}
46+
}
47+
&:after {
48+
content: '';
49+
position: absolute;
50+
display: inline-block;
51+
top: 0;
52+
right: 0;
53+
bottom: 0;
54+
width: 40px;
55+
background-position: center;
56+
background-repeat: no-repeat;
57+
background-image: url(/static/img/arrow_down.svg);
58+
border-radius: rem(1.6);
59+
pointer-events: none;
60+
transform: rotate(0deg);
61+
transition: transform 0.2s;
62+
}
63+
&.active {
64+
&:after {
65+
transform: rotate(180deg);
66+
}
67+
.dropdownWrapper {
68+
display: inline-block;
69+
}
70+
}
71+
&.inactive .dropdownWrapper {
72+
display: none;
2173
}
22-
.selectWrapper {
23-
position: relative;
24-
margin: rem(1) 0;
25-
width: 100%;
26-
height: rem(4);
27-
line-height: 36px;
28-
border-radius: 3px;
29-
font-size: rem(1.6);
30-
padding: 0 rem(3) 0 rem(1);
74+
.selectLabel {
75+
color: var(--colors-greyLight600);
76+
width: 100%;
77+
height: 100%;
78+
display: inline-block;
79+
&.active {
3180
color: var(--ifm-color-emphasis-1000);
32-
border: 1px solid var(--colors-greyLight400);
33-
34-
&.error {
35-
border: 1px solid var(--colors-coral500);
36-
}
37-
&:hover {
38-
border-color: var(--ifm-color-emphasis-500);
39-
}
40-
&:focus {
41-
outline: solid 1px var(--colors-blue500);
42-
border-radius: 3px;
43-
.selectLabel {
44-
color: var(--colors-blue500) !important;
45-
}
46-
}
47-
&:after {
48-
content: "";
49-
position: absolute;
50-
display: inline-block;
51-
top: 0;
52-
right: 0;
53-
bottom: 0;
54-
width: 40px;
55-
background-position: center;
56-
background-repeat: no-repeat;
57-
background-image: url(/static/img/arrow_down.svg);
58-
border-radius: 3px;
59-
pointer-events: none;
60-
transform: rotate(0deg);
61-
transition: transform .2s;
62-
}
63-
&.active {
64-
&:after {
65-
transform: rotate(180deg);
66-
}
67-
.dropdownWrapper {
68-
display: inline-block;
69-
}
70-
}
71-
&.inactive .dropdownWrapper {
72-
display: none;
73-
}
74-
.selectLabel {
75-
color: var(--colors-greyLight600);
76-
width: 100%;
77-
height: 100%;
78-
display: inline-block;
79-
&.active {
80-
color: var(--ifm-color-emphasis-1000);
81-
position: absolute;
82-
font-size: rem(1.2);
83-
background-color: var(--ifm-color-emphasis-0);
84-
bottom: rem(3.7);
85-
left: rem(1);
86-
padding: 0 rem(0.4);
87-
line-height: rem(1);
88-
height: auto;
89-
width: auto;
90-
}
91-
}
81+
position: absolute;
82+
font-size: rem(1.2);
83+
background-color: var(--ifm-color-emphasis-0);
84+
bottom: rem(3.7);
85+
left: rem(1);
86+
padding: 0 rem(0.4);
87+
line-height: rem(1);
88+
height: auto;
89+
width: auto;
90+
}
9291
}
92+
}
9393
}

‎src/components/UserNavbarItem/UserNavbarItem.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
border: 2px solid var(--colors-coral500);
1111
border-radius: rem(1.6);
1212
padding: rem(1) rem(1.6);
13-
height: rem(4);
13+
height: rem(1.5);
1414
}
1515
}
1616

‎src/components/UserNavbarItem/__tests__/item.desktop.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,12 @@ describe('User Navbar Desktop Item', () => {
4242
});
4343

4444
it('Should render login link navbar item', async () => {
45-
const login_nav_button = screen.getByRole<HTMLAnchorElement>('link', { name: /log in/i });
46-
expect(login_nav_button).toHaveAttribute('href', 'https://www.example.com');
45+
const login_nav_button = screen.getByRole('button', { name: /log in/i });
46+
expect(login_nav_button).toBeVisible();
47+
48+
await userEvent.click(login_nav_button);
49+
50+
expect(location.href).toBe('https://www.example.com/');
4751
});
4852
});
4953
describe('Given user is logged in', () => {

‎src/components/UserNavbarItem/item.desktop.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import SearchButton from '../SearchButton';
99
const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
1010
const [toggle_search, setToggleSearch] = useState<boolean>(false);
1111

12+
const handleClick = () => {
13+
location.assign(authUrl);
14+
};
15+
1216
const logInButtonClasses = clsx(
1317
'navbar__item navbar__link',
1418
styles.UserNavbarItem,
@@ -24,10 +28,10 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
2428
<AccountSwitcher />
2529
) : (
2630
<nav className={`right-navigation ${toggle_search ? 'search-open' : 'search-closed'}`}>
27-
<Link to={authUrl} className={logInButtonClasses}>
31+
<button onClick={handleClick} className={logInButtonClasses}>
2832
Log in
29-
</Link>
30-
<Link to={'https://deriv.com/signup/'} className={signUpButtonClasses} target='_blank'>
33+
</button>
34+
<Link to={'https://deriv.com/signup/'} className={signUpButtonClasses}>
3135
Sign up
3236
</Link>
3337
<SearchButton setToggleSearch={setToggleSearch} toggle_search={toggle_search} />

‎src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx‎

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import userEvent from '@testing-library/user-event';
3-
import { cleanup, render, screen } from '@testing-library/react';
3+
import { cleanup, render, screen, waitFor } from '@testing-library/react';
44
import SubscribeRenderer from '..';
55
import useAuthContext from '@site/src/hooks/useAuthContext';
66
import useSubscription from '@site/src/hooks/useSubscription';
77
import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
88
import { IAuthContext } from '@site/src/contexts/auth/auth.context';
9+
import LoginDialog from '../../LoginDialog';
910

1011
jest.mock('@site/src/hooks/useAuthContext');
1112

@@ -78,39 +79,82 @@ describe('SubscribeRenderer', () => {
7879
expect(button).toBeVisible();
7980
});
8081

82+
it('should throw an error if incorrect json is being parsed', async () => {
83+
const consoleOutput = [];
84+
const mockedError = (output) => consoleOutput.push(output);
85+
console.error = mockedError;
86+
87+
render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
88+
const button = await screen.findByRole('button', { name: /Send Request/i });
89+
await userEvent.click(button);
90+
91+
expect(consoleOutput[0]).toEqual(
92+
'Could not parse the JSON data while trying to send the request: ',
93+
);
94+
});
95+
8196
it('should call subscribe and unsubscribe when pressing the send request button', async () => {
97+
jest.spyOn(React, 'useRef').mockReturnValue({
98+
current: {
99+
unsubscribe: mockUnsubscribe,
100+
},
101+
});
82102
render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
83103
const button = await screen.findByRole('button', { name: /Send Request/i });
84104
expect(button).toBeVisible();
85105

86106
await userEvent.click(button);
87-
88107
expect(mockUnsubscribe).toBeCalledTimes(1);
89108
expect(mockSubscribe).toBeCalledTimes(1);
90109
expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
91110
});
92111

93112
it('should call unsubscribe when pressing the clear button', async () => {
113+
jest.spyOn(React, 'useRef').mockReturnValue({
114+
current: {
115+
unsubscribe: mockUnsubscribe,
116+
},
117+
});
94118
render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
95119
const button = await screen.findByRole('button', { name: 'Clear' });
96120
expect(button).toBeVisible();
97121

98122
await userEvent.click(button);
99-
100123
expect(mockUnsubscribe).toBeCalledTimes(1);
101124
});
102125

103-
it('should throw an error if incorrect json is being parsed', async () => {
104-
const consoleOutput = [];
105-
const mockedError = (output) => consoleOutput.push(output);
106-
console.error = mockedError;
126+
it('should call unsubscribe when unmounting the component', async () => {
127+
jest.spyOn(React, 'useRef').mockReturnValue({
128+
current: {
129+
unsubscribe: mockUnsubscribe,
130+
},
131+
});
132+
const { unmount } = render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
133+
unmount();
134+
expect(mockUnsubscribe).toBeCalledTimes(1);
135+
});
136+
it('should call login dialog when the error code is not authourized', async () => {
137+
const setToggleModal = jest.fn();
138+
jest.spyOn(React, 'useState').mockReturnValue([false, setToggleModal]);
139+
mockUseAuthContext.mockImplementation(() => ({
140+
is_logged_in: false,
141+
is_authorized: false,
142+
}));
143+
mockUseSubscription.mockImplementation(() => ({
144+
subscribe: mockSubscribe,
145+
unsubscribe: mockUnsubscribe,
146+
error: { code: 'AuthorizationRequired' },
147+
full_response: {
148+
tick: 1,
149+
echo_req: { tick: 1 },
150+
},
151+
}));
107152

108-
render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
153+
render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
109154
const button = await screen.findByRole('button', { name: /Send Request/i });
110155
await userEvent.click(button);
111-
112-
expect(consoleOutput[0]).toEqual(
113-
'Could not parse the JSON data while trying to send the request: ',
114-
);
156+
await waitFor(() => {
157+
expect(setToggleModal).toHaveBeenCalled();
158+
});
115159
});
116160
});

0 commit comments

Comments
 (0)