Pathee engineering blog

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

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をいただき参加させていただいた次第です。

続きを読む

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

Patheeエンジニアの @mikan3rd です!

6月12日(水)〜14日(金)、幕張メッセで「AWS Summit Tokyo 2019」が開催されました

aws.amazon.com

自分はインフラ方面が苦手で、AWSに関する知見はほとんどありません。

しかし、プログラミングを始めたばかりの時にEC2をちょろっと使ったことがあり、AWSのサポートが親切だったことは覚えています。

当時は料金体系の仕組みがよく分かっておらず、練習で立てたインスタンスを放置してたら少し課金されてしまいました。

「どうしたら無料で運用できますか?」みたいなアホな問い合わせをしたにも関わらず、カスタマーサービスの担当者の方が親切に回答してくれた上、「お客様の意図しないものだったようなので今回限りですが返金させていただきます」と返金までしてくれました。

(ちなみにインスタンスを2台稼働させていたせいで無料枠の750時間を超えていただけです)

転職後はAWSに触れる機会がなかったのですが、PatheeでもAWSを本格的に使おうという機運が高まったこともあり、勉強がてら参加することにしました

f:id:pathee:20190614003127j:plain

続きを読む