AngularJS のチュートリアルを React にリプレイスしてみた②

export type Android = {
  os: string;
  ui: string;
};
 
export type Battery = {
  standbyTime: string;
  talkTime: string;
  type: string;
};
 
export type Camera = {
  features: string[];
  primary: string;
};
 
export type Connectivity = {
  bluetooth: string;
  cell: string;
  gps: boolean;
  infrared: boolean;
  wifi: string;
};
 
export type Display = {
  screenResolution: string;
  screenSize: string;
  touchScreen: boolean;
};
 
export type Hardware = {
  accelerometer: boolean;
  audioJack: string;
  cpu: string;
  fmRadio: boolean;
  physicalKeyboard: boolean;
  usb: string;
};
 
export type SizeAndWeight = {
  dimensions: string[];
  weight: string;
};
 
export type Storage = {
  flash: string;
  ram: string;
};
 
export type PhoneDetail = {
  additionalFeatures: string;
  android: Android;
  availability: string[];
  battery: Battery;
  camera: Camera;
  connectivity: Connectivity;
  description: string;
  display: Display;
  hardware: Hardware;
  id: string;
  images: string[];
  name: string;
  sizeAndWeight: SizeAndWeight;
  storage: Storage;
};

<ul class="specs">
  <li>
    <span>Availability and Networks</span>
    <dl>
      <dt>Availability</dt>
      <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
    </dl>
  </li>
  <li>
    <span>Battery</span>
    <dl>
      <dt>Type</dt>
      <dd>{{$ctrl.phone.battery.type}}</dd>
      <dt>Talk Time</dt>
      <dd>{{$ctrl.phone.battery.talkTime}}</dd>
      <dt>Standby time (max)</dt>
      <dd>{{$ctrl.phone.battery.standbyTime}}</dd>
    </dl>
  </li>
  <li>
    <span>Storage and Memory</span>
    <dl>
      <dt>RAM</dt>
      <dd>{{$ctrl.phone.storage.ram}}</dd>
      <dt>Internal Storage</dt>
      <dd>{{$ctrl.phone.storage.flash}}</dd>
    </dl>
  </li>
  <li>
    <span>Connectivity</span>
    <dl>
      <dt>Network Support</dt>
      <dd>{{$ctrl.phone.connectivity.cell}}</dd>
      <dt>WiFi</dt>
      <dd>{{$ctrl.phone.connectivity.wifi}}</dd>
      <dt>Bluetooth</dt>
      <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
      <dt>Infrared</dt>
      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
      <dt>GPS</dt>
      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
    </dl>
  </li>
  <li>
    <span>Android</span>
    <dl>
      <dt>OS Version</dt>
      <dd>{{$ctrl.phone.android.os}}</dd>
      <dt>UI</dt>
      <dd>{{$ctrl.phone.android.ui}}</dd>
    </dl>
  </li>
  <li>
    <span>Size and Weight</span>
    <dl>
      <dt>Dimensions</dt>
      <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
      <dt>Weight</dt>
      <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
    </dl>
  </li>
  <li>
    <span>Display</span>
    <dl>
      <dt>Screen size</dt>
      <dd>{{$ctrl.phone.display.screenSize}}</dd>
      <dt>Screen resolution</dt>
      <dd>{{$ctrl.phone.display.screenResolution}}</dd>
      <dt>Touch screen</dt>
      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
    </dl>
  </li>
  <li>
    <span>Hardware</span>
    <dl>
      <dt>CPU</dt>
      <dd>{{$ctrl.phone.hardware.cpu}}</dd>
      <dt>USB</dt>
      <dd>{{$ctrl.phone.hardware.usb}}</dd>
      <dt>Audio / headphone jack</dt>
      <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
      <dt>FM Radio</dt>
      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
      <dt>Accelerometer</dt>
      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
    </dl>
  </li>
  <li>
    <span>Camera</span>
    <dl>
      <dt>Primary</dt>
      <dd>{{$ctrl.phone.camera.primary}}</dd>
      <dt>Features</dt>
      <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
    </dl>
  </li>
  <li>
    <span>Additional Features</span>
    <dd>{{$ctrl.phone.additionalFeatures}}</dd>
  </li>
</ul>

