phone detail component

app/main.ts

@@ -14,9 +14,7 @@ import './app.animations';
 import './phone-list/phone-list.module';
 import './phone-list/PhoneList';
 import './phone-detail/phone-detail.module';
-import './phone-detail/phone-detail.component';
-import './phone-detail/Specifiction';
-import './phone-detail/PhoneImags';
+import './phone-detail/PhoneDetail';
 import './core/core.module';
 import './core/phone/phone.module';
 import './core/phone/phone.service';

app/phone-detail/PhoneDetail.spec.tsx

@@ -0,0 +1,76 @@
+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')
+    );
+  });
+});

app/phone-detail/PhoneDetail.tsx

@@ -0,0 +1,47 @@
+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) => {
+      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']));

app/phone-detail/PhoneImages.spec.tsx

@@ -1,7 +1,5 @@
 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';

app/phone-detail/PhoneImags.tsx

@@ -1,6 +1,4 @@
-import angular from 'angular';
 import React from 'react';
-import { react2angular } from 'react2angular';
 import { PhoneDetail } from './types';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -46,7 +44,3 @@ const PhoneImages: React.FC<Props> = ({ phone, mainImageUrl, setImage }) => {
 };
 
 export default PhoneImages;
-
-angular
-  .module('phoneDetail')
-  .component('phoneImages', react2angular(PhoneImages, ['phone', 'mainImageUrl', 'setImage']));

app/phone-detail/Specifiction.tsx

@@ -1,6 +1,4 @@
-import angular from 'angular';
 import React from 'react';
-import { react2angular } from 'react2angular';
 import { PhoneDetail } from './types';
 import { checkmark } from '../core/checkmark/checkmark';
 
@@ -119,5 +117,3 @@ const Specifiction: React.FC<Props> = ({ phone }) => {
 };
 
 export default Specifiction;
-
-angular.module('phoneDetail').component('specification', react2angular(Specifiction, ['phone']));

package.json

@@ -30,6 +30,7 @@
     "@tsconfig/create-react-app": "^1.0.2",
     "@types/angular-mocks": "^1.7.1",
     "@types/angular-resource": "^1.5.17",
+    "@types/angular-route": "^1.7.2",
     "@types/jest": "^28.1.6",
     "@types/jquery": "^3.5.14",
     "@types/react": "^18.0.15",