- friendly_user_name() ) ); - echo ' '; - /* translators: %s: number of optimizable sizes and number of uploaded images */ - printf( esc_html__( 'With your current settings you can still optimize %1$s image sizes from your %2$s uploaded JPEG, PNG, and WebP images.', 'tiny-compress-images' ), '', '' ); - echo ' '; - printf( - wp_kses( - /* translators: %s: bulk optimization link */ - __( 'Start the %s to optimize the remainder of your library.', 'tiny-compress-images' ), - array( - 'a' => array( - 'href' => array(), +
+
+
+
-
-
-  ); ?>)
+
- friendly_user_name() ) ); - echo ' '; - require __DIR__ . '/request-review.php'; - ?> -
+ esc_html( number_format_i18n( $widget['remaining_credits'] ) ) + ); + ?> + + +
+
-
-
-
diff --git a/src/views/progress-circle.php b/src/views/progress-circle.php
new file mode 100644
index 00000000..b62d5f56
--- /dev/null
+++ b/src/views/progress-circle.php
@@ -0,0 +1,75 @@
+
+
+
+- saved %s of your media library size.', 'tiny-compress-images' ), - array( - 'span' => array(), - 'strong' => array(), - ) - ), - '%' - ); - ?> -
-
+
+
diff --git a/test/integration/dashboardwidget.spec.ts b/test/integration/dashboardwidget.spec.ts
index 50836014..8efe1d18 100644
--- a/test/integration/dashboardwidget.spec.ts
+++ b/test/integration/dashboardwidget.spec.ts
@@ -5,10 +5,23 @@ test.describe.configure({ mode: 'serial' });
let page: Page;
+const widget = () => page.locator('#tinypng_dashboard_widget');
+
+// The settings page fetches the account details over ajax after saving,
+// so wait for that before the dashboard reads them.
+async function setAccount(key: string) {
+ await setAPIKey(page, key);
+ await page.waitForURL(/settings-updated=true/);
+ await page.waitForLoadState('networkidle');
+}
+
test.describe('dashboardwidget', () => {
test.beforeAll(async ({ browser }) => {
- page = await browser.newPage();
+ // The widget hides its notices when narrower than 560px, which it is
+ // in the two column dashboard at the default 1280px viewport.
+ page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await setAPIKey(page, '');
+ await setCompressionTiming(page, 'auto');
await enableCompressionSizes(page, [], true); // enable all sizes
});
@@ -17,46 +30,59 @@ test.describe('dashboardwidget', () => {
});
test('show widget without images', async () => {
+ await setAPIKey(page, 'JPG123');
+
await page.goto('/wp-admin/index.php');
- await expect(page.getByText('You do not seem to have uploaded any JPEG, PNG or WebP images yet.')).toBeVisible();
+
+ await expect(widget().getByText('George is hungry')).toBeVisible();
+ await expect(widget().getByText('There are no images uploaded yet.')).toBeVisible();
});
- test('show widget without optimized images', async () => {
- // It won't compress images without an API Key
+ test('show notice without api key', async () => {
await setAPIKey(page, '');
- await setCompressionTiming(page, 'auto');
-
- await uploadMedia(page, 'input-example.png');
await page.goto('/wp-admin/index.php');
- await expect(
- page.getByText(`Hi Admin, you haven't compressed any images in your media library. If you like you can to optimize your whole library in one go with the bulk optimization page.`)
- ).toBeVisible();
+
+ await expect(widget().getByText('Please register or provide an API key to start compressing images.')).toBeVisible();
});
- test('show widget with some images optimized', async () => {
+ test('show widget with images to optimize', async () => {
+ // It won't compress images without an API Key
await setAPIKey(page, '');
+ await uploadMedia(page, 'input-example.png');
- await setCompressionTiming(page, 'auto');
-
- await uploadMedia(page, 'input-example.jpg');
+ await page.goto('/wp-admin/index.php');
- await setAPIKey(page, 'JPG123');
+ await expect(widget().getByText('1 image needs optimization')).toBeVisible();
+ await expect(widget().getByText('Please register or provide an API key to start compressing images.')).toBeVisible();
+ await expect(widget().getByRole('link', { name: 'Bulk Optimizer' })).toBeVisible();
+ });
+ test('show widget with all images optimized', async () => {
+ await setAPIKey(page, 'JPG123');
await uploadMedia(page, 'input-example.jpg');
await page.goto('/wp-admin/index.php');
- await expect(page.getByText('Admin, you are doing good. With your current settings you can still optimize')).toBeVisible();
+ await expect(widget().getByText('All images are optimized')).toBeVisible();
+ await expect(widget().getByText('100%')).toBeVisible();
+ await expect(widget().getByRole('link', { name: 'Bulk Optimizer' })).not.toBeVisible();
});
- test('show widget with all images optimized', async () => {
+ test('show notice with low credits on free plan', async () => {
+ await setAccount('INSUFFICIENTCREDITS123');
+
await page.goto('/wp-admin/index.php');
- await uploadMedia(page, 'input-example.jpg');
+ await expect(widget().getByText('You are on a free plan with 1 compression left.')).toBeVisible();
+ });
+
+ test('not show credits on paid plan', async () => {
+ await setAccount('JPG123');
await page.goto('/wp-admin/index.php');
- await expect(page.getByText('Admin, this is great! Your entire library is optimized!')).toBeVisible();
+ await expect(widget().getByText('George is hungry')).toBeVisible();
+ await expect(widget().getByText('compressions left')).not.toBeVisible();
});
});
diff --git a/test/unit/Tiny_Dashboard_Test.php b/test/unit/Tiny_Dashboard_Test.php
new file mode 100644
index 00000000..a802b6fc
--- /dev/null
+++ b/test/unit/Tiny_Dashboard_Test.php
@@ -0,0 +1,250 @@
+settings = $this->createMock(Tiny_Settings::class);
+ }
+
+ /**
+ * helper to build optimization stats
+ *
+ * @param int $uploaded number of uploaded images
+ * @param int $remaining number of images remaining
+ * @param integer $unoptimized_size
+ * @param integer $optimized_size
+ * @return array optimization stats
+ */
+ private function stats($uploaded, $remaining, $unoptimized_size = 0, $optimized_size = 0)
+ {
+ return array(
+ 'uploaded-images' => $uploaded,
+ 'optimized-image-sizes' => 0,
+ 'available-unoptimized-sizes' => 0,
+ 'optimized-library-size' => $optimized_size,
+ 'unoptimized-library-size' => $unoptimized_size,
+ 'estimated_credit_use' => 0,
+ 'available-for-optimization' => array_fill(0, $remaining, array('ID' => 1, 'post_title' => 'image')),
+ 'display-percentage' => 0,
+ );
+ }
+
+ public function test_is_empty_when_there_are_no_images()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(0, 0));
+
+ $this->assertSame('empty', $data['status']);
+ $this->assertSame(0, $data['percentage']);
+ $this->assertSame(0, $data['images_remaining']);
+ $this->assertSame('panda-waiting.png', $data['panda']);
+ }
+
+ public function test_is_in_progress_when_images_remain()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(1250, 330));
+
+ $this->assertSame('in_progress', $data['status']);
+ $this->assertSame(920, $data['images_optimized']);
+ $this->assertSame(1250, $data['images_total']);
+ $this->assertSame(330, $data['images_remaining']);
+ $this->assertSame(73, $data['percentage']);
+ $this->assertSame('panda-waiting.png', $data['panda']);
+ }
+
+ public function test_is_done_when_no_images_remain()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(1250, 0));
+
+ $this->assertSame('done', $data['status']);
+ $this->assertSame(1250, $data['images_optimized']);
+ $this->assertSame(100, $data['percentage']);
+ $this->assertSame('optimized', $data['label']);
+ $this->assertSame('panda-laying.png', $data['panda']);
+ }
+
+ public function test_labels_up_to_half_as_getting_started()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+
+ $one_percent = $dashboard->get_widget_data($this->stats(100, 99));
+ $fifty_percent = $dashboard->get_widget_data($this->stats(100, 50));
+
+ $this->assertSame('getting started', $one_percent['label']);
+ $this->assertSame('getting started', $fifty_percent['label']);
+ }
+
+ public function test_labels_above_half_as_halfway_there()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+
+ $fifty_one_percent = $dashboard->get_widget_data($this->stats(100, 49));
+ $seventy_five_percent = $dashboard->get_widget_data($this->stats(100, 25));
+
+ $this->assertSame('halfway there', $fifty_one_percent['label']);
+ $this->assertSame('halfway there', $seventy_five_percent['label']);
+ }
+
+ public function test_labels_above_three_quarters_as_almost_there()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+
+ $seventy_six_percent = $dashboard->get_widget_data($this->stats(100, 24));
+ $ninety_nine_percent = $dashboard->get_widget_data($this->stats(1000, 1));
+
+ $this->assertSame('almost there', $seventy_six_percent['label']);
+ $this->assertSame('almost there', $ninety_nine_percent['label']);
+ }
+
+ public function test_has_no_label_when_nothing_is_optimized()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 10));
+
+ $this->assertSame('', $data['label']);
+ }
+
+ public function test_does_not_show_100_percent_while_images_remain()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(1000, 1));
+
+ $this->assertSame('in_progress', $data['status']);
+ $this->assertSame(99, $data['percentage']);
+ }
+
+ public function test_bytes_saved_is_the_library_size_reduction()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 3, 5000, 3000));
+
+ $this->assertSame(2000, $data['bytes_saved']);
+ }
+
+ public function test_bytes_saved_is_never_negative()
+ {
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 3, 3000, 5000));
+
+ $this->assertSame(0, $data['bytes_saved']);
+ }
+
+ public function test_shows_remaining_credits_on_free_plan()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn('210');
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertSame(210, $data['remaining_credits']);
+ }
+
+ public function test_hides_remaining_credits_on_paid_plan()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(false);
+ $this->settings->method('get_remaining_credits')->willReturn(210);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertNull($data['remaining_credits']);
+ }
+
+ public function test_hides_remaining_credits_when_unknown()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn(false);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertNull($data['remaining_credits']);
+ }
+
+ public function test_has_no_notice_with_enough_credits()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn(100);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertNull($data['notice']);
+ }
+
+ public function test_notifies_low_credits_below_100()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn(99);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertSame('low_credits', $data['notice']);
+ }
+
+ public function test_notifies_low_credits_when_none_are_left()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn(0);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertSame('low_credits', $data['notice']);
+ }
+
+ public function test_does_not_notify_low_credits_on_paid_plan()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(false);
+ $this->settings->method('get_remaining_credits')->willReturn(0);
+ $this->settings->method('has_api_key')->willReturn(true);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertNull($data['notice']);
+ }
+
+ public function test_notifies_missing_api_key()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(false);
+ $this->settings->method('get_remaining_credits')->willReturn(false);
+ $this->settings->method('has_api_key')->willReturn(false);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertSame('no_api_key', $data['notice']);
+ }
+
+ public function test_missing_api_key_takes_precedence_over_low_credits()
+ {
+ $this->settings->method('is_on_free_plan')->willReturn(true);
+ $this->settings->method('get_remaining_credits')->willReturn(10);
+ $this->settings->method('has_api_key')->willReturn(false);
+
+ $dashboard = new Tiny_Dashboard($this->settings);
+ $data = $dashboard->get_widget_data($this->stats(10, 1));
+
+ $this->assertSame('no_api_key', $data['notice']);
+ }
+}
diff --git a/tiny-compress-images.php b/tiny-compress-images.php
index 12a4879b..01282daa 100644
--- a/tiny-compress-images.php
+++ b/tiny-compress-images.php
@@ -27,6 +27,7 @@
require dirname( __FILE__ ) . '/src/class-tiny-cli.php';
require dirname( __FILE__ ) . '/src/class-tiny-conversion.php';
require dirname( __FILE__ ) . '/src/class-tiny-picture.php';
+require dirname( __FILE__ ) . '/src/class-tiny-dashboard.php';
require dirname( __FILE__ ) . '/src/class-tiny-apache-rewrite.php';
require dirname( __FILE__ ) . '/src/compatibility/wpml/class-tiny-wpml.php';
require dirname( __FILE__ ) . '/src/compatibility/as3cf/class-tiny-as3cf.php';
+
+%
+
+
+
+