tests: added overflow tests

cypress/fixtures/overflowingData.json

@@ -0,0 +1,4 @@
+{
+    "text": "This is random data meant to be used for testing purposes. It contains very long pieces of data so that overflowing can be tested, usually visually. The random data generated here serves a crucial function in software testing, particularly in assessing the robustness and scalability of applications. After this, everything is generated by ChatGPT: Developers rely on datasets like this to simulate real-world scenarios and evaluate how their systems perform under various conditions. By incorporating long pieces of data, they can gauge how well their software handles large inputs without crashing or experiencing performance degradation. Testing for overflow scenarios is vital in ensuring the stability and security of software systems. Overflow vulnerabilities can lead to unexpected behavior, data corruption, or even security breaches if malicious actors exploit them. Therefore, thorough testing with extensive data sets is imperative to identify and address any potential issues before deploying software to production environments. In addition to overflow testing, this random data can also be used for other types of validation, such as input validation and boundary testing. Developers can analyze how their applications respond to different input sizes, including both smaller and larger than average inputs, to ensure they handle edge cases gracefully. One of the challenges in software testing is generating realistic yet diverse datasets that cover a wide range of scenarios. By providing long pieces of data, this random dataset facilitates comprehensive testing across various use cases and input types. Testers can explore how the software behaves with different data distributions, helping to uncover hidden bugs and vulnerabilities. Moreover, the use of visually long pieces of data aids in user interface testing, where the layout and presentation of information play a crucial role. By testing with lengthy data, developers can assess how well their user interfaces handle content overflow, ensuring that text remains readable and that interface elements adjust dynamically to accommodate large amounts of information. It's worth noting that while this random data is synthetic, it mirrors the complexity and variability found in real-world data sources. Whether dealing with text inputs, numerical values, or multimedia content, software applications must be able to process diverse data types effectively. Testing with realistic data sets helps developers validate the correctness and efficiency of their algorithms and data processing pipelines. Another aspect of testing with extensive data sets is performance evaluation. Developers need to understand how their software scales with increasing data volumes to anticipate and mitigate potential performance bottlenecks. By analyzing performance metrics such as processing time and memory usage, they can optimize their code for efficiency and scalability. The importance of testing cannot be overstated in the software development lifecycle. It is a proactive measure aimed at identifying and resolving issues early in the development process, thereby reducing the likelihood of costly bugs and downtimes in production environments. Comprehensive testing, including overflow testing with long pieces of data, contributes to delivering high-quality software that meets user expectations. Beyond traditional software development, industries such as finance, healthcare, and telecommunications rely heavily on rigorous testing practices to ensure regulatory compliance and safeguard sensitive data. By incorporating random data testing methodologies into their quality assurance processes, organizations can mitigate risks associated with software failures and enhance customer trust. In conclusion, the random data provided here serves as a valuable resource for testing the resilience, performance, and security of software applications. Whether it's detecting overflow vulnerabilities, validating input boundaries, or assessing user interface responsiveness, this dataset enables developers and testers to conduct thorough evaluations across a broad spectrum of scenarios. By embracing comprehensive testing practices, organizations can deliver reliable and robust software solutions that meet the demands of today's dynamic digital landscape.",
+    "text_without_spaces": "ThisIsRandomDataMeantToBeUsedForTestingPurposesItContainsVeryLongPiecesOfDataSoThatOverflowingCanBeTestedUsuallyVisuallyTheRandomDataGeneratedHereServesACrucialFunctionInSoftwareTestingParticularlyInAssessingTheRobustnessAndScalabilityOfApplicationsDevelopersRelyOnDatasetsLikeThisToSimulateRealWorldScenariosAndEvaluateHowTheirSystemsPerformUnderVariousConditionsByIncorporatingLongPiecesOfDataTheyCanGaugeHowWellTheirSoftwareHandlesLargeInputsWithoutCrashingOrExperiencingPerformanceDegradationTestingForOverflowScenariosIsVitalInEnsuringTheStabilityAndSecurityOfSoftwareSystemsOverflowVulnerabilitiesCanLeadToUnexpectedBehaviorDataCorruptionOrEvenSecurityBreachesIfMaliciousActorsExploitThemThereforeThoroughTestingWithExtensiveDataSetsIsImperativeToIdentifyAndAddressAnyPotentialIssuesBeforeDeployingSoftwareToProductionEnvironmentsInAdditionToOverflowTestingThisRandomDataCanAlsoBeUsedForOtherTypesOfValidationSuchAsInputValidationAndBoundaryTestingDevelopersCanAnalyzeHowTheirApplicationsRespondToDifferentInputSizesIncludingBothSmallerAndLargerThanAverageInputsToEnsureTheyHandleEdgeCasesGracefullyOneOfTheChallengesInSoftwareTestingIsGeneratingRealisticYetDiverseDatasetsThatCoverAWideRangeOfScenariosByProvidingLongPiecesOfDataThisRandomDatasetFacilitatesComprehensiveTestingAcrossVariousUseCasesAndInputTypesTestersCanExploreHowTheSoftwareBehavesWithDifferentDataDistributionsHelpingToUncoverHiddenBugsAndVulnerabilitiesMoreoverTheUseOfVisuallyLongPiecesOfDataAidsInUserInterfaceTestingWhereTheLayoutAndPresentationOfInformationPlayACrucialRoleByTestingWithLengthyDataDevelopersCanAssessHowWellTheirUserInterfacesHandleContentOverflowEnsuringThatTextRemainsReadableAndThatInterfaceElementsAdjustDynamicallyToAccommodateLargeAmountsOfInformationItSWorthNotingThatWhileThisRandomDataIsSyntheticItMirrorsTheComplexityAndVariabilityFoundInRealWorldDataSourcesWhetherDealingWithTextInputsNumericalValuesOrMultimediaContentSoftwareApplicationsMustBeAbleToProcessDiverseDataTypesEffectivelyTestingWithRealisticDataSetsHelpsDevelopersValidateTheCorrectnessAndEfficiencyOfTheirAlgorithmsAndDataProcessingPipelinesAnotherAspectOfTestingWithExtensiveDataSetsIsPerformanceEvaluationDevelopersNeedToUnderstandHowTheirSoftwareScalesWithIncreasingDataVolumesToAnticipateAndMitigatePotentialPerformanceBottlenecksByAnalyzingPerformanceMetricsSuchAsProcessingTimeAndMemoryUsageTheyCanOptimizeTheirCodeForEfficiencyAndScalabilityTheImportanceOfTestingCannotBeOverstatedInTheSoftwareDevelopmentLifecycleItIsAProactiveMeasureAimedAtIdentifyingAndResolvingIssuesEarlyInTheDevelopmentProcessTherebyReducingTheLikelihoodOfCostlyBugsAndDowntimesInProductionEnvironmentsComprehensiveTestingIncludingOverflowTestingWithLongPiecesOfDataContributesToDeliveringHighQualitySoftwareThatMeetsUserExpectationsBeyondTraditionalSoftwareDevelopmentIndustriesSuchAsFinanceHealthcareAndTelecommunicationsRelyHeavilyOnRigorousTestingPracticesToEnsureRegulatoryComplianceAndSafeguardSensitiveDataByIncorporatingRandomDataTestingMethodologiesIntoTheirQualityAssuranceProcessesOrganizationsCanMitigateRisksAssociatedWithSoftwareFailuresAndEnhanceCustomerTrustInConclusionTheRandomDataProvidedHereServesAsAValuableResourceForTestingTheResiliencePerformanceAndSecurityOfSoftwareApplicationsWhetherItSDetectingOverflowVulnerabilitiesValidatingInputBoundariesOrAssessingUserInterfaceResponsivenessThisDatasetEnablesDevelopersAndTestersToConductThoroughEvaluationsAcrossABroadSpectrumOfScenariosByEmbracingComprehensiveTestingPracticesOrganizationsCanDeliverReliableAndRobustSoftwareSolutionsThatMeetTheDemandsOfTodaysDynamicDigitalLandscape"
+}

