simplecov-tailwindcss 0.1.0

data/simplecov-tailwindcss.gemspec

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+lib = File.expand_path("lib", __dir__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "simplecov-tailwindcss/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "simplecov-tailwindcss"
+  spec.version       = SimpleCov::Formatter::TailwindFormatter::VERSION
+  spec.authors       = ["Christopher Pezza"]
+  spec.email         = ["chiefpansancolt@gmail.com"]
+  spec.summary       = "HTML Tailwind Design View for Simplecov formatter"
+  spec.description   = "HTML Tailwind Design View of Simplecov as a formatter"\
+                       "that is clean, easy to read."
+  spec.homepage      = "https://chiefpansancolt.live/docs/simplecov_tailwind/"
+  spec.license       = "MIT"
+
+  spec.required_ruby_version = ">= 2.3.0"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/chiefpansancolt/simplecov-tailwindcss"
+  spec.metadata["changelog_uri"] = "https://github.com/chiefpansancolt/simplecov-tailwindcss/blob/master/CHANGELOG.md"
+  spec.metadata["bug_tracker_uri"] = "https://github.com/chiefpansancolt/simplecov-tailwindcss/issues"
+
+  spec.files         = `git ls-files`.split("\n")
+  spec.bindir        = "bin"
+  spec.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  spec.executables   = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "simplecov", ">= 0.16.0"
+end

data/tailwind.config.js

@@ -0,0 +1,17 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+  purge: false,
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  variants: {},
+  plugins: [
+    require('@tailwindcss/ui'),
+    require('@tailwindcss/typography'),
+  ],
+};

data/test/fixtures/app/controllers/sample_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Foo class
+class Foo
+  def initialize
+    @foo = "baz"
+  end
+
+  def bar
+    @foo
+  end
+end

data/test/fixtures/app/models/user.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Foo class
+class Foo
+  def initialize
+    @foo = "baz"
+  end
+
+  def bar
+    @foo
+  end
+end

data/test/fixtures/sample.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Foo class
+class Foo
+  def initialize
+    @foo = "baz"
+  end
+
+  def bar
+    @foo
+  end
+end

data/test/simplecov-tailwindcss/simplecov_tailwindcss_test.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "test_helper"
+require "simplecov"
+require "simplecov-tailwindcss"
+require "simplecov-tailwindcss/version"
+
+class SimplecovTailwindcssTest < Minitest::Test
+  def test_defined
+    assert defined?(SimpleCov::Formatter::TailwindFormatter)
+    assert defined?(SimpleCov::Formatter::TailwindFormatter::VERSION)
+  end
+
+  def test_version
+    version = SimpleCov::Formatter::TailwindFormatter::VERSION
+
+    assert(!version.nil?)
+  end
+
+  def test_execution # rubocop:disable Metrics/MethodLength
+    @original_result = {
+      source_fixture("sample.rb") => [nil, 1, 1, 1, nil, nil, 1, 1, nil, nil],
+      source_fixture("app/models/user.rb") => [
+        nil, 1, 1, 1, nil, nil, 1, 0, nil, nil
+      ],
+      source_fixture("app/controllers/sample_controller.rb") => [
+        nil, 1, 1, 1, nil, nil, 0, 0, nil, nil
+      ]
+    }
+
+    @result = SimpleCov::Result.new(@original_result)
+    SimpleCov::Formatter::TailwindFormatter.new.format(@result)
+
+    assert(File.exist?("/#{SimpleCov.coverage_path}/index.html"))
+  end
+
+  def source_fixture(filename)
+    File.expand_path(File.join(File.dirname(__FILE__), "fixtures", filename))
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require "simplecov"
+
+SimpleCov.start do
+  enable_coverage :branch
+  add_filter "/test/"
+  add_group "Library", "/lib"
+end
+
+SimpleCov.formatters = [
+  SimpleCov::Formatter::TailwindFormatter
+]
+
+$LOAD_PATH.unshift File.expand_path("../lib", __dir__)
+require "minitest/autorun"
+require "minitest/pride"
+require "mocha/minitest"

