Add some integration tests (#743)

cypress/integration/landing.test.ts

@@ -0,0 +1,21 @@
+describe('Landing Page', () => {
+  beforeEach(() => cy.visit('/'))
+
+  it('loads exchange page', () => {
+    cy.get('#exchangePage')
+  })
+
+  it('redirects to url /swap', () => {
+    cy.url().should('include', '/swap')
+  })
+
+  it('allows navigation to send', () => {
+    cy.get('#send-navLink').click()
+    cy.url().should('include', '/send')
+  })
+
+  it('allows navigation to pool', () => {
+    cy.get('#pool-navLink').click()
+    cy.url().should('include', '/pool')
+  })
+})

cypress/integration/no-connect.ts

@@ -1,18 +0,0 @@
-describe('Homepage', () => {
-  beforeEach(() => cy.visit('/'))
-  it('loads exchange page', () => {
-    cy.get('#exchangePage')
-  })
-
-  it('has url /swap', () => {
-    cy.url().should('include', '/swap')
-  })
-
-  it('can enter an amount into input', () => {
-    cy.get('#swapInputField').type('0.001')
-  })
-
-  it('can enter an amount into output', () => {
-    cy.get('#swapOutputField').type('0.001')
-  })
-})

cypress/integration/pool.test.ts

@@ -0,0 +1,13 @@
+describe('Pool', () => {
+  beforeEach(() => cy.visit('/pool'))
+  it('can search for a pool', () => {
+    cy.get('#join-pool-button').click()
+    cy.get('#token-search-input').type('DAI')
+  })
+
+  it.skip('can import a pool', () => {
+    cy.get('#join-pool-button').click()
+    cy.get('#import-pool-link').click() // blocked by the grid element in the search box
+    cy.url().should('include', '/find')
+  })
+})

cypress/integration/send.test.ts

@@ -0,0 +1,7 @@
+describe('Send', () => {
+  beforeEach(() => cy.visit('/send'))
+
+  it('can enter an amount into input', () => {
+    cy.get('#sending-no-swap-input').type('0.001')
+  })
+})

cypress/integration/swap.test.ts

@@ -0,0 +1,10 @@
+describe('Swap', () => {
+  beforeEach(() => cy.visit('/swap'))
+  it('can enter an amount into input', () => {
+    cy.get('#swapInputField').type('0.001')
+  })
+
+  it('can enter an amount into output', () => {
+    cy.get('#swapOutputField').type('0.001')
+  })
+})

src/components/AdvancedSettings/index.tsx

@@ -147,7 +147,7 @@ export default function AdvancedSettings({
               parseCustomInput(val)
               setActiveIndex(SLIPPAGE_INDEX[4])
             }}
-            placeHolder="Custom"
+            placeholder="Custom"
             onClick={() => {
               setActiveIndex(SLIPPAGE_INDEX[4])
               if (slippageInput) {

src/components/ExchangePage/index.tsx

@@ -997,7 +997,11 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
                 Max
               </MaxButton>
             )}
-            <StyledNumerical value={formattedAmounts[Field.INPUT]} onUserInput={val => onUserInput(Field.INPUT, val)} />
+            <StyledNumerical
+              id="sending-no-swap-input"
+              value={formattedAmounts[Field.INPUT]}
+              onUserInput={val => onUserInput(Field.INPUT, val)}
+            />
             <CurrencyInputPanel
               field={Field.INPUT}
               value={formattedAmounts[Field.INPUT]}

src/components/NavigationTabs/index.tsx

@@ -142,7 +142,12 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
       ) : (
         <Tabs>
           {tabOrder.map(({ path, textKey, regex }) => (
-            <StyledNavLink key={path} to={path} isActive={(_, { pathname }) => !!pathname.match(regex)}>
+            <StyledNavLink
+              id={`${textKey}-navLink`}
+              key={path}
+              to={path}
+              isActive={(_, { pathname }) => !!pathname.match(regex)}
+            >
               {t(textKey)}
             </StyledNavLink>
           ))}

src/components/NumericalInput/index.tsx

@@ -48,16 +48,15 @@ function escapeRegExp(string: string): string {
 export const Input = React.memo(function InnerInput({
   value,
   onUserInput,
-  placeHolder,
+  placeholder,
   ...rest
 }: {
   value: string | number
   onUserInput: (string) => void
-  placeHolder?: string
+  error?: boolean
+  fontSize?: string
   align?: 'right' | 'left'
-  id?: string
-  onClick?: () => void
-}) {
+} & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
   const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
       onUserInput(nextUserInput)
@@ -78,7 +77,7 @@ export const Input = React.memo(function InnerInput({
       autoCorrect="off"
       // text-specific options
       type="text"
-      placeholder={placeHolder || '0.0'}
+      placeholder={placeholder || '0.0'}
       minLength={1}
       maxLength={79}
       spellCheck="false"

src/components/SearchModal/index.tsx

@@ -596,6 +596,7 @@ function SearchModal({
             </RowBetween>
             <Input
               type={'text'}
+              id="token-search-input"
               placeholder={t('tokenSearchPlaceholder')}
               value={searchQuery}
               ref={inputRef}

src/pages/Pool/index.tsx

@@ -64,6 +64,7 @@ function Supply({ history }: RouteComponentProps) {
   return (
     <AutoColumn gap="lg" justify="center">
       <ButtonPrimary
+        id="join-pool-button"
         padding="16px"
         onClick={() => {
           setShowPoolSearch(true)
@@ -95,6 +96,7 @@ function Supply({ history }: RouteComponentProps) {
           <Text textAlign="center" style={{ padding: '.5rem 0 .5rem 0' }}>
             {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
             <Link
+              id="import-pool-link"
               onClick={() => {
                 history.push('/find')
               }}