Merge pull request #2788 from codecrafters-io/grey-out-released

Greyed out released stuff and try adding a test(?)

Author: Arpan-206

app/components/vote-page/course-extension-idea-card.hbs

@@ -1,6 +1,7 @@
 <div
   class="relative group bg-white dark:bg-gray-850 p-5 rounded-md shadow-sm flex flex-col justify-between border
-    {{if this.userHasVoted 'border-gray-300 dark:border-gray-700' 'border-gray-200 dark:border-white/5'}}"
+    {{if this.userHasVoted 'border-gray-300 dark:border-gray-700' 'border-gray-200 dark:border-white/5'}}
+    {{if @courseExtensionIdea.developmentStatusIsReleased 'opacity-50'}}"
   data-test-course-extension-idea-card
 >
   {{! Text }}

app/components/vote-page/course-idea-card.gts

@@ -74,7 +74,10 @@ export default class CourseIdeaCardComponent extends Component<Signature> {
 
   <template>
     <div
-      class='group bg-white p-5 rounded-md shadow-sm flex flex-col justify-between border {{if this.userHasVoted "border-gray-300"}} relative'
+      class='group bg-white p-5 rounded-md shadow-sm flex flex-col justify-between border
+        {{if this.userHasVoted "border-gray-300"}}
+        relative
+        {{if @courseIdea.developmentStatusIsReleased "opacity-50"}}'
       data-test-course-idea-card
     >
       {{! Text }}

mirage/data/course-extension-ideas.js

@@ -3,27 +3,31 @@ export default [
     slug: 'redis-persistence',
     course_slug: 'redis',
     name: 'Persistence',
+    development_status: 'released',
     description_md:
       "[Regular expressions](https://en.wikipedia.org/wiki/Regular_expression) are patterns used to match character combinations in strings. In this challenge you'll build your own version of `grep`, a CLI tool for searching using Regexes. \n\nAlong the way you'll learn about basic Regex syntax, [character classes](https://www.regular-expressions.info/refcharclass.html), [quantifiers](https://www.regular-expressions.info/refrepeat.html), [metacharacters](https://www.regular-expressions.info/characters.html) and more.",
   },
   {
     slug: 'redis-geospatial-commands',
     course_slug: 'redis',
     name: 'Geospatial commands',
+    development_status: 'not-started',
     description_md:
       "[HTTP](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol) is the protocol that powers the web. In this challenge, you'll build a HTTP/1.1 server that is capable of serving multiple clients. \n\nAlong the way you'll learn about TCP servers, [HTTP request syntax](https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html), HTTP/1.1's [request pipelining](https://en.wikipedia.org/wiki/HTTP_pipelining) and more.",
   },
   {
     slug: 'sqlite-insert',
     course_slug: 'sqlite',
     name: 'Insert rows',
+    development_status: 'not-started',
     description_md:
       "[Shells](https://en.wikipedia.org/wiki/Unix_shell) are a command-line interface to your operating system. In this challenge, you'll build your own version of `bash` that is capable of executing basic shell commands. \n\nAlong the way, you'll learn about [pipes](https://en.wikipedia.org/wiki/Pipeline_(Unix)), [redirection](https://en.wikipedia.org/wiki/Redirection_(computing)), [fork+exec](https://en.wikipedia.org/wiki/Fork%E2%80%93exec) and more.",
   },
   {
     slug: 'extension-idea-1',
     course_slug: 'dummy',
     name: 'Extension idea 1',
+    development_status: 'not-started',
     description_md: 'This is the first extension idea for the dummy course',
   },
 ];

mirage/data/course-ideas.js