data/views/dialog.erb

@@ -0,0 +1,88 @@
+<div class="fixed z-10 inset-0 overflow-y-auto hidden" data-toggle-name="<%= id(file) %>">
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 transition-opacity">
+            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        </div>
+
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
+
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
+            <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
+                <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150" aria-label="Close" data-action="click->toggle#toggle touch->toggle#toggle" data-toggle-target="<%= id(file) %>">
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="bg-white">
+                <div class="sm:flex sm:items-start">
+                    <div class="mt-3 w-full">
+                        <h3 class=" pt-4 pl-6 text-lg leading-6 font-medium text-gray-900" id="modal-headline">
+                            <%= shortened_filename file %>
+                            (<span class="<%= coverage_class(file.covered_percent) %>">
+                                <%= file.covered_percent.round(2).to_s %>%
+                            </span>)
+                            <% if branchable_result? %>
+                                | Branches
+                                (<span class="<%= coverage_class(file.covered_percent) %>">
+                                    <%= file.branches_coverage_percent.round(2).to_s %>%
+                                </span>)
+                            <% end %>
+                        </h3>
+                        <div class="mt-4 dialog-body">
+                            <pre class="bg-gray-800 text-white whitespace-normal w-full text-xs">
+                                <ol class="list-decimal ml-12 p-0">
+                                    <% file.lines.each do |line| %>
+                                        <li class="bg-white border-l-4 border-gray-700 py-2 pl-2 pr-4 <%= line.status %>" data-hits="<%= line.coverage ? line.coverage : '' %>"
+                                            data-linenumber="<%= line.number %>">
+                                            <% if line.covered? %>
+                                                <span class="inline-flex items-center ml-1 px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-800 text-white float-right"><%= line.coverage %></span>
+                                            <% end %>
+                                            <% if line.skipped? %>
+                                                <span class="inline-flex items-center ml-1 px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-800 text-white float-right">skipped</span>
+                                            <% end %>
+
+                                            <% if branchable_result? %>
+                                                <% file.branches_for_line(line.number).each do |branch_type, hit_count| %>
+                                                    <span class="inline-flex items-center ml-1 px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-800 text-white float-right" title="<%= branch_type%> branch hit <%= hit_count %> times">
+                                                        <%= branch_type %>: <%= hit_count %>
+                                                    </span>
+                                                <% end %>
+                                            <% end %>
+                                            <code class="text-cool-gray-900 whitespace-pre whitespace-pre-wrap"><%= CGI.escapeHTML(line.src.chomp) %></code>
+                                        </li>
+                                    <% end %>
+                                </ol>
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 px-4 py-3 text-xs">
+                <b><%= file.lines_of_code %></b>
+                Relevant Lines |
+                <span class="text-green-500"><b>
+                    <%= format_number(file.covered_lines.count) %>
+                </b></span>
+                Lines Covered |
+                <span class="text-red-500"><b>
+                    <%= format_number(file.missed_lines.count) %>
+                </b></span>
+                Lines Missed
+                <% if branchable_result? %>
+                    |
+                    <b><%= file.total_branches.count %></b>
+                    Total Branches |
+                    <span class="text-green-500"><b>
+                        <%= format_number(file.covered_branches.count) %>
+                    </b></span>
+                    Branches Covered |
+                    <span class="text-red-500"><b>
+                        <%= format_number(file.missed_branches.count) %>
+                    </b></span>
+                    Branches Missed
+                <% end %>
+            </div>
+        </div>
+    </div>
+</div>

data/views/group_page.erb

