Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Adds the Enhancing Tags page section #100

Merged
merged 4 commits into from
Oct 7, 2024
Merged

Adds the Enhancing Tags page section #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2938d7b
chore: update the stats docs based on last changes
panoramix360 Jan 15, 2024
8aadbdd
chore: create the new section to enchance the tags page
panoramix360 Jan 15, 2024
b722d82
feat: adding on the summary
panoramix360 Jan 16, 2024
9df4573
fix: Fixing some typos
LuchoTurtle Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- [Reordering](mvp/18-reordering.md)
- [Add `item` to `list`](mvp/19-add-item-to-list.md)
- [Stats](mvp/20-stats.md)
- [Tags Page Enhanced](mvp/22-enhance-tags-page.md)
- [Tidy](tidy/README.md)
- [Setup](tidy/01-setup.md)
- [Schema](tidy/02-schema.md)
132 changes: 94 additions & 38 deletions src/mvp/20-stats.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,33 +416,33 @@ With that in place, we can update our Stats page to use this LiveComponent in a
highlight={&is_highlighted_person?(&1, @person_id)}
>
<:column :let={metric} label="Id" key="person_id">
<td class="px-6 py-4" data-test-id="person_id">
<td class="px-6 py-4" data-test-id={"person_id_#{metric.person_id}"}>
<a href={person_link(metric.person_id)}>
<%= metric.person_id %>
</a>
</td>
</:column>

<:column :let={metric} label="Items" key="num_items">
<td class="px-6 py-4 text-center" data-test-id="num_items">
<td class="px-6 py-4 text-center" data-test-id={"num_items_#{metric.person_id}"}>
<%= metric.num_items %>
</td>
</:column>

<:column :let={metric} label="Timers" key="num_timers">
<td class="px-6 py-4 text-center" data-test-id="num_timers">
<td class="px-6 py-4 text-center" data-test-id={"num_timers_#{metric.person_id}"}>
<%= metric.num_timers %>
</td>
</:column>

<:column :let={metric} label="First Joined" key="first_inserted_at">
<td class="px-6 py-4 text-center" data-test-id="first_inserted_at">
<td class="px-6 py-4 text-center" data-test-id={"first_inserted_at_#{metric.person_id}"}>
<%= format_date(metric.first_inserted_at) %>
</td>
</:column>

