Add visual screenshot testing to amplify-text-field, and fix jest-con…

…fig problem manually

package.json

@@ -46,6 +46,7 @@
     "cypress": "^3.2.0",
     "husky": "^1.3.1",
     "jest": "^22.4.3",
+    "jest-config": "24.8.0",
     "json-loader": "^0.5.7",
     "lerna": "^3.13.1",
     "rimraf": "^2.6.2",

packages/amplify-ui-components/package.json

@@ -14,7 +14,8 @@
     "lint": "eslint --ext .js,.ts,.tsx .",
     "format": "eslint --fix --ext .js,.ts,.tsx .",
     "pretest": "npm run lint",
-    "test": "stencil test --spec --e2e",
+    "test": "stencil test --spec --e2e --screenshot",
+    "test:update-screenshot": "stencil test --spec --e2e --screenshot --update-screenshot",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "stencil": "stencil build --docs-readme",
     "stencil:watch": "stencil build --dev --watch",
@@ -29,7 +30,7 @@
     "emotion": "^10.0.9"
   },
   "devDependencies": {
-    "@stencil/core": "^1.1.9",
+    "@stencil/core": "^1.2.0",
     "@stencil/state-tunnel": "^1.0.1",
     "@storybook/addon-a11y": "^5.1.9",
     "@storybook/addon-knobs": "^5.1.9",
@@ -55,8 +56,7 @@
     "typescript": "^3.5.3"
   },
   "husky": {
-    "hooks": {
-    }
+    "hooks": {}
   },
   "peerDependencies": {},
   "license": "Apache-2.0"

packages/amplify-ui-components/screenshot/.gitignore

@@ -0,0 +1,3 @@
+images
+builds
+compare.html

packages/amplify-ui-components/src/components/amplify-text-field/amplify-text-field.e2e.ts

@@ -7,6 +7,9 @@ describe('amplify-text-field', () => {
     await page.setContent(
       `<amplify-text-field field-id="id" label="Label test" description="Description test"></amplify-text-field>`,
     );
+    const screenshot = await page.compareScreenshot('Amplify Text Field', {fullPage: true});
+    expect(screenshot).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+
     const textElement = await page.find('amplify-text-field');
     expect(textElement).not.toBeNull();