@@ -0,0 +1,133 @@
+<div class="tab-groups pt-2 pb-6 md:py-6 <%= hide_show(title_id) %>" name="<%= title_id %>">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 class="text-2xl font-semibold text-gray-900">
+            <%= title %>
+        </h1>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-6 pt-4 grid grid-cols-2 gap-5 lg:grid-cols-6 md:grid-cols-3">
+        <%= generate_stat_card('# of Files', format_number(files.length), 'text-gray-900') %>
+        <%= generate_stat_card('Relevent Lines', format_number(files.lines_of_code), 'text-gray-900') %>
+        <%= generate_stat_card('Lines Covered', format_number(files.covered_lines), 'text-green-500') %>
+        <%= generate_stat_card('Lines Missed', format_number(files.missed_lines), 'text-red-500') %>
+        <%= generate_stat_card('Covered', files.covered_percent.round(2).to_s + '%', coverage_class(files.covered_percent)) %>
+        <%= generate_stat_card('Hits/Line', files.covered_strength.round(2), strength_class(files.covered_strength)) %>
+        <% if branchable_result? %>
+            <%= generate_stat_card('Total Branches', format_number(files.total_branches), 'text-gray-900') %>
+            <%= generate_stat_card('Branches Covered', format_number(files.covered_branches), 'text-green-500') %>
+            <%= generate_stat_card('Branches Missed', format_number(files.missed_branches), 'text-red-500') %>
+            <%= generate_stat_card('Branches', files.branch_covered_percent.round(2).to_s + '%', coverage_class(files.branch_covered_percent)) %>
+        <% end %> 
+    </div>
+
+    <div class="max-w-7xl mx-auto px-6 pt-4">
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="flex flex-col">
+                <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <div class="overflow-hidden rounded-lg">
+                            <table class="min-w-full divide-y divide-gray-200" id="<%= title_id %>-table">
+                                <thead>
+                                    <tr>
+                                        <th class="px-2 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('File Name') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('% Covered') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('Lines') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('Relevant Files') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('Lines Covered') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('Lines Missed') %>
+                                        </th>
+                                        <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                            <%= generate_table_column_head('Avg Hits/Line') %>
+                                        </th>
+                                        <% if branchable_result? %>
+                                            <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                                <%= generate_table_column_head('Branch % Covered') %>
+                                            </th>
+                                            <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                                <%= generate_table_column_head('Branches') %>
+                                            </th>
+                                            <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                                <%= generate_table_column_head('Covered Branches') %>
+                                            </th>
+                                            <th class="px-2 py-3 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider clickable">
+                                                <%= generate_table_column_head('Missed Branches') %>
+                                            </th>
+                                        <% end %>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="bg-white <%= files.length == 0 ? '' : 'hidden' %>" id="<%= title_id %>-hiderow">
+                                        <th class="px-6 py-4 text-center" colspan="<%= branchable_result? ? '11' : '7' %>">
+                                            No Results Found Please Search Again!
+                                        </th>
+                                    </tr>
+                                    <% files.each.with_index do |source_file, index| %>
+                                        <tr class="row clickable <%= index.odd? ? 'bg-gray-50' : 'bg-white' %>" data-action="click->toggle#toggle touch->toggle#toggle" data-toggle-target="<%= id(source_file) %>">
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"
+                                                title="<%= shortened_filename(source_file) %>" data-sort-val="<%= shortened_filename(source_file) %>">
+                                                <%= shortened_filename(source_file) %>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 <%= coverage_class(source_file.covered_percent) %>"
+                                                data-sort-val="<%= source_file.covered_percent.round(2).to_s %>">
+                                                <%= sprintf("%.2f", source_file.covered_percent.round(2)) %>%
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                data-sort-val="<%= source_file.lines.count %>">
+                                                <%= format_number(source_file.lines.count) %>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                data-sort-val="<%= source_file.covered_lines.count + source_file.missed_lines.count %>">
+                                                <%= format_number(source_file.covered_lines.count + source_file.missed_lines.count) %>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                data-sort-val="<%= source_file.covered_lines.count %>">
+                                                <%= format_number(source_file.covered_lines.count) %>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                data-sort-val="<%= source_file.missed_lines.count %>">
+                                                <%= format_number(source_file.missed_lines.count) %>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                data-sort-val="<%= source_file.covered_strength %>">
+                                                <%= format_number(source_file.covered_strength.round(2)) %>
+                                            </td>
+                                            <% if branchable_result? %>
+                                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 <%= coverage_class(source_file.branches_coverage_percent) %>"
+                                                    data-sort-val="<%= source_file.branches_coverage_percent.round(2).to_s %>">
+                                                    <%= sprintf("%.2f", source_file.branches_coverage_percent.round(2)) %>%
+                                                </td>
+                                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                    data-sort-val="<%= source_file.total_branches.count %>">
+                                                    <%= format_number(source_file.total_branches.count) %>
+                                                </td>
+                                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                    data-sort-val="<%= source_file.covered_branches.count %>">
+                                                    <%= format_number(source_file.covered_branches.count) %>
+                                                </td>
+                                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"
+                                                    data-sort-val="<%= source_file.missed_branches.count %>">
+                                                    <%= format_number(source_file.missed_branches.count) %>
+                                                </td>
+                                            <% end %>
+                                        </tr>
+                                    <% end %>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