import angular from 'angular';
import React from 'react';
import { react2angular } from 'react2angular';
import { PhoneDetail } from './types';
 
type Props = {
  phone: PhoneDetail;
  $filter: ng.IFilterService;
};
 
const Specifiction: React.FC<Props> = ({ phone, $filter }) => {
  const checkmark = $filter('checkmark') as (input: boolean) => string;
 
  return (
    <ul className="specs">
      <li>
        <span>Availability and Networks</span>
        <dl>
          <dt>Availability</dt>
          {phone.availability.map((availability) => (
            <dd key={availability}>{availability}</dd>
          ))}
        </dl>
      </li>
      <li>
        <span>Battery</span>
        <dl>
          <dt>Type</dt>
          <dd>{phone.battery.type}</dd>
          <dt>Talk Time</dt>
          <dd>{phone.battery.talkTime}</dd>
          <dt>Standby time (max)</dt>
          <dd>{phone.battery.standbyTime}</dd>
        </dl>
      </li>
      <li>
        <span>Storage and Memory</span>
        <dl>
          <dt>RAM</dt>
          <dd>{phone.storage.ram}</dd>
          <dt>Internal Storage</dt>
          <dd>{phone.storage.flash}</dd>
        </dl>
      </li>
      <li>
        <span>Connectivity</span>
        <dl>
          <dt>Network Support</dt>
          <dd>{phone.connectivity.cell}</dd>
          <dt>WiFi</dt>
          <dd>{phone.connectivity.wifi}</dd>
          <dt>Bluetooth</dt>
          <dd>{phone.connectivity.bluetooth}</dd>
          <dt>Infrared</dt>
          <dd>{phone.connectivity.infrared}</dd>
          <dt>GPS</dt>
          <dd>{checkmark(phone.connectivity.gps)}</dd>
        </dl>
      </li>
      <li>
        <span>Android</span>
        <dl>
          <dt>OS Version</dt>
          <dd>{phone.android.os}</dd>
          <dt>UI</dt>
          <dd>{phone.android.ui}</dd>
        </dl>
      </li>
      <li>
        <span>Size and Weight</span>
        <dl>
          <dt>Dimensions</dt>
          {phone.sizeAndWeight.dimensions.map((dim) => (
            <dd key={dim}>{dim}</dd>
          ))}
          <dt>Weight</dt>
          <dd>{phone.sizeAndWeight.weight}</dd>
        </dl>
      </li>
      <li>
        <span>Display</span>
        <dl>
          <dt>Screen size</dt>
          <dd>{phone.display.screenSize}</dd>
          <dt>Screen resolution</dt>
          <dd>{phone.display.screenResolution}</dd>
          <dt>Touch screen</dt>
          <dd>{checkmark(phone.display.touchScreen)}</dd>
        </dl>
      </li>
      <li>
        <span>Hardware</span>
        <dl>
          <dt>CPU</dt>
          <dd>{phone.hardware.cpu}</dd>
          <dt>USB</dt>
          <dd>{phone.hardware.usb}</dd>
          <dt>Audio / headphone jack</dt>
          <dd>{phone.hardware.audioJack}</dd>
          <dt>FM Radio</dt>
          <dd>{checkmark(phone.hardware.fmRadio)}</dd>
          <dt>Accelerometer</dt>
          <dd>{checkmark(phone.hardware.accelerometer)}</dd>
        </dl>
      </li>
      <li>
        <span>Camera</span>
        <dl>
          <dt>Primary</dt>
          <dd>{phone.camera.primary}</dd>
          <dt>Features</dt>
          <dd>{phone.camera.features.join(', ')}</dd>
        </dl>
      </li>
      <li>
        <span>Additional Features</span>
        <dd>{phone.additionalFeatures}</dd>
      </li>
    </ul>
  );
};

type Props = {
  phone: PhoneDetail;
  $filter: ng.IFilterService;
};

const checkmark = $filter('checkmark') as (input: boolean) => string;

  <dl>
    <dt>Availability</dt>
-    <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+    {phone.availability.map((availability) => (
+      <dd key={availability}>{availability}</dd>
+    ))}
  </dl>

  <dt>GPS</dt>
- <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>  
+ <dd>{checkmark(phone.connectivity.gps)}</dd>

