[Remove Vuetify from Studio] Channel details in Channels - content

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

@@ -0,0 +1,49 @@
+<template>
+
+  <span
+    class="studio-chip"
+    :class="{ notranslate }"
+    :style="chipStyle"
+  >
+    <slot></slot>
+  </span>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioChip',
+    props: {
+      notranslate: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      chipStyle() {
+        return {
+          color: this.$themeTokens.text,
+          backgroundColor: this.$themePalette.grey.v_200,
+        };
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-chip {
+    display: inline-block;
+    padding: 4px 8px;
+    margin: 2px 4px 2px 0;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 16px;
+    border-radius: 10px;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioChip from '../StudioChip.vue';
+
+const router = new VueRouter({
+  routes: [],
+});
+
+describe('StudioChip', () => {
+  it('renders chip with text content', () => {
+    render(StudioChip, {
+      router,
+      slots: {
+        default: 'Test Tag',
+      },
+    });
+
+    expect(screen.getByText('Test Tag')).toBeInTheDocument();
+  });
+
+  it('applies notranslate class when prop is true', () => {
+    const { container } = render(StudioChip, {
+      router,
+      props: {
+        notranslate: true,
+      },
+      slots: {
+        default: 'User Content',
+      },
+    });
+
+    const chip = container.querySelector('.studio-chip');
+    expect(chip).toHaveClass('notranslate');
+  });
+
+  it('does not apply notranslate class when prop is false', () => {
+    const { container } = render(StudioChip, {
+      router,
+      props: {
+        notranslate: false,
+      },
+      slots: {
+        default: 'Regular Content',
+      },
+    });
+
+    const chip = container.querySelector('.studio-chip');
+    expect(chip).not.toHaveClass('notranslate');
+  });
+
+  it('renders multiple chips independently', () => {
+    const { container: container1 } = render(StudioChip, {
+      router,
+      slots: {
+        default: 'Chip 1',
+      },
+    });
+
+    const { container: container2 } = render(StudioChip, {
+      router,
+      slots: {
+        default: 'Chip 2',
+      },
+    });
+
+    expect(container1.querySelector('.studio-chip')).toHaveTextContent('Chip 1');
+    expect(container2.querySelector('.studio-chip')).toHaveTextContent('Chip 2');
+  });
+
+  it('has correct styling classes', () => {
+    const { container } = render(StudioChip, {
+      router,
+      slots: {
+        default: 'Styled Chip',
+      },
+    });
+
+    const chip = container.querySelector('.studio-chip');
+    expect(chip).toBeTruthy();
+    expect(chip.tagName).toBe('SPAN');
+  });
+});

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsPanel.spec.js

@@ -0,0 +1,130 @@
+import { render } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioDetailsPanel from '../details/StudioDetailsPanel.vue';
+
+const router = new VueRouter({
+  routes: [],
+});
+
+const mockChannelDetails = {
+  name: 'Test Channel',
+  description: 'Test channel description',
+  thumbnail_url: null,
+  published: true,
+  version: 1,
+  primary_token: 'test-token',
+  language: 'en',
+  resource_count: 10,
+  kind_count: [],
+};
+
+describe('StudioDetailsPanel', () => {
+  it('renders without crashing with minimal props', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: {},
+        isChannel: false,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toBeInTheDocument();
+  });
+
+  it('displays loader when loading is true', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: {},
+        isChannel: true,
+        loading: true,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders channel information', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: mockChannelDetails,
+        isChannel: true,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toHaveTextContent('Test Channel');
+  });
+
+  it('does not use VDataTable', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: mockChannelDetails,
+        isChannel: true,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container.querySelector('.v-datatable')).not.toBeInTheDocument();
+  });
+
+  it('does not use VChip', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: mockChannelDetails,
+        isChannel: true,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container.querySelector('.v-chip')).not.toBeInTheDocument();
+  });
+
+  it('does not use VLayout or VFlex', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: mockChannelDetails,
+        isChannel: true,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container.querySelector('.v-layout')).not.toBeInTheDocument();
+    expect(container.querySelector('.v-flex')).not.toBeInTheDocument();
+  });
+});