diff --git a/README.md b/README.md index 2e5f2c2f..f208c0dd 100644 --- a/README.md +++ b/README.md @@ -115,10 +115,10 @@ If you run the following command in your terminal: mix phx.new -v ``` -You should see: +You should see something similar to the following: ```sh -Phoenix v1.6.2 +Phoenix installer v1.6.0 ``` If you have an earlier version, @@ -288,9 +288,6 @@ in your web browser. ![welcome-to-phoenix](https://user-images.githubusercontent.com/194400/76152198-ae210200-60b4-11ea-956f-68935daddfe0.png) -😱 If you are having problems with the server hanging, try -[this](#problems-with-dependencies) - > 🏁 Snapshot of code at the end of Step 1: > [`#c48488`](https://github.com/dwyl/phoenix-liveview-counter-tutorial/tree/c4848853beb2df3327663270d1018a128bbcf0fa) @@ -582,14 +579,14 @@ will now _fail_: Compiling 1 file (.ex) .. -1) test disconnected and connected render (LiveViewCounterWeb.PageLiveTest) - test/live_view_counter_web/live/page_live_test.exs:6 +1) test GET / (LiveViewCounterWeb.PageControllerTest) + test/live_view_counter_web/controllers/page_controller_test.exs:4 Assertion with =~ failed - code: assert disconnected_html =~ "Welcome to Phoenix!" + code: assert html_response(conn, 200) =~ "Welcome to Phoenix!" left: "LiveViewCounter · Phoenix Framework
\"Phoenix

The count is: 0

" right: "Welcome to Phoenix!" stacktrace: - test/live_view_counter_web/live/page_live_test.exs:8: (test) + test/live_view_counter_web/controllers/page_controller_test.exs:6: (test) Finished in 0.1 seconds @@ -600,12 +597,11 @@ This just tells us that the test is looking for the string `"Welcome to Phoenix!"` in the page and did not find it. To fix the broken test, open the -`test/live_view_counter_web/live/page_live_test.exs` -file and locate the lines: +`test/live_view_counter_web/controllers/page_controller_test.exs` +file and locate the line: ```elixir -assert disconnected_html =~ "Welcome to Phoenix!" -assert render(page_live) =~ "Welcome to Phoenix!" +assert html_response(conn, 200) =~ "Welcome to Phoenix!" ``` Update the string from `"Welcome to Phoenix!"` @@ -614,7 +610,8 @@ e.g: `"The count is"` > 🏁 The `page_live_test.exs` file should now look like this: -> [`test/live_view_counter_web/live/page_live_test.exs#L8-L9`](https://github.com/dwyl/phoenix-liveview-counter-tutorial/blob/8b12dd70f6b1693a4f39a1cb53f8fc1b4ced33f1/test/live_view_counter_web/live/page_live_test.exs#L8-L9) +> [`test/live_view_counter_web/live/page_live_test.exs#L8-L9`](https://github.com/dwyl/phoenix-liveview-counter-tutorial/blob/master/test/live_view_counter_web/controllers/page_controller_test.exs#L6) + Confirm the tests pass again by running: @@ -956,7 +953,7 @@ We hope you enjoyed learning with us!
If you found this useful, please ⭐️and _share_ the GitHub repo so we know you like it! -


