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

npm init playwright@latest
 
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false

rm -rf tests-examples
rm tests/example.spec.ts

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
-     {
-       name: 'firefox',
-       use: {
-         ...devices['Desktop Firefox'],
-       },
-     },
 
-     {
-       name: 'webkit',
-       use: {
-         ...devices['Desktop Safari'],
-       },
-     },

  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
+   screenshot: 'only-on-failure'
  },

import { test, expect } from '@playwright/test';
 
test.describe('PhoneCat Application', () => {
 
  test('should redirect `index.html` to `index.html#!/phones', async ({ page }) => {
    await page.goto('http://localhost:8000/');
 
    await expect(page).toHaveURL('http://localhost:8000/#!/phones');
  });
})

npm run start

  "scripts": {
    "e2e": "playwright test"
  }

npm run e2e

> [email protected] e2e
> playwright test

Running 1 test using 1 worker

  1 passed (2s)

To open last HTML report run:

  npx playwright show-report

test.describe('View: Phone list', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('http://localhost:8000/#!/phones');
    });
 
    test('should filter the phone list as a user types into the search box', async ({ page }) => {
      const phoneList = page.locator('role=listitem');
      const input = page.locator("input");
 
      expect(phoneList).toHaveCount(20);
 
      await input.fill('nexus');
      await page.waitForTimeout(1000);
      expect(phoneList).toHaveCount(1);
 
      await input.fill('motorola');
      await page.waitForTimeout(1000);
      expect(phoneList).toHaveCount(8);
    })
  })

  test.describe('View: Phone list', () => {
    // ...
 
    test('should be possible to control phone order via the drop-down menu', async ({ page }) => {
      const dropdown = page.locator('select');
      const input = page.locator("input");
      const phoneList = page.locator('role=listitem').locator('role=link');
 
      const getNames = async () => {
        const names = await phoneList.allInnerTexts();
        return names.filter((name) => !!name);
      }
 
      await input.fill('tablet');
      await page.waitForTimeout(1000);
 
      expect(await getNames()).toEqual([
        'Motorola XOOM\u2122 with Wi-Fi',
        'MOTOROLA XOOM\u2122'
      ])
 
      await dropdown.selectOption('name');
      await page.waitForTimeout(1000);
 
      expect(await getNames()).toEqual([
        'MOTOROLA XOOM\u2122',
        'Motorola XOOM\u2122 with Wi-Fi'
      ])
    })
  })

  test.describe('View: Phone list', () => {
    // ...
 
    test('should render phone specific links', async ({ page }) => {
      const input = page.locator("input");
 
      await input.fill('nexus');
      await page.waitForTimeout(1000);
 
      const firstPhoneLink = page.locator('role=listitem').locator('role=link').first();
 
      await firstPhoneLink.click();
 
      expect(page).toHaveURL('http://localhost:8000/#!/phones/nexus-s');
    })
  })

test.describe('View: Phone detail', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:8000/#!/phones/nexus-s');
  })
 
  test('should display the `nexus-s` page', async ({ page }) => {
    expect(page.locator('role=heading').first()).toHaveText('Nexus S');
  })
 
  test('should display the first phone image as the main phone image', async ({ page }) => {
    const mainImage = page.locator('img.selected');
    expect(mainImage).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
  })
 
  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();
    expect(mainImage).toHaveAttribute('src', 'img/phones/nexus-s.2.jpg');
 
    await thumbnails.first().click();
    expect(mainImage).toHaveAttribute('src', 'img/phones/nexus-s.0.jpg');
  })
})

rm -rf e2e-tests
npm uninstall protractor

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react ts-loader raw-loader html-webpack-plugin style-loader css-loader copy-webpack-plugin

