-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
通知ページの「全て」以外のタブに未読数を表示する #4027
通知ページの「全て」以外のタブに未読数を表示する #4027
Conversation
921772b
to
fbbf4c1
Compare
|
||
class Notification::WatchesTest < ApplicationSystemTestCase | ||
test 'タブに未読数が表示されていること' do | ||
visit_with_auth '/notifications', 'sotugyou' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
アカウントをsotugyouにしているのは通知が存在するのがsotugyouだったためです。
end | ||
|
||
test 'タブに未読数が表示されていないこと' do | ||
visit_with_auth '/notifications', 'machida' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
アカウントをmachidaにしているのは、テスト時点で通知が存在しないアカウントがmachidaだったためです
@naomichi-h |
@Aseiide レビュー依頼ありがとうございます。 |
@naomichi-h |
@naomichi-h 1/25 14:53追記
よろしくお願いいたします。 |
@Aseiide |
@naomichi-h |
@naomichi-h |
require 'application_system_test_case' | ||
|
||
class Notification::WatchesTest < ApplicationSystemTestCase | ||
test 'タブに未読数が表示されていること' do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
現状のテストでは、「各タブのバッジが動作しているか」を確かめるには不十分かと思われます。
また、テスト名は、他のテストに習い、英語で書くのがよいと思います。
テストの方針ですが、それぞれのタブについてテストを書くのはいかがでしょうか?
例としては、コメントタブであれば、
test 'show comment badge count' do
visit_with_auth '/notifications', 'sotugyou'
assert_selector "ul.page-tabs__items li.page-tabs__item:nth-child(4) a.page-tabs__item-link div.page-tabs__item-count ", text: "1"
end
test 'not show comment badge count' do
visit_with_auth '/notifications', 'machida'
assert_no_selector "ul.page-tabs__items li.page-tabs__item:nth-child(4) a.page-tabs__item-link div.page-tabs__item-count "
end
のような感じです。
また、バッジの増減は、以下のようなモデル.create
を間に挟めば簡単に表現できるので、これを使えば、適したuserを作成しなくても、その他のタブのテストができると思います。
Notification.create(
kind: 7,
user: @komagata,
sender: @kimura,
message: "#{@kimura.login_name}さんがはじめての日報を書きました!",
link: "/reports/#{report.id}",
read: false
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
テスト名は、他のテストに習い、英語で書くのがよいと思います。
そうですね、こちらは英語に変更して対応します。
テストの方針ですが、それぞれのタブについてテストを書くのはいかがでしょうか?
自分がそれぞれのタブに関するテストを書かなかったのは、そこまでしてテストする必要があるか疑問だったからです。
それぞれのタブについて、通知あり/なしで2通りあり、それがタブ7個分なので14個(現実的ではないですが、仮に全てのパターンに対応するなら2^7=128通り)似たようなテストが並ぶほどまでテストせずとも、ある1個の要素のあるなしがわかればテストとしては十分ではないかと考えたからです。
自分はチーム開発に入ったばかりなので、チーム全体としてどういう方針なのかわからず、テスト対象を1個だけとしました。
実装として未読のバッジが実装されているのがQ&Aや通知マークなどありましたが、テストが存在せず、どのようにしたらよいかわからずレビューをお願いしたという経緯でした。
また、バッジの増減は、以下のようなモデル.createを間に挟めば簡単に表現できるので、これを使えば、適したuserを作成しなくても、その他のタブのテストができると思います。
自分がbootcampのリポジトリを把握していないのですが、この次に書いてあるNotification.create
はfixtures
に書くということですかね?
どのファイルに書けばよいかわからなかったので教えていただけると嬉しいです。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
なるほどです。テストとして十分かどうか、そもそもテストが必要なのかは、私では判断できかねますので、一度駒形さんに伺ってみてはいかがでしょうか。
提案したNotidication.create
はテスト内に書く内容です。
bootcamp/test/system/reports_test.rb
Line 449 in fbbf4c1
test 'delete report with notification' do |
にあるような記述です。
確認のためのテストデータが欲しいのであれば、seedファイルを書くのが一つの方法だと思います。 testに関してコメントしましたので、確認をお願いいたします。 |
レビューに手間を取らせてしまってすみません、、。
テストに関しては、次のレビューでkomagataさんに聞いて指示を仰ぎたいと思います。 次のような流れで行きたいと思います
今日中に修正ができるか微妙で、明日までには修正してレビュー依頼送らせてください。もう少しだけレビューにお付き合いくださいませ。このような流れで大丈夫でしょうか? |
@Aseiide いえいえ、全然問題ないですよ! |
@komagata |
@@ -3,15 +3,15 @@ | |||
require 'application_system_test_case' | |||
|
|||
class Notification::WatchesTest < ApplicationSystemTestCase | |||
test 'タブに未読数が表示されていること' do | |||
test 'unreads count are displayed on the tab' do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
テスト内容の表記を英語にしました
visit_with_auth '/notifications', 'sotugyou' | ||
|
||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(4) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
end | ||
|
||
test 'タブに未読数が表示されていないこと' do | ||
test 'unreads count are not displayed on the tab' do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
テスト内容の表記を英語にしました
@@ -2,7 +2,7 @@ | |||
|
|||
require 'application_system_test_case' | |||
|
|||
class Notification::WatchesTest < ApplicationSystemTestCase | |||
class Notification::TabsBadgesTest < ApplicationSystemTestCase |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
他のテストからコピペしたときにクラス名が間違っていたので修正しました
@naomichi-h
|
YESです。 |
@komagata |
@Aseiide テストを書き終えたらまたお声かけください〜 |
残りのタスク
|
memo |
6ee6e86
to
c837b07
Compare
現状の実装PR #3642 が先にマージされたことによって 「全て」と「メンション」タブ以外については、このPRで実装しており、キャッシュは使っていません。 レビューしてほしい点実装する過程で新たにレビューしてほしい点がありましたので意見を頂きたいです。 レビューお願いいたします。 |
require 'application_system_test_case' | ||
|
||
class Notification::TabsBadgesTest < ApplicationSystemTestCase | ||
test 'unread badges are displayed' do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
現状のテストでは、「同一ユーザーのステータスが変化したときに、バッジが変化するかどうか」がテストできていないので、タブのバッジ機能を十分テストできていないのかなと思います。
また、assert_selectorにはHTMLのタグを渡して場所を指定するのではなく、classを渡したほうが場所が明確になり、テストがエラーになった際の作業がやりやすくなると思います。
私は、バッジの増をモデル.create
を使用して確認し、減は未読の項目をクリックして確認するテストを追加した方が良いと思いますが、あくまでも提案なので、他に方法があればそちらでも良いと思います。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@naomichi-h レビューありがとうございます。
現状のテストでは、「同一ユーザーのステータスが変化したときに、バッジが変化するかどうか」がテストできていない
それぞれのテストで、ログインするユーザーが違うということですかね?
自分もテストを書いていて気になっていた点ではあるので、sotugyou
に合わせてバッジ無しのテストを書き直したいと思います。その際は未読の項目をクリックして確認する方法を取りたいと思います。
assert_selectorにはHTMLのタグを渡して場所を指定するのではなく、classを渡したほうが場所が明確になり、テストがエラーになった際の作業がやりやすくなると思います。
今のテストコードで、どの場所をテストしているか分かりづらい、というのは自分も思っていました。
7つのタブには全て同じclassが付与されています。class="page-tabs__item-count a-notification-count"
全て同じclassなので、classを渡した場合、「各タブについて個別にテストする」ということができなくなると思って今の書き方にしています。
自分の知識不足なのですが、同名のclassでも別々にテストする方法があるということでしょうか?
この点わからなかったのでご教示いただけると幸いです。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
それぞれのテストで、ログインするユーザーが違うということですかね?
「ログインしているユーザーのステータスが変化したときに、ちゃんとバッジが予期している仕様どおりに変化するかどうか?」がテストされていないことを問題にしています。
例えば、
bootcamp/test/system/notifications_test.rb
Line 174 in 4d0eaae
test 'show notification count' do |
では、通知バッジが増えるかどうかをテストしていますし、
bootcamp/test/system/notifications_test.rb
Line 358 in 4d0eaae
test 'don\'t show the badge on the mentioned tab if no unread mentions' do |
では、通知バッジが消えるかどうかをテストしています。
今回のテストにも、こういったテストが必要かなと思います。
自分の知識不足なのですが、同名のclassでも別々にテストする方法があるということでしょうか?
bootcamp/test/system/reports_test.rb
Line 345 in 4d0eaae
assert_selector('ul.learning-times__items li.learning-times__item:nth-child(1)', text: '07:30 〜 08:30') |
にあるような感じで別々に指定できないですかね?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@naomichi-h ありがとうございます。頂いたご指摘をもとにテストについては書き直します。
@Aseiide コメントしましたので確認おねがいいたします🙏 |
c837b07
to
319191a
Compare
@naomichi-h レビューお願いいたします。 |
@Aseiide testの動作はokだと思いますー。記述方法についてコメントしたので、よかったら参考にしてみてください。 |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(1) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(2) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(3) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(4) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(5) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(6) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end | ||
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(7) > a > div' do | ||
assert_selector 'div.page-tabs__item-count.a-notification-count' | ||
end |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(1) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(2) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(3) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(4) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(5) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(6) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
assert_selector '#body > div.wrapper > main > div > div > ul > li:nth-child(7) > a > div' do | |
assert_selector 'div.page-tabs__item-count.a-notification-count' | |
end | |
within all('.page-tabs__item')[0] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[1] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[2] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[3] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[4] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[5] do | |
assert_selector '.page-tabs__item-count' | |
end | |
within all('.page-tabs__item')[6] do | |
assert_selector '.page-tabs__item-count' | |
end |
とするのはどうでしょう?伊藤さんのこの記事を参考に書いてみました。
unread badges are not displayed
の方も同様にして書けます。
9493bd4
to
49a9941
Compare
@naomichi-h |
@Aseiide 確認しました。okですー。 |
@komagata |
@@ -17,3 +17,6 @@ | |||
= Cache.mentioned_and_unread_notification_count(current_user) | |||
- else | |||
= t("notification.#{target}") | |||
- if current_user.notifications.by_target(target).unreads.latest_of_each_link.size.positive? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
長いので分かりやすい名前をつけてViewHelperに追い出した方がいいかもですね。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@komagata
2点確認したいのですが、
- 「ViewHelperに追い出した方がいい」とのことですが、こちらは
app/helpers/notification_helper
のような形で新しくファイルを作って良いでしょうか? - 切り出すとしたら、
current_user.notifications.by_target(target).unreads.latest_of_each_link.size.positive?
をensure_notifications?
(メソッド名は仮で付けました)のような形で丸ごと短くする、というふうに考えたのですが、この方針でよいでしょうか?
よろしくお願いします。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
質問タイムメモ
app/helpers
にヘルパーファイルを作ってOKcurrent_user.notifications.by_target(target).unreads.latest_of_each_link.size.positive?
このメソッドごとヘルパーに切り出す
read: false | ||
) | ||
end | ||
test 'unread badges are displayed' do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
上に1行開けた方がいいかも?
test 'unread badges are displayed' do | ||
visit_with_auth '/notifications', 'sotugyou' | ||
|
||
within all('.page-tabs__item')[0] do |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
allを使わずfirstを使い、CSS Selectorに:nth-child(0)
などを使った方がいいかもです〜。
allと[0]だと指定した要素が見つからないというエラーではなくて、配列の要素が見つからないというエラーになるからです。
もしくは、タブのHTMLの方に分かりやすいIDかクラスをつけるのもいいかもです〜
空行を追加 firstを使ってテストを書き直した メソッドをヘルパーに切り出した
49a9941
to
3308b19
Compare
@@ -17,3 +17,6 @@ | |||
= Cache.mentioned_and_unread_notification_count(current_user) | |||
- else | |||
= t("notification.#{target}") | |||
- if ensure_notifications?(target) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
メソッドが長かったのでapp/helpers/notification_helper.rb
に切り出しました。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@komagata
レビューありがとうございます。
- システムテストの修正
- メソッドのヘルパーへの切り出し
2点対応しましたのでレビューお願いいたします。
within first('.page-tabs__item:nth-child(1)') do | ||
find('div', text: '10') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
first
と find
を使って対象の要素があるかどうかを検証するようにしました
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
確認しました、OKですー🙆♂️
実装内容
通知ページのタブに未読数を表示するようにしました。
「全て」のタブに関しては、 #3590 で既に実装されておりましたので、自分は「全て」以外のタブに未読数を表示するように変更しました。
変更前
再現手順
/notifications
にアクセス変更後
再現手順
/notifications
にアクセス他のアカウントでも確認
アカウント: senpai
1/25 14:53追記
以下に再現手順を示します。
senpai
アカウントでログイン/notifications
にアクセスレビューしてほしい点
実装したものの、テストについて以下の点が気になっているのでレビューしていただけますと幸いです。
現在書いているテストでは、未読数に該当するテストのhtml要素が存在するか、しないか、ということでテストを記述しています。
全てを含めて、タブは7個あり、その全てについてテストができていない状態です。
このテストでいいのか、別の書き方をしたほうがいいのか、わからなかったです。
その他: PR#3947がcloseしてる件について
issue着手時に実装方針がわからず、急ぎで相談したときに#3947を作成しました。ペアプロ時に別のブランチを切って実装を進めてしまったため、#3947はcloseしています。