前言

我們上一篇提到，有多個方案能選的產品

我的建議是
請自己先試著思考，你會怎麼寫測試？
然後再來看我會怎麼做

很重要，我要卡一堆廢圖讓你思考一下

正文

相信你思考過人生了，我來講講我的想法

『我的測試，一個都不會改』

這就是我用"目標"驅動測試的好處之一
雖然壞處我一個都不會告訴你

不動測試，但我還是會改稍微改資料結構
這邊就看個人實作的功力了

我的解決方法是這樣，先明確問題
多個方案選出一個產品

所以我要一個方案的陣列

types: [
  [1, 2, 3],
  ['a', 'b', 'c']
]

然後產品也需要一個方案的清單

products: [
    { id: 1, types: [1, 'a'], price: 350 }
]

然後像這樣，就可以拿到一個 collect array 為 [1, 'a'], [2, 'a']... 結果

<select v-for="(type, index) in types" v-model="collects[index]">
    <option v-for="attribute in type" 
            :value="attribute.id" 
            :key="attribute.id">
      {{ attribute.name }}
    </option>
</select>

再來我們要選到正確的 productId
所以，剛剛的 code 加個 @change

<select ...  @change="updateProductId">
    ...
</select>

然後連結回去我們的舊 code

updateProductId () {

    this.selectedProductId = this.products.find(product =>
    
      this.collects.reduce((result, collect) => 
          result && product.types.includes(collect)
      , true)
    )
  }

水, 測試一行都不用動。
當然啦，之後我們要重構和加上一些 unit testing 做防禦測試
還是會改動到測試，前面只是講講幹話，重點是讓你開發快點，不要拘泥在測試的細節裡面放棄 coding。

P.S. 明天這篇文章還會更新，補上該補的測試。