Fixing layout issues raised in QA

Fixing the link if no title supplied
Allow description to be nil as well
Updated testing

Author: msquance-stem

app/components/cms/course_card_component.rb

@@ -6,9 +6,9 @@ class Cms::CourseCardComponent < ViewComponent::Base
     to: :helpers
 
   def initialize(title:, banner_text:, course:, description:, image:)
-    @title = title
     @banner_text = banner_text
     @course = course
+    @title = title.presence || @course&.title
     @description = description
     @image = image
   end

app/components/cms/course_card_component/course_card_component.html.erb

@@ -11,9 +11,9 @@
 
   <%= link_to @title, course_path(id: @course.activity_code, name: @course.title.parameterize), class: 'govuk-!-font-weight-bold govuk-body ncce-link' %>
   <div class="courses-cms-card__details">
-    <p class="govuk-body">
-      <%= render @description.render %>
-    </p>
+    <div class="courses-cms-card__details-content">
+      <%= render @description.render if @description %>
+    </div>
     <div class="courses-cms-card__icons">
       <div>
         <span class="govuk-body-s <%= course_meta_icon_class(@course) %> courses-cms-card__type">

app/components/cms/course_card_component/course_card_component.scss

@@ -1,5 +1,8 @@
 
 .courses-cms-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
 
   &__image-wrapper {
     margin-bottom: 12px;
@@ -36,6 +39,12 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    
+    flex: 1 1 auto;
+
+    &-content {
+      flex: 1 1 auto;
+    }
   }
 
   &__icons {

spec/components/cms/course_card_component_spec.rb

@@ -3,32 +3,87 @@
 require "rails_helper"
 
 RSpec.describe Cms::CourseCardComponent, type: :component do
+  let(:course) {Achiever::Course::Template.all.first}
   before do
     stub_course_templates
     stub_duration_units
-    @course = Achiever::Course::Template.all.first
-    render_inline(described_class.new(
-      title: "Learn how to teach computing",
-      banner_text: "Banner text",
-      course: @course,
-      description: Cms::Mocks::RichBlocks.as_model,
-      image: Cms::Mocks::Image.as_model
-    ))
   end
 
-  it "renders the banner text and makes it uppercase" do
-    expect(page).to have_css(".courses-cms-card__banner", text: "BANNER TEXT")
+  context "given title" do
+    before do
+      render_inline(described_class.new(
+        title: "Learn how to teach computing",
+        banner_text: "Banner text",
+        course: course,
+        description: Cms::Mocks::RichBlocks.as_model,
+        image: Cms::Mocks::Image.as_model
+      ))
+    end
+
+    it "renders the banner text and makes it uppercase" do
+      expect(page).to have_css(".courses-cms-card__banner", text: "BANNER TEXT")
+    end
+
+    it "renders title as link" do
+      expect(page).to have_link("Learn how to teach computing", href: "/courses/#{course.activity_code}/#{course.title.parameterize}")
+    end
+
+    it "renders description" do
+      expect(page).to have_css(".cms-rich-text-block-component")
+    end
+
+    it "renders image" do
+      expect(page).to have_css(".cms-image")
+    end
   end
 
-  it "renders title as link" do
-    expect(page).to have_link("Learn how to teach computing", href: "/courses/#{@course.activity_code}/#{@course.title.parameterize}")
+  context "without title" do
+    before do
+      render_inline(described_class.new(
+        title: nil,
+        banner_text: "Banner text",
+        course:,
+        description: Cms::Mocks::RichBlocks.as_model,
+        image: Cms::Mocks::Image.as_model
+      ))
+    end
+
+    it "renders title as link" do
+      expect(page).to have_link(course.title, href: "/courses/#{course.activity_code}/#{course.title.parameterize}")
+    end
+
   end
 
-  it "renders description" do
-    expect(page).to have_css(".cms-rich-text-block-component")
+  context "when course is nil" do
+    before do
+      render_inline(described_class.new(
+        title: nil,
+        banner_text: "Banner text",
+        course: nil,
+        description: Cms::Mocks::RichBlocks.as_model,
+        image: Cms::Mocks::Image.as_model
+      ))
+    end
+
+    it "doesnt render" do
+      expect(page).not_to have_css(".courses-cms-card")
+    end
   end
 
-  it "renders image" do
-    expect(page).to have_css(".cms-image")
+
+  context "when description is nil" do
+    before do
+      render_inline(described_class.new(
+        title: nil,
+        banner_text: "Banner text",
+        course:,
+        description: nil,
+        image: Cms::Mocks::Image.as_model
+      ))
+    end
+
+    it "does render" do
+      expect(page).to have_css(".courses-cms-card")
+    end
   end
 end