Merge pull request #293 from hydephp/add-blog-view-tests

Add tests for the blog post pages
hydephp · Jul 30, 2022 · 55b4f98 · 55b4f98
2 parents 71e7184 + 64bb15d
commit 55b4f98
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 0 deletions.
diff --git a/tests/Browser/HighLevelViewTest.php b/tests/Browser/HighLevelViewTest.php
@@ -184,6 +184,58 @@ public function test_documentation_site_with_grouped_pages()
         unlink(Hyde::path('_site/docs/page1.html'));
     }
 
+    public function test_blog_post_pages()
+    {
+        copy(Hyde::path('tests/fixtures/_posts/typography-simple.md'), Hyde::path('_posts/typography-simple.md'));
+        copy(Hyde::path('tests/fixtures/_posts/typography-front-matter.md'), Hyde::path('_posts/typography-front-matter.md'));
+
+        $this->artisan('publish:homepage posts -n');
+
+        if (! is_dir(Browser::$storeSourceAt.'/posts')) {
+            mkdir(Browser::$storeSourceAt.'/posts');
+        }
+
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/')
+                ->assertSee('HydePHP')
+                ->assertSee('Latest Posts')
+                ->assertSee('Typography Should Be Easy.')
+                ->assertSee('A TailwindCSS Typography demo with a bit more front matter, and a featured image.')
+                ->assertSee('A TailwindCSS Typography demo with little front matter.')
+                ->assertSee('Nov 7th, 2021, by TailwindLabs')
+                ->screenshot('typography_blog_post_feed');
+
+            $browser->assertSeeLink('Read post')
+                ->clickLink('Typography Should Be Easy. Simple.')
+                ->assertPathIs('/posts/typography-simple.html')
+                ->assertSee('Typography Should Be Easy. Simple.')
+                ->screenshot('typography_blog_post_page')
+                ->storeSourceAsHtml('posts/typography-simple');
+
+            $browser->back()
+                ->assertPathIs('/')
+                ->clickLink('Typography Should Be Easy. With Images.')
+                ->assertPathIs('/posts/typography-front-matter.html')
+                ->assertSee('Typography Should Be Easy. With Images.')
+                ->assertSee('Posted Nov 7th, 2021 by author TailwindLabs in the category "testing"')
+                ->assertPresent('article > figure > img')
+                ->assertSee('Image by Blake Wisz. License the Unsplash License')
+                ->assertSeeLink('TailwindLabs')
+                ->assertSeeLink('Blake Wisz')
+                ->assertSeeLink('the Unsplash License')
+                ->screenshot('typography_blog_post_page_with_front_matter')
+                ->storeSourceAsHtml('posts/typography-front-matter');
+        });
+
+        $this->artisan('publish:homepage welcome -n');
+
+        unlink(Hyde::path('_posts/typography-simple.md'));
+        unlink(Hyde::path('_posts/typography-front-matter.md'));
+        unlink(Hyde::path('_site/posts/typography-simple.html'));
+        unlink(Hyde::path('_site/posts/typography-front-matter.html'));
+        unlink(Hyde::path('_site/index.html'));
+    }
+
     protected function makeDocumentationTestPage(string $name, ?array $matter = null, bool $withText = false)
     {
         $path = Hyde::path('_docs/'.Str::slug($name).'.md');

diff --git a/tests/fixtures/_posts/typography-front-matter.md b/tests/fixtures/_posts/typography-front-matter.md
@@ -0,0 +1,83 @@
+---
+title: Typography Should Be Easy. With Images.
+description: A TailwindCSS Typography demo with a bit more front matter, and a featured image.
+category: testing
+author: 
+  name: TailwindLabs
+  website: https://tailwindcss.com
+date: Nov 7, 2021
+updated: Jule 30, 2022
+image:
+  uri: https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=360&q=80
+  description: Alt text
+  title: Tooltip
+  license: "the Unsplash License"
+  licenseUrl: "https://unsplash.com/license"
+  author: "Blake Wisz"
+  credit: "https://unsplash.com/photos/GFrBMipOd_E"
+---
+
+## Write something awesome.
+
+<!-- Fixture from https://github.com/tailwindlabs/tailwindcss-typography/blob/master/demo/components/MarkdownSampleShort.mdx, licensed under the MIT license. -->
+
+<p className="lead">
+  Until now, trying to style an article, document, or blog post with Tailwind has been a very
+  tedious task.
+</p>
+
+The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
+
+> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
+
+<div className="not-prose">
+  <h2>Shouldn't be colored</h2>
+</div>
+
+```html
+<p>
+  But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+  springing up around the country.
+</p>
+```
+
+For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
+
+---
+
+## This is a heading
+
+1. We want everything to look good out of the box.
+2. Really just the first reason, that's the whole point of the plugin.
+3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
+
+Now **I'm going to show you** an example of an unordered list to make sure that looks good, too:
+
+- So here is the first item in this list.
+- In this example we're keeping the items short.
+- Later, we'll use longer, more complex list items.
+
+Let's even style a table:
+
+| Wrestler                | Origin       | Finisher           |
+| ----------------------- | ------------ | ------------------ |
+| Bret "The Hitman" Hart  | Calgary, AB  | Sharpshooter       |
+| Stone Cold Steve Austin | Austin, TX   | Stone Cold Stunner |
+| Randy Savage            | Sarasota, FL | Elbow Drop         |
+| Vader                   | Boulder, CO  | Vader Bomb         |
+| Razor Ramon             | Chuluota, FL | Razor's Edge       |
+
+Finally, a figure with a caption:
+
+<figure>
+  <img
+    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=500&q=80"
+    alt=""
+  />
+  <figcaption>
+    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+    classical Latin literature from 45 BC, making it over 2000 years old.
+  </figcaption>
+</figure>
+
+And that's the end of our little demo.
diff --git a/tests/fixtures/_posts/typography-simple.md b/tests/fixtures/_posts/typography-simple.md
@@ -0,0 +1,69 @@
+---
+title: Typography Should Be Easy. Simple.
+description: A TailwindCSS Typography demo with little front matter.
+---
+
+## Write something awesome.
+
+<!-- Fixture from https://github.com/tailwindlabs/tailwindcss-typography/blob/master/demo/components/MarkdownSampleShort.mdx, licensed under the MIT license. -->
+
+<p className="lead">
+  Until now, trying to style an article, document, or blog post with Tailwind has been a very
+  tedious task.
+</p>
+
+The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
+
+> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
+
+<div className="not-prose">
+  <h2>Shouldn't be colored</h2>
+</div>
+
+```html
+<p>
+  But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+  springing up around the country.
+</p>
+```
+
+For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
+
+---
+
+## This is a heading
+
+1. We want everything to look good out of the box.
+2. Really just the first reason, that's the whole point of the plugin.
+3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
+
+Now **I'm going to show you** an example of an unordered list to make sure that looks good, too:
+
+- So here is the first item in this list.
+- In this example we're keeping the items short.
+- Later, we'll use longer, more complex list items.
+
+Let's even style a table:
+
+| Wrestler                | Origin       | Finisher           |
+| ----------------------- | ------------ | ------------------ |
+| Bret "The Hitman" Hart  | Calgary, AB  | Sharpshooter       |
+| Stone Cold Steve Austin | Austin, TX   | Stone Cold Stunner |
+| Randy Savage            | Sarasota, FL | Elbow Drop         |
+| Vader                   | Boulder, CO  | Vader Bomb         |
+| Razor Ramon             | Chuluota, FL | Razor's Edge       |
+
+Finally, a figure with a caption:
+
+<figure>
+  <img
+    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=500&q=80"
+    alt=""
+  />
+  <figcaption>
+    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+    classical Latin literature from 45 BC, making it over 2000 years old.
+  </figcaption>
+</figure>
+
+And that's the end of our little demo.