| 1 | import { imgSnapshotTest } from '../../helpers/util.ts'; |
| 2 | |
| 3 | describe('Timeline diagram', () => { |
| 4 | it('1: should render a simple timeline with no specific sections', () => { |
| 5 | imgSnapshotTest( |
| 6 | `timeline |
| 7 | title History of Social Media Platform |
| 8 | 2002 : LinkedIn |
| 9 | 2004 : Facebook : Google |
| 10 | 2005 : YouTube |
| 11 | 2006 : Twitter |
| 12 | `, |
| 13 | {} |
| 14 | ); |
| 15 | }); |
| 16 | it('2: should render a timeline diagram with sections', () => { |
| 17 | imgSnapshotTest( |
| 18 | `timeline |
| 19 | title Timeline of Industrial Revolution |
| 20 | section 17th-20th century |
| 21 | Industry 1.0 : Machinery, Water power, Steam <br>power |
| 22 | Industry 2.0 : Electricity, Internal combustion engine, Mass production |
| 23 | Industry 3.0 : Electronics, Computers, Automation |
| 24 | section 21st century |
| 25 | Industry 4.0 : Internet, Robotics, Internet of Things |
| 26 | Industry 5.0 : Artificial intelligence, Big data,3D printing |
| 27 | `, |
| 28 | {} |
| 29 | ); |
| 30 | }); |
| 31 | it('3: should render a complex timeline with sections, and long events text with <br>', () => { |
| 32 | imgSnapshotTest( |
| 33 | `timeline |
| 34 | title England's History Timeline |
| 35 | section Stone Age |
| 36 | 7600 BC : Britain's oldest known house was built in Orkney, Scotland |
| 37 | 6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers. |
| 38 | section Bronze Age |
| 39 | 2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking. |
| 40 | : New styles of pottery and ways of burying the dead appear. |
| 41 | 2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles. |
| 42 | : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive. |
| 43 | `, |
| 44 | {} |
| 45 | ); |
| 46 | }); |
| 47 | it('4: should render a simple timeline with directives and disableMultiColor:true ', () => { |
| 48 | imgSnapshotTest( |
| 49 | `%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% |
| 50 | timeline |
| 51 | title History of Social Media Platform |
| 52 | 2002 : LinkedIn |
| 53 | 2004 : Facebook : Google |
| 54 | 2005 : YouTube |
| 55 | 2006 : Twitter |
| 56 | `, |
| 57 | {} |
| 58 | ); |
| 59 | }); |
| 60 | it('5: should render a simple timeline with directive overridden colors', () => { |
| 61 | imgSnapshotTest( |
| 62 | ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { |
| 63 | 'cScale0': '#ff0000', |
| 64 | 'cScale1': '#00ff00', |
| 65 | 'cScale2': '#0000ff' |
| 66 | } } }%% |
| 67 | timeline |
| 68 | title History of Social Media Platform |
| 69 | 2002 : LinkedIn |
| 70 | 2004 : Facebook : Google |
| 71 | 2005 : YouTube |
| 72 | 2006 : Twitter |
| 73 | 2007 : Tumblr |
| 74 | 2008 : Instagram |
| 75 | 2010 : Pinterest |
| 76 | `, |
| 77 | {} |
| 78 | ); |
| 79 | }); |
| 80 | it('6: should render a simple timeline in base theme', () => { |
| 81 | imgSnapshotTest( |
| 82 | `%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% |
| 83 | timeline |
| 84 | title History of Social Media Platform |
| 85 | 2002 : LinkedIn |
| 86 | 2004 : Facebook : Google |
| 87 | 2005 : YouTube |
| 88 | 2006 : Twitter |
| 89 | 2007 : Tumblr |
| 90 | 2008 : Instagram |
| 91 | 2010 : Pinterest |
| 92 | `, |
| 93 | {} |
| 94 | ); |
| 95 | }); |
| 96 | |
| 97 | it('7: should render a simple timeline in default theme', () => { |
| 98 | imgSnapshotTest( |
| 99 | `%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% |
| 100 | timeline |
| 101 | title History of Social Media Platform |
| 102 | 2002 : LinkedIn |
| 103 | 2004 : Facebook : Google |
| 104 | 2005 : YouTube |
| 105 | 2006 : Twitter |
| 106 | 2007 : Tumblr |
| 107 | 2008 : Instagram |
| 108 | 2010 : Pinterest |
| 109 | `, |
| 110 | {} |
| 111 | ); |
| 112 | }); |
| 113 | |
| 114 | it('8: should render a simple timeline in dark theme', () => { |
| 115 | imgSnapshotTest( |
| 116 | `%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% |
| 117 | timeline |
| 118 | title History of Social Media Platform |
| 119 | 2002 : LinkedIn |
| 120 | 2004 : Facebook : Google |
| 121 | 2005 : YouTube |
| 122 | 2006 : Twitter |
| 123 | 2007 : Tumblr |
| 124 | 2008 : Instagram |
| 125 | 2010 : Pinterest |
| 126 | `, |
| 127 | {} |
| 128 | ); |
| 129 | }); |
| 130 | |
| 131 | it('9: should render a simple timeline in neutral theme', () => { |
| 132 | imgSnapshotTest( |
| 133 | `%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% |
| 134 | timeline |
| 135 | title History of Social Media Platform |
| 136 | 2002 : LinkedIn |
| 137 | 2004 : Facebook : Google |
| 138 | 2005 : YouTube |
| 139 | 2006 : Twitter |
| 140 | 2007 : Tumblr |
| 141 | 2008 : Instagram |
| 142 | 2010 : Pinterest |
| 143 | `, |
| 144 | {} |
| 145 | ); |
| 146 | }); |
| 147 | |
| 148 | it('10: should render a simple timeline in forest theme', () => { |
| 149 | imgSnapshotTest( |
| 150 | `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% |
| 151 | timeline |
| 152 | title History of Social Media Platform |
| 153 | 2002 : LinkedIn |
| 154 | 2004 : Facebook : Google |
| 155 | 2005 : YouTube |
| 156 | 2006 : Twitter |
| 157 | 2007 : Tumblr |
| 158 | 2008 : Instagram |
| 159 | 2010 : Pinterest |
| 160 | `, |
| 161 | {} |
| 162 | ); |
| 163 | }); |
| 164 | |
| 165 | it('11: should render timeline with many stacked events and proper timeline line length', () => { |
| 166 | imgSnapshotTest( |
| 167 | `timeline |
| 168 | title Medical Device Lifecycle |
| 169 | section Pre-Development |
| 170 | Quality Management System : Regulatory Compliance : Risk Management |
| 171 | section Development |
| 172 | Management Responsibility : Planning Activities : Human Resources |
| 173 | Resource Management : Management Reviews : Infrastructure |
| 174 | section Post-Development |
| 175 | Product Realization Activities : Planning Activities : Customer-related Processes |
| 176 | Post-Production Activities : Feedback : Complaints : Adverse Events |
| 177 | : Research and Development : Purchasing Activities |
| 178 | : Production Activities : Installation Activities |
| 179 | : Servicing Activities : Post-Market Surveillance |
| 180 | `, |
| 181 | {} |
| 182 | ); |
| 183 | }); |
| 184 | |
| 185 | it('12: should render timeline with proper vertical line lengths for all columns', () => { |
| 186 | imgSnapshotTest( |
| 187 | `--- |
| 188 | config: |
| 189 | theme: base |
| 190 | themeVariables: |
| 191 | fontFamily: Fira Sans |
| 192 | fontSize: 17px |
| 193 | cScale0: '#b3cde0' |
| 194 | cScale1: '#f49090' |
| 195 | cScale2: '#85d5b8' |
| 196 | --- |
| 197 | |
| 198 | timeline |
| 199 | title Medical Device Lifecycle |
| 200 | section Planning |
| 201 | Quality Management System (4): Regulatory Compliance (4.1.1) |
| 202 | : Risk Management (4.1.2) |
| 203 | Management Resposibility (5): Planning Activities (5.4) |
| 204 | : Management Reviews (5.6) |
| 205 | Resource Management (6): Human Resources (6.2) |
| 206 | : Infrastructure (6.3) |
| 207 | section Realization |
| 208 | Research and Development (7.3): RnD Planning (7.3.2) |
| 209 | : Inputs (7.3.3) |
| 210 | : Outputs (7.3.4) |
| 211 | : Review (7.3.5) |
| 212 | : Verification (7.3.6) |
| 213 | : Validation (7.3.7) |
| 214 | Purchasing (7.4): Purchasing Process (7.4.1) |
| 215 | : Purchasing Information (7.4.2) |
| 216 | Production (7.5): Production Activities (7.5.1) |
| 217 | : Production Feedback (8.2.1) |
| 218 | Installation (7.5.3): Installation Activities (7.5.3) |
| 219 | Servicing (7.5.4): Servicing Activities (7.5.4) |
| 220 | section Post-Production |
| 221 | Post-Market Activities (8): Feedback (8.2.1) |
| 222 | : Complaints (8.2.2) |
| 223 | : Adverse Events (8.2.3) |
| 224 | `, |
| 225 | {} |
| 226 | ); |
| 227 | }); |
| 228 | }); |
| 229 | |