Create trial view

Author: rafaelcamargo

website/src/scripts/components/intro/intro.html

@@ -4,7 +4,9 @@
       <div class="intro-copy">
         <h1>Simplicidade deslumbrante.</h1>
         <p>Consulte endereços postais da maneira mais fácil que você já viu.</p>
-        <btn theme="primary">Experimente</btn>
+        <router-link :to="{name: 'trial'}">
+          <btn theme="primary">Experimente</btn>
+        </router-link>
       </div>
     </row-item>
     <row-item size="6">

website/src/scripts/components/intro/intro.test.js

@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils';
+import { localVueMock, routerMock } from '@mocks/router';
+import demo from '@scripts/components/demo/demo';
+import intro from './intro';
+
+describe('Intro', () => {
+  function mountComponent(){
+    return shallowMount(intro, {
+      localVue: localVueMock,
+      router: routerMock
+    });
+  }
+
+  it('should have appropriate css classes', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.classes()).toEqual(['intro']);
+  });
+
+  it('should contain a heading', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find('h1').text()).toEqual('Simplicidade deslumbrante.');
+  });
+
+  it('should contain a paragraph', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find('p').text()).toEqual('Consulte endereços postais da maneira mais fácil que você já viu.');
+  });
+
+  it('should contain a button', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find(demo)).toBeDefined();
+    expect(wrapper.find('btn-stub').text()).toEqual('Experimente');
+  });
+
+  it('should contain a demo', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find(demo)).toBeDefined();
+  });
+});

website/src/scripts/components/navmenu/navmenu.html

@@ -4,6 +4,11 @@
       Instale
     </a>
   </li>
+  <li>
+    <router-link :to="{name: 'trial'}">
+      Experimente
+    </router-link>
+  </li>
   <li>
     <router-link :to="{name: 'use'}">
       Use

website/src/scripts/routes.js

@@ -1,12 +1,18 @@
 import home from '@scripts/views/home/home';
 import use from '@scripts/views/use/use';
+import trial from '@scripts/views/trial/trial';
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: home
   },
+  {
+    path: '/experimente',
+    name: 'trial',
+    component: trial
+  },
   {
     path: '/use',
     name: 'use',

website/src/scripts/views/trial/trial.html

@@ -0,0 +1,5 @@
+<viewport>
+  <slice>
+    <sandbox />
+  </slice>
+</viewport>

website/src/scripts/views/trial/trial.js

@@ -0,0 +1,14 @@
+import sandbox from '@scripts/components/sandbox/sandbox';
+import slice from '@scripts/components/slice/slice';
+import viewport from '@scripts/components/viewport/viewport';
+import template from './trial.html';
+
+export default {
+  name: 'trial-view',
+  components: {
+    sandbox,
+    slice,
+    viewport
+  },
+  template
+};

website/src/scripts/views/trial/trial.test.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import sandbox from '@scripts/components/sandbox/sandbox';
+import viewport from '@scripts/components/viewport/viewport';
+import trial from './trial';
+
+describe('Trial View', () => {
+  function mountComponent(){
+    return shallowMount(trial);
+  }
+
+  it('should contain a viewport', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find(viewport)).toBeDefined();
+  });
+
+  it('should contain a slice', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find('slice-stub')).toBeDefined();
+  });
+
+  it('should contain a sandbox', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find(sandbox)).toBeDefined();
+  });
+});