src/stories/BaseButton.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 
 import BaseButton from "@/components/BaseButton.vue";
 
+import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof BaseButton> = {
   title: "Components/BaseButton",
@@ -66,3 +68,9 @@ export const Busy: Story = {
     ariaBusy: true,
   },
 };
+
+export const WithOverflowingText: Story = {
+  args: {
+    default: overflowFixture.text,
+  },
+};

src/stories/BaseModal.stories.ts

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import BaseModal from "@/components/modals/BaseModal.vue";
 import { expect, within } from "@storybook/test";
 
+import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof BaseModal> = {
   title: "Components/BaseModal",
@@ -49,8 +51,9 @@ export const DefaultOpened: Story = {
 
 export const OverflowingContent: Story = {
   args: {
-    title: "Overflowing Content",
-    default: `**Welcome to Our Application**Welcome to our application. We are dedicated to providing you with the best experience possible. Our team has worked hard to ensure that our application is user-friendly and packed with features that will meet your needs.**Features and Benefits**Our application offers a wide range of features designed to help you manage your tasks efficiently. You can schedule tasks, set reminders, and even share tasks with others. Plus, our application is accessible from any device, so you can stay organized no matter where you are.**Privacy and Security**Your privacy and security are our top priorities. We use state-of-the-art encryption to protect your data and ensure that your information is safe. We also respect your privacy and will never sell or share your information with third parties.**Getting Started**Getting started with our application is easy. Simply create an account, verify your email, and you're ready to go. If you need help along the way, our support team is available 24/7 to assist you.**Feedback and Support**We value your feedback and are always looking to improve. If you have any suggestions or run into any issues, please don't hesitate to contact our support team. We're here to help and want to make sure you have the best experience possible.**Welcome to Our Application**Welcome to our application. We are dedicated to providing you with the best experience possible. Our team has worked hard to ensure that our application is user-friendly and packed with features that will meet your needs.**Features and Benefits**Our application offers a wide range of features designed to help you manage your tasks efficiently. You can schedule tasks, set reminders, and even share tasks with others. Plus, our application is accessible from any device, so you can stay organized no matter where you are.**Privacy and Security**Your privacy and security are our top priorities. We use state-of-the-art encryption to protect your data and ensure that your information is safe. We also respect your privacy and will never sell or share your information with third parties.**Getting Started**Getting started with our application is easy. Simply create an account, verify your email, and you're ready to go. If you need help along the way, our support team is available 24/7 to assist you.**Feedback and Support**We value your feedback and are always looking to improve. If you have any suggestions or run into any issues, please don't hesitate to contact our support team. We're here to help and want to make sure you have the best experience possible.**Welcome to Our Application**Welcome to our application. We are dedicated to providing you with the best experience possible. Our team has worked hard to ensure that our application is user-friendly and packed with features that will meet your needs.**Features and Benefits**Our application offers a wide range of features designed to help you manage your tasks efficiently. You can schedule tasks, set reminders, and even share tasks with others. Plus, our application is accessible from any device, so you can stay organized no matter where you are.**Privacy and Security**Your privacy and security are our top priorities. We use state-of-the-art encryption to protect your data and ensure that your information is safe. We also respect your privacy and will never sell or share your information with third parties.**Getting Started**Getting started with our application is easy. Simply create an account, verify your email, and you're ready to go. If you need help along the way, our support team is available 24/7 to assist you.**Feedback and Support**We value your feedback and are always looking to improve. If you have any suggestions or run into any issues, please don't hesitate to contact our support team. We're here to help and want to make sure you have the best experience possible.`,
+    title: overflowFixture.text,
+    default: overflowFixture.text,
+    triggerText: overflowFixture.text,
   },
 };
 

src/stories/CardElement.stories.ts

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import CardElement from "@/components/CardElement.vue";
 import { h } from "vue";
 
+import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof CardElement> = {
   title: "Components/CardElement",
@@ -117,6 +119,27 @@ export const Everything: Story = {
   },
 };
 
+export const EverythingOverflowing: Story = {
+  args: {
+    title: overflowFixture.text,
+    subtitle: overflowFixture.text,
+    images: [
+      {
+        src: "https://picsum.photos/536/354",
+        alt: "Placeholder Image",
+      },
+      {
+        src: "https://via.placeholder.com/150",
+        alt: "Placeholder Image",
+      },
+    ],
+    headerActions: overflowFixture.text,
+    footer: overflowFixture.text,
+    default: overflowFixture.text,
+    to: "/somewhere",
+  },
+};
+
 export const LinkingToCurrentPage: Story = {
   args: {
     title: "Hello World",