First POC test

Dockerfile

@@ -40,9 +40,9 @@ COPY yarn.lock /trezor-wallet
 RUN yarn
 COPY . /trezor-wallet
 RUN yarn run build:stable
-RUN yarn test-integration
+
 #
 # run
 #
 ENTRYPOINT ["/trezor-wallet/test/docker/run-all.sh"]
-EXPOSE 8080
+EXPOSE 8080 21325

package.json

@@ -22,7 +22,7 @@
         "test:unit": "npx jest",
         "test-unit:watch": "npx jest -o --watch",
         "test-integration": "npx cypress run",
-        "test-local": "npx cypress open",
+        "test-integration:local": "npx cypress open",
         "server:beta": "node ./server/index.js --buildType=beta",
         "server:stable": "node ./server/index.js --buildType=stable"
     },

src/components/Button/index.js

@@ -132,10 +132,12 @@ const Button = ({
     isWhite = false,
     isWebUsb = false,
     isTransparent = false,
+    dataTest,
 }: Props) => {
     const newClassName = isWebUsb ? `${className} trezor-webusb-button` : className;
     return (
         <Wrapper
+            data-test={dataTest}
             className={newClassName}
             onClick={onClick}
             onMouseEnter={onMouseEnter}
@@ -162,6 +164,7 @@ Button.propTypes = {
     isWhite: PropTypes.bool,
     isWebUsb: PropTypes.bool,
     isTransparent: PropTypes.bool,
+    dataTest: PropTypes.string,
 };
 
 export default Button;

src/components/DeviceHeader/index.js

@@ -102,11 +102,13 @@ const DeviceHeader = ({
     disabled = false,
     isSelected = false,
     className,
+    testId,
 }) => {
     const status = getStatus(device);
     return (
         <Wrapper
             isSelected={isSelected}
+            data-test-id={testId}
             isOpen={isOpen}
             isHoverable={isHoverable}
             disabled={disabled}
@@ -142,6 +144,7 @@ DeviceHeader.propTypes = {
     isSelected: PropTypes.bool,
     onClickWrapper: PropTypes.func.isRequired,
     className: PropTypes.string,
+    testId: PropTypes.string,
 };
 
 export default DeviceHeader;

src/views/Landing/components/BetaDisclaimer/index.js

@@ -68,7 +68,7 @@ const BetaDisclaimer = (props: { close: () => void }) => (
                 />
                 Please note that the <i>Trezor Beta Wallet</i> might be collecting anonymized usage data, especially error logs, for development purposes. The <i>Trezor Wallet</i> does not log any data.
             </StyledP>
-            <StyledButton onClick={props.close}>OK, I understand</StyledButton>
+            <StyledButton dataTest="Modal__disclaimer__button__confirm" onClick={props.close}>OK, I understand</StyledButton>
         </ModalWindow>
     </Wrapper>
 );

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -57,7 +57,7 @@ class CoinMenu extends PureComponent<Props> {
     render() {
         const { config } = this.props.localStorage;
         return (
-            <Wrapper>
+            <Wrapper data-test="Main__page__coin__menu">
                 {config.networks.map(item => (
                     <NavLink
                         key={item.shortcut}
@@ -72,6 +72,7 @@ class CoinMenu extends PureComponent<Props> {
                     </NavLink>
                 ))}
                 <Divider
+                    testId="Main__page__coin__menu__divider"
                     textLeft="Other coins"
                     textRight="(You will be redirected)"
                     hasBorder

src/views/Wallet/components/LeftNavigation/components/Divider/index.js

@@ -19,9 +19,13 @@ const Wrapper = styled.div`
 `;
 
 const Divider = ({
-    textLeft, textRight, hasBorder = false,
+    textLeft,
+    textRight,
+    hasBorder = false,
+    testId,
 }) => (
     <Wrapper
+        data-test={testId}
         hasBorder={hasBorder}
     >
         <p>{textLeft}</p>
@@ -33,6 +37,7 @@ Divider.propTypes = {
     textLeft: PropTypes.string,
     textRight: PropTypes.string,
     hasBorder: PropTypes.bool,
+    testId: PropTypes.string,
 };
 
 export default Divider;

src/views/Wallet/components/LeftNavigation/index.js

@@ -191,6 +191,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
             >
                 <Header
                     isSelected
+                    testId="Main__page__device__header"
                     isHoverable={false}
                     onClickWrapper={() => {
                         if (isDeviceAccessible || this.props.devices.length > 1) {

test/docker/run-all.sh

@@ -12,3 +12,6 @@ cd /trezor-emulator/trezor-core && ./emu.sh &
 
 # run wallet
 cd /trezor-wallet && yarn run server:stable
+
+# run tests
+yarn run test-integration -c baseUrl="https://localhost:8081/#/"

test/integration/landingPage.js

@@ -1,24 +0,0 @@
-describe('Landing Page', () => {
-    beforeEach(() => {
-        cy.visit('http://localhost:8081/#/');
-        cy.get('[data-test=beta-disclaimer-button]').click();
-    });
-
-    it('top menu', () => {
-        cy.get('[data-test=top-menu]')
-            .should('be.visible')
-            .matchImageSnapshot();
-    });
-
-    it('main text', () => {
-        cy.get('[data-test=landing-main-title]')
-            .should('be.visible')
-            .matchImageSnapshot();
-    });
-
-    it('footer', () => {
-        cy.get('[data-test=footer]')
-            .should('be.visible')
-            .matchImageSnapshot();
-    });
-});

test/integration/left-menu.js

@@ -0,0 +1,12 @@
+describe('Left Menu', () => {
+    beforeEach(() => {
+        cy.visit('https://localhost:8080/#/');
+        cy.getTestElement('Modal__disclaimer__button__confirm').click();
+    });
+
+    it('divider', () => {
+        cy.getTestElement('Main__page__coin__menu__divider')
+            .should('be.visible')
+            .matchImageSnapshot();
+    });
+});

test/support/commands.js

@@ -1,3 +1,5 @@
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-addMatchImageSnapshotCommand();
+addMatchImageSnapshotCommand();
+
+Cypress.Commands.add('getTestElement', selector => cy.get(`[data-test="${selector}"]`));