From a8e2c6eb96bad5e0033fdcadbb367b7530d803b9 Mon Sep 17 00:00:00 2001 From: javed Date: Sat, 5 Oct 2024 20:34:42 +0530 Subject: [PATCH 1/9] fix the upload profile image button --- app/styles/profile.css | 14 +++++++++++--- app/styles/variables.css | 1 + app/templates/profile.hbs | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/styles/profile.css b/app/styles/profile.css index f518b6b6..0d593a85 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -40,7 +40,7 @@ } .profile-page-error { - text-align: center; + text-align: center; color: red; } @@ -91,6 +91,7 @@ aspect-ratio: 1; margin: auto; text-align: center; + position: relative; } .profile-form .user__pic { @@ -100,9 +101,16 @@ } .edit-btn { - padding: 0; + padding-inline: 5px; + padding-block: 3px; + z-index: 10; + border-radius: 100%; + position: absolute; + top: 8px; + right: 10px; font-size: 1rem; - margin-top: 0.5rem; + border: 0.5px solid black; + background: var(--profile-edit-btn-bg-clr); color: var(--profile-edit-btn-clr); font-weight: 600; } diff --git a/app/styles/variables.css b/app/styles/variables.css index d6032861..17b48a2c 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -179,6 +179,7 @@ --profile-submit-btn-clr: #1d1283; --profile-error-text-clr: red; --profile-edit-btn-clr: #1e429f; + --profile-edit-btn-bg-clr: #ffffff; --profile-disabled-btn-bg-clr: #e5efeb; --profile-disabled-btn-text-clr: #9ca3af; diff --git a/app/templates/profile.hbs b/app/templates/profile.hbs index 0132af9d..e70b4cea 100644 --- a/app/templates/profile.hbs +++ b/app/templates/profile.hbs @@ -14,10 +14,10 @@ {{/if}}
From 8e414b11da9f0229829b0e4220b306a143f9a704 Mon Sep 17 00:00:00 2001 From: javed Date: Mon, 7 Oct 2024 17:00:24 +0530 Subject: [PATCH 2/9] added test cases for the profile picture update button --- app/controllers/profile.js | 9 +++++++++ app/styles/profile.css | 8 ++++++++ app/templates/profile.hbs | 23 +++++++++++++++-------- tests/unit/routes/profile-test.js | 12 ++++++++++++ 4 files changed, 44 insertions(+), 8 deletions(-) diff --git a/app/controllers/profile.js b/app/controllers/profile.js index ae3ec08d..d9bbd6f4 100644 --- a/app/controllers/profile.js +++ b/app/controllers/profile.js @@ -9,6 +9,15 @@ const BASE_URL = ENV.BASE_API_URL; export default class ProfileController extends Controller { @service toast; @service router; + get isDev() { + if ( + this.router.currentRoute && + this.router.currentRoute.queryParams.dev === 'true' + ) { + return this.router.currentRoute.queryParams.dev; + } + return false; + } get imageUploadUrl() { return `${BASE_URL}/users/picture`; } diff --git a/app/styles/profile.css b/app/styles/profile.css index 0d593a85..f694199f 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -101,6 +101,14 @@ } .edit-btn { + padding: 0; + margin-top: 0.5rem; + color: var(--profile-edit-btn-clr); + font-weight: 600; + font-size: 1rem; +} + +.profile-edit-button { padding-inline: 5px; padding-block: 3px; z-index: 10; diff --git a/app/templates/profile.hbs b/app/templates/profile.hbs index e70b4cea..6fd68d70 100644 --- a/app/templates/profile.hbs +++ b/app/templates/profile.hbs @@ -9,16 +9,23 @@ user profile {{/if}} - + + {{#if this.isDev}} + + {{else}} + + {{/if}}
{{#if (get @model 'isDeveloper')}} diff --git a/tests/unit/routes/profile-test.js b/tests/unit/routes/profile-test.js index b6b51b9c..a1f4db1c 100644 --- a/tests/unit/routes/profile-test.js +++ b/tests/unit/routes/profile-test.js @@ -20,4 +20,16 @@ module('Unit | Route | profile', function (hooks) { assert.dom('[data-test-modal="image-upload"]').exists(); assert.dom('[data-test-btn="browse"]').exists(); }); + test('button appearance based on dev query param', async (assert) => { + await visit('/profile?dev=true'); + + assert.dom('[data-test-btn="edit"]').exists(); + assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button'); + + await visit('/profile?dev=false'); + + assert.dom('[data-test-btn="edit"]').exists(); + assert.dom('[data-test-btn="edit"]').hasClass('edit-btn'); + assert.dom('[data-test-btn="edit"]').hasText('Update Picture'); + }); }); From 1c57610e3594506524a68085184ed9aa2d3d6bc3 Mon Sep 17 00:00:00 2001 From: javed Date: Mon, 7 Oct 2024 17:14:58 +0530 Subject: [PATCH 3/9] fix: changed profile picture update button styling --- app/styles/profile.css | 4 +--- app/styles/variables.css | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/styles/profile.css b/app/styles/profile.css index f694199f..a369c1ed 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -91,7 +91,6 @@ aspect-ratio: 1; margin: auto; text-align: center; - position: relative; } .profile-form .user__pic { @@ -117,8 +116,7 @@ top: 8px; right: 10px; font-size: 1rem; - border: 0.5px solid black; - background: var(--profile-edit-btn-bg-clr); + margin-top: 0.5rem; color: var(--profile-edit-btn-clr); font-weight: 600; } diff --git a/app/styles/variables.css b/app/styles/variables.css index 17b48a2c..d6032861 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -179,7 +179,6 @@ --profile-submit-btn-clr: #1d1283; --profile-error-text-clr: red; --profile-edit-btn-clr: #1e429f; - --profile-edit-btn-bg-clr: #ffffff; --profile-disabled-btn-bg-clr: #e5efeb; --profile-disabled-btn-text-clr: #9ca3af; From ced6c6dbeddfa98b9a543a34221e1a39b2d7c567 Mon Sep 17 00:00:00 2001 From: javed Date: Mon, 7 Oct 2024 17:24:34 +0530 Subject: [PATCH 4/9] fix:change position of picture container --- app/styles/profile.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/profile.css b/app/styles/profile.css index a369c1ed..d87ffbce 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -91,6 +91,7 @@ aspect-ratio: 1; margin: auto; text-align: center; + position: relative; } .profile-form .user__pic { From bc936b92125bee364ae14e1f1efced2491574fce Mon Sep 17 00:00:00 2001 From: javed Date: Tue, 8 Oct 2024 08:01:16 +0530 Subject: [PATCH 5/9] fix: padding to be multiple of 4 --- app/styles/profile.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/styles/profile.css b/app/styles/profile.css index d87ffbce..2dde927f 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -109,13 +109,12 @@ } .profile-edit-button { - padding-inline: 5px; - padding-block: 3px; + padding: 8px; z-index: 10; border-radius: 100%; position: absolute; top: 8px; - right: 10px; + right: 12px; font-size: 1rem; margin-top: 0.5rem; color: var(--profile-edit-btn-clr); From 272e086cf0b32608d216d34d5a7b9d55d726ff01 Mon Sep 17 00:00:00 2001 From: javed Date: Wed, 9 Oct 2024 19:35:00 +0530 Subject: [PATCH 6/9] fix: added integration test for the update profile image button --- .../components/profile-field-test.js | 16 +++---- tests/integration/components/profile-test.js | 43 +++++++++++++++++++ 2 files changed, 51 insertions(+), 8 deletions(-) create mode 100644 tests/integration/components/profile-test.js diff --git a/tests/integration/components/profile-field-test.js b/tests/integration/components/profile-field-test.js index c1287b9a..17d62663 100644 --- a/tests/integration/components/profile-field-test.js +++ b/tests/integration/components/profile-field-test.js @@ -13,8 +13,8 @@ module('Integration | Component | profile-field', function (hooks) { }); await render(hbs` - `); @@ -35,8 +35,8 @@ module('Integration | Component | profile-field', function (hooks) { }); await render(hbs` - `); @@ -53,8 +53,8 @@ module('Integration | Component | profile-field', function (hooks) { }); await render(hbs` - @@ -80,8 +80,8 @@ module('Integration | Component | profile-field', function (hooks) { }); await render(hbs` - diff --git a/tests/integration/components/profile-test.js b/tests/integration/components/profile-test.js new file mode 100644 index 00000000..0714c269 --- /dev/null +++ b/tests/integration/components/profile-test.js @@ -0,0 +1,43 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, settled } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | profile-component', function (hooks) { + setupRenderingTest(hooks); + + test('button appearance based on isDev property', async function (assert) { + this.set('handleShowEditProfilePictureModal', function () { + // + }); + + this.set('isDev', true); + + await render(hbs` + {{#if this.isDev}} + + {{else}} + + {{/if}} + `); + + assert.dom('[data-test-btn="edit"]').exists(); + assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button'); + + this.set('isDev', false); + + await settled(); + + assert.dom('[data-test-btn="edit"]').exists(); + assert.dom('[data-test-btn="edit"]').hasClass('edit-btn'); + assert.dom('[data-test-btn="edit"]').hasText('Update Picture'); + }); +}); From 41229db457fd2cc2bf17cef74feb8a86ec554262 Mon Sep 17 00:00:00 2001 From: Javed Ansari Date: Thu, 10 Oct 2024 19:14:25 +0530 Subject: [PATCH 7/9] fix: profile-test.js --- tests/integration/components/profile-test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/integration/components/profile-test.js b/tests/integration/components/profile-test.js index 0714c269..9188dc97 100644 --- a/tests/integration/components/profile-test.js +++ b/tests/integration/components/profile-test.js @@ -7,9 +7,7 @@ module('Integration | Component | profile-component', function (hooks) { setupRenderingTest(hooks); test('button appearance based on isDev property', async function (assert) { - this.set('handleShowEditProfilePictureModal', function () { - // - }); + this.set('handleShowEditProfilePictureModal', function () {}); this.set('isDev', true); From 83b576d2d1e1f1bd14d01ca2d69696087b8c430b Mon Sep 17 00:00:00 2001 From: javed Date: Thu, 10 Oct 2024 20:04:40 +0530 Subject: [PATCH 8/9] fix: Integration test for edit button --- tests/integration/components/profile-test.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/tests/integration/components/profile-test.js b/tests/integration/components/profile-test.js index 9188dc97..303a90b8 100644 --- a/tests/integration/components/profile-test.js +++ b/tests/integration/components/profile-test.js @@ -1,13 +1,15 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, settled } from '@ember/test-helpers'; +import { render, settled, click } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | profile-component', function (hooks) { setupRenderingTest(hooks); test('button appearance based on isDev property', async function (assert) { - this.set('handleShowEditProfilePictureModal', function () {}); + this.set('handleShowEditProfilePictureModal', () => { + this.set('showEditProfilePictureModal', true); + }); this.set('isDev', true); @@ -30,6 +32,13 @@ module('Integration | Component | profile-component', function (hooks) { assert.dom('[data-test-btn="edit"]').exists(); assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button'); + await click('[data-test-btn="edit"]'); + + assert.ok( + this.showEditProfilePictureModal, + 'Modal should be shown after clicking the button' + ); + this.set('isDev', false); await settled(); @@ -37,5 +46,12 @@ module('Integration | Component | profile-component', function (hooks) { assert.dom('[data-test-btn="edit"]').exists(); assert.dom('[data-test-btn="edit"]').hasClass('edit-btn'); assert.dom('[data-test-btn="edit"]').hasText('Update Picture'); + + await click('[data-test-btn="edit"]'); + + assert.ok( + this.showEditProfilePictureModal, + 'Modal should be shown after clicking the button' + ); }); }); From 1d50ef72f08666f037002f92c90357b157ac9233 Mon Sep 17 00:00:00 2001 From: javed Date: Thu, 10 Oct 2024 20:29:02 +0530 Subject: [PATCH 9/9] fix: shifting from px to rem --- app/styles/profile.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/styles/profile.css b/app/styles/profile.css index 2dde927f..d2459cd7 100644 --- a/app/styles/profile.css +++ b/app/styles/profile.css @@ -109,12 +109,11 @@ } .profile-edit-button { - padding: 8px; - z-index: 10; + padding: 0.5rem; border-radius: 100%; position: absolute; - top: 8px; - right: 12px; + top: 0.5rem; + right: 1rem; font-size: 1rem; margin-top: 0.5rem; color: var(--profile-edit-btn-clr);