+
## Future Steps diff --git a/assets/vendor/topbar.js b/assets/vendor/topbar.js new file mode 100644 index 00000000..ff7fbb67 --- /dev/null +++ b/assets/vendor/topbar.js @@ -0,0 +1,157 @@ +/** + * @license MIT + * topbar 1.0.0, 2021-01-06 + * http://buunguyen.github.io/topbar + * Copyright (c) 2021 Buu Nguyen + */ +(function (window, document) { + "use strict"; + + // https://gist.github.com/paulirish/1579671 + (function () { + var lastTime = 0; + var vendors = ["ms", "moz", "webkit", "o"]; + for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = + window[vendors[x] + "RequestAnimationFrame"]; + window.cancelAnimationFrame = + window[vendors[x] + "CancelAnimationFrame"] || + window[vendors[x] + "CancelRequestAnimationFrame"]; + } + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function (callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function () { + callback(currTime + timeToCall); + }, timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function (id) { + clearTimeout(id); + }; + })(); + + var canvas, + progressTimerId, + fadeTimerId, + currentProgress, + showing, + addEvent = function (elem, type, handler) { + if (elem.addEventListener) elem.addEventListener(type, handler, false); + else if (elem.attachEvent) elem.attachEvent("on" + type, handler); + else elem["on" + type] = handler; + }, + options = { + autoRun: true, + barThickness: 3, + barColors: { + 0: "rgba(26, 188, 156, .9)", + ".25": "rgba(52, 152, 219, .9)", + ".50": "rgba(241, 196, 15, .9)", + ".75": "rgba(230, 126, 34, .9)", + "1.0": "rgba(211, 84, 0, .9)", + }, + shadowBlur: 10, + shadowColor: "rgba(0, 0, 0, .6)", + className: null, + }, + repaint = function () { + canvas.width = window.innerWidth; + canvas.height = options.barThickness * 5; // need space for shadow + + var ctx = canvas.getContext("2d"); + ctx.shadowBlur = options.shadowBlur; + ctx.shadowColor = options.shadowColor; + + var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0); + for (var stop in options.barColors) + lineGradient.addColorStop(stop, options.barColors[stop]); + ctx.lineWidth = options.barThickness; + ctx.beginPath(); + ctx.moveTo(0, options.barThickness / 2); + ctx.lineTo( + Math.ceil(currentProgress * canvas.width), + options.barThickness / 2 + ); + ctx.strokeStyle = lineGradient; + ctx.stroke(); + }, + createCanvas = function () { + canvas = document.createElement("canvas"); + var style = canvas.style; + style.position = "fixed"; + style.top = style.left = style.right = style.margin = style.padding = 0; + style.zIndex = 100001; + style.display = "none"; + if (options.className) canvas.classList.add(options.className); + document.body.appendChild(canvas); + addEvent(window, "resize", repaint); + }, + topbar = { + config: function (opts) { + for (var key in opts) + if (options.hasOwnProperty(key)) options[key] = opts[key]; + }, + show: function () { + if (showing) return; + showing = true; + if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId); + if (!canvas) createCanvas(); + canvas.style.opacity = 1; + canvas.style.display = "block"; + topbar.progress(0); + if (options.autoRun) { + (function loop() { + progressTimerId = window.requestAnimationFrame(loop); + topbar.progress( + "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2) + ); + })(); + } + }, + progress: function (to) { + if (typeof to === "undefined") return currentProgress; + if (typeof to === "string") { + to = + (to.indexOf("+") >= 0 || to.indexOf("-") >= 0 + ? currentProgress + : 0) + parseFloat(to); + } + currentProgress = to > 1 ? 1 : to; + repaint(); + return currentProgress; + }, + hide: function () { + if (!showing) return; + showing = false; + if (progressTimerId != null) { + window.cancelAnimationFrame(progressTimerId); + progressTimerId = null; + } + (function loop() { + if (topbar.progress("+.1") >= 1) { + canvas.style.opacity -= 0.05; + if (canvas.style.opacity <= 0.05) { + canvas.style.display = "none"; + fadeTimerId = null; + return; + } + } + fadeTimerId = window.requestAnimationFrame(loop); + })(); + }, + }; + + if (typeof module === "object" && typeof module.exports === "object") { + module.exports = topbar; + } else if (typeof define === "function" && define.amd) { + define(function () { + return topbar; + }); + } else { + this.topbar = topbar; + } +}.call(this, window, document)); diff --git a/test/live_view_counter_web/controllers/page_controller_test.exs b/test/live_view_counter_web/controllers/page_controller_test.exs new file mode 100644 index 00000000..3c330cb2 --- /dev/null +++ b/test/live_view_counter_web/controllers/page_controller_test.exs @@ -0,0 +1,8 @@ +defmodule LiveViewCounterWeb.PageControllerTest do + use LiveViewCounterWeb.ConnCase + + test "GET /", %{conn: conn} do + conn = get(conn, "/") + assert html_response(conn, 200) =~ "The count is" + end +end diff --git a/test/live_view_counter_web/live/page_live_test.exs b/test/live_view_counter_web/live/page_live_test.exs deleted file mode 100644 index 4608d170..00000000 --- a/test/live_view_counter_web/live/page_live_test.exs +++ /dev/null @@ -1,11 +0,0 @@ -defmodule LiveViewCounterWeb.PageLiveTest do - use LiveViewCounterWeb.ConnCase - - import Phoenix.LiveViewTest - - test "disconnected and connected render", %{conn: conn} do - {:ok, page_live, disconnected_html} = live(conn, "/") - assert disconnected_html =~ "The count is" - assert render(page_live) =~ "The count is" - end -end diff --git a/test/live_view_counter_web/views/page_view_test.exs b/test/live_view_counter_web/views/page_view_test.exs new file mode 100644 index 00000000..9fe0f770 --- /dev/null +++ b/test/live_view_counter_web/views/page_view_test.exs @@ -0,0 +1,3 @@ +defmodule LiveViewCounterWeb.PageViewTest do + use LiveViewCounterWeb.ConnCase, async: true +end