Fix the failing e2e test and added an additional step (#153)

adriandelisle · web-flow · commit c46bcfbb9980 · 2021-03-08T09:28:42.000-08:00
* Fixed the failing e2e test and added an additional step

* Add a local e2e test job

* Remove test file
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -22,7 +22,7 @@ jobs:
           root: *workspace
           paths:
             - .
-  test_lint:
+  lint:
     docker:
       - image: *build_image
     working_directory: *workspace
@@ -89,6 +89,29 @@ jobs:
           command: npm run e2e
       - store_artifacts:
           path: /home/circleci/project/.screenshots
+  e2e_local:
+    docker:
+      - image: cimg/node:14.14-browsers
+    working_directory: *workspace
+    steps:
+      - attach_workspace:
+          at: *workspace
+      - run:
+          name: Serve site locally
+          command: npx serve out -p 3000
+          background: true
+      # wait for the server to start responding.
+      - run:
+          name: Wait for server to connect
+          shell: /bin/sh
+          command: wget --spider --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 20 http://localhost:3000
+      - run:
+          name: Running landing page e2e test against local build
+          environment:
+            COMMIT_DEV_HOST: http://localhost:3000
+          command: npm run e2e
+      - store_artifacts:
+          path: /home/circleci/project/.screenshots
 
 workflows:
   version: 2
@@ -101,14 +124,18 @@ workflows:
               ignore:
                 - main
                 - launch
-      - test_lint:
+      - lint:
           requires:
             - checkout_code
       - build:
           name: build_feature
           helix_host: ''
           requires:
             - checkout_code
+      - e2e_local:
+          context: test-envs
+          requires:
+            - build_feature
 
   main:
     jobs:
@@ -117,10 +144,6 @@ workflows:
             branches:
               only:
                 - main
-      - e2e:
-          context: test-envs
-          requires:
-            - checkout_code
       - build:
           name: build_staging
           helix_host: https://api-public.commit-staging.dev/email/apply
@@ -131,6 +154,10 @@ workflows:
           bucket: commit-staging.dev
           requires:
             - build_staging
+      - e2e:
+          context: test-envs
+          requires:
+            - deploy_staging
       - build:
           name: build_production
           helix_host: https://api-public.commit.dev/email/apply
@@ -160,10 +187,6 @@ workflows:
             branches:
               only:
                 - launch
-      - e2e:
-          context: test-envs
-          requires:
-            - checkout_code
       - build:
           name: build_feature
           helix_host: https://api-public.commit-staging.dev/email/apply
@@ -174,3 +197,7 @@ workflows:
           bucket: launch.commit-staging.dev
           requires:
             - build_feature
+      - e2e:
+          context: test-envs
+          requires:
+            - deploy_staging
diff --git a/components/form/index.js b/components/form/index.js
@@ -123,7 +123,7 @@ const Form = () => {
           />
           <Button
             {...{
-              'data-test-id': 'button',
+              'data-test-id': 'submitApplicationButton',
               onClick,
             }}
           >
diff --git a/pages/index.js b/pages/index.js
@@ -34,7 +34,7 @@ const Home = () => (
             Commit is designing the future of work and we're putting Engineers
             at the center.
           </Text>
-          <ApplyLink>Apply to Join Us</ApplyLink>
+          <ApplyLink data-test-id='applyButton'>Apply to Join Us</ApplyLink>
         </div>
         <div className={styles.heroSvg}>
           <BracketSvg />
diff --git a/tests/index.e2e.js b/tests/index.e2e.js
@@ -1,10 +1,11 @@
 import puppeteer from 'puppeteer'
+
 import { config, PageObjectModel } from '../helpers/e2e'
 
 class LandingPage extends PageObjectModel {
   async checkApplyButtonExists() {
     const buttonText = await this.getTextBySelector({
-      selector: '[data-test-id="button"]',
+      selector: '[data-test-id="applyButton"]',
     })
     await expect(buttonText).toBeTruthy()
   }
@@ -33,4 +34,17 @@ describe('LandingPage', () => {
       filename: `${filenamePrefix}_00_landing_page_button`,
     })
   })
+
+  it('it goes to the apply page on click of apply button', async () => {
+    await landingPage.clickSelector({
+      selector: '[data-test-id="applyButton"]',
+    })
+    const buttonText = await landingPage.getTextBySelector({
+      selector: '[data-test-id="submitApplicationButton"]',
+    })
+    expect(buttonText).toBeTruthy()
+    await landingPage.saveScreenshot({
+      filename: `${filenamePrefix}_00_landing_page_navigate_to_apply_page`,
+    })
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -123,7 +123,7 @@ const Form = () => {`
`123`	`123`	`/>`
`124`	`124`	`<Button`
`125`	`125`	`{...{`
`126`		`- 'data-test-id': 'button',`
	`126`	`+ 'data-test-id': 'submitApplicationButton',`
`127`	`127`	`onClick,`
`128`	`128`	`}}`
`129`	`129`	`>`