<:column :let={metric} label="Last Item Inserted" key="last_inserted_at">
<td class="px-6 py-4 text-center" data-test-id="last_inserted_at">
<td class="px-6 py-4 text-center" data-test-id={"last_inserted_at_#{metric.person_id}"}>
<%= format_date(metric.last_inserted_at) %>
</td>
</:column>
Expand All @@ -452,7 +452,7 @@ With that in place, we can update our Stats page to use this LiveComponent in a
label="Total Elapsed Time"
key="total_timers_in_seconds"
>
<td class="px-6 py-4 text-center" data-test-id="total_timers_in_seconds">
<td class="px-6 py-4 text-center" data-test-id={"total_timers_in_seconds_#{metric.person_id}"}>
<%= format_seconds(metric.total_timers_in_seconds) %>
</td>
</:column>
Expand Down Expand Up @@ -1036,83 +1036,138 @@ end
`test/app_web/live/stats_live_test.exs`
```elixir
defmodule AppWeb.StatsLiveTest do
alias App.DateTimeHelper

...
# alias App.DateTimeHelper
use AppWeb.ConnCase, async: true
alias App.{Item, Timer, DateTimeHelper}
import Phoenix.LiveViewTest

@person_id 55

test "disconnected and connected render", %{conn: conn} do
{:ok, page_live, disconnected_html} = live(conn, "/stats")
assert disconnected_html =~ "Stats"
assert render(page_live) =~ "Stats"
end

test "display metrics on mount", %{conn: conn} do
...
# Creating one timer
# Creating two items
{:ok, %{model: item, version: _version}} =
Item.create_item(%{text: "Learn Elixir", status: 2, person_id: @person_id})

{:ok, %{model: _item2, version: _version}} =
Item.create_item(%{text: "Learn Elixir", status: 4, person_id: @person_id})

assert item.status == 2

# Creating one timer
started = NaiveDateTime.utc_now()
{:ok, timer} = Timer.start(%{item_id: item.id, start: started})
{:ok, _} = Timer.stop(%{id: timer.id})

...
{:ok, page_live, _html} = live(conn, "/stats")

assert render(page_live) =~ "Stats"

# two items and one timer expected
assert page_live |> element("td[data-test-id=person_id]") |> render() =~
assert page_live |> element("td[data-test-id=person_id_55]") |> render() =~
"55"

assert page_live |> element("td[data-test-id=num_items]") |> render() =~ "2"
assert page_live |> element("td[data-test-id=num_items_55]") |> render() =~ "2"

assert page_live |> element("td[data-test-id=num_timers]") |> render() =~
"1"
assert page_live |> render() =~ "1"

assert page_live
|> element("td[data-test-id=first_inserted_at]")
|> element("td[data-test-id=first_inserted_at_55]")
|> render() =~
DateTimeHelper.format_date(started)

assert page_live
|> element("td[data-test-id=last_inserted_at]")
|> element("td[data-test-id=last_inserted_at_55]")
|> render() =~
DateTimeHelper.format_date(started)

assert page_live
|> element("td[data-test-id=total_timers_in_seconds]")
|> element("td[data-test-id=total_timers_in_seconds_55]")
|> render() =~
""
end

test "handle broadcast when item is created", %{conn: conn} do
...
# Creating an item
{:ok, %{model: _item, version: _version}} =
Item.create_item(%{text: "Learn Elixir", status: 2, person_id: @person_id})

{:ok, page_live, _html} = live(conn, "/stats")

assert render(page_live) =~ "Stats"
# num of items
assert page_live |> element("td[data-test-id=num_items]") |> render() =~ "1"

...
assert page_live |> element("td[data-test-id=num_items_55]") |> render() =~ "5"

# Creating another item.
AppWeb.Endpoint.broadcast(
"stats",
"item",
{:create, payload: %{person_id: @person_id}}
)

# num of items
assert page_live |> element("td[data-test-id=num_items]") |> render() =~ "2"
assert page_live |> element("td[data-test-id=num_items_55]") |> render() =~ "2"

...
# Broadcasting update. Shouldn't effect anything in the page
AppWeb.Endpoint.broadcast(
"stats",
"item",
{:update, payload: %{person_id: @person_id}}
)

# num of items
assert page_live |> element("td[data-test-id=num_items]") |> render() =~ "2"
assert page_live |> element("td[data-test-id=num_items_55]") |> render() =~ "2"
end

test "handle broadcast when timer is created", %{conn: conn} do
...
# Creating an item
{:ok, %{model: _item, version: _version}} =
Item.create_item(%{text: "Learn Elixir", status: 2, person_id: @person_id})

{:ok, page_live, _html} = live(conn, "/stats")

assert render(page_live) =~ "Stats"
# num of timers
assert page_live |> element("td[data-test-id=num_timers]") |> render() =~
assert page_live |> element("td[data-test-id=num_timers_55]") |> render() =~
"0"
...

# num of timers
assert page_live |> element("td[data-test-id=num_timers]") |> render() =~
# Creating a timer.
AppWeb.Endpoint.broadcast(
"stats",
"timer",
{:create, payload: %{person_id: @person_id}}
)

assert page_live |> element("td[data-test-id=num_timers_55]") |> render() =~
"1"

...
# Broadcasting update. Shouldn't effect anything in the page
AppWeb.Endpoint.broadcast(
"stats",
"timer",
{:update, payload: %{person_id: @person_id}}
)

# num of timers
assert page_live |> element("td[data-test-id=num_timers]") |> render() =~
"1"
assert page_live |> render() =~ "1"
end

...
test "add_row/3 adds 1 to row.num_timers" do
row = %{person_id: 1, num_items: 1, num_timers: 1}
payload = %{person_id: 1}

# expect row.num_timers to be incremented by 1:
row_updated = AppWeb.StatsLive.add_row(row, payload, :num_timers)
assert row_updated == %{person_id: 1, num_items: 1, num_timers: 2}

# no change expected:
row2 = %{person_id: 2, num_items: 1, num_timers: 42}
assert row2 == AppWeb.StatsLive.add_row(row2, payload, :num_timers)
end

test "sorting column when clicked", %{conn: conn} do
{:ok, %{model: _, version: _version}} =
Expand All @@ -1127,19 +1182,20 @@ defmodule AppWeb.StatsLiveTest do
result =
page_live |> element("th[phx-value-key=person_id]") |> render_click()

[first_element | _] = Floki.find(result, "td[data-test-id=person_id]")
[first_element | _] = Floki.find(result, "td[data-test-id=person_id_2]")

assert first_element |> Floki.text() =~ "2"

# sort second time
result =
page_live |> element("th[phx-value-key=person_id]") |> render_click()

[first_element | _] = Floki.find(result, "td[data-test-id=person_id]")
[first_element | _] = Floki.find(result, "td[data-test-id=person_id_1]")

assert first_element |> Floki.text() =~ "1"
end
end

```

Let's run the tests:
Expand Down
Loading
Loading