Pathee engineering blog

世界をしなやかに変えるエンジニアたちのブログ

Pathee的システムリプレイスの道程

これはPathee Advent Calendar 2019の1日目の記事です。

Pathee Advent Calander!

こんにちは。エンジニアの土田です。

しばらくブログの更新が止まってしまっていたので、更新を活性化させるべくPatheeもAdvent Calendarに参加します!

メンバーの協力もあって、無事全日程が埋まりましたので、12月の間、お付き合いをよろしくお願いします。

さっそく私は遅刻しているのですが、、、現在取り組んでいるシステムリプレイスの話をしたいと思います。

続きを読む

【Golang】Goaのv3を使う - コンテナイメージの作成

こんにちは。エンジニアの土田です。

スクラム導入のためにやっていたスクラムマスター業も落ち着いてきたので、最近はエンジニアリング側に力を割けるようになってきました。

pathee.hatenablog.com

今はGolangでのAPIサービスの実装を検討をしていて、Goaというフレームワークが用途に合っていそうだったので、使い方を調べています。

続きを読む

SwiftUIのチュートリアルをやってみた その1(基本操作・リスト表示)

Patheeのメディアチームエンジニアの日向です。

先月のWWDC 2019ではiPadOSやSign in with Appleなどいろいろ発表がありましたが、一番衝撃的だったのはやはりSwiftUIですね。

シンプルなコードでUIを構築したり、リアルタイムでプレビューできたり、ドラッグアンドドロップで直感的な編集ができたり。今業務でやっているReactの考え方も活かせそう。

今回はそんなSwiftUIのチュートリアルを触ってみます。(Beta1なので変更されている場合があります)

f:id:pathee:20190619032910p:plain

続きを読む

styled-componentsで作ったコンポーネントをjest + enzymeでテストする時は dive() を使う

Pathee エンジニアの keisei1092 です。

styled-componentsで作ったコンポーネントをはさんだコンポーネントをテストする時のやり方に若干戸惑いました。

次のように Wrapper というstyled-componentsで定義されたコンポーネントに囲まれた Test コンポーネントがあるとします。

import React from 'react';
import { pure } from 'recompose';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  align-items: center;
`; // ... 何かスタイルを定義

export type Props = {
  title: string;
};

export const Test = ({ title }: Props) => (
  <Wrapper>
    <h1>{title}</h1>
  </Wrapper>
);

export default pure(Test);

このとき、 props.title に渡した値が正しくレンダリングされることをテストしたいとします。あまり深く考えず次のようなテストコードを書いてみます。

import React from 'react';
import { shallow } from 'enzyme';

import Test, { Props } from '@app/components/Test';

describe('<Test>', () => {
  let props: Props;

  beforeEach(() => {
    props = {
      title: 'title'
    };
  });

  describe('rendering', () => {
    it('should render title', () => {
      const wrapper = shallow(<Test {...props} />);

      const h1 = wrapper.find('h1');
      expect(h1.text()).toEqual(props.title);
    });
  });
});

これを実行すると

Method “text” is meant to be run on 1 node. 0 found instead.

とエラーが出てテストにfailします。

shallowで <Test />レンダリングしているところをデバッグしてみます。

console.log test/components/CollectionRegister/SRHeader/test.spec.tsx:20
    <Component title="title" />

Wrapperレンダリングされていることはわかります( Component という表示で Wrapper と実際の名前は出ていない)が、その先の <h1> 以降がレンダリングされていないようです。ここで、enzymeの dive() を使います。

describe('rendering', () => {
  it('should render title', () => {
    const wrapper = shallow(<Test {...props} />);

    const h1 = wrapper.dive().find('h1'); // changed
    expect(h1.text()).toEqual(props.title);
  });
});

これを実行してみます。

PASS  test/components/test.spec.tsx
  <Test>
    rendering
      ✓ should render title (18ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.945s, estimated 3s
Ran all test suites matching /test\/components\/test.spec.tsx/i.
✨  Done in 4.01s.

無事テストがパスしました。

ちなみに先ほどのコンポーネントconsole.log(wrapper.dive().debug());デバッグすると次のように出力されます。

console.log test/components/test.spec.tsx:20
  <styled.div>
    <h1>
      title
    </h1>
    &gt;
  </styled.div>

<Test />レンダリングしているコンポーネントが正しく出力されています。

styled-components jest enzyme test などで検索しましたが英語のページばかりで日本語のページが見つけられなかったので逆引きとして使えるように書いてみました。
英語の習熟の大事さをひしひしと感じます。

AWS Summit Tokyo 2019 参加レポ【後編】

こんにちは。 エンジニアの消火器です。

ちょうど一週間前の今日、 6月12日(水)〜14日(金)に幕張メッセで「AWS Summit Tokyo 2019」が開催されました。

aws.amazon.com

今回はその参加レポート後編になります。 前編は@mikan3rdさんにより書かれたこちらの記事になります。

pathee.hatenablog.com

AWS経験について自分自身としては大きな運用経験は全くないのですが、 AWS様が運営するAWS loft TOKYOのAsk An Expert カウンターを利用させていただいて、 自社のやりたいことと現状、そこからどう理想に近づいていくかの話を丁寧にしていただいたのが記憶に新しいです。

今回はAWSの知見を得るために「AWS Summit行きたい…」とぼそっと社内で言ったところ、OKをいただき参加させていただいた次第です。

続きを読む