npm install --save-dev @tsconfig/create-react-app typescript @types/react @types/react-dom @types/jquery

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "noEmit": false,
  }
}

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
 
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./app/main.ts",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "main.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
          },
          {
            loader: "ts-loader",
            options: {
              configFile: path.resolve(__dirname, "tsconfig.json"),
            },
          },
        ],
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/,
        use: ["raw-loader"],
      },
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 8000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./app/index.html",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: "./",
          to: "./phones",
          context: "./app/phones",
        },
        {
          from: "./",
          to: "./img",
          context: "./app/img",
        },
      ],
    }),
  ],
};

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

  "scripts": {
-     "postinstall": "npm run copy-libs",
    "update-deps": "npm update",
-    "postupdate-deps": "npm run copy-libs",
-    "copy-libs": "cpx \"node_modules/{angular,angular-*,bootstrap/dist,jquery/dist}/**/*\" app/lib -C",
-    "prestart": "npm install",
-    "start": "http-server ./app -a localhost -p 8000 -c-1",
+    "start": "http-server ./dist -a localhost -p 8000 -c-1",
-    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "npm test -- --single-run",
    "e2e": "playwright test",
+    "build": "webpack",
+    "dev": "webpack-dev-server"
  }

+ dist

import "jquery"
import 'angular'
import 'angular-resource'
import 'angular-route'
import 'angular-animate/angular-animate'
 
import 'bootstrap/dist/css/bootstrap.css'
import './app.css'
import sh'./app.animations.css'
 
import './app.module'
import './app.config'
import './app.animations'
import './phone-list/phone-list.module'
import './phone-list/phone-list.component'
import './phone-detail/phone-detail.module'
import './phone-detail/phone-detail.component'
import './core/core.module'
import './core/checkmark/checkmark.filter'
import './core/phone/phone.module'
import './core/phone/phone.service'

-  <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
-  <link rel="stylesheet" href="app.css" />
-  <link rel="stylesheet" href="app.animations.css" />
 
-  <script src="lib/jquery/dist/jquery.js"></script>
-  <script src="lib/angular/angular.js"></script>
-  <script src="lib/angular-animate/angular-animate.js"></script>
-  <script src="lib/angular-resource/angular-resource.js"></script>
-  <script src="lib/angular-route/angular-route.js"></script>
-  <script src="app.module.js"></script>
-  <script src="app.config.js"></script>
-  <script src="app.animations.js"></script>
-  <script src="core/core.module.js"></script>
-  <script src="core/checkmark/checkmark.filter.js"></script>
-  <script src="core/phone/phone.module.js"></script>
-  <script src="core/phone/phone.service.js"></script>
-  <script src="phone-list/phone-list.module.js"></script>
-  <script src="phone-list/phone-list.component.js"></script>
-  <script src="phone-detail/phone-detail.module.js"></script>
-  <script src="phone-detail/phone-detail.component.js"></script>

rm -rf app/lib

  'use strict';
+ import template from './phone-list.template.html';
 
  // Register `phoneList` component, along with its associated controller and template
  angular.
    module('phoneList').
    component('phoneList', {
-     templateUrl: 'phone-list/phone-list.template.html',
+     template,
      controller: ['Phone',
        function PhoneListController(Phone) {
          this.phones = Phone.query();
          this.orderProp = 'age';
        }
      ]
    });

  'use strict';
+ import template from './phone-detail.template.html';
  // Register `phoneDetail` component, along with its associated controller and template
  angular.
    module('phoneDetail').
    component('phoneDetail', {
-     templateUrl: 'phone-detail/phone-detail.template.html',
+     template,
      controller: ['$routeParams', 'Phone',
        function PhoneDetailController($routeParams, Phone) {
          var self = this;
          self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
            self.setImage(phone.images[0]);
          });
 
          self.setImage = function setImage(imageUrl) {
            self.mainImageUrl = imageUrl;
          };
        }
      ]
    });

npm run dev

npm run e2e

npx eslint --init

? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
? Which framework does your project use? … 
❯ React
  Vue.js
  None of these
? Does your project use TypeScript? › Yes
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
 
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
? Would you like to install them now? › Yes
? Which package manager do you want to use? … 
❯ npm
  yarn
  pnpm