@@ -2,37 +2,43 @@ export default [
   {
     slug: 'regex',
     name: 'Build your own Regex Parser',
+    development_status: 'released',
     description_md:
       "[Regular expressions](https://en.wikipedia.org/wiki/Regular_expression) are patterns used to match character combinations in strings. In this challenge you'll build your own version of `grep`, a CLI tool for searching using Regexes. \n\nAlong the way you'll learn about basic Regex syntax, [character classes](https://www.regular-expressions.info/refcharclass.html), [quantifiers](https://www.regular-expressions.info/refrepeat.html), [metacharacters](https://www.regular-expressions.info/characters.html) and more.",
   },
   {
     slug: 'http',
     name: 'Build your own HTTP Server',
+    development_status: 'in-progress',
     description_md:
       "[HTTP](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol) is the protocol that powers the web. In this challenge, you'll build a HTTP/1.1 server that is capable of serving multiple clients. \n\nAlong the way you'll learn about TCP servers, [HTTP request syntax](https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html), HTTP/1.1's [request pipelining](https://en.wikipedia.org/wiki/HTTP_pipelining) and more.",
   },
   {
     slug: 'shell',
     name: 'Build your own Shell',
+    development_status: 'not-started',
     description_md:
       "[Shells](https://en.wikipedia.org/wiki/Unix_shell) are a command-line interface to your operating system. In this challenge, you'll build your own version of `bash` that is capable of executing basic shell commands. \n\nAlong the way, you'll learn about [pipes](https://en.wikipedia.org/wiki/Pipeline_(Unix)), [redirection](https://en.wikipedia.org/wiki/Redirection_(computing)), [fork+exec](https://en.wikipedia.org/wiki/Fork%E2%80%93exec) and more.",
   },
   {
     slug: 'sqlite',
     name: 'Build your own SQLite',
     is_archived: true,
+    development_status: 'released',
     description_md:
       "[SQLite](https://www.sqlite.org/index.html) is the most used database engine in the world. In this challenge, you'll build your own version of SQLite that is capable of reading a SQLite database file and answering basic SQL queries like `SELECT` and `INSERT`. \n\nAlong the way, you'll learn about the [SQLite file format](https://www.sqlite.org/appfileformat.html), [SQL syntax](https://www.sqlite.org/lang.html) and more.",
   },
   {
     slug: 'bittorrent',
     name: 'Build your own BitTorrent client',
+    development_status: 'not-started',
     description_md:
       "[BitTorrent](https://en.wikipedia.org/wiki/BitTorrent) is a communication protocol for P2P file sharing. In this challenge, you'll build a BitTorrent client that is capable of downloading a publicly available file using the BitTorrent protocol. \n\nAlong the way you'll learn about the [BitTorrent protocol](https://www.bittorrent.org/beps/bep_0003.html), [trackers](https://www.bittorrent.org/beps/bep_0003.html#trackers), seeds & peers, file segments and more.",
   },
   {
     slug: 'react',
     name: 'Build your own React',
+    development_status: 'not-started',
     description_md:
       "[React](https://reactjs.org/) is a Javascript framework for building user interfaces. In this challenge, you'll build a React implementation that supports [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and [hooks](https://reactjs.org/docs/hooks-intro.html). \n\nAlong the way, you'll learn about React's [API](https://reactjs.org/docs/react-api.html), [DOM-diffing algorithm](https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm), [hooks](https://reactjs.org/docs/hooks-intro.html) and more!",
   },

mirage/utils/create-course-extension-ideas.js

@@ -3,11 +3,13 @@ import courseExtensionIdeasData from '../data/course-extension-ideas';
 export default function createCourseExtensionIdeas(server) {
   for (const courseExtensionIdeaData of courseExtensionIdeasData) {
     server.create('course-extension-idea', {
-      createdAt: new Date(),
       course: server.schema.courses.findBy({ slug: courseExtensionIdeaData.course_slug }),
+      createdAt: new Date(),
+      descriptionMarkdown: courseExtensionIdeaData.description_md,
+      developmentStatus: courseExtensionIdeaData.development_status,
+      developmentStatusLabelText: courseExtensionIdeaData.development_status,
       name: courseExtensionIdeaData.name,
       slug: courseExtensionIdeaData.slug,
-      descriptionMarkdown: courseExtensionIdeaData.description_md,
       votesCount: 0,
     });
   }

mirage/utils/create-course-ideas.js

@@ -4,8 +4,10 @@ export default function createCourseIdeas(server) {
   for (const courseIdeaData of courseIdeasData) {
     server.create('course-idea', {
       createdAt: new Date(),
-      name: courseIdeaData.name,
       descriptionMarkdown: courseIdeaData.description_md,
+      developmentStatus: courseIdeaData.development_status,
+      developmentStatusLabelText: courseIdeaData.development_status,
+      name: courseIdeaData.name,
       votesCount: 0,
     });
   }

tests/acceptance/vote-page/course-extension-ideas-test.js

@@ -26,6 +26,15 @@ module('Acceptance | vote-page | course-extension-ideas', function (hooks) {
     assert.strictEqual(votePage.courseExtensionIdeaCards.length, 2);
     assert.strictEqual(votePage.findCourseExtensionIdeaCard(courseExtensionIdea.name).voteButtonText, '1 vote');
 
+    const releasedIdeaCard = votePage.findCourseExtensionIdeaCard('Persistence');
+    const notStartedIdeaCard = votePage.findCourseExtensionIdeaCard('Geospatial commands');
+
+    assert.strictEqual(releasedIdeaCard.developmentStatusLabelText, 'released', 'released idea has label');
+    assert.true(releasedIdeaCard.isGreyedOut, 'released idea is greyed out');
+
+    assert.notEqual(notStartedIdeaCard.developmentStatusLabelText, 'released', 'not started idea has no label');
+    assert.false(notStartedIdeaCard.isGreyedOut, 'not started idea is not greyed out');
+
     // TODO: Test that hovering on vote shows tooltip
     // TODO: Test that clicking on vote will redirect to login
   });

tests/acceptance/vote-page/course-ideas-test.js

@@ -23,6 +23,15 @@ module('Acceptance | vote-page | course-ideas', function (hooks) {
 
     assert.strictEqual(votePage.findCourseIdeaCard(courseIdea.name).voteButtonText, '1 vote');
 
+    const releasedIdeaCard = votePage.findCourseIdeaCard('Build your own Regex Parser');
+    const notStartedIdeaCard = votePage.findCourseIdeaCard('Build your own Shell');
+
+    assert.strictEqual(releasedIdeaCard.developmentStatusLabelText, 'released', 'released idea has label');
+    assert.true(releasedIdeaCard.isGreyedOut, 'released idea is greyed out');
+
+    assert.notEqual(notStartedIdeaCard.developmentStatusLabelText, 'released', 'not started idea has no label');
+    assert.false(notStartedIdeaCard.isGreyedOut, 'not started idea is not greyed out');
+
     // TODO: Test that hovering on vote shows tooltip
     // TODO: Test that clicking on vote will redirect to login
     // TODO: Can navigate directly to course extension ideas

tests/pages/vote-page.js

@@ -1,17 +1,21 @@
-import { clickable, collection, text, triggerable, visitable } from 'ember-cli-page-object';
+import { clickable, collection, text, triggerable, visitable, hasClass } from 'ember-cli-page-object';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
 
 export default createPage({
   courseExtensionIdeaCards: collection('[data-test-course-extension-idea-card]', {
     clickOnVoteButton: clickable('[data-test-vote-button]'),
+    developmentStatusLabelText: text('[data-test-development-status-label]'),
     hoverOnDevelopmentStatusLabel: triggerable('mouseenter', '[data-test-development-status-label]'),
+    isGreyedOut: hasClass('opacity-50'),
     name: text('[data-test-course-extension-idea-name]'),
     voteButtonText: text('[data-test-vote-button]'),
   }),
 
   courseIdeaCards: collection('[data-test-course-idea-card]', {
     clickOnVoteButton: clickable('[data-test-vote-button]'),
+    developmentStatusLabelText: text('[data-test-development-status-label]'),
     hoverOnDevelopmentStatusLabel: triggerable('mouseenter', '[data-test-development-status-label]'),
+    isGreyedOut: hasClass('opacity-50'),
     name: text('[data-test-course-idea-name]'),
     voteButtonText: text('[data-test-vote-button]'),
   }),