create unit test7,11

.techtrain/manifests/station07.json

@@ -1,11 +1,16 @@
 {
   "name": "Station 07",
   "id": 7,
-  "prepare": [],
+  "prepare": [
+    {
+      "command": "yarn dev --port=9000",
+      "background": true
+    }
+  ],
   "tests": [
     {
-      "type": "jest",
-      "specFile": "./tests/station07.test.tsx"
+      "type": "cypress",
+      "specFile": "./cypress/integration/station07.test.tsx"
     }
   ]
 }

cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:9000/"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/station07.spec.ts

@@ -0,0 +1,17 @@
+import {compareColor} from '../utils/compareColor'
+
+describe('Station7', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('<header> exists', () => {
+    cy.get('header').should('have.class', 'header')
+
+  })
+
+  it('#F5F5F5 is specified as the background color of <header>', () => {
+    cy.get('.header').then((header) => {
+      expect(compareColor(header.css('background-color'), '#f5f5f5')).to.be.true })
+    })
+})

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015", "dom"],
+    "types": ["cypress"]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

cypress/utils/compareColor.ts

@@ -0,0 +1,22 @@
+/**
+ * Compares two colors. Requires DOM.
+ * 
+ * @param a A color.
+ * @param b Another color.
+ * @returns True when the `a` and `b` is identical.
+ */
+export const compareColor = (a: string, b: string): boolean => {
+  const elm = document.createElement('div')
+  elm.style.color = a
+  elm.style.backgroundColor = b
+  elm.style.display = 'none'
+
+  document.body.appendChild(elm)
+
+  const computedStyle = window.getComputedStyle(elm)
+  const res = computedStyle.backgroundColor === computedStyle.color
+
+  document.body.removeChild(elm)
+
+  return res
+}

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
+    "cypress": "^9.5.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

tests/mock/fetch.ts

@@ -75,11 +75,11 @@ const mockResponse = (
 const randomImageTest = /^(https?)?:\/\/dog.ceo\/api\/breeds\/image\/random\/?$/
 const randomImageTestByBreed = /^(https?)?:\/\/dog.ceo\/api\/breed\/([A-Za-z]+)(\/([A-Za-z]+))?\/image\/random\/?$/
 const breedsAllTest = /^(https?)?:\/\/dog.ceo\/api\/breeds\/list\/all\/?$/
+const randomMultipleImageTestByBreed = /^(https?)?:\/\/dog.ceo\/api\/breed\/([A-Za-z]+)(\/([A-Za-z]+))?\/images\/random\/([1-9]*[0-9]){1,}\/?$/
 
 // not used
 const randomMultipleImageTest = /^(https?)?:\/\/dog.ceo\/api\/breeds\/image\/random\/([1-9]*[0-9])\/?$/
 const breedImagesTest = /^(https?)?:\/\/dog.ceo\/api\/breed\/([A-Za-z]+)\/images\/?$/
-const randomMultipleImageTestByBreed = /^(https?)?:\/\/dog.ceo\/api\/breed\/([A-Za-z]+)(\/([A-Za-z]+))?\/image\/random\/([1-9]*[0-9])\/?$/
 const breedListTest = /^(https?)?:\/\/dog.ceo\/api\/breed\/([A-Za-z]+)\/list\/?$/
 
 const pickOne = <T>(a: T[]): T | undefined => {
@@ -171,7 +171,20 @@ const mockApiRoutes: {
   },
   {
     test: randomMultipleImageTestByBreed,
-    handle: unimplementedMockApiRouteHandler,
+    handle(url: string){
+      const index = url.match('\d{1,}')
+      if(index === null){
+        return {
+          status: 'error',
+          message: 'No number specified',
+          code: 404
+        }
+      }
+      return {
+        message: Array.from({length: Number(index)}, () => imageUrl),
+        status: 'sucess'
+      }
+    },
   },
   {
     test: breedListTest,