npm install eslint-plugin-react-hooks --save-dev

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
+   "jasmine": true
  },
+ "globals": {
+   "angular": true,
+   "module": true,
+   "inject": true
+ },

"rules": {
  "@typescript-eslint/no-this-alias": "off",
},

npm i --save-dev prettier eslint-config-prettier

  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
+   "prettier"
  ],

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

"scripts": {
  "lint": "eslint app --ext .js,jsx,.ts,.tsx",
  "lint:fix": "eslint app --ext .js,jsx,.ts,.tsx --fix",
  "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx}'"
}

npm run lint:fix
npm run format

npm run 2e2

npm install --save react2angular [email protected] [email protected]

<ul class="phones">
  <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
      class="thumbnail phone-list-item">
    <a href="#!/phones/{{phone.id}}" class="thumb">
      <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
    </a>
    <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

export type Phone = {
  age: number;
  id: string;
  imageUrl: string;
  name: string;
  snippet: string;
};

import angular from 'angular';
import React from 'react';
import { react2angular } from 'react2angular';
import { Phone } from './types';
 
type Props = {
  phones: Phone[];
  query?: string;
  orderProp: 'name' | 'age';
};
 
const PhoneItems: React.FC<Props> = ({ phones, query, orderProp }) => {
  const filteredPhones = phones.filter((phone) => {
    if (!query) {
      return true;
    }
    return Object.values(phone).some((value) => {
      return String(value).toLowerCase().includes(query.toLowerCase());
    });
  });
  const sortedPhones = filteredPhones.sort((a, b) => {
    if (a[orderProp] < b[orderProp]) {
      return -1;
    }
    if (a[orderProp] > b[orderProp]) {
      return 1;
    }
    return 0;
  });
 
  return (
    <ul className="phones">
      {sortedPhones.map((phone) => (
        <li key={phone.id} className="thumbnail phone-list-item">
          <a href={`#!/phones/${phone.id}`} className="thumb">
            <img src={phone.imageUrl} alt={phone.name} />
          </a>
          <a href={`#!/phones/${phone.id}`}>{phone.name}</a>
          <p>{phone.snippet}</p>
        </li>
      ))}
    </ul>
  );
};
 
export default PhoneItems;
 
angular
  .module('phoneList')
  .component('phoneItems', react2angular(PhoneItems, ['phones', 'query', 'orderProp']));

angular
  .module('phoneList')
  .component('phoneItems', react2angular(PhoneItems, ['phones', 'query', 'orderProp']));

import './phone-list/PhoneItems';

- <ul class="phones">
-   <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
-     class="thumbnail phone-list-item">
-     <a href="#!/phones/{{phone.id}}" class="thumb">
-       <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
-     </a>
-     <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
-     <p>{{phone.snippet}}</p>
-   </li>
- </ul>
+ <phone-items phones="$ctrl.phones" query="$ctrl.query" order-prop="$ctrl.orderProp"></phone-items>

  'use strict';
  import template from './phone-list.template.html';
 
  // Register `phoneList` component, along with its associated controller and template
  angular.module('phoneList').component('phoneList', {
    template,
    controller: [
      'Phone',
      function PhoneListController(Phone) {
-       this.phones = Phone.query()
+        this.phones = [];
+        Phone.query().$promise.then((phones) => {
+          this.phones = phones;
+        });
        this.orderProp = 'age';
      }
    ]
  });

npm install react-transition-group
npm i --save-dev @types/react-transition-group

