Skip to content

Commit

Permalink
Merge pull request #2667 from codecrafters-io/CC-1636-2
Browse files Browse the repository at this point in the history
Update how concept progress is rendered when progress is 0%
  • Loading branch information
ryan-gang authored Feb 21, 2025
2 parents 24c6793 + 9eff150 commit a760a6d
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 49 deletions.
14 changes: 5 additions & 9 deletions app/components/concept-card/progress-bar.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,11 @@
class="{{if (eq @latestConceptEngagement.currentProgressPercentage 100) 'bg-teal-100 dark:bg-teal-900' 'bg-blue-100 dark:bg-blue-900'}}
h-3 w-16 flex items-stretch"
>
{{#if (eq @latestConceptEngagement.currentProgressPercentage 0)}}
<div class="bg-blue-500 w-1/12"></div>
{{else}}
<div
class="{{if (eq @latestConceptEngagement.currentProgressPercentage 100) 'bg-teal-500 dark:bg-teal-600' 'bg-blue-500 dark:bg-blue-600'}}"
style={{html-safe (concat "width: " @latestConceptEngagement.currentProgressPercentage "%")}}
data-test-concept-card-progress-bar
></div>
{{/if}}
<div
class="{{if (eq @latestConceptEngagement.currentProgressPercentage 100) 'bg-teal-500 dark:bg-teal-600' 'bg-blue-500 dark:bg-blue-600'}}"
style={{html-safe (concat "width: " @latestConceptEngagement.currentProgressPercentage "%")}}
data-test-concept-card-progress-bar
></div>
</div>
</div>

Expand Down
5 changes: 3 additions & 2 deletions app/components/concepts-page/concept-card.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,21 @@
{{! Footer }}
<div class="flex items-center justify-between">
<div class="flex items-center">
{{#if this.latestConceptEngagement}}
{{#if (and this.latestConceptEngagement (gt this.latestConceptEngagement.currentProgressPercentage 0))}}
{{#if (eq this.latestConceptEngagement.currentProgressPercentage 100)}}
{{svg-jar "check-circle" class="w-4 mr-1 fill-current text-teal-500"}}

<span class="text-xs text-teal-500">
completed
</span>
{{else}}
{{! @glint-expect-error: incorrectly assumes @latestConceptEngagement is nullable }}
<ConceptCard::ProgressBar @latestConceptEngagement={{this.latestConceptEngagement}} class="flex shrink-0" />
{{/if}}
{{else}}
{{svg-jar "clock" class="w-4 mr-1 fill-current text-gray-300 dark:text-gray-700"}}

<span class="text-xs text-gray-400 dark:text-gray-600">
<span class="text-xs text-gray-400 dark:text-gray-600" data-test-concept-card-reading-time>
{{@concept.estimatedReadingTimeInMinutes}}
mins
</span>
Expand Down
1 change: 1 addition & 0 deletions app/routes/concept.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default class ConceptRoute extends BaseRoute {
return await this.store.createRecord('concept-engagement', {
concept,
user: this.authenticator.currentUser,
currentProgressPercentage: 0,
});
}

Expand Down
10 changes: 9 additions & 1 deletion mirage/handlers/concept-groups.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
export default function (server) {
server.get('/concept-groups', function (schema) {
server.get('/concept-groups', function (schema, request) {
if (request.queryParams.slug) {
return schema.conceptGroups.where({ slug: request.queryParams.slug });
}

return schema.conceptGroups.all();
});

server.get('/concept-groups/:concept_group_slug', function (schema, request) {
let result = schema.conceptGroups.where({ slug: request.params.concept_group_slug });

if (result.models.length === 0) {
return new Response(404, {}, { errors: ['Concept group not found'] });
}

return result.models[0];
});
}
55 changes: 19 additions & 36 deletions tests/acceptance/concept-groups-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,49 +16,34 @@ function createConcepts(server) {
module('Acceptance | concept-groups-test', function (hooks) {
setupApplicationTest(hooks);

test('displays concept-group page when visiting a valid concept-group', async function (assert) {
hooks.beforeEach(function () {
testScenario(this.server);
createConcepts(this.server);

const user = this.server.schema.users.first();

const conceptGroup = this.server.create('concept-group', {
this.conceptGroup = this.server.create('concept-group', {
author: user,
description_markdown: 'Dummy description',
concept_slugs: ['tcp-overview', 'network-protocols'],
slug: 'test-concept-group',
title: 'Test Concept Group',
});
});

await conceptGroupsPage.visit({ concept_group_slug: conceptGroup.slug });
test('displays concept-group page when visiting a valid concept-group', async function (assert) {
await conceptGroupsPage.visit({ concept_group_slug: this.conceptGroup.slug });

assert.strictEqual(currentURL(), '/collections/test-concept-group');
});

test('redirects to / when visiting a non-existing concept-group', async function (assert) {
testScenario(this.server);
createConcepts(this.server);

await conceptGroupsPage.visit({ concept_group_slug: 'non-existent-concept-group' });
await conceptGroupsPage.visit({ concept_group_slug: 'nonexistent-concept-group' });

assert.strictEqual(currentURL(), '/catalog');
});

test('displays the correct concept group details for the header', async function (assert) {
testScenario(this.server);
createConcepts(this.server);

const user = this.server.schema.users.first();

const conceptGroup = this.server.create('concept-group', {
author: user,
description_markdown: 'Dummy description',
concept_slugs: ['tcp-overview', 'network-protocols'],
slug: 'test-concept-group',
title: 'Test Concept Group',
});

await conceptGroupsPage.visit({ concept_group_slug: conceptGroup.slug });
await conceptGroupsPage.visit({ concept_group_slug: this.conceptGroup.slug });
await percySnapshot('Concept Group');

assert.strictEqual(conceptGroupsPage.header.title, 'Test Concept Group');
Expand All @@ -68,23 +53,21 @@ module('Acceptance | concept-groups-test', function (hooks) {
});

test('displays the correct concept cards', async function (assert) {
testScenario(this.server);
createConcepts(this.server);

const user = this.server.schema.users.first();

const conceptGroup = this.server.create('concept-group', {
author: user,
description_markdown: 'Dummy description',
concept_slugs: ['tcp-overview', 'network-protocols'],
slug: 'test-concept-group',
title: 'Test Concept Group',
});

await conceptGroupsPage.visit({ concept_group_slug: conceptGroup.slug });
await conceptGroupsPage.visit({ concept_group_slug: this.conceptGroup.slug });

assert.strictEqual(conceptGroupsPage.conceptCards.length, 2);
assert.strictEqual(conceptGroupsPage.conceptCards[0].title, 'TCP: An Overview');
assert.strictEqual(conceptGroupsPage.conceptCards[1].title, 'Network Protocols');
});

test('displays no progress bar if progress percentage is 0', async function (assert) {
await conceptGroupsPage.visit({ concept_group_slug: this.conceptGroup.slug });

await conceptGroupsPage.clickOnConceptCard('TCP: An Overview');

await conceptGroupsPage.visit({ concept_group_slug: this.conceptGroup.slug });

assert.false(conceptGroupsPage.conceptCards[0].hasProgressBar, 'Progress bar should not be visible after returning from concept');
assert.strictEqual(conceptGroupsPage.conceptCards[0].readingTime, '8 mins', 'Reading time should be visible after returning from concept');
});
});
5 changes: 4 additions & 1 deletion tests/pages/concept-groups-page.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { collection, text, visitable } from 'ember-cli-page-object';
import { collection, isPresent, text, visitable } from 'ember-cli-page-object';
import createPage from 'codecrafters-frontend/tests/support/create-page';

export default createPage({
Expand All @@ -10,6 +10,9 @@ export default createPage({
},

conceptCards: collection('[data-test-concept-card]', {
hasProgressBar: isPresent('[data-test-concept-card-progress]'),
progressBarText: text('[data-test-concept-card-progress-bar]'),
readingTime: text('[data-test-concept-card-reading-time]'),
title: text('[data-test-concept-title]'),
}),

Expand Down

0 comments on commit a760a6d

Please sign in to comment.