# Trend Next.js E2E Test Cases - 快訊新增與編輯 ( 2024/06/03 )

## 登入
`spec 名稱：login.cy.js`
1. 點擊 Miko 會顯示「登入錯誤，請重新登入」，且 cookie storage 沒有 token
2. 點擊 Suisei 會顯示「登入成功! 你的帳號是suisei」，且 cookie storage 有 token

## 新增快訊

- **編輯姓名**
`spec 名稱：alert_name.cy.js`
1. 輸入框預設值應為「未命名快訊」
2. 輸入「測試快訊」
1. 輸入框應顯示「測試快訊」
2. local storage 應新增一個 item 'alert_name'，value 為 '測試快訊'
3. 重新整理後，輸入框應顯示「測試快訊」

3. 點擊「下一步」按鈕
1. 應進入 /alert_page/new/edit/syntax/facebook
2. 編輯頁左方 side bar 標題應顯示「測試快訊」
- **編輯關鍵字**
`spec 名稱：alert_editor.cy.js`

1. 快訊編輯器輸入「測試關鍵字」，local storage 應新增 item 'alert_keywords'，value 為

     {
       facebook: '測試關鍵字';
     }

2. 輸入 '@'，應跳出 segments 選單
3. 點選選單第一個 segment
1. 輸入框內容應改為「測試關鍵字 IG-插畫家(seg:0d4414) 」
2. local storage 'alert_keywords' value 應改為

     {
       facebook: '測試關鍵字 IG-插畫家(seg:0d4414) ';
     }

4. 輸入 '@10'，點選第一個 segment
1. 輸入框內容應改為「測試關鍵字 IG-插畫家(seg:0d4414) **10-1(seg:2968b4)** 」
2. local storage 'alert_keywords' value 應改為

     { facebook: '測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) ' }

3. 重新整理，輸入框內容應為「測試關鍵字 IG-插畫家(seg:0d4414) **10-1(seg:2968b4)** 」

5. 點選「限定內容範圍」-> 「Segment」-> 「100_tw_yt」
1. 輸入框內容應改為「測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) **100_tw_yt(seg:2224da)** 」
2. local storage 'alert_keywords' value 應改為

      {
        facebook:
          '測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) 100_tw_yt(seg:2224da) ',
      }

3. 重新整理，輸入框內容應為「測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) **100_tw_yt(seg:2224da)** 」
6. 點選「加入運算語法」->「含所有字詞 AND」
1. 輸入框內容應改為「測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) 100_tw_yt(seg:2224da) **AND** 」
2. local storage 'alert_keywords' value 應改為

          {
            facebook:
              '測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) 100_tw_yt(seg:2224da)  AND ',
          },

3. 重新整理，輸入框內容應為「測試關鍵字 IG-插畫家(seg:0d4414) 10-1(seg:2968b4) 100_tw_yt(seg:2224da) **AND** 」
- **勾選渠道**
`spec 名稱：platform_checkbox.cy.js`

1. 檢查預設渠道
1. Facebook checkbox 應已打勾
2. local storage 'alert_timings' value 不含 id 應為

      [
        {
          platform: 'facebook',
          metric: 'post_count',
          qty: 1,
        },
      ]

3. 頁面上方渠道選單應只有 Facebook
2. 勾選 Instagram、Youtube、媒體、論壇
1. 全部渠道都應已打勾
2. 頁面上方渠道渠道選單應有全部渠道
3. local storage 'alert_timings' value 不含 id 應為

      [
        {
          platform: 'facebook',
          metric: 'post_count',
          qty: 1,
        },
        {
          platform: 'instagram',
          metric: 'ig_mentions',
          qty: 1,
        },
        {
          platform: 'youtube',
          metric: 'yt_mentions',
          qty: 1,
        },
        {
          platform: 'media',
          metric: 'media_mentions',
          qty: 1,
        },
        {
          platform: 'forum',
          metric: 'forum_mentions',
          qty: 1,
        },
      ]

4. 重新整理後，所有渠道都應打勾

