Docs (#4)

* add Test file

* Update instructions on each step

* Update instructions on each step

docs/step-01.md

@@ -63,7 +63,7 @@ az group create \
 
 > [비주얼 스튜디오 코드](https://code.visualstudio.com/docs/setup/setup-overview?WT.mc_id=pwaazureworkshop-event-juyoo)를 아직 설치하지 않았다면, 지금 설치하세요!
 
-먼저 아래와 같이 `azuredeploy.parameters.json` 파일을 수정합니다.
+먼저 아래와 같이 `resources` 디렉토리 아래에 있는 `azuredeploy.parameters.json` 파일을 수정합니다.
 
 ```json
 {
@@ -80,6 +80,10 @@ az group create \
 }
 ```
 
+* `[COMMA_DELIMITED_STORAGE_ACCOUNT_NAME]`: 애저 블롭 저장소를 여러개 설치합니다. 따라서, 콤마로 저장소 이름을 구분합니다. 예) `pwaworkshop1,pwaworkshop2`
+* `[KEY_VAULT_NAME]`: 애저 키 저장소 이름을 지정합니다.
+* 여기서 블롭 저장소 이름과 키 저장소 이름은 유일해야 합니다. 따라서, 작업 도중에 다른 분들과 이름이 겹치는 경우도 있을 수 있으니, 본인만의 유니크한 작명법을 사용하시기 바랍니다.
+
 그리고 난 후 아래 커맨드를 실행시킵니다.
 
 ```bash

docs/step-02.md

@@ -44,14 +44,28 @@ npm run build
 ```
 
 
-## PWA 로컬 테스트 (이부분 현재 꺠지는 중) ##
+## PWA 로컬 테스트 ##
 
 로컬에서 PWA를 테스트합니다.
 
 ```bash
 npm run test
 ```
 
+이 때 인터랙티브 모드로 테스트가 실행이 된다면 아래와 같이 `package.json` 파일을 수정합니다.
+
+```json
+{
+  ...
+  "scripts": {
+    ...
+    "test": "react-scripts test --watchAll=false",
+    ...
+  },
+  ...
+}
+```
+
 
 ## 애저 CLI를 이용한 PWA 수동 배포 ##
 

docs/step-03.md

@@ -65,11 +65,11 @@ git push origin master
 
 ```bash
 az ad sp create-for-rbac \
-  --n <SERVICE_PRINCIPAL_NAME> \
+  -n <SERVICE_PRINCIPAL_NAME> \
   --sdk-auth
 ```
 
-이 명령어 실행 결과로 만들어지는 JSON 객체 값을 시크릿 변수 `AZURE_CREDENTIALS`에 할당합니다.
+이 명령어 실행 결과로 만들어지는 JSON 객체 값을 시크릿 변수 `AZURE_CREDENTIALS`에 할당합니다. 이 때 JSON 객체에 들어있는 `clientId` 값을 잘 기억해 둡니다.
 
 ![](../images/step-03-01.png)
 
@@ -86,10 +86,10 @@ az ad sp create-for-rbac \
       run: |
         npm run build
 
-    # - name: Test app
-    #   shell: bash
-    #   run: |
-    #     npm run test
+    - name: Test app
+      shell: bash
+      run: |
+        npm run test
 ```
 
 여기까지 수정한 후 푸시합니다. 그리고 결과를 확인합니다. 다음에 아래 액션을 추가합니다. 다시 실패하는 것을 확인합니다.

docs/step-04.md

@@ -90,6 +90,8 @@ git push origin master
 
 ![](../images/step-04-03.png)
 
+혹시 실패한다면 `STORAGE_ACCOUNT_NAME_2` 시크릿 값을 지정했는지 확인하고, 만약 없으면 생성합니다.
+
 
 ## 애저 키 저장소 통합하기 ##
 

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -54,6 +54,7 @@ const App = () => {
   return (
     <div className="notes">
       <Write addData={addData} />
+      <h1>List:</h1>
       <List data={data} />
     </div>
   )

src/App.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('List H1이 잘 생성됩니다', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const linkElement = getByText(/List/i);
   expect(linkElement).toBeInTheDocument();
 });