Merge pull request #198 from wizeline/update-stencil

Update stencil

design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizeline/tea",
-  "version": "0.14.0-oatmilk.2",
+  "version": "0.14.0-oatmilk.3",
   "description": "Wizeline's Design System",
   "module": "dist/esm/index.js",
   "main": "dist/wizeline-tea",
@@ -12,42 +12,28 @@
     "build": "stencil build --prerender",
     "createBlock": "node ./createBlock.js",
     "prepublishOnly": "stencil build",
-    "test": "jest --no-cache",
-    "test.watch": "jest --watch --no-cache"
+    "test": "stencil test --spec",
+    "test.watch": "stencil test --spec --watch",
+    "e2e": "stencil test --e2e"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.41",
-    "@babel/core": "^7.0.0-beta.41",
-    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.41",
-    "@babel/plugin-proposal-decorators": "^7.0.0-beta.41",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.41",
-    "@babel/plugin-syntax-jsx": "^7.0.0-beta.41",
-    "@babel/preset-env": "^7.0.0-beta.41",
-    "@babel/preset-typescript": "^7.0.0-beta.41",
-    "@stencil/core": "^0.12.1",
-    "@stencil/sass": "0.1.0",
+    "@stencil/core": "^0.15.2",
+    "@stencil/sass": "0.1.1",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.0",
+    "@types/puppeteer": "^1.10.0",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
-    "jest": "^23.5.0",
+    "jest": "23.6.0",
+    "jest-cli": "23.6.0",
+    "jest-environment-node": "^23.4.0",
+    "puppeteer": "1.8.0",
     "surge": "^0.20.1",
     "watch": "^1.0.2"
   },
   "contributors": [
     "Charlie L <charlie@wizeline.com>",
     "Fernando Rubio <fernando@wizeline.com>"
   ],
-  "license": "MIT",
-  "jest": {
-    "transform": {
-      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"
-    },
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
-      "<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
-    ],
-
-    "moduleFileExtensions": ["ts", "tsx", "js", "json", "jsx"]
-  }
+  "license": "MIT"
 }

design-system/src/components/avatar/__snapshots__/avatar.e2e.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wz-avatar should render an avatar-component 1`] = `"<wz-avatar xlarge=\\"\\" square=\\"\\" src=\\"https://api.adorable.io/avatars/285/abott@adorable.png\\" class=\\"hydrated\\"><div class=\\"square xlarge\\" style=\\"background-image: url(\\"https;\\"></div></wz-avatar>"`;

design-system/src/components/avatar/avatar.e2e.ts

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-avatar', () => {
+  it('should render an avatar-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<wz-avatar xlarge square src="https://api.adorable.io/avatars/285/abott@adorable.png" />`,
+    );
+    const avatar = await page.find('wz-avatar');
+    expect(avatar.outerHTML).toMatchSnapshot();
+  });
+});

design-system/src/components/button/button.e2e.ts

@@ -0,0 +1,13 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-button', () => {
+  it('should render a button-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<wz-button>Hello, my name is Marty McFly</wz-button>',
+    );
+    const button = await page.find('wz-button');
+
+    expect(button.innerText).toEqual('Hello, my name is Marty McFly');
+  });
+});

design-system/src/components/checkbox/checkbox.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-checkbox', () => {
+  it('should render a checkbox-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<wz-checkbox></wz-checkbox>');
+    const checkbox = await page.find('wz-checkbox');
+    const checked = await checkbox.getProperty('checked');
+    expect(checked).toBeFalsy();
+  });
+});

design-system/src/components/error/error.e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-error', () => {
+  it('should render a error-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<wz-error>Hello, my name is Marty McFly</wz-error>');
+    const error = await page.find('wz-error');
+    expect(error.innerText).toBe('Hello, my name is Marty McFly');
+  });
+});

design-system/src/components/formerror/formerror.e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-formerror', () => {
+  it('renders form error', async () => {
+    const page = await newE2EPage();
+    await page.setContent("<wz-form-error error='Uh, oh'>Something</wz-input>");
+    const errorText = await page.find('wz-error');
+    expect(errorText.innerText).toEqual('Uh, oh');
+  });
+});

design-system/src/components/heading/heading.e2e.ts

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-heading', () => {
+  it('should render a heading-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<wz-heading>Hello, my name is Marty McFly</wz-heading>',
+    );
+    const link = await page.find('wz-heading');
+    expect(link.innerText).toEqual('Hello, my name is Marty McFly');
+  });
+});

design-system/src/components/icon/__snapshots__/icon.e2e.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wz-icon renders icon 1`] = `"<wz-icon icon=\\"clear\\" class=\\"hydrated\\"><div class=\\"icon-container medium\\"><icon-clear class=\\"hydrated\\"><svg viewbox=\\"0 0 24 24\\"><path d=\\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\\"></path><path d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path></svg></icon-clear></div></wz-icon>"`;

design-system/src/components/icon/icon.e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-icon', () => {
+  it('renders icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<wz-icon icon="clear" />');
+    const icon = await page.find('wz-icon');
+    expect(icon.outerHTML).toMatchSnapshot();
+  });
+});

design-system/src/components/input/input.e2e.ts

@@ -0,0 +1,21 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('wz-input', () => {
+  it('should render a input-component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      "<wz-input value='Hello, my name is Marty McFly'></wz-input>",
+    );
+    const input = await page.find('wz-input');
+    const value = await input.getProperty('value');
+    expect(value).toEqual('Hello, my name is Marty McFly');
+  });
+
+  it('renders disabled', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<wz-input disabled></wz-input>');
+    const input = await page.find('wz-input');
+    const disabled = await input.getProperty('disabled');
+    expect(disabled).toBeTruthy();
+  });
+});