Skip to content

Commit

Permalink
Update control live tests for desktop and mobile scenarios
Browse files Browse the repository at this point in the history
  • Loading branch information
@zkayser
zkayser committed Jun 9, 2020
1 parent 1e09e60 commit 2da338c
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 73 deletions.
20 changes: 19 additions & 1 deletion lib/live_deck_web/live/control_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ defmodule LiveDeckWeb.ControlLive do
alias LiveDeck.Controls.Timer
require Logger
@valid_actions ~w(next prev)
@breakpoint 1200

defmodule ViewAttributes do
@moduledoc """
Expand All @@ -16,7 +17,16 @@ defmodule LiveDeckWeb.ControlLive do
defstruct timer_start_class: "",
show_notes?: false,
menu_class: "",
menu_drawer: ""
menu_drawer: "",
thumbnail_type: nil

@type t() :: %__MODULE__{
timer_start_class: String.t(),
show_notes?: boolean(),
menu_class: String.t(),
menu_drawer: String.t(),
thumbnail_type: nil | :desktop | :mobile
}
end

def mount(_params, _session, socket) do
Expand Down Expand Up @@ -106,6 +116,14 @@ defmodule LiveDeckWeb.ControlLive do
})}
end

def handle_event("resize", %{"width" => width}, socket) do
{:noreply,
assign_view_attributes(socket, %ViewAttributes{
socket.assigns.view_attributes
| thumbnail_type: if(width >= @breakpoint, do: :desktop, else: :mobile)
})}
end

def handle_info(:tick, socket) do
{:noreply, assign_timer(socket, Timer.tick(socket.assigns.timer))}
end
Expand Down
20 changes: 20 additions & 0 deletions lib/live_deck_web/templates/control/_mobile_thumbnail_drawer.html.leex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div data-testid="mobile-thumbnail-view" class="menu__drawer <%= @view_attributes.menu_drawer %>">
<button phx-click="toggle_menu" class="menu__close">
close
</button>
<nav class="u-padded">
<ul>
<%= for index <- 0..@presentation.last_index do %>
<li class="thumbnail__container">
<div
phx-click="set_slide_index"
phx-value-index="<%= index %>"
data-testid="thumbnail-<%= index %>"
class="thumbnail">
<iframe src="/thumbnails/<%= index %>"></iframe>
</div>
</li>
<% end %>
</ul>
</nav>
</div>
42 changes: 42 additions & 0 deletions lib/live_deck_web/templates/control/_presenter_mode.html.leex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div class="speaker__slides">
<div class="slide--current">
<h2>Current Slide</h2>
<div class="thumbnail__container">
<div
data-testid="active-slide-preview"
class="thumbnail">
<iframe src="/thumbnails/<%= @presentation.active_index %>"></iframe>
</div>
</div>
</div>
<%= if @presentation.active_index < @presentation.last_index do %>
<div class="slide--next">
<h2>Next Slide</h2>
<div class="thumbnail__container">
<div
data-testid="next-slide-preview"
class="thumbnail">
<iframe src="/thumbnails/<%= @presentation.active_index + 1%>"></iframe>
</div>
</div>
</div>
<% end %>
</div>
<div class="speaker__notes">
<p class="notes"><%= @current_slide.notes %></p>
</div>
<div class="speaker__thumbnails">
<div data-testid="desktop-thumbnail-view" class="thumbnail__track">
<%= for index <- 0..@presentation.last_index do %>
<div class="thumbnail__container">
<div
phx-click="set_slide_index"
phx-value-index="<%= index %>"
data-testid="thumbnail-<%= index %>"
class="thumbnail">
<iframe src="/thumbnails/<%= index %>"></iframe>
</div>
</div>
<% end %>
</div>
</div>
68 changes: 6 additions & 62 deletions lib/live_deck_web/templates/control/index.html.leex
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,8 @@
<div class="speaker__page">
<div class="speaker__container">
<div class="speaker__slides">
<div class="slide--current">
<h2>Current Slide</h2>
<div class="thumbnail__container">
<div
data-testid="active-slide-preview"
class="thumbnail">
<iframe src="/thumbnails/<%= @presentation.active_index %>"></iframe>
</div>
</div>
</div>
<%= if @presentation.active_index < @presentation.last_index do %>
<div class="slide--next">
<h2>Next Slide</h2>
<div class="thumbnail__container">
<div
data-testid="next-slide-preview"
class="thumbnail">
<iframe src="/thumbnails/<%= @presentation.active_index + 1%>"></iframe>
</div>
</div>
</div>
<% end %>
</div>
<div class="speaker__notes">
<p class="notes"><%= @current_slide.notes %></p>
</div>
<div class="speaker__thumbnails">
<div class="thumbnail__track">
<%= for index <- 0..@presentation.last_index do %>
<div class="thumbnail__container">
<div
phx-click="set_slide_index"
phx-value-index="<%= index %>"
data-testid="thumbnail-<%= index %>"
class="thumbnail">
<iframe src="/thumbnails/<%= index %>"></iframe>
</div>
</div>
<% end %>
</div>
</div>
<%= if @view_attributes.thumbnail_type == :desktop do %>
<%= render "_presenter_mode.html", presentation: @presentation, current_slide: @current_slide %>
<% end %>
</div>
<div class="remote" data-testid="remote-page">
<section class="remote__header">
Expand Down Expand Up @@ -127,26 +88,9 @@
<% end %>
</div>
</section>
<div class="menu__drawer <%= @view_attributes.menu_drawer %>">
<button phx-click="toggle_menu" class="menu__close">
close
</button>
<nav class="u-padded">
<ul>
<%= for index <- 0..@presentation.last_index do %>
<li class="thumbnail__container">
<div
phx-click="set_slide_index"
phx-value-index="<%= index %>"
data-testid="thumbnail-<%= index %>"
class="thumbnail">
<iframe src="/thumbnails/<%= index %>"></iframe>
</div>
</li>
<% end %>
</ul>
</nav>
</div>
<%= if @view_attributes.thumbnail_type == :mobile do %>
<%= render "_mobile_thumbnail_drawer.html", presentation: @presentation, view_attributes: @view_attributes %>
<% end %>
<%= if @view_attributes.show_notes? do %>
<%= render "_notes_modal.html", presentation: @presentation, current_slide_index: @current_slide_index, current_slide: @current_slide %>
<% end %>
Expand Down
39 changes: 29 additions & 10 deletions test/live_deck_web/live/control_live_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,13 @@ defmodule LiveDeckWeb.ControlLiveTest do

refute render(view) =~ ~s(Next: )
end
end

describe "presenter mode" do
setup [:mount, :set_desktop_size]

# check for desktop view
test "renders the active slide preview in desktop view", %{html: html} do
assert html =~ ~s(data-testid="active-slide-preview")
test "renders the active slide preview in desktop view", %{view: view} do
assert render(view) =~ ~s(data-testid="active-slide-preview")
end

test "renders the next slide preview in desktop view if existent", %{view: view} do
Expand Down Expand Up @@ -89,22 +92,32 @@ defmodule LiveDeckWeb.ControlLiveTest do
end
end

describe "thumbnail drawer" do
setup [:mount, :open_thumbnail_drawer]
describe "thumbnail track desktop" do
setup [:mount, :set_desktop_size]

test "renders desktop thumbails for desktop view", %{html: html} do
assert html =~ ~s(data-testid=\"desktop-thumbnail-view\")
test "renders the thumbnail track", %{view: view} do
assert render(view) =~ ~s(data-testid=\"desktop-thumbnail-view\")
end

test "updates the presentation slide to the slide at the index clicked on", %{view: view} do
view |> element(~s([data-testid="thumbnail-4"])) |> render_click()
assert LiveDeck.Controls.get_presentation().active_index == 4
end
end

describe "thumbnail drawer" do
setup [:mount, :open_thumbnail_drawer]

test "renders mobile thumbails for mobile view", %{view: view} do
assert render_hook(view, "resize", %{"width" => "800"}) =~ ~s(data-testid=\"mobile-thumbnail-view\")
assert render_hook(view, "resize", %{"width" => 800}) =~
~s(data-testid=\"mobile-thumbnail-view\")
end

test "renders thumbnails for each slide in the presentation", %{html: html} do
test "renders thumbnails for each slide in the presentation", %{view: view} do
presentation = LiveDeck.Controls.get_presentation()

for slide_index <- 0..presentation.last_index do
assert html =~ "<iframe src=\"/thumbnails/#{slide_index}\">"
assert render(view) =~ "<iframe src=\"/thumbnails/#{slide_index}\">"
end
end

Expand Down Expand Up @@ -133,7 +146,13 @@ defmodule LiveDeckWeb.ControlLiveTest do
@toggle_menu "toggle_menu"

defp open_thumbnail_drawer(context) do
render_hook(context.view, "resize", %{"width" => 800})
render_click(context.view, @toggle_menu)
context
end

defp set_desktop_size(context) do
render_hook(context.view, "resize", %{"width" => 1280})
context
end
end

0 comments on commit 2da338c

Please sign in to comment.