montezume

Instant camera options

Instax MINI format: instax mini 90

• Pros:
  • Cost per shot ~0.66€.
  • Cameras are reasonable size.
  • Good for people photography.
• Cons:
  • Credit card sized images (46 mm × 62mm)
• Not great for landscapes

montezume

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

// I display the username :)
const ChildRoute1 = props => (
  <div>
    <Link to="/orders/route2">Go to route 2</Link>
    {user.name}
  </div>
);

montezume

// assuming we have permissions from API

const apiPermissions = {
  // etc...
  products: {
        isVisible: true | false,
        canViewProductsList: true | false,
        canViewReviewModifiedProducts: true | false,
        canViewAddProduct: true | false,
        canViewDirectAccess: true | false

montezume

module.exports = {
  preset: 'jest-puppeteer',
  testRegex: './*\\.visualspec\\.js$',
};

montezume

module.exports = {
  server: {
    command: 'node ./visual-testing-app/server.js',
    port: 3001,
  },
};

montezume

const { percySnapshot } = require('@percy/puppeteer');

describe('TextInput', () => {
  beforeAll(async () => {
    await page.goto(`http://localhost:3000/text-input`);
  });

  it('Default', async () => {
    await expect(page).toMatch('Default');
    await percySnapshot(page, 'TextInput');

montezume

import React from 'react';
import { TextInput } from 'ui-kit';
import { Suite, Spec } from '../../../../test/percy';

const value = 'hello world how are you?';

export const routePath = '/text-input';

export const component = () => (
  <Suite>

montezume

.pristine {
  composes: input;
  border-color: var(--border-color-input-pristine);
  color: white;
  border-color: pink;
  background-color: pink;
}

montezume

import React from 'react';
import { DateInput } from 'ui-kit';
import { Suite, Spec } from '../../../../test/percy';

const value = '2018-11-13';

export const routePath = '/date-input';

export const component = () => (
  <Suite>

montezume

const { percySnapshot } = require('@percy/puppeteer');

describe('DateInput', () => {
  beforeAll(async () => {
    await page.goto('http://localhost:3001/date-input');
  });
  it('Default', async () => {
    await expect(page).toMatch('minimal');
    await percySnapshot(page, 'Visual Spec - DateInput');
  });