import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
const PhoneItems: React.FC<Props> = ({ phones, query, orderProp }) => {
return (
    <TransitionGroup component="ul" className="phones">
      {sortedPhones.map((phone) => (
        <CSSTransition
          key={phone.id}
          timeout={500}
          classNames={{
            appear: 'ng-appear',
            appearActive: 'ng-appear-active',
            appearDone: 'ng-appear-done',
            enter: 'ng-enter',
            enterActive: 'ng-enter-active',
            enterDone: 'ng-enter-done',
            exit: 'ng-leave',
            exitActive: 'ng-leave-active',
            exitDone: 'ng-leave-done'
          }}>
          <li className="thumbnail phone-list-item">
            <a href={`#!/phones/${phone.id}`} className="thumb">
              <img src={phone.imageUrl} alt={phone.name} />
            </a>
            <a href={`#!/phones/${phone.id}`}>{phone.name}</a>
            <p>{phone.snippet}</p>
          </li>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

classNames={{
  appear: 'ng-appear',
  appearActive: 'ng-appear-active',
  appearDone: 'ng-appear-done',
  enter: 'ng-enter',
  enterActive: 'ng-enter-active',
  enterDone: 'ng-enter-done',
  exit: 'ng-leave',
  exitActive: 'ng-leave-active',
  exitDone: 'ng-leave-done'
}}>

npm i react-flip-toolkit

import { Flipper, Flipped } from 'react-flip-toolkit';
 
const PhoneItems: React.FC<Props> = ({ phones, query, orderProp }) => {
 
  return (
    <Flipper flipKey={orderProp}>
      <TransitionGroup component="ul" className="phones">
        {sortedPhones.map((phone) => (
          <CSSTransition
            key={phone.id}
            timeout={500}
            classNames={{
              appear: 'ng-appear',
              appearActive: 'ng-appear-active',
              appearDone: 'ng-appear-done',
              enter: 'ng-enter',
              enterActive: 'ng-enter-active',
              enterDone: 'ng-enter-done',
              exit: 'ng-leave',
              exitActive: 'ng-leave-active',
              exitDone: 'ng-leave-done'
            }}>
            <Flipped flipId={phone.id}>
              <li className="thumbnail phone-list-item">
                <a href={`#!/phones/${phone.id}`} className="thumb">
                  <img src={phone.imageUrl} alt={phone.name} />
                </a>
                <a href={`#!/phones/${phone.id}`}>{phone.name}</a>
                <p>{phone.snippet}</p>
              </li>
            </Flipped>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </Flipper>
  );
}

npm run 2e2

npm install --save-dev jest @types/jest ts-jest babel-jest @testing-library/react@12 @testing-library/user-event@12 testing-library/jest-dom jest-environment-jsdom

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  testPathIgnorePatterns: ['/node_modules/', '/tests/'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
  },
  setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
};

// __mocks__/styleMock.js
module.exports = {}

// __mocks__/fileMock.js
module.exports = 'test-file-stub';

// jest.setup.js
import '@testing-library/jest-dom';
 
global.jasmine = true;

(function(jasmineOrMocha) {
 
  if (!jasmineOrMocha) {
    return;
  }
 
...
 
})(window.jasmine || window.mocha);

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
  }
}

- 'use strict';
+ import 'angular';
+ import 'angular-resource';
+ import 'angular-mocks';
 
+ import '../core.module';
+ import '../phone/phone.module';
+ import './checkmark.filter';

  describe('checkmark', function () {
-   beforeEach(module('core'));
+   beroreEach(angular.mock.module('core'));

npm run test checkmark

 PASS  app/core/checkmark/checkmark.filter.spec.js
  checkmark
    ✓ should convert boolean values to unicode checkmark or cross (16 ms)
 
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.982 s
Ran all test suites matching /checkmark/i.

- 'use strict';
+ import 'angular';
+ import 'angular-resource';
+ import 'angular-mocks';
 
+ import '../phone/phone.module';
+ import './phone.service';
 
  describe('Phone', function () {
    var $httpBackend;
    var Phone;
    var phonesData = [{ name: 'Phone X' }, { name: 'Phone Y' }, { name: 'Phone Z' }];
 
    // Load the module that contains the `Phone` service before each test
-   beforeEach(module('core.phone'));
+   beforeEach(angular.mock.module('core.phone'));

  // Add a custom equality tester before each test
  beforeEach(function () {
-   jasmine.addCustomEqualityTester(angular.equals);
+   expect.extend({
+     toEqual: (actual, expected) => {
+       return {
+         pass: angular.equals(actual, expected),
+         message: `Expected ${actual} to equal ${expected}`
+       };
+     }
+    });
  })

npm run test phone.service

  // app/phone-list/phone-list.component.spec.js
- 'use strict';
 
+ import 'angular';
+ import 'angular-resource';
+ import 'angular-route';
+ import 'angular-mocks';
 
+ import '../core/phone/phone.module';
+ import '../core/phone/phone.service';
+ import './phone-list.module';
+ import './phone-list.component';
 
  describe('phoneList', function () {
    // Load the module that contains the `phoneList` component before each test
-   beforeEach(module('phoneList'));
+   beforeEach(angular.mock.module('phoneList'));
 
    it('should create a `phones` property with 2 phones fetched with `$http`', function () {
-      jasmine.addCustomEqualityTester(angular.equals);
+      expect.extend({
+        toEqual: (actual, expected) => {
+          return {
+            pass: angular.equals(actual, expected),
+            message: `Expected ${actual} to equal ${expected}`
+          };
+        }
+       });

  // app/phone-detail/phone-detail.component.spec.js
- 'use strict';
 
+ import 'angular';
+ import 'angular-resource';
+ import 'angular-route';
+ import 'angular-mocks';
 
+ import '../core/phone/phone.module';
+ import '../core/phone/phone.service';
+ import './phone-detail.module';
+ import './phone-detail.component';
 
  describe('phoneDetail', function () {
    // Load the module that contains the `phoneList` component before each test
-   beforeEach(module('phoneDetail'));
+   beforeEach(angular.mock.module('phoneDetail'));
 
    it('should fetch the phone details', function () {
-      jasmine.addCustomEqualityTester(angular.equals);
+      expect.extend({
+        toEqual: (actual, expected) => {
+          return {
+            pass: angular.equals(actual, expected),
+            message: `Expected ${actual} to equal ${expected}`
+          };
+        }
+       });

npm run test
 
 PASS  app/core/checkmark/checkmark.filter.spec.js
 PASS  app/phone-list/phone-list.component.spec.js
 PASS  app/core/phone/phone.service.spec.js
 PASS  app/phone-detail/phone-detail.component.spec.js
 
Test Suites: 4 passed, 4 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        4.355 s
Ran all test suites.

rm karma.conf.js
 
npm uninstall ---save-dev karma karma-chrome-launcher karma-firefox-launcher karma-jasmine jasmine-core

import React from 'react';
import { render, screen } from '@testing-library/react';
import 'angular';
import '../phone-list/phone-list.module';
import PhoneItems from './PhoneItems';
import phones from '../phones/phones.json';
 
describe('PhoneItems', () => {
  it('should render phone items', () => {
    render(<PhoneItems phones={phones} orderProp="age" />);
 
    const phoneList = screen.getAllByRole('listitem');
 
    expect(phoneList).toHaveLength(20);
    expect(phoneList[0]).toHaveTextContent('Motorola XOOM™ with Wi-Fi');
  });
 
  it('should render phone items with query', () => {
    render(<PhoneItems phones={phones} query="motorola" orderProp="age" />);
 
    expect(screen.getAllByRole('listitem')).toHaveLength(8);
  });
 
  it('should render phone items with query and orderProp', () => {
    render(<PhoneItems phones={phones} query="motorola" orderProp="name" />);
 
    const phoneList = screen.getAllByRole('listitem');
 
    expect(phoneList).toHaveLength(8);
    expect(phoneList[0]).toHaveTextContent('DROID™ 2 Global by Motorola');
  });
});

npm run test
 PASS  app/core/phone/phone.service.spec.js
 PASS  app/phone-list/phone-list.component.spec.js
 PASS  app/core/checkmark/checkmark.filter.spec.js
 PASS  app/phone-detail/phone-detail.component.spec.js
 PASS  app/phone-list/PhoneItems.spec.tsx (8.924 s)
 
Test Suites: 5 passed, 5 total
Tests:       8 passed, 8 total
Snapshots:   0 total
Time:        10.809 s
Ran all test suites.

npm run e2e

npm install --save @types/angular-resource

import angular from 'angular';
import React, { useEffect, useState } from 'react';
import { react2angular } from 'react2angular';
import PhoneItems from './PhoneItems';
import { Phone } from './types';
 
type Props = {
  Phone: ng.resource.IResourceClass<Phone>;
};
 
const PhoneList: React.FC<Props> = ({ Phone }) => {
  const [phones, setPhones] = useState<Phone[]>([]);
  const [query, setQuery] = useState('');
  const [orderProp, setOrderProp] = useState<'name' | 'age'>('name');
  useEffect(() => {
    Phone.query().$promise.then((result) => {
      setPhones(result);
    });
  }, [Phone, setPhones]);
 
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-md-2">
          <p>
            Search: <input value={query} onChange={(e) => setQuery(e.target.value)} />
          </p>
 
          <p>
            Sort by:{' '}
            <select
              value={orderProp}
              onChange={(e) => setOrderProp(e.target.value as 'name' | 'age')}>
              <option value="name">Alphabetical</option>
              <option value="age">Newest</option>
            </select>
          </p>
        </div>
        <div className="col-md-10">
          <PhoneItems phones={phones} query={query} orderProp={orderProp} />
        </div>
      </div>
    </div>
  );
};
 
export default PhoneList;
 
angular.module('phoneList').component('phoneList', react2angular(PhoneList, [], ['Phone']));

type Props = {
  Phone: ng.resource.IResourceClass<Phone>;
};

const [phones, setPhones] = useState<Phone[]>([]);
 
useEffect(() => {
  let igonre = false;
  Phone.query().$promise.then((result) => {
    if (!igonre) {
      setPhones(result);
    }
  });
 
  return () => {
    igonre = true;
  };
}, [Phone, setPhones]);

const [query, setQuery] = useState('');
const [orderProp, setOrderProp] = useState<'name' | 'age'>('age');
 
return (
        <p>
          Search: <input value={query} onChange={(e) => setQuery(e.target.value)} />
        </p>
 
        <p>
          Sort by:{' '}
          <select
            value={orderProp}
            onChange={(e) => setOrderProp(e.target.value as 'name' | 'age')}>
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
          </select>
        </p>

<PhoneItems phones={phones} query={query} orderProp={orderProp} />

angular.module('phoneList').component('phoneList', react2angular(PhoneList, [], ['Phone']));

- import './phone-list/phone-list.component';
- import './phone-list/PhoneItems';
+ import './phone-list/PhoneList';

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

npm run e2e

import React from 'react';
import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import angular from 'angular';
import 'angular-resource';
import 'angular-mocks';
import '../phone-list/phone-list.module';
import '../core/phone/phone.module';
import PhoneList from './PhoneList';
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');
  });
 
  it('should filter phone items', async () => {
    render(<PhoneList Phone={Phone} />);
 
    act(() => {
      $httpBackend.flush();
    });
    const input = screen.getByRole('textbox');
    userEvent.type(input, 'motorola');
    await waitFor(() => {
      expect(screen.getAllByRole('listitem')).toHaveLength(8);
    });
  });
 
  it('should sort phone items', async () => {
    render(<PhoneList Phone={Phone} />);
 
    act(() => {
      $httpBackend.flush();
    });
    expect((await screen.findAllByRole('listitem'))[0]).toHaveTextContent(
      'Motorola XOOM™ with Wi-Fi'
    );
 
    const select = screen.getByRole('combobox');
    userEvent.selectOptions(select, 'name');
    await waitFor(() => {
      expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('DROID™ 2 Global by Motorola');
    });
  });
});