New Twiddle

components.my-component-name\.js

import Component from '@ember/component';

export default Component.extend({
  tagName: 'div',
  classNames: ['yay-class']
});

controllers.application.js

import Ember from 'ember';
import {computed} from '@ember/object';

export default Ember.Controller.extend({
  appName: 'Ember - Workaround to yield multiple blocks',
  step: 1,
  someComponentPath: computed('step', function(){
  	return this.step == 1 ? 'my-footer' : 'my-component-name';
  }),
  actions: {
  	toggleTemplate(){
      if (this.step == 1) {
	      this.set('step', 2);
      } else {
      	this.set('step', 1);
      }
    }
  }
});

templates.application.hbs

{{my-component content=someComponentPath}}

<button type="button" {{action "toggleTemplate"}}>change template</button>

templates.components.my-component-name\.hbs

<div style="color:red;">
YAY
</div>

templates.components.my-component.hbs

<div class="container">
  {{component content}}
</div>

templates.components.my-footer.hbs

{{#if hasBlock}}
  {{yield}}
{{else}}
  Default footer
{{/if}}

templates.components.my-header.hbs

{{#if hasBlock}}
  {{yield}}
{{else}}
  Default header
{{/if}}

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}