Merge pull request #1 from TappNetwork/add_tests

Add tests
TappNetwork · Jul 19, 2023 · 5a8f5d1 · 5a8f5d1
2 parents 8afccb4 + a9a105c
commit 5a8f5d1
Show file tree

Hide file tree

Showing 11 changed files with 770 additions and 4 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,47 @@
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: true
+      matrix:
+        php: [8.2, 8.1, 8.0]
+        laravel: [10, 9]
+        stability: [prefer-stable]
+        include:
+          - laravel: 10
+            testbench: ^8.0
+          - laravel: 9
+            testbench: ^7.0
+        exclude:
+          - php: 8.0
+            laravel: 10
+
+    name: PHP ${{ matrix.php }} - Laravel ${{ matrix.laravel }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php }}
+          extensions: dom, curl, libxml, mbstring, zip
+          coverage: none
+
+      - name: Install dependencies
+        run: |
+          composer require "illuminate/contracts=^${{ matrix.laravel }}" "orchestra/testbench:${{ matrix.testbench }}" --prefer-dist --no-interaction --no-update
+          composer update --prefer-dist --no-interaction --no-progress
+
+      - name: Execute tests
+        run: vendor/bin/pest
diff --git a/composer.json b/composer.json
@@ -32,11 +32,11 @@
     ],
     "require": {
         "php": "^7.4|^8.0",
-        "spatie/laravel-package-tools": "^1.1",
         "illuminate/contracts": "^8.0|^9.0|^10.0"
     },
     "require-dev": {
-        "orchestra/testbench": "^6.0|^7.0",
+        "orchestra/testbench": "^6.0|^7.0|^8.0",
+        "pestphp/pest": "^1.23",
         "phpstan/extension-installer": "^1.1",
         "phpstan/phpstan-deprecation-rules": "^1.0",
         "phpstan/phpstan-phpunit": "^1.0",
@@ -62,7 +62,8 @@
     "config": {
         "sort-packages": true,
         "allow-plugins": {
-            "phpstan/extension-installer": true
+            "phpstan/extension-installer": true,
+            "pestphp/pest-plugin": true
         }
     },
     "extra": {

diff --git a/phpunit.xml b/phpunit.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Blade Uppy Test Suite">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+</phpunit>
diff --git a/resources/views/components/input/uppy/ui.blade.php b/resources/views/components/input/uppy/ui.blade.php
@@ -1,7 +1,7 @@
 @aware([
     'instanceName' => 'uppyUpload',
     'uiOptions' => '{}',
-    'ui' => '',
+    'ui' => 'dashboard',
 ])
 
 {{ $instanceName }}.use({{ Str::of($ui)->camel()->ucfirst() }}, {{ $uiOptions }});
diff --git a/tests/Components/S3MultipartTest.php b/tests/Components/S3MultipartTest.php
@@ -0,0 +1,129 @@
+<?php
+
+declare(strict_types=1);
+
+it('can render the component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            uiOptions="{ inline: true, target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('uppyUpload.use(Dashboard');
+    $view->assertSee('.use(AwsS3Multipart');
+});
+
+it('can pass ui and ui options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            ui="drag-drop"
+            uiOptions="{ inline: true, target: \'#uppy-drag-drop\'}"
+        >
+            <div id="uppy-drag-drop">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('uppyUpload.use(DragDrop, { inline: true, target:');
+});
+
+it('can pass the uppy instance name to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            instanceName="testinstance"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('testinstance.use(Dashboard,');
+});
+
+it('can pass core options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            coreOptions="{ debug: true }"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('const uppyUpload = new Uppy({ debug: true });');
+});
+
+it('can pass uploader options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            uploaderOptions="{ id: s3multiparttest, limit: 10 }"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('.use(AwsS3Multipart, { id: s3multiparttest, limit: 10 });');
+});
+
+it('can pass events to component', function() {
+    $view = $this->blade(
+        '@php
+        $events = [
+            "file-added" => "
+                console.log(file);
+            ",
+        ];
+        @endphp
+
+        <x-input.uppy.s3-multipart
+            :events="$events"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('console.log(file);');
+});
+
+it('can pass plugins to component', function() {
+    $view = $this->blade(
+        '@php
+        $plugins = [
+            "ThumbnailGenerator" => "{ thumbnailWidth: 300, ThumbnailHeight: 300 }",
+        ];
+        @endphp
+
+        <x-input.uppy.s3-multipart
+            :plugins="$plugins"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee('uppyUpload.use(ThumbnailGenerator, { thumbnailWidth: 300, ThumbnailHeight: 300 });');
+});
+
+it('can pass extra javascript code to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3-multipart
+            extraJs="console.log(\'Hello\')"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3-multipart>'
+    );
+
+    $view->assertSee("console.log");
+});
diff --git a/tests/Components/S3Test.php b/tests/Components/S3Test.php
@@ -0,0 +1,129 @@
+<?php
+
+declare(strict_types=1);
+
+it('can render the component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            uiOptions="{ inline: true, target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('uppyUpload.use(Dashboard');
+    $view->assertSee('.use(AwsS3');
+});
+
+it('can pass ui and ui options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            ui="drag-drop"
+            uiOptions="{ inline: true, target: \'#uppy-drag-drop\'}"
+        >
+            <div id="uppy-drag-drop">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('uppyUpload.use(DragDrop, { inline: true, target:');
+});
+
+it('can pass the uppy instance name to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            instanceName="testinstance"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('testinstance.use(Dashboard,');
+});
+
+it('can pass core options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            coreOptions="{ debug: true }"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('const uppyUpload = new Uppy({ debug: true });');
+});
+
+it('can pass uploader options to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            uploaderOptions="{ id: s3test, limit: 10, timeout: 40_000 }"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('.use(AwsS3, { id: s3test, limit: 10, timeout: 40_000 });');
+});
+
+it('can pass events to component', function() {
+    $view = $this->blade(
+        '@php
+        $events = [
+            "file-added" => "
+                console.log(file);
+            ",
+        ];
+        @endphp
+
+        <x-input.uppy.s3
+            :events="$events"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('console.log(file);');
+});
+
+it('can pass plugins to component', function() {
+    $view = $this->blade(
+        '@php
+        $plugins = [
+            "ThumbnailGenerator" => "{ thumbnailWidth: 300, ThumbnailHeight: 300 }",
+        ];
+        @endphp
+
+        <x-input.uppy.s3
+            :plugins="$plugins"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee('uppyUpload.use(ThumbnailGenerator, { thumbnailWidth: 300, ThumbnailHeight: 300 });');
+});
+
+it('can pass extra javascript code to component', function() {
+    $view = $this->blade(
+        '<x-input.uppy.s3
+            extraJs="console.log(\'Hello\')"
+            uiOptions="{ target: \'#uppy-dashboard\'}"
+        >
+            <div id="uppy-dashboard">
+            </div>
+        </x-input.uppy.s3>'
+    );
+
+    $view->assertSee("console.log");
+});