3. 取消勾選 Instagram 和 論壇
1. 應只剩下 Facebook、Youtube、媒體打勾
2. 頁面上方渠道渠道選單應只剩下 Facebook、Youtube、媒體
3. local storage 'alert_timings' value 不含 id 應為

      [
        {
          platform: 'facebook',
          metric: 'post_count',
          qty: 1,
        },
        {
          platform: 'youtube',
          metric: 'yt_mentions',
          qty: 1,
        },
        {
          platform: 'media',
          metric: 'media_mentions',
          qty: 1,
        },
      ]

4. 重新整理後，應只有 Facebook、Youtube、媒體打勾
4. 取消勾選所有渠道，依序：FB -> YT -> 媒體
1. 應無法取消勾選媒體，並跳出「請至少勾選一渠道」提醒
2. 媒體應還存在上方渠道選單列
3. local storage 'alert_timings' value 不含 id 應為

              [
                {
                  platform: 'media',
                  metric: 'media_mentions',
                  qty: 1,
                },
              ]

- **編輯通知時機**
`spec 名稱：notification_timing.cy.js`
1. 檢查預設時機，local storage 'alert_timings' value 不含 id 應為

     [
       {
         platform: 'facebook',
         metric: 'post_count',
         qty: 1,
       },
     ];

2. 點選快訊通知時機「每篇」和「自訂通知時機」
1. 點選「自訂通知時機」，下方應出現「當 Facebook 上提及關鍵字...」的編輯欄位
2. 點選「每篇」，下方編輯欄位應消失
3. 點選 + 按鈕，下方應有兩個編輯欄位
1. 兩個欄位應皆含有刪除按鈕
5. 第一個編輯欄位，metric 改為「愛心數」，數量改為 100
1. local storage 'alert_timings' value 不含 id 應為

      [
          {
              platform: 'facebook',
              metric: 'post_count',
              qty: 1,
            },
            {
              platform: 'facebook',
              metric: 'reaction_love',
              qty: 100,
            },
      ]

2. 重新整理後，兩個編輯欄位應還在，且分別顯示「愛心數」100 和「貼文數」1
5. 點選渠道選單的「Youtube」，應轉址至 /syntax/youtube
6. 第一個編輯欄位，metric 改為「觀看數」，數量改為 10,000
1. local storage 'alert_timings' value 不含 id 應為

     [
       {
         platform: 'facebook',
         metric: 'post_count',
         qty: 1,
       },
       {
         platform: 'facebook',
         metric: 'reaction_love',
         qty: 100,
       },
       {
         platform: 'youtube',
         metric: 'yt_view_count',
         qty: 10000,
       },
     ];

2. 重新整理後，編輯欄位應還在，且顯示「觀看數」10,000
7. 點擊 Facebook 第一個編輯欄位右方 x (刪除按鈕)
1. local storage ‘alert_timings’ value 不含 id 應改為

     [
      {
        platform: 'facebook',
        metric: 'post_count',
        qty: 1,
      },
      {
        platform: 'youtube',
        metric: 'yt_view_count',
        qty: 10000,
      },
     ];

2. 重新整理後，編輯欄位應只剩「貼文數」1
3. 編輯欄位應沒有刪除按鈕

## 跨渠道分析
* 檢查下拉選單(平台、圖表、地區)：
`spec 名稱：check_selector_dropdowns.cy.js`

