diff --git a/README.md b/README.md index 4b481cf492..af89d8385e 100644 --- a/README.md +++ b/README.md @@ -194,7 +194,7 @@ See [contributors section](https://github.com/LiskHQ/lisk-desktop/graphs/contrib ## License -Copyright © 2016-2023 Lisk Foundation +Copyright © 2016-2024 Lisk Foundation This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. diff --git a/docs/CSS_GUIDE.md b/docs/CSS_GUIDE.md index f71681e4df..52c90c0108 100644 --- a/docs/CSS_GUIDE.md +++ b/docs/CSS_GUIDE.md @@ -1,12 +1,12 @@ 1. Define class names in camel-case. 2. For the styling purpose, prefer class names to IDs. -3. Prefer defining variables for all CSS values describing a certain presentational behaviour and used in multiple places (We use ‘css-next’ variables. Read [this](http://cssnext.io/features/#custom-properties-var) for more information). +3. Prefer defining variables for all CSS values describing a certain presentational behavior and used in multiple places (We use ‘css-next’ variables. Read [this](http://cssnext.io/features/#custom-properties-var) for more information). 4. There is common css file in app component and if you use a class Name in more than one components, Add it to this file (don’t use this for child and depend components). 5. Vendor prefixes are not needed since autoprefixer performs this. Read [docs](https://github.com/postcss/autoprefixer) for more information. 6. Please ensure cross browser compatibility for all major browsers. 7. Use ‘:global’ before any global classes because we use css modules and it adds a hash to non global class names. 8. SVG is the preferred format for all the images. -9. Avoid storing images in directories other than [src/assets/images](/src/assets/images). +9. Avoid storing images in directories other than [setup/react/assets/images](/setup/react/assets/images). 10. Try restricting CSS nesting feature to no more than three levels. 11. Flexbox is the exploited layout and hence it’s preferred project wide (check [docs](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information). 12. Use kebab-case for naming the assets. diff --git a/docs/DEVELOPMENT_GUIDE.md b/docs/DEVELOPMENT_GUIDE.md index 9d23076c63..5b3280a782 100644 --- a/docs/DEVELOPMENT_GUIDE.md +++ b/docs/DEVELOPMENT_GUIDE.md @@ -9,9 +9,7 @@ This is a live document, please expect updates and unfinished content. 1. [How Can I Contribute?](CONTRIBUTING_GUIDE.md) 1. [React](REACT_GUIDE.md) 1. [PostCSS](CSS_GUIDE.md) -1. [Testing](TEST_GUIDE.md) 1. [Epic Specification](EPIC_SPECIFICATION_GUIDE.md) -1. [Lisk URL Protocols](PROTOCOL_GUIDE.md) ## Code of Conduct diff --git a/docs/EPIC_SPECIFICATION_GUIDE.md b/docs/EPIC_SPECIFICATION_GUIDE.md index dfc091fce3..94d9e7260c 100644 --- a/docs/EPIC_SPECIFICATION_GUIDE.md +++ b/docs/EPIC_SPECIFICATION_GUIDE.md @@ -1,8 +1,8 @@ -# Lisk Desktop Epic Specificaiton Guideline +# Lisk Desktop Epic Specification Guideline Lisk Desktop team will gather community enhancement proposals in the backlog of the project. -Once a substantial ammount of proposals have been identified as belonging to the same type/category of enhancemnt, an epic will be created to handle the development journey towards it's implementation. +Once a substantial amount of proposals have been identified as belonging to the same type/category of enhancement, an epic will be created to handle the development journey towards it's implementation. ## Table Of Contents @@ -10,10 +10,6 @@ Once a substantial ammount of proposals have been identified as belonging to the 1. [Epic creation best practices](#epic-creation-best-practices) 1. [Epic workflow](#epic-workflow) -## Requirements - -Install [ZenHub](https://www.zenhub.com/) browser extension to your browser (Chrome and Firefox supported) to be able to access the Epic feature of ZenHub in Github - ## Epic creation best practices Please ensure you follow this practices when creating or working in an epic. diff --git a/docs/HARDWARE_WALLET_DEVELOPMENT.md b/docs/HARDWARE_WALLET_DEVELOPMENT.md index 1151b42dab..3a153fd7af 100644 --- a/docs/HARDWARE_WALLET_DEVELOPMENT.md +++ b/docs/HARDWARE_WALLET_DEVELOPMENT.md @@ -1,4 +1,6 @@ -# How to use the Ledger hardware wallet +# How to use the Ledger hardware wallet (Dev Mode) + +Note: This guide is only for development purpose, for production usage please download the Lisk App from Ledger Live. ## Step 1: Manually add the Lisk ledger app to your Ledger hardware wallet diff --git a/docs/PR-GUIDE.md b/docs/PR-GUIDE.md index 89537442f7..fc8f63f665 100644 --- a/docs/PR-GUIDE.md +++ b/docs/PR-GUIDE.md @@ -15,7 +15,6 @@ - The PR has an issue. - All conflicts are resolved. -- The PR follows our [Test guide](/docs/TEST_GUIDE.md). - The PR follows our [CSS guide](/docs/CSS_GUIDE.md). When you're done, submit a pull request and one of the maintainers will check it out. You will be informed if there are any problems or changes that may need to be considered. diff --git a/docs/PROTOCOL_GUIDE.md b/docs/PROTOCOL_GUIDE.md deleted file mode 100644 index 9c212ed186..0000000000 --- a/docs/PROTOCOL_GUIDE.md +++ /dev/null @@ -1,47 +0,0 @@ -## Protocols - -Lisk as a part of electron application can use custom protocols. -In the other words You are able to open Lisk desktop application using our custom protocol `lisk`. - -:exclamation: Please keep in mind that not all browsers has handling custom protocols handled as default. - -#### Basic usage - -After installing Lisk on your device you will be able to use `lisk` protocol. -Example: `lisk://wallet` -![Alt text](./assets/lisk_wallet.png?raw=true 'Lisk protocol basic') -Everything that comes after `lisk://` is treated as a route so this example will open Lisk app on wallet page. - -#### Staking protocol - -Makes staking for validators easier -`lisk://main/staking/stake?stakes=thepool,4miners.net` or `lisk://validators/stake?stakes=thepool,4miners.net` -It will open lisk app and select validators automatically `thepool` and `4miners.net` - -:exclamation: Please keep in mind that We don't use `/main` route anymore but some websites still relay on an old url so We are allowing `/main` in this particular case `main/staking/stake`. - -![Alt text](./assets/staking_protocol.png?raw=true 'Lisk staking protocol') - -#### Network switcher protocol - -Opens the login page and enables the network switcher options. - -`lisk://add-account?showNetwork=true` - -![Alt text](./assets/network_switcher.png?raw=true 'Lisk staking protocol') - -#### Send protocol - -Opens the wallet and prefills the send form with recipient and amount. - -`lisk://wallet?recipient=16313739661670634666L&amount=5` - -![Alt text](./assets/send.png?raw=true 'Lisk staking protocol') - -#### Sign message protocol - -Opens the sign message form and prefills it with your message. - -`lisk://sign-message?message=my message` - -![Alt text](./assets/sign_message.png?raw=true 'Lisk staking protocol') diff --git a/docs/TEST_GUIDE.md b/docs/TEST_GUIDE.md deleted file mode 100644 index 6cbb276eea..0000000000 --- a/docs/TEST_GUIDE.md +++ /dev/null @@ -1,161 +0,0 @@ -# Test guide - -This project uses 3 layers of automated tests (unit, integration, and end-to-end). -It is very powerful setup, but at the same time, it can be challenging to choose the appropriate -level of test for the problem at hand. -This is the reason why this guide was created. - -The goal of this guide is to provide an overview of used types of tests, describe their pros and cons, and give hints for when to use which. - -### Why multiple levels of test? - -Because it is much easier and faster to test small units, but when testing small units separately it doesn't ensure that they will work together. -So we want to use a lot of smaller (unit) tests to cover all the details, because running bigger tests to check all the small details would take much longer. -But then we also need several bigger (integration) tests to make sure that the units work well together and we won't end up like -[this](https://giphy.com/gifs/unit-test-integration-3o7rbPDRHIHwbmcOBy/fullscreen) or -[this](https://giphy.com/gifs/fail-technology-i5RWkVZzVScmY/fullscreen). -The same argument holds true for unit vs. integration tests as well as for integration vs. end-to-end (E2E) tests. - -### Which level should I use for a given feature? - -With the previous paragraph in mind, you should use the lowest possible level that covers the whole feature. -In practice, it might be easier to go from the top to bottom. -Start with e2e tests where needed and then look for what needs integration tests and only in the end the test coverage report will tell you what still needs unit tests. -This way, you should avoid testing the exact same thing on multiple levels. - -This section illustrates the problem on the "Send LSK" feature. Feature description: If a user enters a valid address and amount smaller than their balance, then they should be able to send the transaction to Lisk network. - -Test split: - -- **Unit test**: If the whole feature is inside one component. E.g. Address validation, because the validity of the entered address depends only on the entered value and a regexp inside the component. -- **Integration test**: If the feature relies on multiple components or Redux store. E.g. Balance validation, because the validity of the balance depends on the entered value and the account balance in Redux store. -- **E2E test**: If the feature involves multiple pages and/or API calls. E.g. Sending an LSK transaction with valid inputs. - -### Where is each level mocking? - -All the tests make assumptions about how things work outside of their scope. These assumptions are made by mocking the environment. Each level mocks something else: - -- **Unit test** mock called functions and methods. -- **Integration test** mock server API, router, localStorage. -- **E2E test**: use a local devnet node of Lisk which is a mock of Lisk Mainnet network. - -The problem of these assumptions is that we cannot be 100% sure that the mocks behave exactly as the things they're mocking. If the mock is not accurate, then we can have a passing test and broken feature. Therefore, every feature should have at least one test that doesn't mock. - -## Unit tests - -### What do they test? - -One unit ([component](/LiskHQ/lisk-desktop/blob/development/src/components), -[util](/LiskHQ/lisk-desktop/blob/development/src/utils), -[action](/LiskHQ/lisk-desktop/blob/development/src/actions), -[reducer](/LiskHQ/lisk-desktop/blob/development/src/store/reducers), -[middleware](/LiskHQ/lisk-desktop/blob/development/src/store/middlewares), or -[subscriber](/LiskHQ/lisk-desktop/blob/development/src/store/subscribers)) in isolation. - -### What doesn't need unit test? - -- **action that contains no logic** - it is an integration point between React and Redux therefore it should be be covered by integration tests, e.g. [accountUpdated action](https://github.com/LiskHQ/lisk-desktop/blob/8239062584a9573ac8e99bd28d681563b40048b2/src/actions/account.js#L29-L32) -- **React HOC (higher order component)** - also integration point, e.g. [header HOC](/LiskHQ/lisk-desktop/blob/development/src/components/header/index.js) -- **Presentational React component with no logic** - should have coverage by being rendered by its parent in its unit test or integration, e.g. [Spinner component](/LiskHQ/lisk-desktop/blob/development/src/components/spinner/index.js) - -### How are they organized? - -Each unit test live in the same folder as the unit that it tests. E.g. tests for [/src/components/login/login.js](/LiskHQ/lisk-desktop/blob/development/src/components/login/login.js) are in [/src/components/login/login.test.js](/LiskHQ/lisk-desktop/blob/development/src/components/login/login.test.js). - -#### Jest - -Configuration is in [jest.config.js](/LiskHQ/lisk-desktop/blob/development/jest.config.js) and [config/setupJest.js](/LiskHQ/lisk-desktop/blob/development/config/setupJest.js). - -### How to run them? - -Run Jest suites with: - -``` -yarn run test -``` - -Enable suites by uncommenting lines in [jest.config.js](/LiskHQ/lisk-desktop/blob/development/jest.config.js) - -Please refer to [Jest examples](https://github.com/facebook/jest/tree/master/examples) for more info. - -See [relevant sections of README](/LiskHQ/lisk-desktop#run-unit-tests) - -### What tools are used? - -#### Current preferred way (we are in a transition period): - -- **Assertions, Spying and Mocking** - use Jest built-in -- To test **React components** we use [enzyme](http://airbnb.io/enzyme/) -- To assert on React components we use [jest-enzyme](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme) because it gives more descriptive messages when the assertion fails - -#### Deprecated way: - -- **Assertions** use `expect` syntax of [chai](http://www.chaijs.com/), e.g.: - https://github.com/LiskHQ/lisk-desktop/blob/80afda8289b75cb70bf345d14d36117fde2bdd90/src/utils/passphrase.test.js#L136 -- **Spies, stubs, and mocks** use [sinon](http://sinonjs.org/), e.g.: - https://github.com/LiskHQ/lisk-desktop/blob/19a2a613fa08a34fe3088b0e40c11c7fa37a645d/src/store/middlewares/savedSettings.test.js#L20 -- To test **React components** we use [enzyme](http://airbnb.io/enzyme/), e.g.: - https://github.com/LiskHQ/lisk-desktop/blob/79165170a326a7f98efee098732e55be37d31223/src/components/toolbox/sliderCheckbox/index.test.js#L21 -- To **assert on React compopnents** we use [chai-enzyme](https://github.com/producthunt/chai-enzyme) because it gives more descriptive messages when the assertion fails, e.g.: https://github.com/LiskHQ/lisk-desktop/commit/bc7677c6d5c205449311ac4e18fd3de6fe2b23ff -- To **assert on spies, stubs and mocks** we use [sinon-chai](https://github.com/domenic/sinon-chai), often together with [sinon.match](http://sinonjs.org/releases/v1.17.7/matchers/), e.g.: https://github.com/LiskHQ/lisk-desktop/blob/c82683df85b2bc3277c697ebacff24463a8fed2c/src/components/register/register.test.js#L64-L67 - -## Integration tests - -Recently were reimplemented using Cypress and now reside together with [e2e tests](/LiskHQ/lisk-desktop/blob/development/test/cypress/e2e) - -[Legacy tests](/LiskHQ/lisk-desktop/blob/development/test/integration) are obsolete and should be removed after unit test will satisfy coverage criteria - -## E2E and Integration tests - -### What do they test? - -User scenarios in the application, where interaction between components, localStorage, Lisk APIs happens - -### How to run them? - -See [relevant sections of README](/LiskHQ/lisk-desktop#run-end-to-end-tests) - -### How are they organized? - -E2E and integration tests for each major feature have the tests specified in its own `*.spec.js` in [/test/cypress/e2e/](/LiskHQ/lisk-desktop/blob/development/test/cypress/e2e) - -Configuration is in [cypress.conf.js](/LiskHQ/lisk-desktop/blob/development/cypress/cypress.conf.js). - -### How do I decide whether I should write E2E or Integration test? - -Use at least one e2e test for every feature / api call. - -For the different set of inputs, for setting up app state you can use mocking / stubbing making it an integration test. - -### What tools are used? - -- [Cypress](https://www.cypress.io/) - JavaScript End to End Testing Framework - -### How to update blockchain snapshot needed to be applied before run? - -Recreate db - -``` -pm2 stop app -dropdb lisk_dev -createdb lisk_dev -pm2 start app -``` - -Fire a script to create necessary transactions (you need [Lisk Commander](https://github.com/LiskHQ/lisk-commander) installed globally for that) - -``` -COMMANDER="$(command -v lisk)" ./test/e2e-transactions.sh -``` - -Dump database - -``` -pg_dump lisk_dev > ./test/dev_blockchain.db -``` - -Gzip snapshot - -``` -gzip ./test/dev_blockchain.db -``` diff --git a/src/modules/legacy/components/AccountsComparison/index.js b/src/modules/legacy/components/AccountsComparison/index.js index db674c97d5..8b06da10da 100644 --- a/src/modules/legacy/components/AccountsComparison/index.js +++ b/src/modules/legacy/components/AccountsComparison/index.js @@ -75,7 +75,7 @@ const AccountsComparison = ({ t }) => { className={`${styles.link} link`} onClick={() => { window.open( - 'https://lisk.com/blog/development/actions-required-upcoming-mainnet-migration#MigrateanunitiliazedAccount', + 'https://lisk.com/blog/posts/reclaiming-a-lisk-account', '_blank', 'rel=noopener noreferrer' ); diff --git a/src/modules/legacy/components/AccountsComparison/index.test.js b/src/modules/legacy/components/AccountsComparison/index.test.js index 9f2dfd91ff..224bf683b7 100644 --- a/src/modules/legacy/components/AccountsComparison/index.test.js +++ b/src/modules/legacy/components/AccountsComparison/index.test.js @@ -85,7 +85,7 @@ describe('Reclaim balance screen', () => { wrapper.find('.link').at(0).simulate('click'); expect(window.open).toHaveBeenNthCalledWith( 1, - 'https://lisk.com/blog/development/actions-required-upcoming-mainnet-migration#MigrateanunitiliazedAccount', + 'https://lisk.com/blog/posts/reclaiming-a-lisk-account', '_blank', 'rel=noopener noreferrer' ); diff --git a/src/modules/legacy/components/Introduction/index.js b/src/modules/legacy/components/Introduction/index.js index d799d92e6f..569baf6aaf 100644 --- a/src/modules/legacy/components/Introduction/index.js +++ b/src/modules/legacy/components/Introduction/index.js @@ -17,7 +17,7 @@ const Introduction = ({ t, nextStep }) => ( className={styles.link} onClick={() => { window.open( - 'https://lisk.com/blog/development/actions-required-upcoming-mainnet-migration', + 'https://lisk.com/blog/posts/announcing-lisk-mainnet-v4-migration', '_blank', 'rel=noopener noreferrer' ); diff --git a/src/modules/legacy/components/Introduction/index.test.js b/src/modules/legacy/components/Introduction/index.test.js index e993c879b1..d239708925 100644 --- a/src/modules/legacy/components/Introduction/index.test.js +++ b/src/modules/legacy/components/Introduction/index.test.js @@ -12,7 +12,7 @@ describe('Reclaim balance Introduction screen', () => { const wrapper = mount(); wrapper.find('.link').first().simulate('click'); expect(window.open).toHaveBeenCalledWith( - 'https://lisk.com/blog/development/actions-required-upcoming-mainnet-migration', + 'https://lisk.com/blog/posts/announcing-lisk-mainnet-v4-migration', '_blank', 'rel=noopener noreferrer' );