angular
  .module('phoneDetail')
  .component('specification', react2angular(Specifiction, ['phone'], ['$filter']));

`app/main.ts` で追加したモジュールを import しましょう。

```diff
+ import './phone-detail/Specifiction';

<specification ng-if="$ctrl.phone.$resolved" phone="$ctrl.phone"></specification> 

npm run e2e

export const checkmark = (input: boolean) => {
  return input ? '\u2713' : '\u2718';
};

import { checkmark } from './checkmark';
 
describe('checkmark', () => {
  it('should convert boolean values to unicode checkmark or cross', () => {
    expect(checkmark(true)).toBe('\u2713');
    expect(checkmark(false)).toBe('\u2718');
  });
});

  import angular from 'angular';
  import React from 'react';
  import { react2angular } from 'react2angular';
  import { PhoneDetail } from './types';
+ import { checkmark } from '../core/checkmark/checkmark';
 
  type Props = {
    phone: PhoneDetail;
-   $filter: ng.IFilterService;
  };
 
- const Specifiction: React.FC<Props> = ({ phone, $filter }) => {
+ const Specifiction: React.FC<Props> = ({ phone, $filter }) => {
 
-   const checkmark = $filter('checkmark') as (input: boolean) => string;
 
    return (
      <ul className="specs">
        {/* ... */}
      </ul>
    )
  };
 
  export default Specifiction;
 
  angular
    .module('phoneDetail')
-   .component('specification', react2angular(Specifiction, ['phone'], ['$filter']));
+   .component('specification', react2angular(Specifiction, ['phone']));

rm app/core/checkmark/checkmark.filter.js
rm app/core/checkmark/checkmark.filter.spec.js

- import './core/checkmark/checkmark.filter';

npm run e2e

<div class="phone-images">
  <img ng-src="{{img}}" class="phone"
      ng-class="{selected: img === $ctrl.mainImageUrl}"
      ng-repeat="img in $ctrl.phone.images" />
</div>
 
<h1>{{$ctrl.phone.name}}</h1>
 
<p>{{$ctrl.phone.description}}</p>
 
<ul class="phone-thumbs">
  <li ng-repeat="img in $ctrl.phone.images">
    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
  </li>
</ul>

'use strict';
 
angular.module('phonecatApp').animation('.phone', function phoneAnimationFactory() {
  return {
    addClass: animateIn,
    removeClass: animateOut
  };
 
  function animateIn(element, className, done) {
    if (className !== 'selected') return;
 
    element
      .css({
        display: 'block',
        position: 'absolute',
        top: 500,
        left: 0
      })
      .animate(
        {
          top: 0
        },
        done
      );
 
    return function animateInEnd(wasCanceled) {
      if (wasCanceled) element.stop();
    };
  }
 
  function animateOut(element, className, done) {
    if (className !== 'selected') return;
 
    element
      .css({
        position: 'absolute',
        top: 0,
        left: 0
      })
      .animate(
        {
          top: -500
        },
        done
      );
 
    return function animateOutEnd(wasCanceled) {
      if (wasCanceled) element.stop();
    };
  }
});

npm i framer-motion@^6.5.1

import angular from 'angular';
import React from 'react';
import { react2angular } from 'react2angular';
import { PhoneDetail } from './types';
import { motion, AnimatePresence } from 'framer-motion';
 
type Props = {
  phone: PhoneDetail;
  mainImageUrl: string;
  setImage: (imageUrl: string) => void;
};
 
const PhoneImages: React.FC<Props> = ({ phone, mainImageUrl, setImage }) => {
  return (
    <>
      <div className="phone-images">
        <AnimatePresence initial={false}>
          <motion.img
            src={mainImageUrl}
            key={mainImageUrl}
            className="phone selected"
            data-testid="main-image"
            transition={{ duration: 0.5 }}
            style={{ display: 'block', position: 'absolute', top: 500, left: 0 }}
            animate={{ top: 0 }}
            exit={{
              top: -500
            }}
          />
        </AnimatePresence>
      </div>
 
      <h1>{phone.name}</h1>
 
      <p>{phone.description}</p>
 
      <ul className="phone-thumbs">
        {phone.images.map((image) => (
          <li key={image}>
            <img key={image} src={image} onClick={() => setImage(image)} />
          </li>
        ))}
      </ul>
    </>
  );
};
 
export default PhoneImages;
 
angular
  .module('phoneDetail')
  .component('phoneImages', react2angular(PhoneImages, ['phone', 'mainImageUrl', 'setImage']));
 

<div className="phone-images">
  <AnimatePresence initial={false}>
    <motion.img
      src={mainImageUrl}
      key={mainImageUrl}
      className="phone selected"
      data-testid="main-image"
      style={{ display: 'block', position: 'absolute', top: 500, left: 0 }}
      animate={{ top: 0 }}
      exit={{
        top: -500
      }}
      transition={{ duration: 0.5 }}
    />
  </AnimatePresence>
</div>

<ul className="phone-thumbs">
  {phone.images.map((image) => (
    <li key={image}>
      <img key={image} src={image} onClick={() => setImage(image)} />
    </li>
  ))}
</ul>

angular
  .module('phoneDetail')
  .component('phoneImages', react2angular(PhoneImages, ['phone', 'mainImageUrl', 'setImage']));

+ import './phone-detail/PhoneImags';

- <div class="phone-images">
-   <img ng-src="{{img}}" class="phone"
-       ng-class="{selected: img === $ctrl.mainImageUrl}"
-       ng-repeat="img in $ctrl.phone.images" />
- </div>
- 
- <h1>{{$ctrl.phone.name}}</h1>
- 
- <p>{{$ctrl.phone.description}}</p>
- 
- <ul class="phone-thumbs">
-   <li ng-repeat="img in $ctrl.phone.images">
-     <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
-   </li>
- </ul>
 
+ <phone-images ng-if="$ctrl.phone.$resolved" phone="$ctrl.phone" main-image-url="$ctrl.mainImageUrl"
+   set-image="$ctrl.setImage">
+ </phone-images>

  angular.module('phoneDetail').component('phoneDetail', {
    template,
     controller: [
+     '$timeout',
      '$routeParams',
      'Phone',
-     function PhoneDetailController($routeParams, Phone) {
+     function PhoneDetailController($timeout, $routeParams, Phone) {
        var self = this;
        self.phone = Phone.get({ phoneId: $routeParams.phoneId }, function (phone) {
+         self.setImage(phone.images[0]);          
-         self.mainImageUrl = phone.images[0];
        });
 
        self.setImage = function setImage(imageUrl) {
-         self.mainImageUrl = imageUrl;
+         $timeout(function () {
+           self.mainImageUrl = imageUrl;
+         });
        };
      }
    ]
  });

  test('should swap main image if a thumbnail is clicked', async ({ page }) => {
    const mainImage = page.locator('img.selected');
    const thumbnails = page.locator('role=listitem').locator('role=img');
 
    await thumbnails.nth(2).click();
+   await page.waitForTimeout(1000);
    expect(mainImage).toHaveAttribute('src', 'img/phones/nexus-s.2.jpg');
 
    await thumbnails.first().click();
+   await page.waitForTimeout(1000);
    expect(mainImage).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
  });

npm run e2e

import React from 'react';
import { render, screen, within } from '@testing-library/react';
import 'angular';
import './phone-detail.module';
import PhoneImages from './PhoneImags';
import nexusS from '../phones/nexus-s.json';
import userEvent from '@testing-library/user-event';
 
describe('PhoneImages', () => {
  it('should display the `mainImageUrl` props as the main phone image', () => {
    const setImage = jest.fn();
    render(
      <PhoneImages phone={nexusS} mainImageUrl="img/phones/nexus-s.0.jpg" setImage={setImage} />
    );
 
    expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
  });
 
  it('should call `setImage` when an image is clicked', () => {
    const setImage = jest.fn();
    render(
      <PhoneImages phone={nexusS} mainImageUrl="img/phones/nexus-s.1.jpg" setImage={setImage} />
    );
 
    const thumbnails = screen.getAllByRole('listitem');
    userEvent.click(within(thumbnails[1]).getByRole('img'));
 
    expect(setImage).toHaveBeenCalledWith('img/phones/nexus-s.1.jpg');
  });
});

expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');

const thumbnails = screen.getAllByRole('listitem');
userEvent.click(within(thumbnails[1]).getByRole('img'));
 
expect(setImage).toHaveBeenCalledWith('img/phones/nexus-s.1.jpg');

npm run test

npm install --save-dev @types/angular-route

import angular from 'angular';
import React, { useEffect, useState } from 'react';
import { react2angular } from 'react2angular';
import PhoneImages from './PhoneImags';
import Specifiction from './Specifiction';
import { PhoneDetail } from './types';
 
type Props = {
  Phone: ng.resource.IResourceClass<PhoneDetail>;
  $routeParams: ng.route.IRouteParamsService;
};
 
const PhoneDetail: React.FC<Props> = ({ Phone, $routeParams }) => {
  const [phone, setPhone] = useState<PhoneDetail | null>(null);
  const [mainImageUrl, setMainImageUrl] = useState('');
 
  useEffect(() => {
    let igonre = false;
    Phone.get({ phoneId: $routeParams.phoneId }, (result: PhoneDetail) => {
      console.log({ result });
      if (!igonre) {
        setPhone(result);
        setMainImageUrl(result.images[0]);
      }
    });
    return () => {
      igonre = true;
    };
  }, [Phone, setPhone, $routeParams, setMainImageUrl]);
 
  if (!phone || !mainImageUrl) {
    return null;
  }
 
  return (
    <>
      <PhoneImages phone={phone} mainImageUrl={mainImageUrl} setImage={setMainImageUrl} />
 
      <Specifiction phone={phone} />
    </>
  );
};
 
export default PhoneDetail;
 
angular
  .module('phoneDetail')
  .component('phoneDetail', react2angular(PhoneDetail, [], ['Phone', '$routeParams']));

type Props = {
  Phone: ng.resource.IResourceClass<PhoneDetail>;
  $routeParams: ng.route.IRouteParamsService;
};

const [phone, setPhone] = useState<PhoneDetail | null>(null);
const [mainImageUrl, setMainImageUrl] = useState('');
 
useEffect(() => {
  let igonre = false;
  Phone.get({ phoneId: $routeParams.phoneId }, (result: PhoneDetail) => {
    if (!igonre) {
      setPhone(result);
      setMainImageUrl(result.images[0]);
    }
  });
  return () => {
    igonre = true;
  };
}, [Phone, setPhone, $routeParams, setMainImageUrl]);

if (!phone || !mainImageUrl) {
  return null;
}

return (
  <>
    <PhoneImages phone={phone} mainImageUrl={mainImageUrl} setImage={setMainImageUrl} />
 
    <Specifiction phone={phone} />
  </>
);

angular
  .module('phoneDetail')
  .component('phoneDetail', react2angular(PhoneDetail, [], ['Phone', '$routeParams']));

+ import './phone-detail/PhoneDetail';
- import './phone-detail/phone-detail.component';
- import './phone-detail/Specifiction';
- import './phone-detail/PhoneImags';

rm app/phone-detail/phone-detail.compoment.js
rm app/phone-detail/phone-detail.compoment.spec.js
rm app/phone-detail/phone-detail.template.html

npm run e2e

import React from 'react';
import { act, render, screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import angular from 'angular';
import 'angular-resource';
import 'angular-route';
import 'angular-mocks';
import './phone-detail.module';
import '../core/phone/phone.module';
import PhoneDetail from './PhoneDetail';
import nexusS from '../phones/nexus-s.json';
import { PhoneDetail as PhoneDetailType } from './types';
 
describe('PhoneList', () => {
  let Phone: ng.resource.IResourceClass<PhoneDetailType>;
  let $httpBackend: ng.IHttpBackendService;
  let $routeParams: ng.route.IRouteParamsService;
 
  beforeEach(() => {
    angular.mock.module('phoneDetail');
    angular.mock.inject(($resource, _$httpBackend_, _$routeParams_) => {
      Phone = $resource(
        'phones/:phoneId.json',
        {},
        {
          query: {
            method: 'GET',
            params: { phoneId: 'phones' },
            isArray: true
          }
        }
      );
 
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/nexus-s.json').respond(nexusS);
 
      $routeParams = _$routeParams_;
      $routeParams.phoneId = 'nexus-s';
    });
  });
 
  it('should fetch the `nexus-s`', async () => {
    render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
    act(() => {
      $httpBackend.flush();
    });
 
    expect(screen.getByRole('heading')).toHaveTextContent('Nexus S');
  });
 
  it('should display the first phone image as the main phone image', async () => {
    render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
    act(() => {
      $httpBackend.flush();
    });
 
    expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
  });
 
  it('should swap main image if a thumbnail is clicked', () => {
    render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
    act(() => {
      $httpBackend.flush();
    });
 
    const thumbnails = screen.getAllByRole('listitem');
    userEvent.click(within(thumbnails[2]).getByRole('img'));
 
    waitFor(() =>
      expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.2.jpg')
    );
  });
});

describe('PhoneList', () => {
  let Phone: ng.resource.IResourceClass<PhoneDetailType>;
  let $httpBackend: ng.IHttpBackendService;
  let $routeParams: ng.route.IRouteParamsService;
 
  beforeEach(() => {
    angular.mock.module('phoneDetail');
    angular.mock.inject(($resource, _$httpBackend_, _$routeParams_) => {
      Phone = $resource(
        'phones/:phoneId.json',
        {},
        {
          query: {
            method: 'GET',
            params: { phoneId: 'phones' },
            isArray: true
          }
        }
      );
 
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/nexus-s.json').respond(nexusS);
 
      $routeParams = _$routeParams_;
      $routeParams.phoneId = 'nexus-s';
    });
  });

 
it('should fetch the `nexus-s`', async () => {
  render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
  act(() => {
    $httpBackend.flush();
  });
 
  expect(screen.getByRole('heading')).toHaveTextContent('Nexus S');
});

it('should display the first phone image as the main phone image', async () => {
  render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
  act(() => {
    $httpBackend.flush();
  });
 
  expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
});

it('should swap main image if a thumbnail is clicked', () => {
  render(<PhoneDetail Phone={Phone} $routeParams={$routeParams} />);
 
  act(() => {
    $httpBackend.flush();
  });
 
  const thumbnails = screen.getAllByRole('listitem');
  userEvent.click(within(thumbnails[2]).getByRole('img'));
 
  waitFor(() =>
    expect(screen.getByTestId('main-image')).toHaveAttribute('src', 'img/phones/nexus-s.2.jpg')
  );
});

npm run test

export const fetcher = async <T>(input: RequestInfo, init?: RequestInit): Promise<T> => {
  const response = await fetch(input, init);
 
  if (!response.ok) {
    throw new Error(`${response.status} ${response.statusText}`);
  }
 
  return response.json();
};

import useSWR from 'swr'
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

import useSWR from 'swr';
import { Phone } from './types';
import { fetcher } from '../core/fetcher';
 
const getPhones = async (): Promise<Phone[]> => {
  return await fetcher<Phone[]>('phones/phones.json');
};
 
type UsePhonesReturn = {
  phones: Phone[];
  isLoading: boolean;
  error: Error | undefined;
}
 
const usePhones = (): UsePhonesReturn => {
  const { data, error } = useSWR<Phone[]>('phones/phones.json', getPhones);
  return {
    phones: data ?? [],
    isLoading: !error && !data,
    error
  };
};
 
export default usePhones;

  import angular from 'angular';
- import React, { useState } from 'react';
+ import React, { useStaet, useEffect } from 'react'
  import { react2angular } from 'react2angular';
+ import usePhones from './usePhones';
  import PhoneItems from './PhoneItems';
 
- type Props = {
-   Phone: ng.resource.IResourceClass<Phone>;
- };
 
- const PhoneList: React.FC<Props> => ({ Phone }) => {
+ const PhoneList: React.FC = () => {
-   const [phones, setPhones] = useState<Phone[]>([]);
+   const { phones } = usePhones();
    const [query, setQuery] = useState('');
    const [orderProp, setOrderProp] = useState<'name' | 'age'>('age');
 
-  useEffect(() => {
-   let igonre = false;
-   Phone.query().$promise.then((result) => {
-     if (!igonre) {
-       setPhones(result);
-     }
-   });
-   return () => {
-     igonre = true;
-   };
- }, [Phone, setPhones]);
 
    return (
      {/* ... */}
    );
  };
 
  export default PhoneList;
 
- angular.module('phoneList').component('phoneList', react2angular(PhoneList, [], ['Phone']));
+ angular.module('phoneList').component('phoneList', react2angular(PhoneList, []));

- render(<PhoneList Phone={Phone} />);
+ render(<PhoneList />);

npm run e2e

npm run test
 
Test Suites: 1 failed, 5 passed, 6 total
Tests:       3 failed, 10 passed, 13 total
Snapshots:   0 total
Time:        23.607 s

npm install --save-dev msw

import { ResponseResolver, RestContext, RestRequest } from 'msw';
import phones from '../../phones/phones.json';
import { Phone } from '../../phone-list/types';
 
export const phoneList: ResponseResolver<RestRequest, RestContext> = (req, res, ctx) => {
  return res(ctx.status(200), ctx.json<Phone[]>(phones));
};

import { rest } from 'msw'
import { phoneList } from './resolvers/phones'
 
export const handlers = [
  rest.get('phones/phones.json', phoneList),
]

import { setupServer } from "msw/node";
import { handlers } from "./handlers";
 
export const server = setupServer(...handlers)

import '@testing-library/jest-dom';
import { server } from './app/mocks/server.ts';
 
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
 
global.jasmine = true;

import React, { ReactNode, ReactElement } from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { SWRConfig } from 'swr';
 
const Wrapper = ({ children }: { children: ReactNode }) => {
  return <SWRConfig value={{ dedupingInterval: 0 }}>{children}</SWRConfig>;
};
 
const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
  render(ui, { wrapper: Wrapper, ...options });
 
export * from '@testing-library/react';
 
export { customRender as render };

- import { render, screen, waitFor } from '@testing-library/react';
+ import { render, screen, waitFor } from '../test-utils';

import { cache } from "swr";
 
afterEach(() => {
  cache.clear();
});

npm install --save-dev whatwg-fetch

import 'whatwg-fetch';

- import 'angular-resource';
- import 'angular-mocks';
- import '../core/phone/phone.module';
- import phones from '../phones/phones.json
- import { Phone } from './types';
 
  describe('PhoneList', () => {
-   let Phone: ng.resource.IResourceClass<Phone>;
-   let $httpBackend: ng.IHttpBackendService;
-
-   beforeEach(() => {
-     angular.mock.module('phoneList');
-     angular.mock.inject(($resource, _$httpBackend_) => {
-       Phone = $resource(
-         'phones/:phoneId.json',
-         {},
-         {
-           query: {
-             method: 'GET',
-             params: { phoneId: 'phones' },
-             isArray: true
-           }
-         }
-       );
-
-       $httpBackend = _$httpBackend_;
-       $httpBackend.expectGET('phones/phones.json').respond(phones);
-     });
-   });

  it('should render phone items', async () => {
    render(<PhoneList Phone={Phone} />);
 
-   act(() => {
-     $httpBackend.flush();
-   });
    const phoneList = await screen.findAllByRole('listitem');
    expect(phoneList).toHaveLength(20);
    expect(phoneList[0]).toHaveTextContent('Motorola XOOM™ with Wi-Fi');
  });

npm run test
 
Test Suites: 6 passed, 6 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        18.863 s, estimated 19 s

import useSWR from 'swr';
import { fetcher } from '../core/fetcher';
import { PhoneDetail } from './types';
 
const getPhoneById = async (url: string) => {
  return await fetcher<PhoneDetail>(url);
};
 
type UsePhonesReturn = {
  phone: PhoneDetail | undefined;
  isLoading: boolean;
  error: Error | undefined;
};
 
type UsePhoneParams = {
  id: string;
};
 
const usePhone = ({ id }: UsePhoneParams): UsePhonesReturn => {
  const { data, error } = useSWR<PhoneDetail>(`phones/${id}.json`, getPhoneById);
 
  return {
    phone: data,
    isLoading: !error && !data,
    error
  };
};
 
export default usePhone;

const getPhoneById = async (url: string) => {
  return await fetcher<PhoneDetail>(url);
};

  type Props = {
-   Phone: ng.resource.IResourceClass<PhoneDetail>;
    $routeParams: ng.route.IRouteParamsService;
  };
 
- const PhoneDetail: React.FC<Props> = ({ Phone, $routeParams }) => {
+ const PhoneDetail: React.FC<Props> = ({ $routeParams }) => {