* 檢查地區下拉選單
1. 檢查選擇器的預設值是否正確
2. 點選下選擇器後，字體應該會改變顏色，下拉選單應該出現
3. 點選其中一個選項後，下拉選單應該消失。字體應該會回到預設顏色，選擇器的值會是選取的選項值
* 檢查平台下拉選單
1. 檢查選擇器的預設值是否正確(應出現「Facebook」)
2. 點擊選擇器後，字體應該會改變顏色，下拉選單應該出現
3. 點擊全選按鈕後，選擇器的值會是「跨渠道 (7)」，所有選項會有打勾樣式
4. 點擊全部取消按鈕後，選擇器的值會是「未勾選渠道」，所有選項會沒有打勾樣式
5. 當全部取消後，確定按鈕會變成紅色，無法點擊，名稱會改成「請至少選擇一個渠道」
6. 點擊其他選項會出現警示框，內容為「請至少選擇一個渠道」
7. 當hover到選項時，應該出現only的按鈕，點擊後只會有該選項打勾。
8. 檢查checkbox功能是否正常，進行點擊和取消勾選
9. 點擊選擇器後，下拉選單應該消失。字體應該會回到預設顏色，選擇器的值會是選取的選項值。
* 檢查圖表下拉選單
1. 檢查選擇器的預設值是否正確(應出現「圖表顯示設定」)
2. 點擊選擇器後，字體應該會改變顏色，下拉選單應該出現
3. 點擊全選按鈕後，選擇器的值會是「圖表顯示設定」，所有選項會有打勾樣式
4. 點擊全部取消按鈕後，選擇器的值會是「未勾選圖表」，所有選項會沒有打勾樣式
5. 當全部取消後，確定按鈕會變成紅色，無法點擊，名稱會改成「請至少勾選一個儀表板」
6. 點擊其他選項會出現警示框，內容為「請至少勾選一個儀表板」
7. 當hover到選項時，應該出現only的按鈕，點擊後只會有該選項打勾。
8. 檢查checkbox功能是否正常，進行點擊和取消勾選
9. 點擊選擇器後，下拉選單應該消失。字體應該會回到預設顏色，選擇器的值會是「圖表顯示設定」。

## 關鍵字圖表
* 日期選擇：
`spec 名稱：select_date.cy.js`
1. 預設日期應為過去七天
2. 開始日期點選 2023-10-10，結束日期點選 2023-10-20，日期應顯示點選日期
3. 點選「過去 3 月」，開始與結束日期應正常顯示
* 渠道選擇：
`spec 名稱：select_platforms.cy.js`
每個渠道選擇器都點一次，不應發生任何錯誤

* 指標選擇：
`spec 名稱：select_metrics.cy.js`
1. 預設指標為「文章數」
2. 點選「留言數」後下拉選單值會改為「留言數」
3. 渠道改為 FB 後，指標會改為預設值「貼文數」
4. 點選「分享數」後下拉選單值會改為「分享數」
5. 渠道改為 IG 後，指標會改為預設值「貼文數」
6. 點選「愛心數」後下拉選單值會改為「愛心數」
7. 渠道改為 YT 後，指標會改為預設值「影片數」
8. 點選「觀看數」後下拉選單值會改為「觀看數」

