Merge branch '212560-sse-populate-edit-area' into 'master'

Display page content in the Static Site Editor

See merge request gitlab-org/gitlab!28472

app/assets/javascripts/static_site_editor/components/edit_area.vue

+<script>
+import { GlFormTextarea } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormTextarea,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-textarea :value="value" v-on="$listeners" />
+</template>

app/assets/javascripts/static_site_editor/components/static_site_editor.vue

+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+import EditArea from './edit_area.vue';
+
+export default {
+  components: {
+    EditArea,
+    GlSkeletonLoader,
+  },
+  computed: {
+    ...mapState(['content', 'isContentLoaded', 'isLoadingContent']),
+  },
+  mounted() {
+    this.loadContent();
+  },
+  methods: {
+    ...mapActions(['loadContent']),
+  },
+};
+</script>
 <template>
-  <div></div>
+  <div class="d-flex justify-content-center h-100">
+    <div v-if="isLoadingContent" class="w-50 h-50 mt-2">
+      <gl-skeleton-loader :width="500" :height="102">
+        <rect width="500" height="16" rx="4" />
+        <rect y="20" width="375" height="16" rx="4" />
+        <rect x="380" y="20" width="120" height="16" rx="4" />
+        <rect y="40" width="250" height="16" rx="4" />
+        <rect x="255" y="40" width="150" height="16" rx="4" />
+        <rect x="410" y="40" width="90" height="16" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" />
+  </div>
 </template>

app/assets/javascripts/static_site_editor/store/state.js

 const createState = (initialState = {}) => ({
+  isLoadingContent: false,
+  isContentLoaded: false,
+
   content: '',
   ...initialState,
 });

spec/frontend/static_site_editor/components/static_site_editor_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+import createState from '~/static_site_editor/store/state';
+
+import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue';
+import EditArea from '~/static_site_editor/components/edit_area.vue';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('StaticSiteEditor', () => {
+  let wrapper;
+  let store;
+  let loadContentActionMock;
+
+  const buildStore = (initialState = {}) => {
+    loadContentActionMock = jest.fn();
+
+    store = new Vuex.Store({
+      state: createState(initialState),
+      actions: {
+        loadContent: loadContentActionMock,
+      },
+    });
+  };
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(StaticSiteEditor, {
+      localVue,
+      store,
+    });
+  };
+
+  const findEditArea = () => wrapper.find(EditArea);
+
+  beforeEach(() => {
+    buildStore();
+    buildWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when content is not loaded', () => {
+    it('does not render edit area', () => {
+      expect(findEditArea().exists()).toBe(false);
+    });
+  });
+
+  describe('when content is loaded', () => {
+    const content = 'edit area content';
+
+    beforeEach(() => {
+      buildStore({ content, isContentLoaded: true });
+      buildWrapper();
+    });
+
+    it('renders the edit area', () => {
+      expect(findEditArea().exists()).toBe(true);
+    });
+
+    it('passes page content to edit area', () => {
+      expect(findEditArea().props('value')).toBe(content);
+    });
+  });
+
+  it('displays skeleton loader while loading content', () => {
+    buildStore({ isLoadingContent: true });
+    buildWrapper();
+
+    expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
+  });
+
+  it('dispatches load content action', () => {
+    expect(loadContentActionMock).toHaveBeenCalled();
+  });
+});