Webの勉強はじめてみた その34 〜設計手順と認証のテスト〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章16,17節です。

設計手順

ユースケース

1. ユースケースの想定
2. サービス名とプロジェクト名
3. サービスの内容
4. 要件定義
5. 要件に上がった用語の定義。用語・変数などで利用する英単語や意味の定義
6. データモデリング。エンティティのリレーションを考える。

---

インターフェース

1. URL設計。ページの構成。
2. ページのURLを考える。メソッド(POSTやGET)とページの内容。
3. APIのURLを考える。メソッド、処理内容、利用方法(HTML,AJAX)。

---

モジュール

1. モジュールの設計。フレームワークを利用するか。
2. routerモジュールを考える。routes/にどういうファイルが必要か。
3. データベースをどこでどう管理するか。

出来上がったデータモデルで基本要件を満たすか、
要件漏れや根本的な仕組みに問題がないかをチェックする。

ある程度フワッとしててもいい？

ユースケース

実際にシステムがユーザーに利用されるやりとりのこと

機能要件

必要な機能、基本的な要件

非機能要件

機能に付随する性能、セキュリティに関する要件など

MVC (Model, View, Control)

リクエストのルーティングを行う処理をコントロールする部分、
エンティティのモデリングや振る舞いと永続化などの処理をする部分、
表示内容の形式を定義する部分を分割する構造のこと

アカウント認証が必要なテスト

yarn add supertest@3.1.0 --dev
yarn add passport-stub@1.1.1 --dev

supertest
テスト内でExpressのサーバーを起動することなくRouterの挙動をテストできる。

passport-stub
passportの認証が邪魔になるときに、その挙動をコントロールできる。

test.js

const request = require('supertest');
const app = require('../app');
const passportStub = require('passport-stub');

describe('/login', () => {
  beforeAll(() => {
    passportStub.install(app);
    passportStub.login({username: 'testuser'});
  });
  afterAll(() => {
    passportStub.logout();
    passportStub.uninstall(app);
  });
  test('ログインのためのリンクが含まれる', () =>{
    return request(app)
      .get('/login')
      .expect('Content-Type', 'text/html; charset=utf-8')
      .expect(/<a href="\/auth\/github"/)      
      .expect(200);
  });  
  test('ログイン時はユーザー名が表示される', () =>{
    return request(app)
      .get('/login')
      .expect(/testuser/)
      .expect(200)
  });
});

request(app).get('/login')
/loginへのGETリクエストを作成する。

beforeAll
全ての処理の前に実行する。

afterAll
最後に実行する。

まとめ

本格的にWebサービスを作っていってるんですが、なんとか理解しながら進めていってます。設計の手順は一通りではないと思いますが、自分で作っていく時に参考になるのかなと。