* 關鍵字選擇：
`spec 名稱：select_keywords.cy.js`
1. 預設關鍵字為「選舉」
2. 點擊下拉選單，選單應出現
3. 點擊「柯文哲」後，下拉選單值會改為「柯文哲」
4. 點擊「選舉」後，下拉選單值會改為「選舉」
* 折線圖匯出選項：
`spec 名稱：select_export_options.cy.js`
每個匯出選項都點一次，並檢查是否有下載相對應的檔案
1. 點擊折線圖匯出選項
2. 會出現以下三個選項點擊會下載對應的檔案內容
* 匯出成 Excel : QSH-Trend-LineChart.xlsx
* SVG to PNG : Trend LineChart.png
* 匯出成 PNG : QSH Trend LineChart.png
3. 檢查是否有下載成功
* 檢查提示框(tooltip)：
`spec 名稱：check_tooltips.cy.js`
檢查懸浮(hover)的提示框和線上的點提示框是否能顯示並且內容相符，
若有標記功能則確認功能是否正常。
1. 檢查線上是否有懸浮(hover)的提示框
2. 點擊線上的點檢查是否有點的提示框，並且內容相符
3. 若有標記功能，檢查是否可以標記，點擊標記後應出現釘選的值
4. 再次點選線上的點，畫面上應該不會有釘選的值
* 切換線條能見度：
`spec 名稱：toggle_hidden_line.cy.js`
針對每個折線圖做點擊圖例(legend)，應該能切換是否顯示線條
1. 剛開始線條必須是能見的
2. 點擊圖例(legend)，點擊後圖例應該會變透明並且相對應的線條會消失
3. 再次點擊圖例(legend)，線條會出現並且圖利取消透明的效果
* 情緒時間軸切換輔助線：
`spec 名稱：emotion_timeline_guideline.cy.js`
1. 預設按鈕為「加入輔助線」
2. 檢查是否有相對應的圖例(legend)包含長度和內容
3. 點擊按鈕「加入輔助線」，點擊後會變成「移除輔助線」
4. 檢查是否有相對應的圖例(legend)包含長度和內容
5. 檢查輔助線是否存在
6. 點擊按鈕「移除輔助線」，點擊後會變成「加入輔助線」
7. 檢查是否有相對應的圖例(legend)包含長度和內容
## 文字雲
* 文字雲切換模式：
`spec 名稱：mode_switch.cy.js`
1. 檢查是否有顯示文字雲內容
2. 檢查canvas文字雲是否存在且隱藏
3. 檢查模式選單的圖片模式是否被選取到
4. 點擊按鈕「文字模式」
5. 檢查是否顯示文字雲表格
* 檢查文字雲匯出選項:
`spec 名稱：select_export_options.cy.js`
1. 點擊文字雲匯出選項會出現下拉選單
2. 點擊「匯出成Excel」會下載檔案 QSearch_Trend_WordCloud.xlsx
3. 點擊「匯出成 PNG」會下載檔案 QSH_Trend_WordCloud.png
4. 檢查是否有下載成功
* 文字雲隱藏字:
`spec 名稱：hidden_words.cy.js`
1. 點擊「隱藏字清單」按鈕應顯示隱藏字清單
2. 再次點擊「隱藏字清單」按鈕隱藏字清單會不見
* 圖片模式(tooltip)
4. 點擊文字雲圖片模式中第一個字會顯示Tooltip，點擊「將 {文字名稱} 加入至隱藏字清單」按鈕
5. 檢查文字雲圖片模式中的第一個字不應該和被加入的隱藏字相同
6. 在文字雲清單應顯示被加入的隱藏字
7. 點擊還原後被隱藏的字應加回到文字雲圖片模式上
* 圖片模式(拖拉文字)
8. 拉動文字雲圖片模式的文字時，隱藏字清單會顯示
* 文字模式(表格)
9. 切換到文字模式
10. 點擊表格中第一個字的「將 {文字名稱} 加入至隱藏字清單」按鈕
11. 檢查文字雲表格中的第一個字不應該和被加入的隱藏字相同
12. 在文字雲清單應顯示被加入的隱藏字
13. 點擊還原後被隱藏的字應加回到文字雲表格上
* 文字雲Tooltip:
`spec 名稱：check_tooltips.cy.js`
* 更改文字雲顏色
1. 點擊文字雲中第一個字會顯示tooltip
2. 檢查tooltip中color選項是否是預設顏色
3. 將顏色切換成紅色(#ff0000)，檢查文字雲文字顏色是否改變
4. 點擊「設成預設顏色」，檢查文字雲文字顏色是否回到預設顏色
* 加入到關鍵字
1. 點擊文字雲中第一個字會顯示tooltip
2. 點擊「將 {文字名稱} 加入至搜尋語法」按鈕
3. 輸入欄應該加上當下的關鍵字
* 更改文字雲文字內容
1. 檢查tooltip的input應該和文字雲選擇的文字相同
2. 將輸入框的內容改成test
3. 點擊「將 "{文字名稱}" 修改為 "test"」按鈕
4. 文字雲中的第一個字應該變成test
* 切換文字雲外框
1. 點擊文字雲中第一個字會顯示tooltip
2. 點擊「將 "{文字名稱}" 加入外框」按鈕
3. 文字雲中的第一個字應該有紅色外框
4. 點擊文字雲中第一個字會顯示tooltip，點擊「取消外框」按鈕
5. 文字雲中的第一個字應該沒有紅色外框
* 切換tooltip
1. 點擊文字雲中第一個字會顯示tooltip
2. 點擊「取消」按鈕文字雲會取消顯示tooltip
3. 再次點擊文字雲中第一個字會顯示tooltip
4. 點擊文字雲圖片模式非tooltip區域會取消顯示tooltip
* 文字雲設定:
`spec 名稱：wordcloud_settings.cy.js`
1. 文字雲圖片模式起始應該有100個字
2. 使用調整文字雲字數將文字改成50個字
3. 檢查文字雲圖片模式應該有50個字
4. 點擊「調整文字雲」按鈕應顯示調整文字雲選單
5. 再次點擊「調整文字雲」按鈕應不會顯示調整文字雲選單