Implement Article component

composer.json

@@ -19,16 +19,17 @@
         "php": "^8.2",
         "illuminate/contracts": "^10.0||^11.0",
         "livewire/livewire": "^3.4",
+        "pestphp/pest": "^2.34",
         "spatie/laravel-package-tools": "^1.16"
     },
     "require-dev": {
         "larastan/larastan": "^2.9",
         "laravel/pint": "^1.14",
         "nunomaduro/collision": "^8.1.1||^7.10.0",
         "orchestra/testbench": "^9.0.0||^8.22.0",
-        "pestphp/pest": "^2.34",
         "pestphp/pest-plugin-arch": "^2.7",
         "pestphp/pest-plugin-laravel": "^2.3",
+        "pestphp/pest-plugin-watch": "^2.1",
         "phpstan/extension-installer": "^1.3",
         "phpstan/phpstan-deprecation-rules": "^1.1",
         "phpstan/phpstan-phpunit": "^1.3",
@@ -61,6 +62,10 @@
         "analyze": "vendor/bin/phpstan analyse",
         "test": "vendor/bin/pest",
         "test-coverage": "vendor/bin/pest --coverage",
+        "test-watch": [
+            "Composer\\Config::disableProcessTimeout",
+            "vendor/bin/pest --watch=resources,src,tests"
+        ],
         "format": "vendor/bin/pint"
     },
     "config": {

resources/views/containers/article.blade.php

@@ -0,0 +1,3 @@
+<div {!! $globalAttributes !!}>
+    {{ $slot }}
+</div>

src/Components/Containers/Article.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace T73biz\LwBits\Components\Containers;
+
+use Illuminate\Contracts\Foundation\Application as ContractedApplication;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View as ContractedView;
+use Illuminate\Foundation\Application;
+use Illuminate\View\View;
+use Livewire\Component;
+use T73biz\LwBits\Components\GlobalAttributesTrait;
+
+/**
+ * Class Article
+ */
+class Article extends Component
+{
+    use GlobalAttributesTrait;
+
+    /**
+     * Standard mount function
+     */
+    public function mount(): void
+    {
+        $this->setGlobalAttributes();
+    }
+
+    /**
+     * Standard render function
+     */
+    public function render(): Application|ContractedApplication|ContractedView|Factory|View
+    {
+        return view(
+            'lw-bits::containers.article',
+            [
+                'globalAttributes' => $this->getGlobalAttributes(),
+                'slot' => '',
+            ]
+        );
+    }
+}

src/Components/Containers/Div.php

@@ -17,11 +17,17 @@ class Div extends Component
 {
     use GlobalAttributesTrait;
 
+    /**
+     * Standard mount function
+     */
     public function mount(): void
     {
         $this->setGlobalAttributes();
     }
 
+    /**
+     * Standard render function
+     */
     public function render(): Application|ContractedApplication|ContractedView|Factory|View
     {
         return view(

tests/Feature/Containers/ArticleTest.php

@@ -0,0 +1,119 @@
+<?php
+
+use Livewire\Livewire;
+use T73biz\LwBits\Tests\TestSupport\Components\Containers\MyArticle;
+
+it('can render', function () {
+    Livewire::test(MyArticle::class)
+        ->assertStatus(200);
+});
+
+it('can render with accesskey', function () {
+    Livewire::test(MyArticle::class, ['accessKey' => true])
+        ->assertSee('accesskey');
+});
+
+it('can render with autocapitalize', function () {
+    Livewire::test(MyArticle::class, ['autoCapitalize' => true])
+        ->assertSee('autocapitalize');
+});
+
+it('can render with autofocus', function () {
+    Livewire::test(MyArticle::class, ['autoFocus' => true])
+        ->assertSee('autofocus');
+});
+
+it('can render with contenteditable', function () {
+    Livewire::test(MyArticle::class, ['contentEditable' => true])
+        ->assertSee('contenteditable');
+});
+
+it('can render with css classes', function () {
+    Livewire::test(MyArticle::class, ['cssClasses' => ['class1', 'class2']])
+        ->assertSee('class="class1 class2"', false);
+});
+
+it('can render with data-*', function () {
+    Livewire::test(MyArticle::class, ['data' => ['name' => 'main-div']])
+        ->assertSee('data-name="main-div"', false);
+});
+
+it('can render with dir', function () {
+    Livewire::test(MyArticle::class, ['direction' => 'rtl'])
+        ->assertSee('dir="rtl"', false);
+});
+
+it('can render with draggable', function () {
+    Livewire::test(MyArticle::class, ['draggable' => true])
+        ->assertSee('draggable');
+});
+
+it('can render with enterkeyhint', function () {
+    Livewire::test(MyArticle::class, ['enterKeyHint' => 'enter'])
+        ->assertSee('enterkeyhint="enter"', false);
+});
+
+it('can render with hidden', function () {
+    Livewire::test(MyArticle::class, ['hidden' => true])
+        ->assertSee('hidden');
+});
+
+it('can render with id', function () {
+    Livewire::test(MyArticle::class, ['id' => 'main-div'])
+        ->assertSee('id="main-div"', false);
+});
+
+it('can render with language', function () {
+    Livewire::test(MyArticle::class, ['language' => 'en'])
+        ->assertSee('lang="en"', false);
+});
+
+it('can render with nonce', function () {
+    Livewire::test(MyArticle::class, ['nonce' => 'abc123'])
+        ->assertSee('nonce="abc123"', false);
+});
+
+it('can render with parts', function () {
+    Livewire::test(MyArticle::class, ['parts' => ['part1', 'part2']])
+        ->assertSee('part="part1 part2"', false);
+});
+
+it('can render with popOver', function () {
+    Livewire::test(MyArticle::class, ['popOver' => true])
+        ->assertSee('popover');
+});
+
+it('can render with role', function () {
+    Livewire::test(MyArticle::class, ['role' => 'main'])
+        ->assertSee('role="main"', false);
+});
+
+it('can render with slot', function () {
+    Livewire::test(MyArticle::class, ['slotAttribute' => 'main-div'])
+        ->assertSee('slot="main-div"', false);
+});
+
+it('can render with spellcheck', function () {
+    Livewire::test(MyArticle::class, ['spellCheck' => true])
+        ->assertSee('spellcheck');
+});
+
+it('can render with styles', function () {
+    Livewire::test(MyArticle::class, ['styles' => ['color' => 'red', 'font-size' => '16px']])
+        ->assertSee('style="color:red;font-size:16px"', false);
+});
+
+it('can render with tabindex', function () {
+    Livewire::test(MyArticle::class, ['tabIndex' => 1])
+        ->assertSee('tabindex="1"', false);
+});
+
+it('can render with title', function () {
+    Livewire::test(MyArticle::class, ['title' => 'main-div'])
+        ->assertSee('title="main-div"', false);
+});
+
+it('can render with translate', function () {
+    Livewire::test(MyArticle::class, ['translate' => true])
+        ->assertSee('translate');
+});

tests/Feature/Containers/DivTest.php

@@ -7,6 +7,7 @@
     Livewire::test(MyDiv::class)
         ->assertStatus(200);
 });
+
 it('can render with accesskey', function () {
     Livewire::test(MyDiv::class, ['accessKey' => true])
         ->assertSee('accesskey');

tests/TestSupport/Components/Containers/MyArticle.php

@@ -0,0 +1,7 @@
+<?php
+
+namespace T73biz\LwBits\Tests\TestSupport\Components\Containers;
+
+class MyArticle extends \T73biz\LwBits\Components\Containers\Article
+{
+}