data/views/main.erb

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>Code Coverage for <%= SimpleCov.project_name %></title>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="<%= assets_path('application.css') %>" media="screen, projection, print" rel="stylesheet" type="text/css"/>
+    </head>
+
+    <body data-controller="toggle">
+        <div class="h-screen flex overflow-hidden bg-gray-200">
+            <div class="hidden" data-toggle-name="mobile-menu">
+                <div class="fixed inset-0 flex z-40">
+                    <div class="fixed inset-0">
+                        <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
+                    </div>
+                    <div class="relative flex-1 flex flex-col max-w-xs w-full bg-gray-800">
+                        <div class="absolute top-0 right-0 -mr-14 p-1">
+                            <button data-action="click->toggle#toggle touch->toggle#toggle" data-toggle-target="mobile-menu" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                                <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="flex-1 h-0 pb-4 overflow-y-auto">
+                            <div class="h-16 py-3 px-4 bg-gray-900">
+                                <div class="flex flex-shrink-0 items-center text-gray-100 font-bold text-lg">
+                                    <%= SimpleCov.project_name.split('-').map(&:capitalize).join(' ') %>
+                                </div>
+                                <div class="flex flex-shrink-0 items-center text-gray-500 text-xs">
+                                    Code Coverage
+                                </div>
+                            </div>
+                            <div class="flex-1 flex flex-col overflow-y-auto">
+                                <nav class="mt-5 px-2 space-y-1 mobile-nav">
+                                    <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150" name="AllFiles" onclick="navigate(this.name)">
+                                        <svg class="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                                        </svg>
+                                        All Files
+                                        (<span class="<%= coverage_class(result.source_files.covered_percent) %>">
+                                            <%= result.source_files.covered_percent.round(2) %>%
+                                        </span>)
+                                    </a>
+                                    <% result.groups.each do |name, files| %>
+                                        <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition ease-in-out duration-150" name="<%= remove_spaces(name) %>" onclick="navigate(this.name)">
+                                            <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                                            </svg>
+                                            <%= name %>
+                                            (<span class="<%= coverage_class(files.covered_percent) %>">
+                                                <%= files.covered_percent.round(2)%>%
+                                            </span>)
+                                        </a>
+                                    <% end %>
+                                </nav>
+                            </div>
+                        </div>
+                        <div class="flex-shrink-0 flex bg-gray-700 p-4">
+                            <div class="flex-shrink-0 group block">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <p class="text-sm leading-5 text-white">
+                                            Generated
+                                            <abbr class="timeago" datetime="<%= result.created_at %>">
+                                                <%= result.created_at %>
+                                            </abbr>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-shrink-0 w-14"></div>
+                </div>
+            </div>
+
+            <div class="hidden md:flex md:flex-shrink-0">
+                <div class="flex flex-col w-64">
+                    <div class="flex flex-col h-0 flex-1 bg-gray-800">
+                        <div class="flex-1 flex flex-col pb-4 overflow-y-auto">
+                            <div class="h-16 py-3 px-4 bg-gray-900">
+                                <div class="flex flex-shrink-0 items-center text-gray-100 font-bold text-lg">
+                                    <%= SimpleCov.project_name.split('-').map(&:capitalize).join(' ') %>
+                                </div>
+                                <div class="flex flex-shrink-0 items-center text-gray-500 text-xs">
+                                    Code Coverage
+                                </div>
+                            </div>
+                            <div class="flex-1 flex flex-col overflow-y-auto">
+                                <nav class="mt-5 flex-1 px-2 bg-gray-800 space-y-1 desktop-nav">
+                                    <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150" name="AllFiles" onclick="navigate(this.name)">
+                                        <svg class="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                                        </svg>
+                                        All Files
+                                        (<span class="<%= coverage_class(result.source_files.covered_percent) %>">
+                                            <%= result.source_files.covered_percent.round(2) %>%
+                                        </span>)
+                                    </a>
+                                    <% result.groups.each do |name, files| %>
+                                        <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition ease-in-out duration-150" name="<%= remove_spaces(name) %>" onclick="navigate(this.name)">
+                                            <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                                            </svg>
+                                            <%= name %>
+                                            (<span class="<%= coverage_class(files.covered_percent) %>">
+                                                <%= files.covered_percent.round(2)%>%
+                                            </span>)
+                                        </a>
+                                    <% end %>
+                                </nav>
+                            </div>
+                        </div>
+                        <div class="flex-shrink-0 flex bg-gray-700 p-4">
+                            <div class="flex-shrink-0 w-full group block">
+                                <div class="flex items-center">
+                                    <div class="ml-3">
+                                        <p class="text-sm leading-5 text-white">
+                                            Generated
+                                            <abbr class="timeago" datetime="<%= result.created_at %>">
+                                                <%= result.created_at %>
+                                            </abbr>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-col w-0 flex-1 overflow-hidden">
+                <div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
+                    <button data-action="click->toggle#toggle touch->toggle#toggle" data-toggle-target="mobile-menu" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar">
+                        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+                        </svg>
+                    </button>
+                    <div class="flex-1 px-4 flex justify-between">
+                        <div class="flex-1 flex">
+                            <form class="w-full flex md:ml-0" action="#" method="GET">
+                                <label for="search_field" class="sr-only">Search</label>
+                                <div class="relative w-full text-gray-400 focus-within:text-gray-600">
+                                    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
+                                        </svg>
+                                    </div>
+                                    <input id="search_field" class="block w-full h-full pl-8 pr-3 py-2 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search" onkeyup="searchTable(this.value.toUpperCase())" onsearch="searchTable(this.value.toUpperCase())"/>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0">
+                    <%= generate_group_page("All Files", result.source_files) %>
+
+                    <% result.groups.each do |name, files| %>
+                        <%= generate_group_page(name, files) %>
+                    <% end %>
+                </main>
+                <footer class="bg-gray-800">
+                    <div class="max-w-screen-xl mx-auto py-4 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
+                        <div class="flex justify-center space-x-6"></div>
+                        <div class="mt-0">
+                            <p class="text-center text-base leading-6 text-gray-400">
+                                Generated by
+                                <a href="https://github.com/colszowka/simplecov" class="no-underline hover:underline text-blue-500" target="_blank">Simplecov</a>
+                                v<%= SimpleCov::VERSION %>
+                                and
+                                <a href="https://github.com/chiefpansancolt/simplecov-tailwindcss" class="no-underline hover:underline text-blue-500" target="_blank">Simplecov Tailwind</a>
+                                v<%= SimpleCov::Formatter::TailwindFormatter::VERSION %>
+                                using <%= result.command_name %>
+                            </p>
+                        </div>
+                    </div>
+                </footer>
+            </div>
+        </div>
+
+        <% result.source_files.each do |source_file| %>
+            <%= generate_dialog(source_file) %>
+        <% end %>
+
+        <script src="<%= assets_path('application.js') %>" type="text/javascript"></script>
+    </body>
+</html>